The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Design Giving back… "Belting grids"

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #162923

    Evening all…

    I thought I’d share with y’all the grid setup I’m using. It’s inspired by many different frameworks, namely zurb, inuit, and trousers.css, the latter is fictional!

    anywho… so Sass it is… (scss rather but who knows how to say that!)…

    The stuff here just controls widths.. just addfloat: left; or display: inline-block (with inline space removed)

    First… the width thinger:

    @mixin g-width($columns: false, $math: fraction) {
            // initialize variable
            $col: null;
            @if $_base-columns == null {
                $_base-columns: 12;
            // use a fraction of $_base-columns
            @if $math == fraction {
                $col: $_base-columns / $columns;
            // use the column behaviour where you want 10 columns to equal 10 out of 12.
            @if $math == column or $math == columns {
                $col: $columns;
            // use the gridCalc function to return a percentage
            $width: fn-gridCalc($col,$_base-columns);
            // asign the width value
            width: $width;

    lovely stuff… we can return two types of grid widths… a column count, or a fraction of the total width. again, lovely stuff.

    The zurb framework has classes you can use for each breakpoint, which is nice but you could end up with a string of 3,4,5 so on classes just controlling a width value (essentially). anyhow. So I want the power of a load of classes, but without all the classes.

    Well I’ll settle for a big ole crazy class that does a lot.

    $_breakpoints:          320 480 640 780 960 1100;   
            @each $item in $_breakpoints {
                @include custom-media($min: #{$item}px) {
                    @for $i from 1 through $_base-columns {
                        [class*="bp-#{$item}-#{$i}"] {
                            @include g-width($i, columns);

    and then… sod it… why not… crazy class of the week I present…

    <div class="columns bp-320-6__bp-480-2__bp-640-1__bp-780-2__bp-960-4__bp-1100-2">....</div>


    come on… that’s aweome!

    extreme example… but… come one!!

    anyhow… this is going to result in a shed ton of classes you’re never going to use. But I’m sure in a build process all that could be removed…

    right.. more wine…

    good night

    (p.s. said wine has been consumed, so i’m gonna hit publish, and give a good ole edit)! yeah – edit done… i think that’s okay.. less not forget said wine though… happy valet parking day


Viewing 1 post (of 1 total)
  • The forum ‘Design’ is closed to new topics and replies.