Skip to content

Instantly share code, notes, and snippets.

@lucasmotta

lucasmotta/SassMeister-input-HTML.html

Created October 16, 2015 15:07
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save lucasmotta/0ececa2841fda0afc70c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save lucasmotta/0ececa2841fda0afc70c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. lucasmotta created this gist Oct 16, 2015.
    114 changes: 114 additions & 0 deletions SassMeister-input-HTML.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,114 @@
    <div class="group">
    <h2>Shapes</h2>
    <p>Modifiers: <span>underline</span>, <span>outline</span>, <span>pill</span></p>

    <div class="btn">Button</div>
    <div class="btn btn--underline">Underlined</div>
    <div class="btn btn--outline">Outline</div>
    <div class="btn btn--squared btn--outline">Squared</div>
    <div class="btn btn--pill btn--outline">Pill Button</div>
    </div>

    <div class="group">
    <h2>Colors</h2>
    <p>Modifiers: <span>brand</span>, <span>light</span>, <span>gray</span>, <span>facebook</span>, <span>twitter</span>, <span>google</span></p>

    <div class="btn btn--brand">Brand</div>
    <div class="btn btn--light">Light</div>
    <div class="btn btn--gray">Gray</div>
    <div class="btn btn--asphalt">Asphalt</div>
    <div class="btn btn--green">Green</div>
    <div class="btn btn--facebook">Facebook</div>
    <div class="btn btn--twitter">Twitter</div>
    <div class="btn btn--google">Google+</div>
    </div>

    <div class="group">
    <h2>Fill <span>It must be used together with a <strong>color</strong> modifier</strong></span></h2>
    <p>Modifiers: <span>fill</span></p>

    <div class="btn btn--fill btn--brand">Brand</div>
    <div class="btn btn--fill btn--light">Light</div>
    <div class="btn btn--fill btn--gray">Gray</div>
    <div class="btn btn--fill btn--asphalt">Asphalt</div>
    <div class="btn btn--fill btn--green">Green</div>
    <div class="btn btn--fill btn--facebook">Facebook</div>
    <div class="btn btn--fill btn--twitter">Twitter</div>
    <div class="btn btn--fill btn--google">Google+</div>
    </div>

    <div class="group">
    <h2>Small</h2>
    <p>Modifiers: <span>small</span></p>

    <div class="btn btn--small btn--brand">Brand</div>
    <div class="btn btn--small btn--facebook">Facebook</div>
    <div class="btn btn--small btn--twitter">Twitter</div>
    <div class="btn btn--small btn--google">Google+</div>
    <div class="btn btn--small btn--fill btn--brand">Brand</div>
    <div class="btn btn--small btn--fill btn--facebook">Facebook</div>
    <div class="btn btn--small btn--fill btn--twitter">Twitter</div>
    <div class="btn btn--small btn--fill btn--google">Google+</div>
    </div>

    <div class="group">
    <h2>Large</h2>
    <p>Modifiers: <span>large</span></p>

    <div class="btn btn--large btn--brand">Brand</div>
    <div class="btn btn--large btn--facebook">Facebook</div>
    <div class="btn btn--large btn--twitter">Twitter</div>
    <div class="btn btn--large btn--google">Google+</div>
    <div class="btn btn--large btn--fill btn--brand">Brand</div>
    <div class="btn btn--large btn--fill btn--facebook">Facebook</div>
    <div class="btn btn--large btn--fill btn--twitter">Twitter</div>
    <div class="btn btn--large btn--fill btn--google">Google+</div>
    </div>

    <div class="group">
    <h2>Block</h2>
    <p>Modifiers: <span>block</span></p>

    <div class="btn btn--small btn--fill btn--block btn--brand">Small block</div>
    <div class="btn btn--fill btn--block btn--brand">Normal block</div>
    <div class="btn btn--large btn--fill btn--block btn--brand">Large block</div>
    </div>

    <div class="group">
    <h2>Active</h2>
    <p>State: <span>is-active</span></p>

    <div class="btn btn--light is-active">Light + Active</div>
    <div class="btn btn--twitter is-active">Twitter + Active</div>
    <div class="btn btn--brand btn--pill is-active">Brand + Pill + Active</div>
    <div class="btn btn--facebook btn--pill btn--outline btn--small is-active">Facebook + Pill + Outline + Small + Active</div>
    <div class="btn btn--google btn--large is-active">Google + Pill + Outline + Small + Active</div>
    </div>

    <div class="group">
    <h2>Disabled</h2>
    <p>State: <span>is-disabled</span></p>

    <div class="btn btn--brand btn--outline is-disabled">Brand + Outline + Disabled</div>
    <div class="btn btn--facebook btn--fill is-disabled">Facebook + Fill + Disabled</div>
    <div class="btn btn--brand btn--fill" disabled>Brand + Fill + Disabled (attribute)</div>
    </div>

    <div class="group">
    <h2>Others</h2>
    <p>Modifiers: <span>uppercase</span></p>

    <div class="btn btn--green btn--uppercase">Green + Uppercase</div>
    <div class="btn btn--gray btn--fill btn--uppercase">Gray + Fill + Uppercase</div>
    </div>

    <div class="group">
    <h2>Multiple modifiers</h2>

    <div class="btn btn--brand btn--underline">Brand + Underlined</div>
    <div class="btn btn--facebook btn--fill btn--pill">Facebook + Fill + Pill</div>
    <div class="btn btn--twitter btn--outline">Twitter + Outline</div>
    <div class="btn btn--google btn--outline btn--pill btn--large">Google + Outline + Pill + Large</div>
    <div class="btn btn--black btn--outline btn--small">Black + Outline + Small</div>
    <div class="btn btn--black btn--outline btn--small is-active">Black + Outline + Small + Active</div>
    </div>
    242 changes: 242 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,242 @@
    // ----
    // libsass (v3.2.5)
    // ----

    /**
    * Functions and mixins
    */
    @function get-accent-color($color, $accent){
    @if type-of($accent) == 'color' {
    @return $accent;
    }
    @if type-of($accent) == 'number' {
    $mixWith: if(lightness($color) > 40%, black, white);
    @return mix($mixWith, $color, $accent);
    }
    @return $color;
    }

    @function get-text-color($color, $default){
    @if type-of($default) == 'color' {
    @return $default;
    }
    $luminosity: lightness($color);
    @if $luminosity < 70% {
    @return #ffffff;
    }
    @return rgba(0, 0, 0, 0.5);
    }

    /**
    * Colors
    */
    $colors: (
    brand: (
    color: #ec5d4a,
    accent: #dc5745
    ),
    light: (
    color: #F6F6F1,
    accent: #606B70,
    fill-color: #606B70,
    fill-color-accent: #F6F6F1
    ),
    gray: (
    color: #99A0A0,
    accent: 10%
    ),
    green: (
    color: #26ba9e,
    accent: 10%
    ),
    asphalt: (
    color: #606b70,
    accent: 10%
    ),
    facebook: (
    color: #3b5998,
    accent: 20%
    ),
    twitter: (
    color: #55acee,
    accent: 20%
    ),
    google: (
    color: #dc4e41,
    accent: 10%
    ),
    white: (
    color: #ffffff,
    accent: 5%
    ),
    black: (
    color: #000000,
    accent: 30%
    ),
    );

    $mqs: (
    sm: only screen and (max-width: 40em),
    md\+: only screen and (min-width: 40.063em),
    md: only screen and (min-width: 40.063em) and (max-width: 64em),
    lg\+: only screen and (min-width: 64.063em),
    lg: only screen and (min-width: 64.063em) and (max-width: 90em),
    xl\+: only screen and (min-width: 90.063em),
    xl: only screen and (min-width: 90.063em) and (max-width: 120em)
    );

    /**
    * Button variations
    */
    .btn {
    position: relative;
    display: inline-block;
    cursor: pointer;
    text-align: center;
    color: inherit;
    vertical-align: middle;
    border-radius: 2px;
    transition: color 0.2s, background-color 0.2s;
    }

    .btn--underline {
    padding: 0.125rem 0;
    border-bottom: 1px solid currentColor;
    border-radius: 0px;
    }

    .btn--fill, .btn--pill, .btn--outline, .btn--large {
    border-bottom: 0;
    }

    .btn.is-active,
    .btn--fill,
    .btn--pill,
    .btn--outline {
    padding: 0.5rem 0.75rem;
    }

    .btn--block {
    display: block;
    margin-bottom: 1rem;
    }

    .btn--large {
    padding: 0.75rem 1.25rem;
    font-size: 1.25rem;
    }

    .btn--small, .btn--small.is-active {
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
    }

    .btn--outline {
    box-shadow: inset 0px 0px 0 2px currentColor;
    }

    .btn--squared {
    border-radius: 0px;
    }

    .btn--pill {
    border-radius: 100em;
    }

    .btn--uppercase {
    text-transform: uppercase;
    letter-spacing: 1px;
    }

    .btn.is-active {
    box-shadow: 0px 0px 5px currentColor;
    }

    .btn.is-disabled, .btn[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
    }

    @each $key, $obj in $colors {
    $color: map_get($obj, "color");
    $accent: get-accent-color($color, map_get($obj, "accent"));
    $fill-color: get-text-color($color, map_get($obj, "fill-color"));
    $fill-color-accent: get-text-color($accent, map_get($obj, "fill-color-accent"));

    .btn--#{$key} {
    color: $color;

    &:not([disabled]):not(.is-disabled):not(.is-active):hover {
    color: $accent;
    }

    &.btn--fill {
    color: $fill-color;
    background-color: $color;

    &:not([disabled]):not(.is-disabled):not(.is-active):hover {
    color: $fill-color-accent;
    background-color: $accent;
    }
    }

    &.is-active, &.is-active:hover {
    color: $fill-color-accent;
    box-shadow: 0px 0px 4px transparentize($accent, 0.7);
    background-color: $accent;
    }
    }
    }

    /**
    * Default styles
    */
    *, *:before, *:after {
    box-sizing: border-box;
    }
    html, body {
    padding: 0;
    margin: 0;
    }
    html {
    font-family: -apple-system , '.SFNSText-Regular' , 'Helvetica Neue' , 'Roboto' , 'Segoe UI' , sans-serif;
    font-weight: 300;
    font-size: 14px;
    color: #222;
    background-color: #fdfdfd;
    }
    .group {
    width: 100%;
    padding: 2rem;
    &:not(:first-child) {
    border-top: 1px solid #eee;
    }
    h2 {
    margin: 0 0 0.5rem 0;
    span {
    font-weight: 100;
    font-size: 1rem;
    color: #ec5d4a;
    &:before {
    content: "\2015";
    margin-right: 5px;
    display: inline-block;
    transform: rotate(-60deg);
    }
    }
    }
    p {
    color: #999;
    font-size: 0.88rem;
    margin: 0;
    &:last-of-type {
    margin: 0 0 1.5rem 0;
    }
    span {
    border-bottom: 1px dotted currentColor;
    &:hover {
    color: #666;
    }
    }
    }
    }
    381 changes: 381 additions & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,381 @@
    /**
    * Functions and mixins
    */
    /**
    * Colors
    */
    /**
    * Button variations
    */
    .btn {
    position: relative;
    display: inline-block;
    cursor: pointer;
    text-align: center;
    color: inherit;
    vertical-align: middle;
    border-radius: 2px;
    transition: color 0.2s, background-color 0.2s;
    }

    .btn--underline {
    padding: 0.125rem 0;
    border-bottom: 1px solid currentColor;
    border-radius: 0px;
    }

    .btn--fill, .btn--pill, .btn--outline, .btn--large {
    border-bottom: 0;
    }

    .btn.is-active,
    .btn--fill,
    .btn--pill,
    .btn--outline {
    padding: 0.5rem 0.75rem;
    }

    .btn--block {
    display: block;
    margin-bottom: 1rem;
    }

    .btn--large {
    padding: 0.75rem 1.25rem;
    font-size: 1.25rem;
    }

    .btn--small, .btn--small.is-active {
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
    }

    .btn--outline {
    box-shadow: inset 0px 0px 0 2px currentColor;
    }

    .btn--squared {
    border-radius: 0px;
    }

    .btn--pill {
    border-radius: 100em;
    }

    .btn--uppercase {
    text-transform: uppercase;
    letter-spacing: 1px;
    }

    .btn.is-active {
    box-shadow: 0px 0px 5px currentColor;
    }

    .btn.is-disabled, .btn[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
    }

    .btn--brand {
    color: #ec5d4a;
    }

    .btn--brand:not([disabled]):not(.is-disabled):not(.is-active):hover {
    color: #dc5745;
    }

    .btn--brand.btn--fill {
    color: #ffffff;
    background-color: #ec5d4a;
    }

    .btn--brand.btn--fill:not([disabled]):not(.is-disabled):not(.is-active):hover {
    color: #ffffff;
    background-color: #dc5745;
    }

    .btn--brand.is-active, .btn--brand.is-active:hover {
    color: #ffffff;
    box-shadow: 0px 0px 4px rgba(220, 87, 69, 0.3);
    background-color: #dc5745;
    }

    .btn--light {
    color: #F6F6F1;
    }

    .btn--light:not([disabled]):not(.is-disabled):not(.is-active):hover {
    color: #606B70;
    }

    .btn--light.btn--fill {
    color: #606B70;
    background-color: #F6F6F1;
    }

    .btn--light.btn--fill:not([disabled]):not(.is-disabled):not(.is-active):hover {
    color: #F6F6F1;
    background-color: #606B70;
    }

    .btn--light.is-active, .btn--light.is-active:hover {
    color: #F6F6F1;
    box-shadow: 0px 0px 4px rgba(96, 107, 112, 0.3);
    background-color: #606B70;
    }

    .btn--gray {
    color: #99A0A0;
    }

    .btn--gray:not([disabled]):not(.is-disabled):not(.is-active):hover {
    color: #8a9090;
    }

    .btn--gray.btn--fill {
    color: #ffffff;
    background-color: #99A0A0;
    }

    .btn--gray.btn--fill:not([disabled]):not(.is-disabled):not(.is-active):hover {
    color: #ffffff;
    background-color: #8a9090;
    }

    .btn--gray.is-active, .btn--gray.is-active:hover {
    color: #ffffff;
    box-shadow: 0px 0px 4px rgba(138, 144, 144, 0.3);
    background-color: #8a9090;
    }

    .btn--green {
    color: #26ba9e;
    }

    .btn--green:not([disabled]):not(.is-disabled):not(.is-active):hover {
    color: #22a78e;
    }

    .btn--green.btn--fill {
    color: #ffffff;
    background-color: #26ba9e;
    }

    .btn--green.btn--fill:not([disabled]):not(.is-disabled):not(.is-active):hover {
    color: #ffffff;
    background-color: #22a78e;
    }

    .btn--green.is-active, .btn--green.is-active:hover {
    color: #ffffff;
    box-shadow: 0px 0px 4px rgba(34, 167, 142, 0.3);
    background-color: #22a78e;
    }

    .btn--asphalt {
    color: #606b70;
    }

    .btn--asphalt:not([disabled]):not(.is-disabled):not(.is-active):hover {
    color: #566065;
    }

    .btn--asphalt.btn--fill {
    color: #ffffff;
    background-color: #606b70;
    }

    .btn--asphalt.btn--fill:not([disabled]):not(.is-disabled):not(.is-active):hover {
    color: #ffffff;
    background-color: #566065;
    }

    .btn--asphalt.is-active, .btn--asphalt.is-active:hover {
    color: #ffffff;
    box-shadow: 0px 0px 4px rgba(86, 96, 101, 0.3);
    background-color: #566065;
    }

    .btn--facebook {
    color: #3b5998;
    }

    .btn--facebook:not([disabled]):not(.is-disabled):not(.is-active):hover {
    color: #2f477a;
    }

    .btn--facebook.btn--fill {
    color: #ffffff;
    background-color: #3b5998;
    }

    .btn--facebook.btn--fill:not([disabled]):not(.is-disabled):not(.is-active):hover {
    color: #ffffff;
    background-color: #2f477a;
    }

    .btn--facebook.is-active, .btn--facebook.is-active:hover {
    color: #ffffff;
    box-shadow: 0px 0px 4px rgba(47, 71, 122, 0.3);
    background-color: #2f477a;
    }

    .btn--twitter {
    color: #55acee;
    }

    .btn--twitter:not([disabled]):not(.is-disabled):not(.is-active):hover {
    color: #448abe;
    }

    .btn--twitter.btn--fill {
    color: #ffffff;
    background-color: #55acee;
    }

    .btn--twitter.btn--fill:not([disabled]):not(.is-disabled):not(.is-active):hover {
    color: #ffffff;
    background-color: #448abe;
    }

    .btn--twitter.is-active, .btn--twitter.is-active:hover {
    color: #ffffff;
    box-shadow: 0px 0px 4px rgba(68, 138, 190, 0.3);
    background-color: #448abe;
    }

    .btn--google {
    color: #dc4e41;
    }

    .btn--google:not([disabled]):not(.is-disabled):not(.is-active):hover {
    color: #c6463b;
    }

    .btn--google.btn--fill {
    color: #ffffff;
    background-color: #dc4e41;
    }

    .btn--google.btn--fill:not([disabled]):not(.is-disabled):not(.is-active):hover {
    color: #ffffff;
    background-color: #c6463b;
    }

    .btn--google.is-active, .btn--google.is-active:hover {
    color: #ffffff;
    box-shadow: 0px 0px 4px rgba(198, 70, 59, 0.3);
    background-color: #c6463b;
    }

    .btn--white {
    color: #ffffff;
    }

    .btn--white:not([disabled]):not(.is-disabled):not(.is-active):hover {
    color: #f2f2f2;
    }

    .btn--white.btn--fill {
    color: rgba(0, 0, 0, 0.5);
    background-color: #ffffff;
    }

    .btn--white.btn--fill:not([disabled]):not(.is-disabled):not(.is-active):hover {
    color: rgba(0, 0, 0, 0.5);
    background-color: #f2f2f2;
    }

    .btn--white.is-active, .btn--white.is-active:hover {
    color: rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 4px rgba(242, 242, 242, 0.3);
    background-color: #f2f2f2;
    }

    .btn--black {
    color: #000000;
    }

    .btn--black:not([disabled]):not(.is-disabled):not(.is-active):hover {
    color: #4d4d4d;
    }

    .btn--black.btn--fill {
    color: #ffffff;
    background-color: #000000;
    }

    .btn--black.btn--fill:not([disabled]):not(.is-disabled):not(.is-active):hover {
    color: #ffffff;
    background-color: #4d4d4d;
    }

    .btn--black.is-active, .btn--black.is-active:hover {
    color: #ffffff;
    box-shadow: 0px 0px 4px rgba(77, 77, 77, 0.3);
    background-color: #4d4d4d;
    }

    /**
    * Default styles
    */
    *, *:before, *:after {
    box-sizing: border-box;
    }

    html, body {
    padding: 0;
    margin: 0;
    }

    html {
    font-family: -apple-system , '.SFNSText-Regular' , 'Helvetica Neue' , 'Roboto' , 'Segoe UI' , sans-serif;
    font-weight: 300;
    font-size: 14px;
    color: #222;
    background-color: #fdfdfd;
    }

    .group {
    width: 100%;
    padding: 2rem;
    }

    .group:not(:first-child) {
    border-top: 1px solid #eee;
    }

    .group h2 {
    margin: 0 0 0.5rem 0;
    }

    .group h2 span {
    font-weight: 100;
    font-size: 1rem;
    color: #ec5d4a;
    }

    .group h2 span:before {
    content: "\2015";
    margin-right: 5px;
    display: inline-block;
    transform: rotate(-60deg);
    }

    .group p {
    color: #999;
    font-size: 0.88rem;
    margin: 0;
    }

    .group p:last-of-type {
    margin: 0 0 1.5rem 0;
    }

    .group p span {
    border-bottom: 1px dotted currentColor;
    }

    .group p span:hover {
    color: #666;
    }
    114 changes: 114 additions & 0 deletions SassMeister-rendered.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,114 @@
    <div class="group">
    <h2>Shapes</h2>
    <p>Modifiers: <span>underline</span>, <span>outline</span>, <span>pill</span></p>

    <div class="btn">Button</div>
    <div class="btn btn--underline">Underlined</div>
    <div class="btn btn--outline">Outline</div>
    <div class="btn btn--squared btn--outline">Squared</div>
    <div class="btn btn--pill btn--outline">Pill Button</div>
    </div>

    <div class="group">
    <h2>Colors</h2>
    <p>Modifiers: <span>brand</span>, <span>light</span>, <span>gray</span>, <span>facebook</span>, <span>twitter</span>, <span>google</span></p>

    <div class="btn btn--brand">Brand</div>
    <div class="btn btn--light">Light</div>
    <div class="btn btn--gray">Gray</div>
    <div class="btn btn--asphalt">Asphalt</div>
    <div class="btn btn--green">Green</div>
    <div class="btn btn--facebook">Facebook</div>
    <div class="btn btn--twitter">Twitter</div>
    <div class="btn btn--google">Google+</div>
    </div>

    <div class="group">
    <h2>Fill <span>It must be used together with a <strong>color</strong> modifier</strong></span></h2>
    <p>Modifiers: <span>fill</span></p>

    <div class="btn btn--fill btn--brand">Brand</div>
    <div class="btn btn--fill btn--light">Light</div>
    <div class="btn btn--fill btn--gray">Gray</div>
    <div class="btn btn--fill btn--asphalt">Asphalt</div>
    <div class="btn btn--fill btn--green">Green</div>
    <div class="btn btn--fill btn--facebook">Facebook</div>
    <div class="btn btn--fill btn--twitter">Twitter</div>
    <div class="btn btn--fill btn--google">Google+</div>
    </div>

    <div class="group">
    <h2>Small</h2>
    <p>Modifiers: <span>small</span></p>

    <div class="btn btn--small btn--brand">Brand</div>
    <div class="btn btn--small btn--facebook">Facebook</div>
    <div class="btn btn--small btn--twitter">Twitter</div>
    <div class="btn btn--small btn--google">Google+</div>
    <div class="btn btn--small btn--fill btn--brand">Brand</div>
    <div class="btn btn--small btn--fill btn--facebook">Facebook</div>
    <div class="btn btn--small btn--fill btn--twitter">Twitter</div>
    <div class="btn btn--small btn--fill btn--google">Google+</div>
    </div>

    <div class="group">
    <h2>Large</h2>
    <p>Modifiers: <span>large</span></p>

    <div class="btn btn--large btn--brand">Brand</div>
    <div class="btn btn--large btn--facebook">Facebook</div>
    <div class="btn btn--large btn--twitter">Twitter</div>
    <div class="btn btn--large btn--google">Google+</div>
    <div class="btn btn--large btn--fill btn--brand">Brand</div>
    <div class="btn btn--large btn--fill btn--facebook">Facebook</div>
    <div class="btn btn--large btn--fill btn--twitter">Twitter</div>
    <div class="btn btn--large btn--fill btn--google">Google+</div>
    </div>

    <div class="group">
    <h2>Block</h2>
    <p>Modifiers: <span>block</span></p>

    <div class="btn btn--small btn--fill btn--block btn--brand">Small block</div>
    <div class="btn btn--fill btn--block btn--brand">Normal block</div>
    <div class="btn btn--large btn--fill btn--block btn--brand">Large block</div>
    </div>

    <div class="group">
    <h2>Active</h2>
    <p>State: <span>is-active</span></p>

    <div class="btn btn--light is-active">Light + Active</div>
    <div class="btn btn--twitter is-active">Twitter + Active</div>
    <div class="btn btn--brand btn--pill is-active">Brand + Pill + Active</div>
    <div class="btn btn--facebook btn--pill btn--outline btn--small is-active">Facebook + Pill + Outline + Small + Active</div>
    <div class="btn btn--google btn--large is-active">Google + Pill + Outline + Small + Active</div>
    </div>

    <div class="group">
    <h2>Disabled</h2>
    <p>State: <span>is-disabled</span></p>

    <div class="btn btn--brand btn--outline is-disabled">Brand + Outline + Disabled</div>
    <div class="btn btn--facebook btn--fill is-disabled">Facebook + Fill + Disabled</div>
    <div class="btn btn--brand btn--fill" disabled>Brand + Fill + Disabled (attribute)</div>
    </div>

    <div class="group">
    <h2>Others</h2>
    <p>Modifiers: <span>uppercase</span></p>

    <div class="btn btn--green btn--uppercase">Green + Uppercase</div>
    <div class="btn btn--gray btn--fill btn--uppercase">Gray + Fill + Uppercase</div>
    </div>

    <div class="group">
    <h2>Multiple modifiers</h2>

    <div class="btn btn--brand btn--underline">Brand + Underlined</div>
    <div class="btn btn--facebook btn--fill btn--pill">Facebook + Fill + Pill</div>
    <div class="btn btn--twitter btn--outline">Twitter + Outline</div>
    <div class="btn btn--google btn--outline btn--pill btn--large">Google + Outline + Pill + Large</div>
    <div class="btn btn--black btn--outline btn--small">Black + Outline + Small</div>
    <div class="btn btn--black btn--outline btn--small is-active">Black + Outline + Small + Active</div>
    </div>