Skip to content

Instantly share code, notes, and snippets.

Created April 5, 2020 21:26
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save CrazyPython/7da341da98890712f5b5a0abb8fc1e3a to your computer and use it in GitHub Desktop.

'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."

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment