<html>
<head>
    <meta charset="utf-8">
    <title>JS Bin</title>
</head>
<body>
    <article>
        <main>
            <header>
                <h1>Example</h1>
            </header>
            <p>Content...</p>
        </main>
        <aside>Aside</aside>
    </article>
</body>
</html>
grid-width ?= 500px
grid-columns ?= 6
grid-margins ?= 1
grid-margin ?= 15px
grid-gutter ?= 10px

grid-fn(columns, margins = 0)
    total-margins = grid-margin * (grid-columns - 1) * grid-margins
    total-gutter = grid-gutter * 2
    grid-column = (grid-width - total-gutter - total-margins) / grid-columns
    return grid-column * columns + margins * grid-margin + grid-margin * max(floor(columns - 1), 0) * grid-margins

grid(property, columns, margins = 0, attributes..., when = null, dim = 'width', breakpoint = null, breakpoint-cols = null, orientation = null)
    if margins == !important
        margins = 0
        attributes = !important

    if breakpoint-cols
            breakpoint = grid-fn(breakpoint-cols) + grid-gutter * 2

    if when == null || breakpoint == null
        {property} grid-fn(columns, margins) attributes
    else
        if when is 'above'
            prefix = 'min'
        else if when is 'below'
            prefix = 'max'
        else
            error('Invalid "above" value')

        if orientation
            @media ({prefix}-{dim}: breakpoint) and (orientation: orientation)
                {property} grid-fn(columns, margins) attributes
                {block}
        else
            @media ({prefix}-{dim}: breakpoint)
                {property} grid-fn(columns, margins) attributes
                {block}

$column-base
    padding 0
    margin-bottom grid-margin
    &:first-child
        margin-left 0
    &:last-child
        margin-right 0

for col in (1..grid-columns)
    $column{col}
        @extends $column-base
        float left
        grid width col
        margin-left (grid-margin / 2)
        margin-right (grid-margin / 2)
        for b-col in (grid-columns..1)
            new-cols = b-col - 1
            if b-col > col
                new-cols = col
            +grid(when:below, breakpoint-cols:b-col, width, new-cols)
                if new-cols <= col
                    margin-left 0
            
$columns-full
    @extends $column{grid-columns}

$columns-half
    @extends $column{grid-columns / 2}

$columns-two-thirds
    @extends $column{grid-columns * 2 / 3}
                
$columns-third
    @extends $column{grid-columns / 3}

// Example usage

article
    @extends $columns-full
    float none
    margin 0 auto !important
    // Clearfix
    zoom 1
    &:before, &:after
        content ''
        display table
    &:after
        clear both
      
main
    @extends $columns-two-thirds
        
aside
    @extends $columns-third
        
// Make-up
        
$shadow-spread = 0px
$shadow-blur = 3px
$shadow-shift = 2px
        
body *
    box-shadow 0px $shadow-shift $shadow-blur $shadow-spread rgba(black, 0.3)
    background #fff
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.