CSS for JS Devs

Copy
*/* 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;
	
	}
}

Copy
*// 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)`
}

Copy
<style>
  .wrapper {
    display: grid;
    place-content: center;
  }
</style>