CSS

Box Sizing

*, *:before, *:after {
  box-sizing: border-box;
}

or

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

• http://www.paulirish.com/2012/box-sizing-border-box-ftw/
• https://css-tricks.com/box-sizing/

Background

• The Background Properties
• Use Cases for Fixed Backgrounds in CSS

Masking / Clipping

• CSS Masking
• clip: rect(10px, 290px, 190px, 10px);
  • only supports rectangular clipping
  • element must also be position: absolute;
  • deprecated: use clip-path
  • mdn
• clip-path: url(#clipping);
  • References <clipPath id="clipping">...</clipPath> in SVG or basic shapes like insert, circle, ellipse, and polygon
  • can be animated
  • mdn
  • caniuse
• mask
  • caniuse
• mask-image
• mask-border

Table

• CSS-Tricks table-layout
• MDN table-layout
• Fixed Table Layouts

Flexbox

• https://jakearchibald.com/2014/dont-use-flexbox-for-page-layout/
• Solved by Flexbox
• A complete guide to Flexbox
• Flexbox Dice
  • http://codepen.io/techniq/pen/doOeBz
• http://flexboxfroggy.com/
• What the FlexBox?! - 20 video tutorials
• http://wesbos.com/flexbox-resources/
• https://github.com/philipwalton/flexbugs
• Flexbox playground
• https://railslove.github.io/react-flexbox-playground/
• How Flexbox works — explained with big, colorful, animated gifs
• http://yoksel.github.io/flex-cheatsheet/
• http://flexboxzombies.com/p/flexbox-zombies
• http://vudav.github.io/flexbox-cheatsheet/
• Flexbox: space-between, Flexbox's Unsung Hero
• The Difference Between Width and Flex Basis
• Flex Layout Editor

Grid

• New things CSS grid brings to the
• CSS Grid – Table layout is back. Be there and be square.
• A Complete Guide to Grid
• http://cssgridgarden.com/
• https://fettblog.eu/grid-concepts/
• https://gridbyexample.com/
• Things I’ve Learned About CSS Grid Layout
• Responsive data tables with CSS Grid
• Using CSS Grid the right way
• CSS Grid Generator

Level 2 (subgrid)

• CSS Grid Level 2: Here Comes Subgrid

Videos

• CSS Grid Tutorial
• Basics of CSS Grid: The Big Picture

Examples

• Grid with hscroll
• React Grid + React Measure
• Building a Scrapbook Layout with CSS Grid

display: contents

useful with Grid and Flexbox

• More accessible markup with display: contents
• Get Ready for display: contents
• https://caniuse.com/#feat=css-display-contents

Float

• How browsers position floats

Viewport units

• The Unexpected Power of Viewport Units in CSS

position: sticky

• https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning
• position: sticky is Amazing
• An event for CSS position:sticky
• Build Multiple Stacking Sticky Sidebars with Pure CSS and Bootstrap 4
• Position: stuck; — and a Way to Fix It - The shortcomings of position: sticky; when working with overflow.

Examples

• https://codepen.io/wortmann/pen/BNNZLb
• https://codepen.io/simevidas/pen/JbdJRZ
• http://jsfiddle.net/psflannery/t2n3qkvh/

Comma-Separated Lists

Make list items look like a real, comma-separated list:

ul > li:not(:last-child)::after {
  content: ",";
}

• https://github.com/AllThingsSmitty/css-protips#comma-separated-lists

Use Attribute Selectors with Empty Links

Display links when the element has no text value but the href attribute has a link:

a[href^="http"]:empty::before {
  content: attr(href);
}

Change case of content

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

Internet Explorer

Scrollbars

• https://developer.mozilla.org/en-US/docs/Web/CSS/-ms-overflow-style
• https://msdn.microsoft.com/en-us/library/windows/apps/hh441298.aspx

Remove clear "X" on text inputs

input[type=text]::-ms-clear {
  display: none;
}

input[type=text]::-ms-reveal {
  display: none;
}

• https://stackoverflow.com/questions/13481577/how-can-i-disable-the-clear-button-that-ie10-inserts-into-textboxes

Chrome

Remove clear "X" on search inputs

::-webkit-search-decoration,
::-webkit-search-cancel-button,
::-webkit-search-results-button,
::-webkit-search-results-decoration { 
  display: none; 
}

Spinners

• http://tobiasahlin.com/spinkit/
• http://codepen.io/collection/HtAne/

Design ideas

• http://tympanus.net/Development/CreativeButtons/
• http://tympanus.net/Development/IconHoverEffects/

Animations

• https://github.com/sparkbox/bouncy-ball - Kind of like TodoMVC, but for web animation

2D and 3D Transforms

• http://franklinta.com/2014/09/08/computing-css-matrix3d-transforms/
• https://dev.opera.com/articles/understanding-the-css-transforms-matrix/
• http://www.useragentman.com/matrix/#

Colors

• Material colors
• Dark colors
  • #000000, #212121, #303030, #424242
  • #272c30, #22272a, #1d2223
• A Nerd’s Guide to Color on the Web
• Human Friendly Colours using HSL

Icons

• https://material.io/icons/
  • http://google.github.io/material-design-icons/
• https://fortawesome.github.io/Font-Awesome/icons/

Examples

• See: Examples
• Pure CSS scrolling shadows with background-attachment: local
• CSS only Responsive Tables

Resources

• Browser style defaults
• Device metrics
• Specificity calculator
• Learn CSS Layout
• Don't overthink grids
• https://github.com/AllThingsSmitty/css-protips
• http://alistapart.com/article/axiomatic-css-and-lobotomized-owls
• http://desandro.github.io/3dtransforms/docs/introduction.html
• http://cssreference.io/
• The invisible parts of CSS