// ------------------------------------------------------------- // 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: false; // ------------------------------------------------------------- // Defining the grid // ----------------- @include define-grid-settings( $grid-name: 'demo-grid', $is-fluid: false, $column-width: 40, $gutter-width: 30, $gutter-property: 'margin', $num-columns: 12, $padding-left: 80, $padding-right: 80 ); // ------------------------------------------------------------- // Applying the grid // ----------------- @include apply-grid( $use-grid: 'demo-grid', $container-selector: '.wrapper', $row-selector: '.grid', $output-column-styles-for: false ); // ------------------------------------------------------------- // Basic grid styles // ----------------- .grid{ @include clearfix; .full{ @extend %grid_col; @include span-columns( $columns: 12, $grid-name: 'demo-grid' ); } .half{ @extend %grid_col; @include span-columns( $columns: 6, $grid-name: 'demo-grid' ); } .third{ @extend %grid_col; @include span-columns( $columns: 4, $grid-name: 'demo-grid' ); } .quarter{ @extend %grid_col; @include span-columns( $columns: 3, $grid-name: 'demo-grid' ); } } %grid_col { float: left; .main &{ padding-bottom: 2em; } } .wrapper{ @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, .wrapper{ height: 100%; } .grid_col_1{ @extend %grid_col; @include span-columns( $columns: 1, $grid-name: 'demo-grid' ); background: none; } }
/* ----------------------------- Clearfix ----------------------------- */ .clearfix, .grid, .wrapper { zoom: 1; } .clearfix:before, .grid:before, .wrapper:before, .clearfix:after, .grid:after, .wrapper:after { content: " "; display: table; } .clearfix:after, .grid:after, .wrapper:after { clear: both; } /* ----------------------------- Sassy Grid mixin @author: Frej Raahede Nielsen @documentation: http://springload.github.com/sassy-grid/ ----------------------------- */ .wrapper { width: 970px; } .grid { padding-left: 6.7%; padding-right: 6.7%; } .grid .full, .grid .half, .grid .third, .grid .quarter, .overlay_grid .grid_col_1 { margin-left: 1.78%; margin-right: 1.78%; } .overlay_grid .grid_col_1 { width: 4.76%; } .grid .quarter { width: 21.42%; } .grid .third { width: 29.76%; } .grid .half { width: 46.42%; } .grid .full { width: 96.42%; } /* IE6 fix: fixes double margin on floated elements */ .ie6 .grid .full, .grid .ie6 .full, .ie6 .grid .half, .grid .ie6 .half, .ie6 .grid .third, .grid .ie6 .third, .ie6 .grid .quarter, .grid .ie6 .quarter, .ie6 .overlay_grid .grid_col_1, .overlay_grid .ie6 .grid_col_1 { display: inline; } .grid .full, .grid .half, .grid .third, .grid .quarter, .overlay_grid .grid_col_1 { float: left; } .main .grid .full, .grid .main .full, .main .grid .half, .grid .main .half, .main .grid .third, .grid .main .third, .main .grid .quarter, .grid .main .quarter, .main .overlay_grid .grid_col_1, .overlay_grid .main .grid_col_1 { padding-bottom: 2em; } .wrapper { margin-left: auto; margin-right: auto; } /* ------------------------------------------------------------- * * Demo styles * ------------------------------------------------------------- */ .grid .full, .grid .half, .grid .third, .grid .quarter, .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, .overlay_grid .wrapper { height: 100%; } .overlay_grid .grid_col_1 { background: none; }
<div class='wrapper'> <div class='grid'> <div class='full'> full </div> <!-- /full --> <div class='half'> half </div> <!-- /half --> <div class='half'> half </div> <!-- /half --> <div class='third'> third </div> <!-- /third --> <div class='third'> third </div> <!-- /third --> <div class='third'> third </div> <!-- /third --> <div class='quarter'> quarter </div> <!-- /quarter --> <div class='quarter'> quarter </div> <!-- /quarter --> <div class='quarter'> quarter </div> <!-- /quarter --> <div class='quarter'> quarter </div> <!-- /quarter --> </div> <!-- /grid --> </div> <!-- /wrapper -->