julzmon

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

julzmon

julzmon

// remove remote tag
$ git push —delete origin 0.3.0
// using a local branch, push up new tag
$ git push origin tag0.3.0:refs/tags/0.3.0

julzmon

var doc = document.body || document.documentElement;
var style = doc.style;

if ( style.webkitFlexWrap == '' ||
    style.msFlexWrap == '' ||
    style.flexWrap == '' ) {
  doc.className += " supports-flex";
}

julzmon

.navbar-btn .badge {
    position: absolute;
    top: -7px;
    right: -5px;
    padding: 3px 6px;
    opacity: 0.95;
}

julzmon

mysite.com/admin/utils/serverinfo

julzmon

// ----
// libsass (v3.2.4)
// ----

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

julzmon

<h1>Heading one</h1>
<h2>Heading two</h2>
<h3>Heading three</h3>
<h4>Heading four</h4>

julzmon

// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// Modular Scale (v2.0.5)
// ----

@import "modular-scale";

$ms-base: 1em 3.75em;
$ms-ratio: $fourth;

julzmon

.col-lg-2-4{
  @include make-lg-column(2.4)
}
.col-md-2-4{
  @include make-md-column(2.4)
}
.col-sm-2-4{
  @include make-sm-column(2.4)
}