Important: do not delete or modify the following files and folders without authorization:
.editorconfig
, .gitignore
, .nojekyll
, .github
To get familiar with our guidelines, please refer to CONTRIBUTING.md for instructions.
# Clone the repository
git clone https://github.com/p-foundation/pink-app.git
# Enter the project directory
cd pink-app
The /components.html
page acts as a components library, allowing us to collaborate on UI elements (smaller BEM blocks) in an isolated setting. Use this page to focus on individual blocks without distractions from the entire application.
Here's a simple guide to get the most out of it:
Access the UI library by opening this page through your local server and adding /components.html
to the server's address.
To add a new component, use the template below within the /components.html
file:
<li class="component">
<!-- Fill out your block name -->
<h2 class="component__name">UI Component (Block) Name</h2>
<!-- Add a description to explain details about the block. Remove the line if no description is provided. -->
<p class="component__description">UI Component description (optional)</p>
<div class="component__wrapper component__wrapper_theme_light">
<!-- Your component goes here -->
</div>
</li>
There are two background options available for the component container to create contrast with differently colored elements. Pick a background to ensure optimal visibility and aesthetics within the UI library.
component__wrapper_theme_light
- for a light background, andcomponent__wrapper_theme_dark
- for a dark background.
The repository is created for learning adaptive web design and team collaboration through git and GitHub