// ------------------------------------------------------------- // Importing grid core and clearfix // -------------------------------- @import '../../externals/sassy-grid/sass/grid-core'; @import '../../externals/sassy-grid/sass/clearfix'; // ------------------------------------------------------------- // Basic grid settings // ------------------- $degredation-selector: '.no_media_queries'; $ie6-selector: '.ie6'; $grid-debug: true; // ------------------------------------------------------------- // Defining the grid // ----------------- $block-width: 250; $number-of-blocks: 5; @include define-grid-settings( $grid-name: 'block-grid', $is-fluid: true, $column-width: ( $block-width / 60 * $number-of-blocks ), $gutter-width: 0, $num-columns: 60, $padding-left: 30, $padding-right: 30, $breakpoints: ( ( query 'screen and (max-width: #{ $block-width / 2 + $block-width * 4 }px)' ), ( query 'screen and (max-width: #{ $block-width / 2 + $block-width * 3 }px)' ), ( query 'screen and (max-width: #{ $block-width / 2 + $block-width * 2 }px)' ), ( query 'screen and (max-width: #{ $block-width / 2 + $block-width * 1 }px)' ) ) ); // ------------------------------------------------------------- // Applying the grid // ----------------- @include apply-grid( $use-grid: 'block-grid', $container-selector: '.grid_container', $row-selector: '.blocks', $row-extend-selectors: '%grid_row', $column-selector-prefix: 'grid_col_', $output-column-styles-for: 60, $break-columns: ( ( breakpoint 1, selector '%quarter', columns 15 ), ( breakpoint 2, selector '%third', columns 20 ), ( breakpoint 3, selector '%half', columns 30 ), ( breakpoint 4, selector '%full', columns 60 ) ) ); // ------------------------------------------------------------- // Basic grid styles // ----------------- .blocks{ .block{ @include span-columns( $columns: 12, $grid-name: 'block-grid' ); @extend %quarter; @extend %third; @extend %half; @extend %full; float: left; .main &{ padding-bottom: 2em; } } } %grid_row{ @include clearfix; } .grid_container{ @include clearfix; margin-left: auto; margin-right: auto; } /* ------------------------------------------------------------- * * Demo styles * ------------------------------------------------------------- */ .block{ margin-bottom: 20px; img{ width: 100%; height: 80px; background: #D8E6FF; } p{ padding: .5em 1em; } .figure{ margin: 0 10px; border: 1px solid #ccc; } }
/* ----------------------------- Clearfix ----------------------------- */ .clearfix, .blocks, .grid_container { zoom: 1; } .clearfix:before, .blocks:before, .grid_container:before, .clearfix:after, .blocks:after, .grid_container:after { content: " "; display: table; } .clearfix:after, .blocks:after, .grid_container:after { clear: both; } /* ----------------------------- Sassy Grid mixin @author: Frej Raahede Nielsen @documentation: http://springload.github.com/sassy-grid/ ----------------------------- */ .grid_container { max-width: 1310.0px; } .ie7 .grid_container, .ie6 .grid_container { /* Locking IE6 and IE7 due to sub-pixel rounding issue */ width: 1310.0px; } .blocks { padding-left: 2.29%; padding-right: 2.29%; } .blocks grid_col_60, .blocks .block { padding-left: 0%; padding-right: 0%; } .blocks grid_col_60:before, .blocks .block:before { /* Debug style only - this rule will not be present for production */ display: block; top: 0; left: 0; font-size: 12px; background-color: rgba(0, 0, 0, 0.4); line-height: 12px; padding: 1px 2px; color: #fff; font-weight: bold; } .blocks .block { width: 20%; } .blocks .block:before { /* Debug style only - this rule will not be present for production */ content: "12 columns"; } .blocks grid_col_60 { width: 100%; } .blocks grid_col_60:before { /* Debug style only - this rule will not be present for production */ content: "60 columns"; } @media screen and (max-width: 1125px) { .blocks .block { width: 25%; } .blocks .block:before { /* Debug style only - this rule will not be present for production */ content: "15 columns"; } } @media screen and (max-width: 875px) { .blocks .block { width: 33.33%; } .blocks .block:before { /* Debug style only - this rule will not be present for production */ content: "20 columns"; } } @media screen and (max-width: 625px) { .blocks .block { width: 50%; } .blocks .block:before { /* Debug style only - this rule will not be present for production */ content: "30 columns"; } } @media screen and (max-width: 375px) { .blocks .block { width: 100%; } .blocks .block:before { /* Debug style only - this rule will not be present for production */ content: "60 columns"; } } /* IE6 fix: fixes double margin on floated elements */ .ie6 .blocks grid_col_60, .blocks .ie6 grid_col_60, .ie6 .blocks .block, .blocks .ie6 .block { display: inline; } .blocks .block { float: left; } .main .blocks .block { padding-bottom: 2em; } .grid_container { margin-left: auto; margin-right: auto; } /* ------------------------------------------------------------- * * Demo styles * ------------------------------------------------------------- */ .block { margin-bottom: 20px; } .block img { width: 100%; height: 80px; background: #D8E6FF; } .block p { padding: .5em 1em; } .block .figure { margin: 0 10px; border: 1px solid #ccc; }
<div class='grid_container'> <div class='blocks'> <div class='block'> <div class='figure'> <img src='../../assets/images/blank.png'> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu tortor sapien, tincidunt molestie urna.</p> </div> </div> <!-- /block --> <div class='block'> <div class='figure'> <img src='../../assets/images/blank.png'> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu tortor sapien, tincidunt molestie urna.</p> </div> </div> <!-- /block --> <div class='block'> <div class='figure'> <img src='../../assets/images/blank.png'> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu tortor sapien, tincidunt molestie urna.</p> </div> </div> <!-- /block --> <div class='block'> <div class='figure'> <img src='../../assets/images/blank.png'> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu tortor sapien, tincidunt molestie urna.</p> </div> </div> <!-- /block --> <div class='block'> <div class='figure'> <img src='../../assets/images/blank.png'> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu tortor sapien, tincidunt molestie urna.</p> </div> </div> <!-- /block --> <div class='block'> <div class='figure'> <img src='../../assets/images/blank.png'> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu tortor sapien, tincidunt molestie urna.</p> </div> </div> <!-- /block --> <div class='block'> <div class='figure'> <img src='../../assets/images/blank.png'> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu tortor sapien, tincidunt molestie urna.</p> </div> </div> <!-- /block --> <div class='block'> <div class='figure'> <img src='../../assets/images/blank.png'> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu tortor sapien, tincidunt molestie urna.</p> </div> </div> <!-- /block --> <div class='block'> <div class='figure'> <img src='../../assets/images/blank.png'> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu tortor sapien, tincidunt molestie urna.</p> </div> </div> <!-- /block --> <div class='block'> <div class='figure'> <img src='../../assets/images/blank.png'> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu tortor sapien, tincidunt molestie urna.</p> </div> </div> <!-- /block --> </div> <!-- /blocks --> </div> <!-- /grid_container -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu tortor sapien, tincidunt molestie urna.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu tortor sapien, tincidunt molestie urna.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu tortor sapien, tincidunt molestie urna.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu tortor sapien, tincidunt molestie urna.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu tortor sapien, tincidunt molestie urna.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu tortor sapien, tincidunt molestie urna.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu tortor sapien, tincidunt molestie urna.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu tortor sapien, tincidunt molestie urna.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu tortor sapien, tincidunt molestie urna.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu tortor sapien, tincidunt molestie urna.