Introduction
Grid Layout
Components
Typography
Introduction
Andhera CSS is my learning attempt towards becoming a UX-first full stack developer. The primary basis of this reference is dark-theme styles. All the components, layouts, and elements are described here for use.
Feel free to chip in and let me know what needs to be done to make it better. The GitHub Project is open for suggestions/issues/bugs etc.
Grid Layout
Inspired by Bootstrap, this (again) is a 12 column layout. The breakpoints and corresponding classes are as -
| Screen Width | Breakpoint Ref |
|---|---|
| <576px | col-* |
| <768px | col-sm-* |
| <992px | col-md-* |
| <1200px | col-lg-* |
| >1200px | col-xl-* |
Padding and Margins
m-* corresponds to margins on all sides (with same values) and for specific purposes m[SIDE]-* can be used. Padding is followed in a similar fashion.
| SIDE | Reference |
|---|---|
| Top | t |
| Bottom | b |
| Start/Left | s |
| End/Right | e |
| Class | Margin Val |
|---|---|
| m[SIDE]-1 | 1.00 rem |
| m[SIDE]-2 | 1.25 rem |
| m[SIDE]-3 | 1.50 rem |
| m[SIDE]-4 | 1.75 rem |
| m[SIDE]-5 | 2.00 rem |
Column with 100% Width
Column with 50% Width
Column with 50% Width
Column with 25% Width
Column with 25% Width
Column with 25% Width
Column with 25% Width
Column with 8.33% Width
Column with 8.33% Width
Column with 8.33% Width
Column with 8.33% Width
Column with 8.33% Width
Column with 8.33% Width
Column with 8.33% Width
Column with 8.33% Width
Column with 8.33% Width
Column with 8.33% Width
Column with 8.33% Width
Column with 8.33% Width
Components
For Buttons, the following styles are included -
| Type | Color | Preview |
|---|---|---|
| Primary | #242440 | Button |
| Success | #2AA39A | Button |
| Danger | #EC4561 | Button |
| Warning | #F8B425 | Button |
| Info | #38A5F8 | Button |
Typography
The default font used is Poppins and the font size and font weight references are as -
| Size | Class Reference | Value |
|---|---|---|
| Extra Small | extra-small | 1.5rem |
| Small | small | 2.5rem |
| Medium | medium | 3rem |
| Large | large | 3.5rem |
| Extra Large | extra-large | 4rem |
| Jumbo | jumbo | 5rem |
| Weight | Class Reference | Value |
|---|---|---|
| Extra Light | el | 200 |
| Light | l | 300 |
| Normal | n | 400 |
| Semi-Bold | sb | 500 |
| Bold | b | 700 |
| Extra Bold | eb | 900 |
Extra Small Extra Light Text
Extra Small Light Text
Extra Small Normal Text
Extra Small Semi Bold Text
Extra Small Bold Text
Extra Small Extra Bold Text
Small Extra Light Text
Small Light Text
Small Normal Text
Small Semi Bold Text
Small Bold Text
Small Extra Bold Text
Medium Extra Light Text
Medium Light Text
Medium Normal Text
Medium Semi Bold Text
Medium Bold Text
Medium Extra Bold Text
Large Extra Light Text
Large Light Text
Large Normal Text
Large Semi Bold Text
Large Bold Text
Large Extra Bold Text
Extra Large Extra Light Text
Extra Large Light Text
Extra Large Normal Text
Extra Large Semi Bold Text
Extra Large Bold Text
Extra Large Extra Bold Text
Jumbo Extra Light Text
Jumbo Light Text
Jumbo Normal Text
Jumbo Semi Bold Text
Jumbo Bold Text
Jumbo Extra Bold Text