Flexbox + css variables = ❤

.flex [.inline] = define as inline flex container [.auto] = set up equal flex-grow: 1 for all .box children, so they will grab all possible space from parent flex container [.reverse] = change the order of flex children [.column[.reverse]] = change flex flow direction from row (default) to column [.wrap[-reverse]] = allow flex children go to the next line if they're not fitting [.center] = vertically and horizontally centering children (magic trick with margin: auto) [.fullsize] = set up width and height to viewport size (100vw and 100vh respectively) [.gaps] create gutters between .flex children, by default = 1em (requires css-variables) Pro-tip: to customize gap size override --flex-gap variable within .flex.gaps block justify-content: use one of the property modifiers (ex. justify-center) [.justify-(flex-start|center|flex-end|space-around|space-between)] align-items: use one of property modifiers (ex. align-flex-end) [.align-(flex-start|center|flex-end|stretch|baseline)] align-content: use one of property modifiers (ex. content-flex-start) [.content-(flex-start|center|flex-end|space-around|space-between|stretch)]

.flex > .box [.first] = put element to the start (order: -1) [.last] = put element to the end (order: 1) [.grow[-fixed] = allow a flex child to grow and grab all possible free space in the flex container flow [.nogrow] = disallow a flex child to grow, might be useful with .flex.auto [.noshrink] = disallow a flex child to reduce its size, might be useful sometimes when sibling children have .grow align-self: override .flex.align-* for specific .box [.self-(flex-start|center|flex-end|stretch|baseline)] margin: can be used to create magical offsets which fills all possible space around .flex > .box-es [.auto] creates auto margins for all sides of the box [.top][.bottom][.left][.right]] bind to the side with zero-margin and create auto-space to opposite direction

.flex.grid-(1-12) > .col-(1-12) (requires css-variables) Pro-tip 1: default grid size for every .flex container is 12, so you can use .col-(1-12) without defining .flex.grid-12 on parent Pro-tip 2: every child of defined .grid-(1-12) has by default size as .col-1 Pro-tip 3: if you need to reset default size of child in grid use .box.grow or .box.nogrow on a child (see tip above)