tristanm

// ****************
// **** NORMAL ****
// ****************

// COMPASS:
// Best order for font-files is WOFF->TTF->SVG while the EOT is a separate parameter for font-face
// Best weight and style order is Regular->Bold->Italic->Bold+Italic
@include font-face("Aller", font-files("aller_rg-webfont.woff", "aller_rg-webfont.ttf", "aller_rg-webfont.svg"), "aller_rg-webfont.eot");
@include font-face("Aller", font-files("aller_bd-webfont.woff", "aller_bd-webfont.ttf", "aller_bd-webfont.svg"), "aller_bd-webfont.eot", bold);
@include font-face("Aller", font-files("aller_it-webfont.woff", "aller_it-webfont.ttf", "aller_it-webfont.svg"), "aller_it-webfont.eot", normal, italic);

p3t3r67x0

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {

micha149

@import "mixins";

body {
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
    width: 960px;
    margin: 0 auto;

paulirish

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

bendc

:root {
  --ease-in-quad: cubic-bezier(.55, .085, .68, .53);
  --ease-in-cubic: cubic-bezier(.550, .055, .675, .19);
  --ease-in-quart: cubic-bezier(.895, .03, .685, .22);
  --ease-in-quint: cubic-bezier(.755, .05, .855, .06);
  --ease-in-expo: cubic-bezier(.95, .05, .795, .035);
  --ease-in-circ: cubic-bezier(.6, .04, .98, .335);

  --ease-out-quad: cubic-bezier(.25, .46, .45, .94);
  --ease-out-cubic: cubic-bezier(.215, .61, .355, 1);