//Zen Grids - http://zengrids.com/ //http://next.zengrids.com/reference/grids/ //http://zengrids.com/help/ //http://next.zengrids.com/help/examples/ //A basic Zen Grid tutorial - http://designshack.net/articles/css/zen-grids-a-responsive-grid-system-built-on-sass/ //----------------------------------------------------------------------------------------------------------------Imports //----------------------------------------------------------------------------------------------------------------Variables $nav_page_padding: 1.5em; //----------------------------------------------------------------------------------------------------------------Base defaults $zen-gutter-width: 4px; #page{ @include zen-grid-container; @include zen-grid-background; } //----------------------------------------------------------------------------------------------------------------Small mobile @include small_mobile{ #page{ $zen-column-count: 4 !global; @include zen-grid-container; @include zen-grid-background; padding-top: $nav_page_padding; } #navigation{ position: absolute; top: 0; nav{ display: none; @include zen-grid-item(4, 1); ul{ li{ font-size: 0.8rem; @include pixel_to_rem(padding-left, $base_font_size, 12); a{ @include pixel_to_rem(padding-bottom, $base_font_size, 2); } } } } #nav-dropdown{ display: inline; float: right; @include pixel_to_rem(margin-right, $base_font_size, 18); @include pixel_to_rem(width, $base_font_size, 96); border-radius: 2px; border: solid 1px $color_default_border; appearance: none; -moz-appearance: none; -webkit-appearance: none; overflow: hidden; background: $color_hex_FFFFFF url("../images/red_down_arrow.png") no-repeat 94% 50%; } } #content{ @include zen-grid-item(4, 1); @include zen-clear(); .table-layout_auto{ //@include zen-grid-item(3, 1); } } .region-sidebar-second{ @include zen-grid-item(4, 1); @include zen-clear(); } #footer{ @include zen-grid-item(4, 1); @include zen-clear(); } } //----------------------------------------------------------------------------------------------------------------Large mobile @include large_mobile{ #page{ $zen-column-count: 8 !global; @include zen-grid-container; @include zen-grid-background; } #footer{ @include zen-grid-item(8, 1); @include zen-clear(); } } //----------------------------------------------------------------------------------------------------------------Small tablet @include small_tablet{ #page{ $zen-column-count: 8 !global; @include zen-grid-container; @include zen-grid-background; } #navigation{ nav{ float: left; ul{ li{ //@include pixel_to_rem(padding-left, $base_font_size, 12); a{ @include pixel_to_rem(padding-bottom, $base_font_size, 2); } } } } } .region-sidebar-second{ @include zen-grid-item(2.5, 0.9, right); } #footer{ @include zen-grid-item(8, 1); @include zen-clear(); } } //----------------------------------------------------------------------------------------------------------------Large tablet @include large_tablet{ #page{ $zen-column-count: 12 !global; @include zen-grid-container; @include zen-grid-background; } .region-sidebar-second{ @include zen-grid-item(4, 0.9, right); } } //----------------------------------------------------------------------------------------------------------------Small desktop @include small_desktop{ #page{ $zen-column-count: 12 !global; @include zen-grid-container; @include zen-grid-background; } #navigation{ nav{ //float: left; ul{ li{ @include pixel_to_rem(padding-left, $base_font_size, 11); a{ @include pixel_to_rem(padding-bottom, $base_font_size, 14); } } } } } .region-sidebar-second{ @include zen-grid-item(4, 0.9, right); } #footer{ @include zen-grid-item(12, 1); @include zen-clear(); } } //----------------------------------------------------------------------------------------------------------------Medium desktop @include medium_desktop{ #page{ $zen-column-count: 16 !global; @include zen-grid-container; @include zen-grid-background; } .region-sidebar-second{ @include zen-grid-item(5.17, 0.9, right); } #footer{ @include zen-grid-item(16, 1); @include zen-clear(); } } //----------------------------------------------------------------------------------------------------------------Large desktop @include large_desktop{ #page{ $zen-column-count: 20 !global; @include zen-grid-container; @include zen-grid-background; } .region-sidebar-second{ @include zen-grid-item(6.35, 0.9, right); } } //----------------------------------------------------------------------------------------------------------------Extra large desktop @include xlarge_desktop{ #page{ $zen-column-count: 20 !global; @include zen-grid-container; @include zen-grid-background; } .region-sidebar-second{ @include zen-grid-item(6.35, 0.9, right); } }