justenoughcss.md

'Just enough' theory to start using CSS.

This is intended for programmers used to imperative programming, but have always felt frustrated with CSS, unable to grok it.

CSS has two important modes, box and flex.

Every CSS element has a default size.

This default size is what it renders as if you don't add any CSS.

CSS has a window. The window is not the same as the viewport. The viewport is what the user can see. The window is the viewport, plus where they can scroll to. There is a "meta viewport tag" you can add to make the window the same size as the viewport.

Every browser comes with a "User Agent Stylesheet." It is the default set of CSS styles that the browser applies to the webpage. This includes body { margin: 8px; }.

(Just Enough) Units

• vw: the width of the viewport
• vh: the height of the viewport
• em: height of an 'm' in the current font

(Just Enough) Flexbox

Flexbox has an axis, referred to as the main axis. You control this axis' direction with flexDirection. The cross axis is always perpendicular to the main axis. The CSS properties that start with "align" apply to the cross axis, while the CSS properties that start with "justify" apply to the main axis.

Use flex-grow and flex-shrink to define how items relative to their default size. (The shorthand for these two properties is "flex.")

Practice and experiment with flexbox.

Flexbox and Box Layout

You can freely mix flexbox and box layout. If you are thinking "I need to center something," you should think "flexbox."