codingdesigner

/// Get type definition from configuration map
/// and write to a style block
/// @param {string} $definition-family - definition family from configuration map
/// @param {string} $definition-name - definition name from configuration map
@mixin fetch-definition-typography($definition-family, $definition-name) {
  $type-definitions-map: map-get($typography, definitions);
  $type-definitions-family: map-get($type-definitions-map, $definition-family);
  $type-definition: map-get($type-definitions-family, $definition-name);
  $letter-spacing-value: map-get($type-definition, letter-spacing);
  @include fetch-type-sizes($type-definition);

codingdesigner

javascript:(window.location=window.location.toString().replace(/^http:\/\/localhost:6006\//,'http://localhost:6006/iframe.html'))

codingdesigner

<h1 class="foo">I am foo</h1>
<h1 class="bar">I am bar</h1>

codingdesigner

// ----
// libsass (v3.1.0)
// ----

// Calculate ems
// ========================================================================== */
//
// @params
//  $value
//  $context

codingdesigner

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

$root-typesize   : 16px;

// Mixin - Font-size rem
// ========================================================================== */
//

codingdesigner

<article>
  <h1 class="title">Experiment with colors when designing in the browser</h1>
  <h2 class="subtitle">Of course this isn't limited to colors.</h2> 
  <p>I wanted a way to eperiment with all the colors in my color scheme when I was using the CSS inspector in my browser. So I wrote a simple mixin that loops through all the values in my color map and writes them as a CSS comment. Then I can pop open that element in my inspector and start turning on color combos.</p>
  <p>As I move through a project I'll write other similar mixins for things like fonts, borders, and spacing. It's been pretty helpful!</p>
  <p>Go ahead and try it out! Inspect any of the elements below and find colors you like.</p>
</article>

codingdesigner

<article>
  <h1 class="title">Experiment with colors when designing in the browser</h1>
  <h2 class="subtitle">Of course this isn't limited to colors.</h2> 
  <p>I wanted a way to eperiment with all the colors in my color scheme when I was using the CSS inspector in my browser. So I wrote a simple mixin that loops through all the values in my color map and writes them as a CSS comment. Then I can pop open that element in my inspector and start turning on color combos.</p>
  <p>As I move through a project I'll write other similar mixins for things like fonts, borders, and spacing. It's been pretty helpful!</p>
  <p>Go ahead and try it out! Inspect any of the elements below and find colors you like.</p>
</article>

codingdesigner

<article>
  <h1 class="title">This is a Title</h1>
  <p>this is a paragraph</p>
</article>

codingdesigner

re: extends

What they really do:

When you extend a .class Sass looks for every occurrence of that class and creates a comma-separated selector to combine them. This is great until you lose sight of the every occurance part. That means that whenever you nest a selector you're extending then that nest will also be added to every other selector that is part of the extend.

It blows up really quickly.

Sass workflow to stay on top of this

• Avoid extending a nested selector
• Avoid adding styles to an extended .class name

codingdesigner

<div id="skip-link">
  <a href="#nav" class="menu-trigger">menu</a>
</div>

<header id="header" role="banner" class="site-header">
  <a href="" >
    <h1 class="site-name">Offside Nav Demo</h1>
  </a>
</header>