// ------------------------------------------------------------- // 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 breakpoints // -------------------- $media-breakpoint-mobile: 640; $media-breakpoint-skinny: 860; $media-query-mobile: 'screen and (max-width: #{ $media-breakpoint-mobile }px)'; $media-query-skinny: 'screen and (max-width: #{ $media-breakpoint-skinny }px)'; $media-query-print: 'print, projection'; // ------------------------------------------------------------- // Defining the grid // ----------------- @include define-grid-settings( $grid-name: 'demo-grid', $is-fluid: true, $column-width: 40, $gutter-width: 30, $gutter-property: 'margin', $num-columns: 12, $padding-left: 80, $padding-right: 80, $breakpoints: ( ( query $media-query-skinny, max-width 700px, padding-left 20px, padding-right 20px ), ( query $media-query-mobile, max-width 100%, padding-left 1em, padding-right 1em ), ( query $media-query-print, max-width 100%, padding-left 0, padding-right 0 ) ) ); // ------------------------------------------------------------- // Applying the grid // ----------------- @include apply-grid( $use-grid: 'demo-grid', $container-selector: '.grid_container', $row-selector: '.grid_base_12', $row-extend-selectors: '%grid_row', $column-selector-prefix: '.grid_col_', $column-extend-selectors: '%grid_col', $output-column-styles-for: 1 3 4 6 12, $break-columns: ( ( breakpoint 1, selector '.span_6_skinny', columns 6 ), ( breakpoint 1, selector '.span_12_skinny', columns 12 ), ( breakpoint 1, selector '.span_4_skinny', columns 4 ), ( breakpoint 2, selector '.span_6_mobile', columns 6 ), ( breakpoint 2, selector '.span_12_mobile', columns 12 ), ( breakpoint 3, selector '.span_6_print', columns 6 ) ) ); // ------------------------------------------------------------- // Basic grid styles // ----------------- %grid_row{ @include clearfix; } %grid_col { float: left; .main &{ padding-bottom: 2em; } } .grid_container{ @include clearfix; margin-left: auto; margin-right: auto; } /* ------------------------------------------------------------- * * Demo styles * ------------------------------------------------------------- */ %grid_col{ background: #D8E6FF; text-align: center; line-height: 40px; min-height: 40px; margin-bottom: 15px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; } .overlay_grid{ .grid_base_12{ height: 100%; } .grid_col_1{ @extend %grid_col; @include span-columns( $columns: 1, $grid-name: 'demo-grid' ); background: none; } }
/* ----------------------------- Clearfix ----------------------------- */ .clearfix, .grid_base_12, .grid_container { zoom: 1; } .clearfix:before, .grid_base_12:before, .grid_container:before, .clearfix:after, .grid_base_12:after, .grid_container:after { content: " "; display: table; } .clearfix:after, .grid_base_12:after, .grid_container:after { clear: both; } /* ----------------------------- Sassy Grid mixin @author: Frej Raahede Nielsen @documentation: http://springload.github.com/sassy-grid/ ----------------------------- */ .grid_container { max-width: 970px; } .ie7 .grid_container, .ie6 .grid_container { /* Locking IE6 and IE7 due to sub-pixel rounding issue */ width: 970px; } .grid_base_12 { padding-left: 6.7%; padding-right: 6.7%; } .grid_base_12 .grid_col_1, .grid_base_12 .grid_col_3, .grid_base_12 .grid_col_4, .grid_base_12 .grid_col_6, .grid_base_12 .grid_col_12, .overlay_grid .grid_col_1 { margin-left: 1.78%; margin-right: 1.78%; } .grid_base_12 .grid_col_1:before, .grid_base_12 .grid_col_3:before, .grid_base_12 .grid_col_4:before, .grid_base_12 .grid_col_6:before, .grid_base_12 .grid_col_12:before, .overlay_grid .grid_col_1: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; } .grid_base_12 .grid_col_1, .overlay_grid .grid_col_1 { width: 4.76%; } .grid_base_12 .grid_col_1:before, .overlay_grid .grid_col_1:before { /* Debug style only - this rule will not be present for production */ content: "1 columns"; } .grid_base_12 .grid_col_3 { width: 21.42%; } .grid_base_12 .grid_col_3:before { /* Debug style only - this rule will not be present for production */ content: "3 columns"; } .grid_base_12 .grid_col_4 { width: 29.76%; } .grid_base_12 .grid_col_4:before { /* Debug style only - this rule will not be present for production */ content: "4 columns"; } .grid_base_12 .grid_col_6 { width: 46.42%; } .grid_base_12 .grid_col_6:before { /* Debug style only - this rule will not be present for production */ content: "6 columns"; } .grid_base_12 .grid_col_12 { width: 96.42%; } .grid_base_12 .grid_col_12:before { /* Debug style only - this rule will not be present for production */ content: "12 columns"; } @media screen and (max-width: 860px) { .grid_container { max-width: 700px; } .grid_base_12 { padding-left: 20px; padding-right: 20px; } .grid_base_12 .span_4_skinny { width: 29.76%; } .grid_base_12 .span_4_skinny:before { /* Debug style only - this rule will not be present for production */ content: "4 columns"; } .grid_base_12 .span_6_skinny { width: 46.42%; } .grid_base_12 .span_6_skinny:before { /* Debug style only - this rule will not be present for production */ content: "6 columns"; } .grid_base_12 .span_12_skinny { width: 96.42%; } .grid_base_12 .span_12_skinny:before { /* Debug style only - this rule will not be present for production */ content: "12 columns"; } } @media screen and (max-width: 640px) { .grid_container { max-width: 100%; } .grid_base_12 { padding-left: 1em; padding-right: 1em; } .grid_base_12 .span_6_mobile { width: 46.42%; } .grid_base_12 .span_6_mobile:before { /* Debug style only - this rule will not be present for production */ content: "6 columns"; } .grid_base_12 .span_12_mobile { width: 96.42%; } .grid_base_12 .span_12_mobile:before { /* Debug style only - this rule will not be present for production */ content: "12 columns"; } } @media print, projection { .grid_container { max-width: 100%; } .grid_base_12 { padding-left: 0; padding-right: 0; } .grid_base_12 .span_6_print { width: 46.42%; } .grid_base_12 .span_6_print:before { /* Debug style only - this rule will not be present for production */ content: "6 columns"; } } /* IE6 fix: fixes double margin on floated elements */ .ie6 .grid_base_12 .grid_col_1, .grid_base_12 .ie6 .grid_col_1, .ie6 .grid_base_12 .grid_col_3, .grid_base_12 .ie6 .grid_col_3, .ie6 .grid_base_12 .grid_col_4, .grid_base_12 .ie6 .grid_col_4, .ie6 .grid_base_12 .grid_col_6, .grid_base_12 .ie6 .grid_col_6, .ie6 .grid_base_12 .grid_col_12, .grid_base_12 .ie6 .grid_col_12, .ie6 .overlay_grid .grid_col_1, .overlay_grid .ie6 .grid_col_1 { display: inline; } .grid_base_12 .grid_col_1, .grid_base_12 .grid_col_3, .grid_base_12 .grid_col_4, .grid_base_12 .grid_col_6, .grid_base_12 .grid_col_12, .overlay_grid .grid_col_1 { float: left; } .main .grid_base_12 .grid_col_1, .grid_base_12 .main .grid_col_1, .main .grid_base_12 .grid_col_3, .grid_base_12 .main .grid_col_3, .main .grid_base_12 .grid_col_4, .grid_base_12 .main .grid_col_4, .main .grid_base_12 .grid_col_6, .grid_base_12 .main .grid_col_6, .main .grid_base_12 .grid_col_12, .grid_base_12 .main .grid_col_12, .main .overlay_grid .grid_col_1, .overlay_grid .main .grid_col_1 { padding-bottom: 2em; } .grid_container { margin-left: auto; margin-right: auto; } /* ------------------------------------------------------------- * * Demo styles * ------------------------------------------------------------- */ .grid_base_12 .grid_col_1, .grid_base_12 .grid_col_3, .grid_base_12 .grid_col_4, .grid_base_12 .grid_col_6, .grid_base_12 .grid_col_12, .overlay_grid .grid_col_1 { background: #D8E6FF; text-align: center; line-height: 40px; min-height: 40px; margin-bottom: 15px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; } .overlay_grid .grid_base_12 { height: 100%; } .overlay_grid .grid_col_1 { background: none; }
<div class='grid_container'> <div class='grid_base_12'> <div class='grid_col_6 span_12_skinny'> 6 </div> <!-- /grid_col_6 span_12_skinny --> <div class='grid_col_6 span_12_skinny'> 6 </div> <!-- /grid_col_6 span_12_skinny --> <div class='grid_col_4 span_6_skinny span_12_mobile'> 4 </div> <!-- /grid_col_4 span_6_skinny span_12_mobile --> <div class='grid_col_4 span_6_skinny span_12_mobile'> 4 </div> <!-- /grid_col_4 span_6_skinny span_12_mobile --> <div class='grid_col_4 span_6_skinny span_12_mobile'> 4 </div> <!-- /grid_col_4 span_6_skinny span_12_mobile --> <div class='grid_col_3 span_6_skinny span_6_mobile'> 3 </div> <!-- /grid_col_3 span_6_skinny span_6_mobile --> <div class='grid_col_3 span_4_skinny span_6_mobile'> 3 </div> <!-- /grid_col_3 span_4_skinny span_6_mobile --> <div class='grid_col_3 span_4_skinny span_6_mobile'> 3 </div> <!-- /grid_col_3 span_4_skinny span_6_mobile --> <div class='grid_col_3 span_4_skinny span_6_mobile'> 3 </div> <!-- /grid_col_3 span_4_skinny span_6_mobile --> </div> <!-- /grid_base_12 --> </div> <!-- /grid_container -->