Skip to content

Instantly share code, notes, and snippets.

@tonyfinlay

tonyfinlay/SassMeister-input-HTML.html

Last active September 8, 2015 15:09
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tonyfinlay/d1e8f457486d9fbefe2c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tonyfinlay/d1e8f457486d9fbefe2c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Tony Finlay revised this gist Sep 8, 2015. 3 changed files with 4 additions and 5 deletions.
    4 changes: 2 additions & 2 deletions SassMeister-input-HTML.html
    View file
    Original file line number Diff line number Diff line change
    @@ -26,7 +26,7 @@
    <div class="col">Col 8</div>
    </div>
    </div>
    <div class="primary-sidebar"></div>
    <div class="secondary-sidebar"></div>
    <div class="primary-sidebar">Sidebar</div>
    <div class="secondary-sidebar">Sidebar</div>
    </body>
    </html>
    1 change: 0 additions & 1 deletion SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,6 @@
    // Compass (v1.0.3)
    // Breakpoint (v2.5.0)
    // Singularity Extras (v1.0.0)
    // Singularity.gs (v1.6.2)
    // ----

    @import "breakpoint";
    4 changes: 2 additions & 2 deletions SassMeister-rendered.html
    View file
    Original file line number Diff line number Diff line change
    @@ -26,7 +26,7 @@
    <div class="col">Col 8</div>
    </div>
    </div>
    <div class="primary-sidebar"></div>
    <div class="secondary-sidebar"></div>
    <div class="primary-sidebar">Sidebar</div>
    <div class="secondary-sidebar">Sidebar</div>
    </body>
    </html>
  2. Tony Finlay revised this gist Aug 15, 2015. No changes.
  3. Tony Finlay revised this gist Aug 15, 2015. 2 changed files with 2 additions and 1 deletion.
    2 changes: 1 addition & 1 deletion SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -56,7 +56,7 @@ div {
    }
    @include breakpoint($large) {
    background-color: aqua;
    &:nth-child(4n+1){@include grid-span(6, 1); clear: left;}
    &:nth-child(4n+1){@include grid-span(6, 1); clear: left; margin-left: 0;}
    &:nth-child(4n+2){@include grid-span(6, 7);}
    &:nth-child(4n+3){@include grid-span(6, 13);}
    &:nth-child(4n+4){@include grid-span(6, 19);}
    1 change: 1 addition & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -96,6 +96,7 @@ div {
    clear: none;
    padding-right: 5px;
    clear: left;
    margin-left: 0;
    }
    .col:nth-child(4n+2) {
    width: 25%;
  4. Tony Finlay revised this gist Aug 15, 2015. 2 changed files with 45 additions and 137 deletions.
    40 changes: 12 additions & 28 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -10,8 +10,8 @@
    @import "singularitygs";
    @import "singularity-extras";
    $gutter-size: 5px;
    $small: 760px 999px;
    $medium: 1000px 1199px;
    $small: min-width 760px;
    $medium: min-width 1000px;
    $large: min-width 1200px;


    @@ -37,45 +37,29 @@ div {
    @include add-gutter($gutter-size);
    }
    .col{
    @include grid-span(24, 1);
    background:black;
    background-clip:content-box;
    padding-bottom: $gutter-size;
    height: 25vh;
    color: white;
    @include breakpoint($small) {
    background-color: purple;
    &:nth-child(odd){@include grid-span(12, 1); clear: left;}
    &:nth-child(even){@include grid-span(12, 13);}
    }
    @include breakpoint($medium) {
    background-color: orange;
    &:nth-child(3n+1){@include grid-span(8, 1); clear: left;}
    &:nth-child(3n+2){@include grid-span(8, 9);}
    &:nth-child(3n+3){@include grid-span(8, 17);}
    }
    @include breakpoint($large) {
    background-color: aqua;
    }


    &:nth-child(4n+1){
    @include grid-span(24, 1);
    @include breakpoint($small) {@include grid-span(12, 1); clear: left;}
    @include breakpoint($medium) {@include grid-span(8, 1); clear: left;}
    @include breakpoint($large) {@include grid-span(6, 1); clear: left;}
    }
    &:nth-child(4n+2){
    @include grid-span(24, 1);
    @include breakpoint($small) {@include grid-span(12, 13); }
    @include breakpoint($medium) {@include grid-span(8, 9); clear: none;}
    @include breakpoint($large) {@include grid-span(6, 7);}
    }
    &:nth-child(4n+3){
    @include grid-span(24, 1);
    @include breakpoint($small) {@include grid-span(12, 1); clear: left; }
    @include breakpoint($medium) {@include grid-span(8, 17); clear: none;}
    @include breakpoint($large) {@include grid-span(6, 13);}
    }
    &:nth-child(4n+4){
    @include grid-span(24, 1);
    @include breakpoint($small) {@include grid-span(12, 13);}
    @include breakpoint($medium) {@include grid-span(8, 1); clear: left;}
    @include breakpoint($large) {@include grid-span(6, 19);}
    &:nth-child(4n+1){@include grid-span(6, 1); clear: left;}
    &:nth-child(4n+2){@include grid-span(6, 7);}
    &:nth-child(4n+3){@include grid-span(6, 13);}
    &:nth-child(4n+4){@include grid-span(6, 19);}
    }
    }

    142 changes: 33 additions & 109 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -23,75 +23,31 @@ div {
    }

    .col {
    width: 100%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    padding-right: 0;
    background: black;
    background-clip: content-box;
    padding-bottom: 5px;
    height: 25vh;
    color: white;
    }
    @media (min-width: 760px) and (max-width: 999px) {
    @media (min-width: 760px) {
    .col {
    background-color: purple;
    }
    }
    @media (min-width: 1000px) and (max-width: 1199px) {
    .col {
    background-color: orange;
    }
    }
    @media (min-width: 1200px) {
    .col {
    background-color: aqua;
    }
    }
    .col:nth-child(4n+1) {
    width: 100%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    padding-right: 0;
    }
    @media (min-width: 760px) and (max-width: 999px) {
    .col:nth-child(4n+1) {
    .col:nth-child(odd) {
    width: 50%;
    float: left;
    margin-right: -100%;
    clear: none;
    padding-right: 5px;
    clear: left;
    }
    }
    @media (min-width: 1000px) and (max-width: 1199px) {
    .col:nth-child(4n+1) {
    width: 33.33333%;
    float: left;
    margin-right: -100%;
    clear: none;
    padding-right: 5px;
    clear: left;
    }
    }
    @media (min-width: 1200px) {
    .col:nth-child(4n+1) {
    width: 25%;
    float: left;
    margin-right: -100%;
    clear: none;
    padding-right: 5px;
    clear: left;
    }
    }
    .col:nth-child(4n+2) {
    width: 100%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    padding-right: 0;
    }
    @media (min-width: 760px) and (max-width: 999px) {
    .col:nth-child(4n+2) {
    .col:nth-child(even) {
    width: 50%;
    float: right;
    margin-left: 0;
    @@ -100,95 +56,63 @@ div {
    padding-right: 0;
    }
    }
    @media (min-width: 1000px) and (max-width: 1199px) {
    .col:nth-child(4n+2) {
    width: 33.33333%;
    float: left;
    margin-right: -100%;
    margin-left: 33.33333%;
    clear: none;
    padding-right: 5px;
    clear: none;
    @media (min-width: 1000px) {
    .col {
    background-color: orange;
    }
    }
    @media (min-width: 1200px) {
    .col:nth-child(4n+2) {
    width: 25%;
    .col:nth-child(3n+1) {
    width: 33.33333%;
    float: left;
    margin-right: -100%;
    margin-left: 25%;
    clear: none;
    padding-right: 5px;
    clear: left;
    }
    }
    .col:nth-child(4n+3) {
    width: 100%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    padding-right: 0;
    }
    @media (min-width: 760px) and (max-width: 999px) {
    .col:nth-child(4n+3) {
    width: 50%;
    .col:nth-child(3n+2) {
    width: 33.33333%;
    float: left;
    margin-right: -100%;
    margin-left: 33.33333%;
    clear: none;
    padding-right: 5px;
    clear: left;
    }
    }
    @media (min-width: 1000px) and (max-width: 1199px) {
    .col:nth-child(4n+3) {
    .col:nth-child(3n+3) {
    width: 33.33333%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    padding-right: 0;
    clear: none;
    }
    }
    @media (min-width: 1200px) {
    .col:nth-child(4n+3) {
    .col {
    background-color: aqua;
    }
    .col:nth-child(4n+1) {
    width: 25%;
    float: left;
    margin-right: -100%;
    margin-left: 50%;
    clear: none;
    padding-right: 5px;
    clear: left;
    }
    }
    .col:nth-child(4n+4) {
    width: 100%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    padding-right: 0;
    }
    @media (min-width: 760px) and (max-width: 999px) {
    .col:nth-child(4n+4) {
    width: 50%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    .col:nth-child(4n+2) {
    width: 25%;
    float: left;
    margin-right: -100%;
    margin-left: 25%;
    clear: none;
    padding-right: 0;
    padding-right: 5px;
    }
    }
    @media (min-width: 1000px) and (max-width: 1199px) {
    .col:nth-child(4n+4) {
    width: 33.33333%;
    .col:nth-child(4n+3) {
    width: 25%;
    float: left;
    margin-right: -100%;
    margin-left: 50%;
    clear: none;
    padding-right: 5px;
    clear: left;
    }
    }
    @media (min-width: 1200px) {
    .col:nth-child(4n+4) {
    width: 25%;
    float: right;
  5. Tony Finlay revised this gist Aug 15, 2015. 2 changed files with 12 additions and 12 deletions.
    4 changes: 2 additions & 2 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -10,8 +10,8 @@
    @import "singularitygs";
    @import "singularity-extras";
    $gutter-size: 5px;
    $small: min-width 760px;
    $medium: min-width 1000px;
    $small: 760px 999px;
    $medium: 1000px 1199px;
    $large: min-width 1200px;


    20 changes: 10 additions & 10 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -29,12 +29,12 @@ div {
    height: 25vh;
    color: white;
    }
    @media (min-width: 760px) {
    @media (min-width: 760px) and (max-width: 999px) {
    .col {
    background-color: purple;
    }
    }
    @media (min-width: 1000px) {
    @media (min-width: 1000px) and (max-width: 1199px) {
    .col {
    background-color: orange;
    }
    @@ -52,7 +52,7 @@ div {
    clear: none;
    padding-right: 0;
    }
    @media (min-width: 760px) {
    @media (min-width: 760px) and (max-width: 999px) {
    .col:nth-child(4n+1) {
    width: 50%;
    float: left;
    @@ -62,7 +62,7 @@ div {
    clear: left;
    }
    }
    @media (min-width: 1000px) {
    @media (min-width: 1000px) and (max-width: 1199px) {
    .col:nth-child(4n+1) {
    width: 33.33333%;
    float: left;
    @@ -90,7 +90,7 @@ div {
    clear: none;
    padding-right: 0;
    }
    @media (min-width: 760px) {
    @media (min-width: 760px) and (max-width: 999px) {
    .col:nth-child(4n+2) {
    width: 50%;
    float: right;
    @@ -100,7 +100,7 @@ div {
    padding-right: 0;
    }
    }
    @media (min-width: 1000px) {
    @media (min-width: 1000px) and (max-width: 1199px) {
    .col:nth-child(4n+2) {
    width: 33.33333%;
    float: left;
    @@ -129,7 +129,7 @@ div {
    clear: none;
    padding-right: 0;
    }
    @media (min-width: 760px) {
    @media (min-width: 760px) and (max-width: 999px) {
    .col:nth-child(4n+3) {
    width: 50%;
    float: left;
    @@ -139,7 +139,7 @@ div {
    clear: left;
    }
    }
    @media (min-width: 1000px) {
    @media (min-width: 1000px) and (max-width: 1199px) {
    .col:nth-child(4n+3) {
    width: 33.33333%;
    float: right;
    @@ -168,7 +168,7 @@ div {
    clear: none;
    padding-right: 0;
    }
    @media (min-width: 760px) {
    @media (min-width: 760px) and (max-width: 999px) {
    .col:nth-child(4n+4) {
    width: 50%;
    float: right;
    @@ -178,7 +178,7 @@ div {
    padding-right: 0;
    }
    }
    @media (min-width: 1000px) {
    @media (min-width: 1000px) and (max-width: 1199px) {
    .col:nth-child(4n+4) {
    width: 33.33333%;
    float: left;
  6. Tony Finlay revised this gist Aug 14, 2015. 4 changed files with 179 additions and 37 deletions.
    8 changes: 4 additions & 4 deletions SassMeister-input-HTML.html
    View file
    Original file line number Diff line number Diff line change
    @@ -16,10 +16,10 @@
    <div class="col">Col 6</div>
    <div class="col">Col 7</div>
    <div class="col">Col 8</div>
    <div class="col">Col 5</div>
    <div class="col">Col 6</div>
    <div class="col">Col 7</div>
    <div class="col">Col 8</div>
    <div class="col">Col 1</div>
    <div class="col">Col 2</div>
    <div class="col">Col 3</div>
    <div class="col">Col 4</div>
    <div class="col">Col 5</div>
    <div class="col">Col 6</div>
    <div class="col">Col 7</div>
    31 changes: 23 additions & 8 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -10,8 +10,9 @@
    @import "singularitygs";
    @import "singularity-extras";
    $gutter-size: 5px;
    $small: min-width 960px;
    $medium: min-width 1200px;
    $small: min-width 760px;
    $medium: min-width 1000px;
    $large: min-width 1200px;


    * {
    @@ -47,24 +48,38 @@ div {
    @include breakpoint($medium) {
    background-color: orange;
    }
    @include breakpoint($large) {
    background-color: aqua;
    }


    &:nth-child(4n+1){
    @include grid-span(6, 1);
    clear: left;
    @include grid-span(24, 1);
    @include breakpoint($small) {@include grid-span(12, 1); clear: left;}
    @include breakpoint($medium) {@include grid-span(8, 1); clear: left;}
    @include breakpoint($large) {@include grid-span(6, 1); clear: left;}
    }
    &:nth-child(4n+2){
    @include grid-span(6, 7);
    @include grid-span(24, 1);
    @include breakpoint($small) {@include grid-span(12, 13); }
    @include breakpoint($medium) {@include grid-span(8, 9); clear: none;}
    @include breakpoint($large) {@include grid-span(6, 7);}
    }
    &:nth-child(4n+3){
    @include grid-span(6, 13);
    @include grid-span(24, 1);
    @include breakpoint($small) {@include grid-span(12, 1); clear: left; }
    @include breakpoint($medium) {@include grid-span(8, 17); clear: none;}
    @include breakpoint($large) {@include grid-span(6, 13);}
    }
    &:nth-child(4n+4){
    @include grid-span(6, 19);
    @include grid-span(24, 1);
    @include breakpoint($small) {@include grid-span(12, 13);}
    @include breakpoint($medium) {@include grid-span(8, 1); clear: left;}
    @include breakpoint($large) {@include grid-span(6, 19);}
    }
    }

    @include add-grid(200px 1 100px);
    @include add-grid(200px 1 150px);
    @include add-gutter(10px);
    @include sgs-change('output', 'calc');

    169 changes: 148 additions & 21 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -29,52 +29,179 @@ div {
    height: 25vh;
    color: white;
    }
    @media (min-width: 960px) {
    @media (min-width: 760px) {
    .col {
    background-color: purple;
    }
    }
    @media (min-width: 1200px) {
    @media (min-width: 1000px) {
    .col {
    background-color: orange;
    }
    }
    @media (min-width: 1200px) {
    .col {
    background-color: aqua;
    }
    }
    .col:nth-child(4n+1) {
    width: 25%;
    float: left;
    margin-right: -100%;
    width: 100%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    padding-right: 5px;
    clear: left;
    padding-right: 0;
    }
    @media (min-width: 760px) {
    .col:nth-child(4n+1) {
    width: 50%;
    float: left;
    margin-right: -100%;
    clear: none;
    padding-right: 5px;
    clear: left;
    }
    }
    @media (min-width: 1000px) {
    .col:nth-child(4n+1) {
    width: 33.33333%;
    float: left;
    margin-right: -100%;
    clear: none;
    padding-right: 5px;
    clear: left;
    }
    }
    @media (min-width: 1200px) {
    .col:nth-child(4n+1) {
    width: 25%;
    float: left;
    margin-right: -100%;
    clear: none;
    padding-right: 5px;
    clear: left;
    }
    }
    .col:nth-child(4n+2) {
    width: 25%;
    float: left;
    margin-right: -100%;
    margin-left: 25%;
    width: 100%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    padding-right: 5px;
    padding-right: 0;
    }
    @media (min-width: 760px) {
    .col:nth-child(4n+2) {
    width: 50%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    padding-right: 0;
    }
    }
    @media (min-width: 1000px) {
    .col:nth-child(4n+2) {
    width: 33.33333%;
    float: left;
    margin-right: -100%;
    margin-left: 33.33333%;
    clear: none;
    padding-right: 5px;
    clear: none;
    }
    }
    @media (min-width: 1200px) {
    .col:nth-child(4n+2) {
    width: 25%;
    float: left;
    margin-right: -100%;
    margin-left: 25%;
    clear: none;
    padding-right: 5px;
    }
    }
    .col:nth-child(4n+3) {
    width: 25%;
    float: left;
    margin-right: -100%;
    margin-left: 50%;
    width: 100%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    padding-right: 5px;
    padding-right: 0;
    }
    @media (min-width: 760px) {
    .col:nth-child(4n+3) {
    width: 50%;
    float: left;
    margin-right: -100%;
    clear: none;
    padding-right: 5px;
    clear: left;
    }
    }
    @media (min-width: 1000px) {
    .col:nth-child(4n+3) {
    width: 33.33333%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    padding-right: 0;
    clear: none;
    }
    }
    @media (min-width: 1200px) {
    .col:nth-child(4n+3) {
    width: 25%;
    float: left;
    margin-right: -100%;
    margin-left: 50%;
    clear: none;
    padding-right: 5px;
    }
    }
    .col:nth-child(4n+4) {
    width: 25%;
    width: 100%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    padding-right: 0;
    }
    @media (min-width: 760px) {
    .col:nth-child(4n+4) {
    width: 50%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    padding-right: 0;
    }
    }
    @media (min-width: 1000px) {
    .col:nth-child(4n+4) {
    width: 33.33333%;
    float: left;
    margin-right: -100%;
    clear: none;
    padding-right: 5px;
    clear: left;
    }
    }
    @media (min-width: 1200px) {
    .col:nth-child(4n+4) {
    width: 25%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    padding-right: 0;
    }
    }

    .main {
    width: -webkit-calc((((100% - (300px + 20px)) / (1))) * 1);
    width: calc((((100% - (300px + 20px)) / (1))) * 1);
    width: -webkit-calc((((100% - (350px + 20px)) / (1))) * 1);
    width: calc((((100% - (350px + 20px)) / (1))) * 1);
    float: left;
    margin-right: -100%;
    margin-left: -webkit-calc((200px + 10px));
    @@ -92,7 +219,7 @@ div {

    .secondary-sidebar {
    background: green;
    width: 100px;
    width: 150px;
    float: right;
    margin-left: 0;
    margin-right: 0;
    8 changes: 4 additions & 4 deletions SassMeister-rendered.html
    View file
    Original file line number Diff line number Diff line change
    @@ -16,10 +16,10 @@
    <div class="col">Col 6</div>
    <div class="col">Col 7</div>
    <div class="col">Col 8</div>
    <div class="col">Col 5</div>
    <div class="col">Col 6</div>
    <div class="col">Col 7</div>
    <div class="col">Col 8</div>
    <div class="col">Col 1</div>
    <div class="col">Col 2</div>
    <div class="col">Col 3</div>
    <div class="col">Col 4</div>
    <div class="col">Col 5</div>
    <div class="col">Col 6</div>
    <div class="col">Col 7</div>
  7. Tony Finlay revised this gist Aug 13, 2015. 2 changed files with 23 additions and 1 deletion.
    14 changes: 13 additions & 1 deletion SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -9,8 +9,11 @@
    @import "breakpoint";
    @import "singularitygs";
    @import "singularity-extras";

    $gutter-size: 5px;
    $small: min-width 960px;
    $medium: min-width 1200px;


    * {
    box-sizing: border-box;
    }
    @@ -38,6 +41,14 @@ div {
    padding-bottom: $gutter-size;
    height: 25vh;
    color: white;
    @include breakpoint($small) {
    background-color: purple;
    }
    @include breakpoint($medium) {
    background-color: orange;
    }


    &:nth-child(4n+1){
    @include grid-span(6, 1);
    clear: left;
    @@ -72,3 +83,4 @@ div {
    @include grid-span(1, 3);
    }


    10 changes: 10 additions & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -29,6 +29,16 @@ div {
    height: 25vh;
    color: white;
    }
    @media (min-width: 960px) {
    .col {
    background-color: purple;
    }
    }
    @media (min-width: 1200px) {
    .col {
    background-color: orange;
    }
    }
    .col:nth-child(4n+1) {
    width: 25%;
    float: left;
  8. Tony Finlay revised this gist Aug 13, 2015. 2 changed files with 7 additions and 6 deletions.
    5 changes: 3 additions & 2 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -10,6 +10,7 @@
    @import "singularitygs";
    @import "singularity-extras";

    $gutter-size: 5px;
    * {
    box-sizing: border-box;
    }
    @@ -29,12 +30,12 @@ div {
    position: relative;
    @include add-grid(24);
    @include grid-span(24, 1);
    @include add-gutter(20px);
    @include add-gutter($gutter-size);
    }
    .col{
    background:black;
    background-clip:content-box;
    padding-bottom: 20px;
    padding-bottom: $gutter-size;
    height: 25vh;
    color: white;
    &:nth-child(4n+1){
    8 changes: 4 additions & 4 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -25,7 +25,7 @@ div {
    .col {
    background: black;
    background-clip: content-box;
    padding-bottom: 20px;
    padding-bottom: 5px;
    height: 25vh;
    color: white;
    }
    @@ -34,7 +34,7 @@ div {
    float: left;
    margin-right: -100%;
    clear: none;
    padding-right: 20px;
    padding-right: 5px;
    clear: left;
    }
    .col:nth-child(4n+2) {
    @@ -43,15 +43,15 @@ div {
    margin-right: -100%;
    margin-left: 25%;
    clear: none;
    padding-right: 20px;
    padding-right: 5px;
    }
    .col:nth-child(4n+3) {
    width: 25%;
    float: left;
    margin-right: -100%;
    margin-left: 50%;
    clear: none;
    padding-right: 20px;
    padding-right: 5px;
    }
    .col:nth-child(4n+4) {
    width: 25%;
  9. Tony Finlay revised this gist Aug 13, 2015. 4 changed files with 22 additions and 6 deletions.
    1 change: 1 addition & 0 deletions SassMeister-input-HTML.html
    View file
    Original file line number Diff line number Diff line change
    @@ -27,5 +27,6 @@
    </div>
    </div>
    <div class="primary-sidebar"></div>
    <div class="secondary-sidebar"></div>
    </body>
    </html>
    7 changes: 6 additions & 1 deletion SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -52,7 +52,7 @@ div {
    }
    }

    @include add-grid(200px 1);
    @include add-grid(200px 1 100px);
    @include add-gutter(10px);
    @include sgs-change('output', 'calc');

    @@ -66,3 +66,8 @@ div {
    @include grid-span(1, 1);
    }

    .secondary-sidebar {
    background: green;
    @include grid-span(1, 3);
    }

    19 changes: 14 additions & 5 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -63,11 +63,12 @@ div {
    }

    .main {
    width: -webkit-calc((((100% - (200px + 10px)) / (1))) * 1);
    width: calc((((100% - (200px + 10px)) / (1))) * 1);
    float: right;
    margin-left: 0;
    margin-right: 0;
    width: -webkit-calc((((100% - (300px + 20px)) / (1))) * 1);
    width: calc((((100% - (300px + 20px)) / (1))) * 1);
    float: left;
    margin-right: -100%;
    margin-left: -webkit-calc((200px + 10px));
    margin-left: calc((200px + 10px));
    background: red;
    }

    @@ -78,3 +79,11 @@ div {
    margin-right: -100%;
    margin-left: 0;
    }

    .secondary-sidebar {
    background: green;
    width: 100px;
    float: right;
    margin-left: 0;
    margin-right: 0;
    }
    1 change: 1 addition & 0 deletions SassMeister-rendered.html
    View file
    Original file line number Diff line number Diff line change
    @@ -27,5 +27,6 @@
    </div>
    </div>
    <div class="primary-sidebar"></div>
    <div class="secondary-sidebar"></div>
    </body>
    </html>
  10. Tony Finlay created this gist Aug 13, 2015.
    31 changes: 31 additions & 0 deletions SassMeister-input-HTML.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,31 @@
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Test</title>
    <link rel="stylesheet" href="css/test.css">
    </head>
    <body>
    <div class="main">
    <div class="inner">
    <div class="col">Col 1</div>
    <div class="col">Col 2</div>
    <div class="col">Col 3</div>
    <div class="col">Col 4</div>
    <div class="col">Col 5</div>
    <div class="col">Col 6</div>
    <div class="col">Col 7</div>
    <div class="col">Col 8</div>
    <div class="col">Col 5</div>
    <div class="col">Col 6</div>
    <div class="col">Col 7</div>
    <div class="col">Col 8</div>
    <div class="col">Col 5</div>
    <div class="col">Col 6</div>
    <div class="col">Col 7</div>
    <div class="col">Col 8</div>
    </div>
    </div>
    <div class="primary-sidebar"></div>
    </body>
    </html>
    68 changes: 68 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,68 @@
    // ----
    // Sass (v3.4.14)
    // Compass (v1.0.3)
    // Breakpoint (v2.5.0)
    // Singularity Extras (v1.0.0)
    // Singularity.gs (v1.6.2)
    // ----

    @import "breakpoint";
    @import "singularitygs";
    @import "singularity-extras";

    * {
    box-sizing: border-box;
    }

    body {
    margin: 0;
    padding: 0;
    }

    div {
    height: 100vh;
    margin: 0;
    padding: 0;
    }

    .inner{
    position: relative;
    @include add-grid(24);
    @include grid-span(24, 1);
    @include add-gutter(20px);
    }
    .col{
    background:black;
    background-clip:content-box;
    padding-bottom: 20px;
    height: 25vh;
    color: white;
    &:nth-child(4n+1){
    @include grid-span(6, 1);
    clear: left;
    }
    &:nth-child(4n+2){
    @include grid-span(6, 7);
    }
    &:nth-child(4n+3){
    @include grid-span(6, 13);
    }
    &:nth-child(4n+4){
    @include grid-span(6, 19);
    }
    }

    @include add-grid(200px 1);
    @include add-gutter(10px);
    @include sgs-change('output', 'calc');

    .main {
    @include grid-span(1, 2);
    background: red;
    }

    .primary-sidebar {
    background: green;
    @include grid-span(1, 1);
    }

    80 changes: 80 additions & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,80 @@
    * {
    box-sizing: border-box;
    }

    body {
    margin: 0;
    padding: 0;
    }

    div {
    height: 100vh;
    margin: 0;
    padding: 0;
    }

    .inner {
    position: relative;
    width: 100%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    }

    .col {
    background: black;
    background-clip: content-box;
    padding-bottom: 20px;
    height: 25vh;
    color: white;
    }
    .col:nth-child(4n+1) {
    width: 25%;
    float: left;
    margin-right: -100%;
    clear: none;
    padding-right: 20px;
    clear: left;
    }
    .col:nth-child(4n+2) {
    width: 25%;
    float: left;
    margin-right: -100%;
    margin-left: 25%;
    clear: none;
    padding-right: 20px;
    }
    .col:nth-child(4n+3) {
    width: 25%;
    float: left;
    margin-right: -100%;
    margin-left: 50%;
    clear: none;
    padding-right: 20px;
    }
    .col:nth-child(4n+4) {
    width: 25%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    padding-right: 0;
    }

    .main {
    width: -webkit-calc((((100% - (200px + 10px)) / (1))) * 1);
    width: calc((((100% - (200px + 10px)) / (1))) * 1);
    float: right;
    margin-left: 0;
    margin-right: 0;
    background: red;
    }

    .primary-sidebar {
    background: green;
    width: 200px;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    }
    31 changes: 31 additions & 0 deletions SassMeister-rendered.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,31 @@
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Test</title>
    <link rel="stylesheet" href="css/test.css">
    </head>
    <body>
    <div class="main">
    <div class="inner">
    <div class="col">Col 1</div>
    <div class="col">Col 2</div>
    <div class="col">Col 3</div>
    <div class="col">Col 4</div>
    <div class="col">Col 5</div>
    <div class="col">Col 6</div>
    <div class="col">Col 7</div>
    <div class="col">Col 8</div>
    <div class="col">Col 5</div>
    <div class="col">Col 6</div>
    <div class="col">Col 7</div>
    <div class="col">Col 8</div>
    <div class="col">Col 5</div>
    <div class="col">Col 6</div>
    <div class="col">Col 7</div>
    <div class="col">Col 8</div>
    </div>
    </div>
    <div class="primary-sidebar"></div>
    </body>
    </html>