Grow your CSS skills. Land your dream job.

Giving back… "Belting grids"

  • # February 14, 2014 at 3:15 pm

    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>
    

    ha!

    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

    codepen:

    http://codepen.io/magicspon/pen/wpqaB

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".