Skip to content

Instantly share code, notes, and snippets.

@csswizardry

csswizardry/SassMeister-input-HTML.html

Last active January 22, 2018 10:39
Show Gist options
  • Save csswizardry/a91bcbb366e7ce7892aa to your computer and use it in GitHub Desktop.
Save csswizardry/a91bcbb366e7ce7892aa to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. csswizardry revised this gist Jul 7, 2015. 2 changed files with 4 additions and 4 deletions.
    6 changes: 3 additions & 3 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -32,23 +32,23 @@
    display: block;
    }

    // Tell the project that `list-fit` has loaded.
    // Tell the project that `list-fit` has been loaded.
    $has-list-fit: true;





    // _components.nav-primary.scss
    // This component depends on `.list-fit`. Check if it’s loaded.
    // This component depends on `.o-list-fit`. Check if it’s loaded.

    @if (variable-exists(has-list-fit)) {
    } @else {
    @warn "Oops! It looks like you haven’t included the `.o-list-fit` object.";
    }

    /**
    * Site’s primary nav. Extends `.list-fit`.
    * Site’s primary nav. Extends `.o-list-fit`.
    *
    * 1. Crop gradient’s overflow beyond round corners.
    */
    2 changes: 1 addition & 1 deletion SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -31,7 +31,7 @@
    }

    /**
    * Site’s primary nav. Extends `.list-fit`.
    * Site’s primary nav. Extends `.o-list-fit`.
    *
    * 1. Crop gradient’s overflow beyond round corners.
    */
  2. csswizardry revised this gist Jul 7, 2015. 4 changed files with 39 additions and 39 deletions.
    18 changes: 9 additions & 9 deletions SassMeister-input-HTML.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,14 +1,14 @@
    <ul class="list-fit Nav-Primary">
    <li class="list-fit__item Nav-Primary__item">
    <a href="#" class="list-fit__link Nav-Primary__link">The workshop</a>
    <ul class="o-list-fit c-nav-primary">
    <li class="o-list-fit__item c-nav-primary__item">
    <a href="#" class="o-list-fit__link c-nav-primary__link">The workshop</a>
    </li>
    <li class="list-fit__item Nav-Primary__item">
    <a href="#" class="list-fit__link Nav-Primary__link">2013 Schedule</a>
    <li class="o-list-fit__item c-nav-primary__item">
    <a href="#" class="o-list-fit__link c-nav-primary__link">2013 Schedule</a>
    </li>
    <li class="list-fit__item Nav-Primary__item">
    <a href="#" class="list-fit__link Nav-Primary__link is-current">About CSS Wizardry</a>
    <li class="o-list-fit__item c-nav-primary__item">
    <a href="#" class="o-list-fit__link c-nav-primary__link is-current">About CSS Wizardry</a>
    </li>
    <li class="list-fit__item Nav-Primary__item">
    <a href="#" class="list-fit__link Nav-Primary__link">Contact</a>
    <li class="o-list-fit__item c-nav-primary__item">
    <a href="#" class="o-list-fit__link c-nav-primary__link">Contact</a>
    </li>
    </ul>
    26 changes: 13 additions & 13 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    // ----
    // Sass (v3.4.12)
    // Sass (v3.4.14)
    // Compass (v1.0.3)
    // ----

    @@ -12,7 +12,7 @@
    * 2. Use `table` to make children pack up side-by-side.
    * 3. Use `fixed` to ensure that all children occupy an equal width.
    */
    .list-fit {
    .o-list-fit {
    margin: 0;
    padding: 0;
    list-style: none;
    @@ -24,11 +24,11 @@
    /**
    * Cause each item to fit into packed structure.
    */
    .list-fit__item {
    .o-list-fit__item {
    display: table-cell;
    }

    .list-fit__link {
    .o-list-fit__link {
    display: block;
    }

    @@ -40,19 +40,19 @@ $has-list-fit: true;


    // _components.nav-primary.scss
    // This component depends on `.list-fit`. Check if it is loaded.
    $has-list-fit: false !default;
    // This component depends on `.list-fit`. Check if it’s loaded.

    @if($has-list-fit == false) {
    @warn "Oops! It looks like you haven’t included the `.list-fit` object.";
    @if (variable-exists(has-list-fit)) {
    } @else {
    @warn "Oops! It looks like you haven’t included the `.o-list-fit` object.";
    }

    /**
    * Site’s primary nav. Extends `.list-fit`.
    *
    * 1. Crop gradient’s overflow beyond round corners.
    */
    .Nav-Primary {
    .c-nav-primary {
    font: 0.75rem/1.5 sans-serif;
    text-transform: uppercase;
    text-align: center;
    @@ -62,7 +62,7 @@ $has-list-fit: false !default;
    overflow: hidden; /* [1] */
    }

    .Nav-Primary__item {}
    .c-nav-primary__item {}

    /**
    * Each link inside the nav has a large hit area.
    @@ -71,7 +71,7 @@ $has-list-fit: false !default;
    * 2. Enable the border on the sides of the links.
    * 3. Override its gray color on the left side of the links.
    */
    .Nav-Primary__link {
    .c-nav-primary__link {
    color: #333;
    padding: 10px;
    text-decoration: none;
    @@ -93,14 +93,14 @@ $has-list-fit: false !default;
    /**
    * Remove redundant border from the left of the first link.
    */
    .Nav-Primary__item:first-child > & {
    .c-nav-primary__item:first-child > & {
    border-left: none;
    }

    /**
    * Remove redundant border from the right of the last link.
    */
    .Nav-Primary__item:last-child > & {
    .c-nav-primary__item:last-child > & {
    border-right: none;
    }

    16 changes: 8 additions & 8 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -7,7 +7,7 @@
    * 2. Use `table` to make children pack up side-by-side.
    * 3. Use `fixed` to ensure that all children occupy an equal width.
    */
    .list-fit {
    .o-list-fit {
    margin: 0;
    padding: 0;
    list-style: none;
    @@ -22,11 +22,11 @@
    /**
    * Cause each item to fit into packed structure.
    */
    .list-fit__item {
    .o-list-fit__item {
    display: table-cell;
    }

    .list-fit__link {
    .o-list-fit__link {
    display: block;
    }

    @@ -35,7 +35,7 @@
    *
    * 1. Crop gradient’s overflow beyond round corners.
    */
    .Nav-Primary {
    .c-nav-primary {
    font: 0.75rem/1.5 sans-serif;
    text-transform: uppercase;
    text-align: center;
    @@ -53,7 +53,7 @@
    * 2. Enable the border on the sides of the links.
    * 3. Override its gray color on the left side of the links.
    */
    .Nav-Primary__link {
    .c-nav-primary__link {
    color: #333;
    padding: 10px;
    text-decoration: none;
    @@ -76,12 +76,12 @@
    * Remove redundant border from the right of the last link.
    */
    }
    .Nav-Primary__link.is-current {
    .c-nav-primary__link.is-current {
    text-decoration: underline;
    }
    .Nav-Primary__item:first-child > .Nav-Primary__link {
    .c-nav-primary__item:first-child > .c-nav-primary__link {
    border-left: none;
    }
    .Nav-Primary__item:last-child > .Nav-Primary__link {
    .c-nav-primary__item:last-child > .c-nav-primary__link {
    border-right: none;
    }
    18 changes: 9 additions & 9 deletions SassMeister-rendered.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,14 +1,14 @@
    <ul class="list-fit Nav-Primary">
    <li class="list-fit__item Nav-Primary__item">
    <a href="#" class="list-fit__link Nav-Primary__link">The workshop</a>
    <ul class="o-list-fit c-nav-primary">
    <li class="o-list-fit__item c-nav-primary__item">
    <a href="#" class="o-list-fit__link c-nav-primary__link">The workshop</a>
    </li>
    <li class="list-fit__item Nav-Primary__item">
    <a href="#" class="list-fit__link Nav-Primary__link">2013 Schedule</a>
    <li class="o-list-fit__item c-nav-primary__item">
    <a href="#" class="o-list-fit__link c-nav-primary__link">2013 Schedule</a>
    </li>
    <li class="list-fit__item Nav-Primary__item">
    <a href="#" class="list-fit__link Nav-Primary__link is-current">About CSS Wizardry</a>
    <li class="o-list-fit__item c-nav-primary__item">
    <a href="#" class="o-list-fit__link c-nav-primary__link is-current">About CSS Wizardry</a>
    </li>
    <li class="list-fit__item Nav-Primary__item">
    <a href="#" class="list-fit__link Nav-Primary__link">Contact</a>
    <li class="o-list-fit__item c-nav-primary__item">
    <a href="#" class="o-list-fit__link c-nav-primary__link">Contact</a>
    </li>
    </ul>
  3. csswizardry revised this gist Apr 8, 2015. 4 changed files with 12 additions and 12 deletions.
    8 changes: 4 additions & 4 deletions SassMeister-input-HTML.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,14 +1,14 @@
    <ul class="list-fit Nav-Primary">
    <li class="list-fit__item">
    <li class="list-fit__item Nav-Primary__item">
    <a href="#" class="list-fit__link Nav-Primary__link">The workshop</a>
    </li>
    <li class="list-fit__item">
    <li class="list-fit__item Nav-Primary__item">
    <a href="#" class="list-fit__link Nav-Primary__link">2013 Schedule</a>
    </li>
    <li class="list-fit__item">
    <li class="list-fit__item Nav-Primary__item">
    <a href="#" class="list-fit__link Nav-Primary__link is-current">About CSS Wizardry</a>
    </li>
    <li class="list-fit__item">
    <li class="list-fit__item Nav-Primary__item">
    <a href="#" class="list-fit__link Nav-Primary__link">Contact</a>
    </li>
    </ul>
    4 changes: 2 additions & 2 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -94,14 +94,14 @@ $has-list-fit: false !default;
    * Remove redundant border from the left of the first link.
    */
    .Nav-Primary__item:first-child > & {
    border-left: 0;
    border-left: none;
    }

    /**
    * Remove redundant border from the right of the last link.
    */
    .Nav-Primary__item:last-child > & {
    border-right: 0;
    border-right: none;
    }

    }
    4 changes: 2 additions & 2 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -80,8 +80,8 @@
    text-decoration: underline;
    }
    .Nav-Primary__item:first-child > .Nav-Primary__link {
    border-left: 0;
    border-left: none;
    }
    .Nav-Primary__item:last-child > .Nav-Primary__link {
    border-right: 0;
    border-right: none;
    }
    8 changes: 4 additions & 4 deletions SassMeister-rendered.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,14 +1,14 @@
    <ul class="list-fit Nav-Primary">
    <li class="list-fit__item">
    <li class="list-fit__item Nav-Primary__item">
    <a href="#" class="list-fit__link Nav-Primary__link">The workshop</a>
    </li>
    <li class="list-fit__item">
    <li class="list-fit__item Nav-Primary__item">
    <a href="#" class="list-fit__link Nav-Primary__link">2013 Schedule</a>
    </li>
    <li class="list-fit__item">
    <li class="list-fit__item Nav-Primary__item">
    <a href="#" class="list-fit__link Nav-Primary__link is-current">About CSS Wizardry</a>
    </li>
    <li class="list-fit__item">
    <li class="list-fit__item Nav-Primary__item">
    <a href="#" class="list-fit__link Nav-Primary__link">Contact</a>
    </li>
    </ul>
  4. csswizardry revised this gist Mar 3, 2015. 1 changed file with 5 additions and 14 deletions.
    19 changes: 5 additions & 14 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -3,17 +3,6 @@
    // Compass (v1.0.3)
    // ----

    // _tools.mixins.scss
    @mixin reset-list() {
    margin: 0;
    padding: 0;
    list-style: none;
    }





    // _objects.list-fit.scss
    /**
    * A simple object to cause lists to fit into all
    @@ -24,7 +13,9 @@
    * 3. Use `fixed` to ensure that all children occupy an equal width.
    */
    .list-fit {
    @include reset-list();
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%; /* [1] */
    display: table; /* [2] */
    table-layout: fixed; /* [3] */
    @@ -49,11 +40,11 @@ $has-list-fit: true;


    // _components.nav-primary.scss
    // This component depends on `list-fit`. Check if it is loaded.
    // This component depends on `.list-fit`. Check if it is loaded.
    $has-list-fit: false !default;

    @if($has-list-fit == false) {
    @warn "Oops! It looks like you haven’t included the `list-fit` object.";
    @warn "Oops! It looks like you haven’t included the `.list-fit` object.";
    }

    /**
  5. csswizardry revised this gist Mar 3, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,7 @@
    // Compass (v1.0.3)
    // ----

    // _tools.misinx.scss
    // _tools.mixins.scss
    @mixin reset-list() {
    margin: 0;
    padding: 0;
  6. csswizardry revised this gist Mar 3, 2015. 1 changed file with 10 additions and 1 deletion.
    11 changes: 10 additions & 1 deletion SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -3,13 +3,18 @@
    // Compass (v1.0.3)
    // ----

    // _tools.misinx.scss
    @mixin reset-list() {
    margin: 0;
    padding: 0;
    list-style: none;
    }





    // _objects.list-fit.scss
    /**
    * A simple object to cause lists to fit into all
    * available horizontal space. Extend in Components layer.
    @@ -36,17 +41,21 @@
    display: block;
    }

    // Tell the project that `list-fit` has loaded.
    $has-list-fit: true;






    // _components.nav-primary.scss
    // This component depends on `list-fit`. Check if it is loaded.
    $has-list-fit: false !default;

    @if($has-list-fit == false) {
    @warn "Oops! It looks like you haven’t included the `list-fit` object.";
    }

    /**
    * Site’s primary nav. Extends `.list-fit`.
    *
  7. csswizardry revised this gist Mar 3, 2015. 4 changed files with 9 additions and 2 deletions.
    2 changes: 1 addition & 1 deletion SassMeister-input-HTML.html
    View file
    Original file line number Diff line number Diff line change
    @@ -6,7 +6,7 @@
    <a href="#" class="list-fit__link Nav-Primary__link">2013 Schedule</a>
    </li>
    <li class="list-fit__item">
    <a href="#" class="list-fit__link Nav-Primary__link">About CSS Wizardry</a>
    <a href="#" class="list-fit__link Nav-Primary__link is-current">About CSS Wizardry</a>
    </li>
    <li class="list-fit__item">
    <a href="#" class="list-fit__link Nav-Primary__link">Contact</a>
    4 changes: 4 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -86,6 +86,10 @@ $has-list-fit: false !default;
    background-image: -o-linear-gradient(rgba(255,255,255,1) 0%, rgba(238,238,238,1) 100%);
    background-image: linear-gradient(rgba(255,255,255,1) 0%, rgba(238,238,238,1) 100%);

    &.is-current {
    text-decoration: underline;
    }

    /**
    * Remove redundant border from the left of the first link.
    */
    3 changes: 3 additions & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -76,6 +76,9 @@
    * Remove redundant border from the right of the last link.
    */
    }
    .Nav-Primary__link.is-current {
    text-decoration: underline;
    }
    .Nav-Primary__item:first-child > .Nav-Primary__link {
    border-left: 0;
    }
    2 changes: 1 addition & 1 deletion SassMeister-rendered.html
    View file
    Original file line number Diff line number Diff line change
    @@ -6,7 +6,7 @@
    <a href="#" class="list-fit__link Nav-Primary__link">2013 Schedule</a>
    </li>
    <li class="list-fit__item">
    <a href="#" class="list-fit__link Nav-Primary__link">About CSS Wizardry</a>
    <a href="#" class="list-fit__link Nav-Primary__link is-current">About CSS Wizardry</a>
    </li>
    <li class="list-fit__item">
    <a href="#" class="list-fit__link Nav-Primary__link">Contact</a>
  8. csswizardry revised this gist Feb 24, 2015. 3 changed files with 41 additions and 36 deletions.
    26 changes: 13 additions & 13 deletions SassMeister-input-HTML.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,14 +1,14 @@
    <ul class="list-fit Nav-Primary">
    <li class="list-fit__item">
    <a href="#" class="list-fit__link Nav-Primary__link">The workshop</a>
    </li>
    <li class="list-fit__item">
    <a href="#" class="list-fit__link Nav-Primary__link">2013 Schedule</a>
    </li>
    <li class="list-fit__item">
    <a href="#" class="list-fit__link Nav-Primary__link">About CSS Wizardry</a>
    </li>
    <li class="list-fit__item">
    <a href="#" class="list-fit__link Nav-Primary__link">Contact</a>
    </li>
    </ul>
    <li class="list-fit__item">
    <a href="#" class="list-fit__link Nav-Primary__link">The workshop</a>
    </li>
    <li class="list-fit__item">
    <a href="#" class="list-fit__link Nav-Primary__link">2013 Schedule</a>
    </li>
    <li class="list-fit__item">
    <a href="#" class="list-fit__link Nav-Primary__link">About CSS Wizardry</a>
    </li>
    <li class="list-fit__item">
    <a href="#" class="list-fit__link Nav-Primary__link">Contact</a>
    </li>
    </ul>
    25 changes: 15 additions & 10 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -3,6 +3,13 @@
    // Compass (v1.0.3)
    // ----

    @mixin reset-list() {
    margin: 0;
    padding: 0;
    list-style: none;
    }


    /**
    * A simple object to cause lists to fit into all
    * available horizontal space. Extend in Components layer.
    @@ -12,9 +19,7 @@
    * 3. Use `fixed` to ensure that all children occupy an equal width.
    */
    .list-fit {
    margin: 0;
    padding: 0;
    list-style: none;
    @include reset-list();
    width: 100%; /* [1] */
    display: table; /* [2] */
    table-layout: fixed; /* [3] */
    @@ -35,18 +40,18 @@ $has-list-fit: true;



    /**
    * Site’s primary nav. Extends `.list-fit`.
    *
    * 1. Crop gradient’s overflow beyond round corners.
    */


    $has-list-fit: false !default;

    @if($has-list-fit == false) {
    @warn "Oops! It looks like you haven’t included the `list-fit` object.";
    }

    /**
    * Site’s primary nav. Extends `.list-fit`.
    *
    * 1. Crop gradient’s overflow beyond round corners.
    */
    .Nav-Primary {
    font: 0.75rem/1.5 sans-serif;
    text-transform: uppercase;
    26 changes: 13 additions & 13 deletions SassMeister-rendered.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,14 +1,14 @@
    <ul class="list-fit Nav-Primary">
    <li class="list-fit__item">
    <a href="#" class="list-fit__link Nav-Primary__link">The workshop</a>
    </li>
    <li class="list-fit__item">
    <a href="#" class="list-fit__link Nav-Primary__link">2013 Schedule</a>
    </li>
    <li class="list-fit__item">
    <a href="#" class="list-fit__link Nav-Primary__link">About CSS Wizardry</a>
    </li>
    <li class="list-fit__item">
    <a href="#" class="list-fit__link Nav-Primary__link">Contact</a>
    </li>
    </ul>
    <li class="list-fit__item">
    <a href="#" class="list-fit__link Nav-Primary__link">The workshop</a>
    </li>
    <li class="list-fit__item">
    <a href="#" class="list-fit__link Nav-Primary__link">2013 Schedule</a>
    </li>
    <li class="list-fit__item">
    <a href="#" class="list-fit__link Nav-Primary__link">About CSS Wizardry</a>
    </li>
    <li class="list-fit__item">
    <a href="#" class="list-fit__link Nav-Primary__link">Contact</a>
    </li>
    </ul>
  9. csswizardry revised this gist Feb 24, 2015. 2 changed files with 8 additions and 8 deletions.
    8 changes: 4 additions & 4 deletions SassMeister-input-HTML.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,14 +1,14 @@
    <ul class="list-fit Nav-Primary">
    <li class="list-fit__item Nav-Primary__item">
    <li class="list-fit__item">
    <a href="#" class="list-fit__link Nav-Primary__link">The workshop</a>
    </li>
    <li class="list-fit__item Nav-Primary__item">
    <li class="list-fit__item">
    <a href="#" class="list-fit__link Nav-Primary__link">2013 Schedule</a>
    </li>
    <li class="list-fit__item Nav-Primary__item">
    <li class="list-fit__item">
    <a href="#" class="list-fit__link Nav-Primary__link">About CSS Wizardry</a>
    </li>
    <li class="list-fit__item Nav-Primary__item">
    <li class="list-fit__item">
    <a href="#" class="list-fit__link Nav-Primary__link">Contact</a>
    </li>
    </ul>
    8 changes: 4 additions & 4 deletions SassMeister-rendered.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,14 +1,14 @@
    <ul class="list-fit Nav-Primary">
    <li class="list-fit__item Nav-Primary__item">
    <li class="list-fit__item">
    <a href="#" class="list-fit__link Nav-Primary__link">The workshop</a>
    </li>
    <li class="list-fit__item Nav-Primary__item">
    <li class="list-fit__item">
    <a href="#" class="list-fit__link Nav-Primary__link">2013 Schedule</a>
    </li>
    <li class="list-fit__item Nav-Primary__item">
    <li class="list-fit__item">
    <a href="#" class="list-fit__link Nav-Primary__link">About CSS Wizardry</a>
    </li>
    <li class="list-fit__item Nav-Primary__item">
    <li class="list-fit__item">
    <a href="#" class="list-fit__link Nav-Primary__link">Contact</a>
    </li>
    </ul>
  10. csswizardry revised this gist Feb 24, 2015. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -84,14 +84,14 @@ $has-list-fit: false !default;
    /**
    * Remove redundant border from the left of the first link.
    */
    .Nav-Primary__item:first-child > &{
    .Nav-Primary__item:first-child > & {
    border-left: 0;
    }

    /**
    * Remove redundant border from the right of the last link.
    */
    .Nav-Primary__item:last-child > &{
    .Nav-Primary__item:last-child > & {
    border-right: 0;
    }

  11. csswizardry revised this gist Feb 24, 2015. 1 changed file with 9 additions and 0 deletions.
    9 changes: 9 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -31,13 +31,22 @@
    display: block;
    }

    $has-list-fit: true;



    /**
    * Site’s primary nav. Extends `.list-fit`.
    *
    * 1. Crop gradient’s overflow beyond round corners.
    */

    $has-list-fit: false !default;

    @if($has-list-fit == false) {
    @warn "Oops! It looks like you haven’t included the `list-fit` object.";
    }

    .Nav-Primary {
    font: 0.75rem/1.5 sans-serif;
    text-transform: uppercase;
  12. csswizardry created this gist Feb 24, 2015.
    14 changes: 14 additions & 0 deletions SassMeister-input-HTML.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,14 @@
    <ul class="list-fit Nav-Primary">
    <li class="list-fit__item Nav-Primary__item">
    <a href="#" class="list-fit__link Nav-Primary__link">The workshop</a>
    </li>
    <li class="list-fit__item Nav-Primary__item">
    <a href="#" class="list-fit__link Nav-Primary__link">2013 Schedule</a>
    </li>
    <li class="list-fit__item Nav-Primary__item">
    <a href="#" class="list-fit__link Nav-Primary__link">About CSS Wizardry</a>
    </li>
    <li class="list-fit__item Nav-Primary__item">
    <a href="#" class="list-fit__link Nav-Primary__link">Contact</a>
    </li>
    </ul>
    89 changes: 89 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,89 @@
    // ----
    // Sass (v3.4.12)
    // Compass (v1.0.3)
    // ----

    /**
    * A simple object to cause lists to fit into all
    * available horizontal space. Extend in Components layer.
    *
    * 1. Cause list to take up all available space.
    * 2. Use `table` to make children pack up side-by-side.
    * 3. Use `fixed` to ensure that all children occupy an equal width.
    */
    .list-fit {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%; /* [1] */
    display: table; /* [2] */
    table-layout: fixed; /* [3] */
    }

    /**
    * Cause each item to fit into packed structure.
    */
    .list-fit__item {
    display: table-cell;
    }

    .list-fit__link {
    display: block;
    }



    /**
    * Site’s primary nav. Extends `.list-fit`.
    *
    * 1. Crop gradient’s overflow beyond round corners.
    */
    .Nav-Primary {
    font: 0.75rem/1.5 sans-serif;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden; /* [1] */
    }

    .Nav-Primary__item {}

    /**
    * Each link inside the nav has a large hit area.
    *
    * 1. Set up an invisible, 1px, gray border.
    * 2. Enable the border on the sides of the links.
    * 3. Override its gray color on the left side of the links.
    */
    .Nav-Primary__link {
    color: #333;
    padding: 10px;
    text-decoration: none;
    border: 0 dashed #ccc; /* [1] */
    border-width: 0 1px; /* [2] */
    border-left-color: #fff; /* [3] */

    background-color: rgb(255,255,255);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,1)), to(rgba(238,238,238,1)));
    background-image: -webkit-linear-gradient(rgba(255,255,255,1) 0%, rgba(238,238,238,1) 100%);
    background-image: -moz-linear-gradient(rgba(255,255,255,1) 0%, rgba(238,238,238,1) 100%);
    background-image: -o-linear-gradient(rgba(255,255,255,1) 0%, rgba(238,238,238,1) 100%);
    background-image: linear-gradient(rgba(255,255,255,1) 0%, rgba(238,238,238,1) 100%);

    /**
    * Remove redundant border from the left of the first link.
    */
    .Nav-Primary__item:first-child > &{
    border-left: 0;
    }

    /**
    * Remove redundant border from the right of the last link.
    */
    .Nav-Primary__item:last-child > &{
    border-right: 0;
    }

    }
    84 changes: 84 additions & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,84 @@
    @charset "UTF-8";
    /**
    * A simple object to cause lists to fit into all
    * available horizontal space. Extend in Components layer.
    *
    * 1. Cause list to take up all available space.
    * 2. Use `table` to make children pack up side-by-side.
    * 3. Use `fixed` to ensure that all children occupy an equal width.
    */
    .list-fit {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    /* [1] */
    display: table;
    /* [2] */
    table-layout: fixed;
    /* [3] */
    }

    /**
    * Cause each item to fit into packed structure.
    */
    .list-fit__item {
    display: table-cell;
    }

    .list-fit__link {
    display: block;
    }

    /**
    * Site’s primary nav. Extends `.list-fit`.
    *
    * 1. Crop gradient’s overflow beyond round corners.
    */
    .Nav-Primary {
    font: 0.75rem/1.5 sans-serif;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
    /* [1] */
    }

    /**
    * Each link inside the nav has a large hit area.
    *
    * 1. Set up an invisible, 1px, gray border.
    * 2. Enable the border on the sides of the links.
    * 3. Override its gray color on the left side of the links.
    */
    .Nav-Primary__link {
    color: #333;
    padding: 10px;
    text-decoration: none;
    border: 0 dashed #ccc;
    /* [1] */
    border-width: 0 1px;
    /* [2] */
    border-left-color: #fff;
    /* [3] */
    background-color: white;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(#eeeeee));
    background-image: -webkit-linear-gradient(white 0%, #eeeeee 100%);
    background-image: -moz-linear-gradient(white 0%, #eeeeee 100%);
    background-image: -o-linear-gradient(white 0%, #eeeeee 100%);
    background-image: linear-gradient(white 0%, #eeeeee 100%);
    /**
    * Remove redundant border from the left of the first link.
    */
    /**
    * Remove redundant border from the right of the last link.
    */
    }
    .Nav-Primary__item:first-child > .Nav-Primary__link {
    border-left: 0;
    }
    .Nav-Primary__item:last-child > .Nav-Primary__link {
    border-right: 0;
    }
    14 changes: 14 additions & 0 deletions SassMeister-rendered.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,14 @@
    <ul class="list-fit Nav-Primary">
    <li class="list-fit__item Nav-Primary__item">
    <a href="#" class="list-fit__link Nav-Primary__link">The workshop</a>
    </li>
    <li class="list-fit__item Nav-Primary__item">
    <a href="#" class="list-fit__link Nav-Primary__link">2013 Schedule</a>
    </li>
    <li class="list-fit__item Nav-Primary__item">
    <a href="#" class="list-fit__link Nav-Primary__link">About CSS Wizardry</a>
    </li>
    <li class="list-fit__item Nav-Primary__item">
    <a href="#" class="list-fit__link Nav-Primary__link">Contact</a>
    </li>
    </ul>