A responsive, highly flexible, lightweight, pixel-free, mostly automated website UI demo. Based on this recent article by Rachel Andrew with a few additions & modifications. Inspired by the new CSS Tricks redesign.
About 5kb. < 200 lines of CSS. Looks terrible in most browsers right now, open three.
Gap is now renamed column-gap, row-gap & works with Flexbox. It's no longer necessary to use an entire grid framework for creating grid elements or layouts.
MozSize elements or refer to their margins, padding & borders even with writing direction changes. Block = vertical in horizontal text (standard English) & horizontal in vertical text (Chinese). Inline = horizontal in horizontal text (standard English) & vertical in vertical text (Chinese).
W3CSubgrids for nested grids can participate in the sizing of their parent grids & aspect-ratio–controlled gutters. The children of a grid container can be placed into arbitrary slots in a fixed-size layout or a predefined flexible grid.
W3CDesign-only, to set styling for dropped, raised or sunken initial letters. Suitable for Drop Caps, Raised Caps & Block Caps. Choose number of lines & columns to wrap. Works with text gradient.
MozVariable fonts enable many variations of a typeface to be incorporated into a single file & @font-face reference. This file can be manipulated via CSS allowing for fine control over text & typographical elements.
W3C V FontsCSS Scroll Snapping helps create controlled scroll experiences by declaring snapping positions. This means that you can make interfaces that snap or lock to scroll points. This is done by defining a parent/ container element & children inside the container.
W3CDetect pointer type lets us check for the presence & accuracy of a pointing device (mouse). Once detected, UI design can account for it (example: larger checkboxes for less accurate pointer devices). If multiple pointing devices are detected, the pointer feature will use the primary pointing device (determined by the user).
W3CThe new syntax is simpler than before to achieve the same thing. The old or new syntax can be used in future. New syntax > old syntax.
MozTest if your browser supports specific features with Feature Query. Used in the same way as Media Queries. Feature Queries are not supported in Internet Explorer 11 & below, but so what. Awesome feature, lots of potential.
Change the color variables to change background, borders & text. Mostly webkit right now. Will only be misused & abused.
Control colors, whitespace & fonts easily with Golbal CSS variables. Variables are easy to learn & make life easier.
No pixels are used anywhere in this UI, opting instead for vh/ vw/ em/ %. Sometimes it produces weird results. We like it.
They were so preoccupied with whether or not they could, they didn’t stop to think if they should. Scrollbars can now be customized, you can even use box-shadow to make art. If your scrollbar looks normal, try a different {webkit} browser. ———————>>>>>.