Skip to content

Instantly share code, notes, and snippets.

Avatar
Coffee first development

Fabian Tempel trilodge

Coffee first development
View GitHub Profile
@bendc
bendc / easing.css
Created Sep 23, 2016
Easing CSS variables
View easing.css
: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);
@paulirish
paulirish / what-forces-layout.md
Last active May 12, 2021
What forces layout/reflow. The comprehensive list.
View what-forces-layout.md

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
@indrekpaas
indrekpaas / SassMeister-input.scss
Last active Oct 20, 2020
Precise control over responsive typography for Sass
View SassMeister-input.scss
// ----
// Sass (vundefined)
// Compass (vundefined)
// dart-sass (v1.6.2)
// ----
// =============================================================================
//
// PRECISE CONTROL OVER RESPONSIVE TYPOGRAPHY FOR SASS
// ---------------------------------------------------
@indrekpaas
indrekpaas / SassMeister-input.scss
Last active Dec 22, 2019
Quantity queries for Sass
View SassMeister-input.scss
// ----
// libsass (v3.5.4)
// ----
// =====================================================================
//
// QUANTITY QUERIES FOR SASS
// -------------------------
// Indrek Paas <@indrekpaas>
//
@micha149
micha149 / _main.scss
Last active Aug 29, 2015
Exclude Mobile CSS into separate stylesheet
View _main.scss
@import "mixins";
body {
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.container {
width: 960px;
margin: 0 auto;
@p3t3r67x0
p3t3r67x0 / pseudo_elements.md
Last active Mar 16, 2021
A CSS pseudo-element is used to style specified parts of an element. In some cases you can style native HTML controls with vendor specific pseudo-elements. Here you will find an list of cross browser specific pseudo-element selectors.
View pseudo_elements.md

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] {
View gist:3057637
// ****************
// **** 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);