// Responsive Grid System // // ============================================================================= // Table of Contents // ============================================================================= // // IMPORTS...........................Sass Imports // VARIABLES.........................Grid Specific Variables // GRID ELEMENTS.....................Base grid classes and sass placeholders // GRID WIDTHS.......................Widths for grids and elements // PUSH & PULL.......................Push & Pull classes // // ----------------------------------------------------------------------------- // :: IMPORTS // ----------------------------------------------------------------------------- @import "skeletor/globals/mixins/media_query" @import "skeletor/globals/mixins/grid_widths", "skeletor/globals/mixins/grid_push", "skeletor/globals/mixins/grid_pull" @import "skeletor/globals/css3/prefixer", "skeletor/globals/css3/box_sizing" @if $grid // ----------------------------------------------------------------------------- // :: Variables // ----------------------------------------------------------------------------- // Set class type to either CSS classes `.` || sass placeholder classes `%` $class-type: unquote(".") @if $use-silent-classes $class-type: unquote("%") // ----------------------------------------------------------------------------- // :: GRID ELEMENTS // ----------------------------------------------------------------------------- // - 1. Set font-size 0 for Inline-Block White Space Issue. As per: http://css-tricks.com/fighting-the-space-between-inline-block-elements/ // - 1.5. Alternative fix for Inline-Block White Space Issue (buggy?) // - 2. Allow the grid system to be used on lists. // - 3. Remove margin from grid // - 4. Apply a negative `margin-left` to negate the columns' gutters. #{$class-type}grid // [1] font-size: 0 // [1.5] //letter-spacing: -0.31em // [2] list-style: none // [3] margin-bottom: 0 // [4] margin-left: -$base-line-height // [1.5] //word-spacing: -0.43em // Very infrequently occuring grid wrappers as children of grid wrappers. // #{$class-type}grid > #{$class-type}grid { margin-left: 0; } // - 1. Cause columns to stack side-by-side. // - 2. Set font-size from reset above. // - 2.5. Set letter and word spacing if reset above. // - 3. Space columns apart. // - 4. Align columns to the tops of each other. // - 5. Full-width (mobile first) unless told to behave otherwise. // - 6. Force box-sizing. Required to combine fluid widths and fixed gutters. #{$class-type}grid__item // [1] display: inline-block // [2] font-size: $base-font-size // [2.5] //letter-spacing: normal // [3] padding-left: $base-line-height // [4] vertical-align: top // [5] width: 100% // [2.5] //word-spacing: normal @if $global-border-box == false // [6] +box-sizing(border-box) // - Gutterless grids have all the properties of regular grids, minus any spacing. // - Extends `.grid`. #{$class-type}grid--full @extend #{$class-type}grid margin-left: 0 > #{$class-type}grid__item padding-left: 0 // ----------------------------------------------------------------------------- // :: GRID WIDTHS // ----------------------------------------------------------------------------- // Generate regular, width classes +skeletor-grid-widths($class-type) // ----------------------------------------------------------------------------- // :: PUSH & PULL // ----------------------------------------------------------------------------- @if $push @if $use-silent-classes == false [class*="push--"] position: relative +skeletor-grid-push($class-type) @if $pull @if $use-silent-classes == false [class*="pull--"] position: relative +skeletor-grid-pull($class-type) // ----------------------------------------------------------------------------- // :: RESPONSIVE GRIDS, PUSH, PULL // ----------------------------------------------------------------------------- @if $responsive @each $breakpoint in $breakpoints +skeletor-media-query($breakpoint) +skeletor-grid-widths($class-type, '#{$breakpoint}-') @if $push +skeletor-grid-push($class-type, '#{$breakpoint}-') @if $pull +skeletor-grid-pull($class-type, '#{$breakpoint}-')