To supplement your learning, check out these links that offer valuable insights and resources.
In the case that we want to override default values of the global class we’re adding combo classes.
All projects need to have global padding pre defined. As we’re using a 4px system it will be easy to fall under:
From Top and Bottom
- Padding XXS
- Padding XS
- Padding S
- Padding M
- Padding L
- Padding XL
- Padding XXL
- Padding 3XL
One Sided (Created Per Project Basis)
- Padding Top None
- Padding Bottom None
- Padding Top S
- Padding Top XL
- Padding Bottom XXL
*For the one sided paddings, we’re usually creating these on a per project basis. This way we can use them only in projects that need them the most.
All Paddings are scaling to Tablet, Mobile Landscape and Mobile accordingly.
- No Padding
*Removes all padding from top and bottom
All projects come with global Margins that can be applied on Global Classes:
- Margin Bot XXS
- Margin Bot XS
- Margin Bot S
- Margin Bot M
- Margin Bot L
- Margin Bot XL
- Margin Bot XXL
- Margin Bot 3XL
For Top, Left Right
- Margin Top L
- Margin Top S
- Margin Right XL
- Margin Left XXL
- No Margin
*Removes margin from all sides from the element.
All Margins are scaling to Tablet, Mobile Landscape and Mobile accordingly.
In order to standardise the project and not end up in the state where we have 124 Max Width elements (Max Width 923, Max Width 945, Max Width 966 and on..)
We are using utility classes:
- Max Width S
- Max Width M
- Max Width L
- Max Width XL
- Max Width XXL
- Max Width 3XL
These are defined by default, and we try to design the pages with these in mind.
All Max Width classes are scaling to Tablet, Mobile Landscape and Mobile accordingly.
The greatest use-case for this is when we are applying it to section elements. In the case of adding a Section Element to the page we can also apply → Section BG White
All projects come with:
- BG Neutral → Usually White
- BG Neutral 100 → Usually Light Grey
- BG Neutral 200 → Usually Grey
- BG Neutral 300 → Usually Darker Grey
- BG Neutral 400 → Usually Close to Black
- BG Neutral 500 → Usually Really Close to Black
- BG Neutral 600 → Usually Black
Naming convention like this for colors allows avoiding having classes like BG Grayish and BG Almost Gray. It is easier to follow design, and you know that if you’ve missed the color you only need to go 100 shades up or down.
Project Specific Colors
After having the neutral colors that each project has set, we have specific colors that are added per project basis like:
For the main brand color:
- BG Blue 100
- BG Blue 200
- BG Blue 300
For the secondary brand color:
- BG Green 100
- BG Green 200
- BG Green 300
Some Unique Colors:
- BG Sand 100
- BG Sand 200
- BG Sand 300
And the list goes on and on. Good thing about this is that you don’t have to have 6 different shades of each color. You can only add amount of shades you actually need and work from those.
There are many instances where the global text color won’t work for you. So we are using a similar set up to background colors:
Neutrals applied to all projects
- Text Neutral → Usually White
- Text Neutral 200 → Usually Grey
- Text Neutral 400 → Usually Close to Black
- Text Neutral 600 → Usually Black
And after that specific text overrides
- Text Blue 100
Usually texts will have much less global classes for colors. So we’re creating them per project basis to not cause confusion.
In some instances there are specific classes we want to use to override defaults like:
Removes overflow from the element
- Overflow None
Sets the element to relative
Adds a Z index to the element usually used like:
- Z Index 1
- Z Index 99
For the ease of positioning elements in the Container or Column, we can use Flex Classes:
- Flex Left
- Flex Right
- Flex Center
Text alignment is applied only on the text element it self. We’ve tried applying it to parent classes but it doesn’t play out so well in the end as then we need to override text positioning for the Component Classes
- Text Left
- Text Right
- Text Center
*As described later on we often use these with the addition of Tablet or Mobile specific use cases
When we need to have some tablet specific classes, we are adding a pre fix of Tablet to any of the above.
So it would be:
- Tablet Margin Right L
- Tablet Padding S
- Tablet Max Width L
- Tablet Overflow None
- Tablet No Margin
- Tablet Flex Center
- Tablet Text Center
*These are used when an element doesn’t have a max width on desktop but has it on Tablet.
Mobile Landscape & Mobile Specific
When we need to have some tablet specific classes, we are adding a pre fix of Mobile to any of the above.
So it would be:
- Mobile Margin Right L
- Mobile Padding S
- Mobile Max Width L
- Mobile Overflow None
- Mobile No Margin
- Mobile Text Center
- Mobile Flex Center
*These are used when an element doesn’t have a max width on desktop and tablet but has it on Mobile Landscape & Mobile.