August 16, 2021

(Updated: September 24, 2021)

CSS for JS Devs

Useful CSS properties

*/* useful width options */*
width: min-content | max-content | fit-content;
*/* inherit colours for parent child consistency */*
color: inherit;
*/* isolated stacking context (add to the wrapper) */*
isolation: isolate;
*/* keep items inline */*
white-space: nowrap;
*/* only add styles for mouse/trackpad users */*
@media (hover: hover) and (pointer: fine) {
button:hover {
text-decoration: underline;
}
}

Grouping Break Points

  • 0-550px — Mobile

  • 550-1100px — Tablet

  • 1100-1500px — Laptop

  • 1500+px — Desktop

Using Rems instead of pixels for breakpoints

The idea behind this being, as the user increases their default font size the @media scale slides to accommodate those changes. Whereas, with pixels being "static" our layouts would become cramped and unable to adjust, if the user increased their default font size.

*// constants.js*
const BREAKPOINTS = {
tabletMin: 550,
laptopMin: 1100,
desktopMin: 1500,
}
const QUERIES = {
'tabletAndUp': `(min-width: ${BREAKPOINTS.tabletMin / 16}rem)`
'laptopAndUp': `(min-width: ${BREAKPOINTS.laptopMin / 16}rem)`
'desktopAndUp': `(min-width: ${BREAKPOINTS.desktopMin / 16}rem)`
}

CSS Grid