Skip to content

Instantly share code, notes, and snippets.

@danscotton
Created March 22, 2013 17:09
Show Gist options
  • Save danscotton/5223023 to your computer and use it in GitHub Desktop.
Save danscotton/5223023 to your computer and use it in GitHub Desktop.
// ------------------------------------------------------------
@mixin group-1 { @media (max-width: 399px) { @content }}
@mixin group-2 { @media (min-width: 400px) { @content }}
@mixin group-3 { @media (min-width: 600px) { @content }}
@mixin group-4 { @media (min-width: 1008px) { @content }}
// ------------------------------------------------------------
.fixed-margins {
font-size: 0;
@include group-1 { padding-left: 4px; padding-right: 4px; }
@include group-2 { padding-left: 12px; padding-right: 12px; }
@include group-3 { padding-left: 24px; padding-right: 24px; }
@include group-4 { padding-left: 8px; padding-right: 8px; }
}
.fixed-width {
@include group-4 { margin-left: auto; margin-right: auto; width: 992px; }
}
.half-gutters {
@include group-1 { padding-left: 4px; padding-right: 4px; }
@include group-2 { padding-left: 4px; padding-right: 4px; }
@include group-3 { padding-left: 8px; padding-right: 8px; }
@include group-4 { padding-left: 8px; padding-right: 8px; }
}
.box-sizing {
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
// ------------------------------------------------------------
.one-whole { width: (100% / 12 * 12 / 1); @extend .half-gutters; @extend .box-sizing }
.one-half { width: (100% / 12 * 12 / 2); @extend .half-gutters; @extend .box-sizing }
.one-third { width: (100% / 12 * 12 / 3); @extend .half-gutters; @extend .box-sizing }
.one-quarter { width: (100% / 12 * 12 / 4); @extend .half-gutters; @extend .box-sizing }
.one-sixth { width: (100% / 12 * 12 / 6); @extend .half-gutters; @extend .box-sizing }
.one-twelfth { width: (100% / 12 * 12 / 12); @extend .half-gutters; @extend .box-sizing }
.two-thirds { width: (100% / 12 * 12 / 3 * 2); }
.three-quarters { width: (100% / 12 * 12 / 4 * 3); }
.five-sixths { width: (100% / 12 * 12 / 6 * 5); }
.five-twelfths { width: (100% / 12 * 12 / 12 * 5); }
.seven-twelfths { width: (100% / 12 * 12 / 12 * 7); }
.eleven-twelfths { width: (100% / 12 * 12 / 12 * 11); }
// ------------------------------------------------------------
.group-1--one-whole { .group-1 & { @extend .one-whole }}
.group-1--one-half { .group-1 & { @extend .one-half }}
.group-1--one-third { .group-1 & { @extend .one-third }}
.group-1--one-quarter { .group-1 & { @extend .one-quarter }}
.group-1--one-sixth { .group-1 & { @extend .one-sixth }}
.group-1--one-twelfth { .group-1 & { @extend .one-twelfth }}
// ------------------------------------------------------------
.group-2--one-whole { .group-2 & { @extend .one-whole }}
.group-2--one-half { .group-2 & { @extend .one-half }}
.group-2--one-third { .group-2 & { @extend .one-third }}
.group-2--one-quarter { .group-2 & { @extend .one-quarter }}
.group-2--one-sixth { .group-2 & { @extend .one-sixth }}
.group-2--one-twelfth { .group-2 & { @extend .one-twelfth }}
// ------------------------------------------------------------
.group-3--one-whole { .group-3 & { @extend .one-whole }}
.group-3--one-half { .group-3 & { @extend .one-half }}
.group-3--one-third { .group-3 & { @extend .one-third }}
.group-3--two-thirds { .group-3 & { @extend .two-thirds }}
.group-3--one-quarter { .group-3 & { @extend .one-quarter }}
.group-3--one-sixth { .group-3 & { @extend .one-sixth }}
.group-3--one-twelfth { .group-3 & { @extend .one-twelfth }}
// ------------------------------------------------------------
.group-4--one-whole { .group-4 & { @extend .one-whole }}
.group-4--one-half { .group-4 & { @extend .one-half }}
.group-4--one-third { .group-4 & { @extend .one-third }}
.group-4--one-quarter { .group-4 & { @extend .one-quarter }}
.group-4--one-sixth { .group-4 & { @extend .one-sixth }}
.group-4--one-twelfth { .group-4 & { @extend .one-twelfth }}
// ------------------------------------------------------------
.container--example-a,
.container--example-b,
.container--example-c {
.unit {
font-size: 14px;
line-height: 18px;
}
}
.container--example-a {
@extend .fixed-margins;
margin-bottom: 16px;
background-color: #ededed;
overflow: hidden;
.collection { @extend .fixed-width }
.unit {
padding-top: 8px;
padding-bottom: 8px;
@extend .group-1--one-whole;
@extend .group-2--one-whole;
@extend .group-3--one-third;
@extend .group-4--one-quarter;
}
}
.container--example-b {
@extend .fixed-margins;
@extend .fixed-width;
margin-bottom: 16px;
overflow: hidden;
.unit {
@extend .group-1--one-whole;
@extend .group-2--one-whole;
@extend .group-3--one-third;
@extend .group-4--one-quarter;
}
}
.container--example-c {
@extend .fixed-margins;
@extend .fixed-width;
margin-bottom: 16px;
overflow: hidden;
.unit {
@extend .group-1--one-whole;
@extend .group-2--one-whole;
@extend .group-3--one-third;
@extend .group-4--one-quarter;
div {
padding: 8px;
background-color: #ededed;
}
}
}
@danscotton
Copy link
Author

MARKUP:

<div class="container container--example-a">
    <div class="collection">
        <div class="unit">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.</div>
        <div class="unit">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.</div>
        <div class="unit">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.</div>
    </div>
</div>

<div class="container container--example-b">
    <div class="unit"><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.</div></div>
    <div class="unit"><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.</div></div>
    <div class="unit"><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.</div></div>
</div>

<div class="container container--example-c">
    <div class="unit"><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.</div></div>
    <div class="unit"><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.</div></div>
    <div class="unit"><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.</div></div>
</div>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment