ronalson

Core Concepts / Strategies

Design Token Rosetta Stone:

• https://medium.com/eightshapes-llc/tokens-in-design-systems-25dd82d58421

Pattern Variation

• http://v3.danielmall.com/articles/content-display-patterns/
• http://bradfrost.com/blog/post/pattern-variations/

Tokens Partials

tunguskha

Gradient shadow in pure CSS

HTML

<button>Let's Go !</button>

creinartz

{
  "plugins": [
    "stylelint-declaration-use-variable"
  ],
  "rules": {
    "color-hex-case": ["lower", {"severity": "warning"} ],
    "color-hex-length": ["short", {"severity": "warning"} ],
    "color-named": ["never", {"severity": "warning"} ],
    "time-no-imperceptible": [true, {"severity": "warning"} ],
    "max-nesting-depth": [5, {"severity": "warning"} ],

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

juukie

/* Place this after bootstrap.scss */

$screen-xl:                  1560px !default;
$screen-xl-min:              $screen-xl !default;
$screen-xl-desktop:          $screen-xl-min !default;
$screen-lg-max:              ($screen-xl-min - 1) !default;
$container-xlarge-desktop:   (1530px + $grid-gutter-width) !default;
$container-xl:               $container-xlarge-desktop !default;

.container {

samuel-holt

// STRIP UNIT
// It strips the unit of measure and returns it
@function strip-unit($num) {
  @return $num / ($num * 0 + 1);
}

// Media queries mixin

// Default widths
$default-medium:    768px !default;

salt-istanbul

div[class*="col-"] > .square-responsive,
span[class*="col-"] > .square-responsive,
ol[class*="col-"] > .square-responsive,
ul[class*="col-"] > .square-responsive,
li[class*="col-"] > .square-responsive{
   padding-bottom:100%; 
}
div[class*="col-"] > .rect-responsive,
span[class*="col-"] > .rect-responsive,
ol[class*="col-"] > .rect-responsive,

anthonyholmes

// Alerts
@include alert-variant($background, $border, $text-color);

// Background Variant
@include bg-variant($parent, $color);

// Border Radius
@include border-top-radius($radius);
@include border-right-radius($radius);
@include border-bottom-radius($radius);

donnierayjones

Copyright (C) 2016 Donnie Ray Jones

Permission is hereby granted, free of charge, to any person obtaining a
copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

neil-h

@function strip-units($number) {// From : http://stackoverflow.com/a/12335841/1339426
  @return $number / ($number * 0 + 1);
}

/**
* Use em or rem font-size in Bootstrap 3
* Ported from Less version here: https://gist.github.com/jasny/9731895
*/
$font-size-root: 18px;
$font-unit: 1rem; // Pick em or rem here