blackfalcon

<div class="flex-outer">
  
<div class="flex-inner">
  <div class="box blackType">These are current colors being used under legacy names</div>
  <div class="box blackType gray-100">gray-100 / cloud</div>
  <div class="box blackType gray-200">gray-200 / disabled</div>
  <div class="box gray-500">gray-500 / orca</div>
</div>

<div class="flex-inner">

blackfalcon

.icon-success {
  background-image: url(/images/icons/success.png); }

.icon-warning {
  background-image: url(/images/icons/warning.png); }

.icon-purchase {
  background-image: url(/images/icons/purchase.png); }

/* ----------------------------------- */

blackfalcon

.bar {
  background: red;
}

blackfalcon

# put this in your .bashrc

function switch() {
  git branch | grep "$1" | pbcopy && tmp=$(pbpaste) && git checkout $tmp
}

# example branch ... 8038031-update-things-long-branch-name-of-things
# use in the CLI
# $ switch 38031 (or any unique searchable string)

blackfalcon

// ----
// libsass (v0.7.0)
// ----

// example Sass While loop

@import "bourbon/bourbon";

$column: one two three four five six seven;
$length: length($column);

blackfalcon

// We all know how to use mixins, right?

@mixin kung {
  background: green;
  color: yellow;
}

@mixin foo {
  background: orange;
  color: red;

blackfalcon

<cool>
  <p>Hi { message() }</p>
  <script>
    message() {
      return 'there'
    }
  </script>

  <style type="postcss" scoped>

blackfalcon

// Stipe v0.0.5.7.9

@function gcd($n, $d) {
  $num: if($n < $d, $d, $n);
  $denom: if($n < $d, $n, $d);
  $rem: $num;
  $last_rem: $num;
  @while $rem != 0 {
    $last_rem: $rem;
    $rem: $denom % $num;

blackfalcon

%myclass
    color: blue
    @media (min-width: 600px)
        background: red
    @media (min-width: 800px)
        font-size: 28px

.class1
    @media (min-width: 600px)
        @extend %myclass

blackfalcon

by Dale Sande

Icon-fonts. They are pretty awesome, but much like managing Sprite files, there are issues that make them a real pain to manage. Sure there are full libraries out there that you can grab wholesale and rely on their documentation, but for optimization and performance reasons you do not want to load up a series of libraries just to use a few icons. Leveraging the power of HAML and Sass we can make this less painful and at the same time maintain a living style guide. Basically, winning all over the place.

[IcoMoon][IcoMoon] is a fantastic resource that allows users to select specific icons from various libraries, as well as upload custom SVG art and download a customized font library. In the download package there is an HTML document that illustrates the library you just created, but for most professional applications this isn't going to work. Mainly because you will probably not use IcoMoon's code verbatim. Customizing the HTML and CSS per your use is ve