00. CSS reset: box-sizing: border-box
01. margin || border || padding
02. width || height
03. font [style || family || size || weight]
04. color: primary | tint | shades | accent | grays
05. background: color || position || image || attachment || clip || blend-mode || origin || repeat || size
06. shadows: text | box
07. border-radius
08. lettter-spacing & line-height: <p> default is 1.6
09. gradient: linear || radial || conic
10. position
11. text: align || decoration || transform || overflow
12. display: flex
13. display: grid
14. Pseudo-Classes: :hover, || :focus
15. Pseudo-Elements: ::before || ::after
16.
17.
18.
19. transition
20. transform: matrix & matrix3d || perspective || perspective-origin || z-index || scale(X,Y,Z) & scale3d || rotate(X,Y,Z) & rotate3d || skew (X,Y) || translate & translate3d || transform- [style || origin
External CSS [easy to maintain with all changes at a single place]
divs are block elements, spans are inline elements. But when display:flex is placed on the parent-container, then divs become inline elements, placed next to each other.
RWD: Set of principles implemented since project inception. Not a separate tech, just best practices defined in CSS.
Fluid Layouts : use max-width instead of width. By default, flexbox, grid are fluid by-default
Responsive Units: Use rem instead of px
Flexible Images: Images don’t scale automatically like text as the viewport is changed. Needs to be fixed. Use %, max-width for image dimensions.
Media Queries: Change CSS styles for different viewport widths( called as breakpoints)
Top comments (0)