Permalink
Fetching contributors…
Cannot retrieve contributors at this time
294 lines (264 sloc) 7.99 KB
// Set file variable
$filename: 'scss/core/_grid.scss';
////////////////////////////////////////////////////////////////////////////////
// @Grid Map
////////////////////////////////////////////////////////////////////////////////
$grid: (
'output' : true,
'output-mobile' : true,
'class-container' : 'container',
'class-row' : 'row',
'class-column' : 'col',
'class-column-left' : 'col-left',
'class-column-right' : 'col-right',
'class-prefix' : 'prefix',
'class-suffix' : 'suffix',
'type' : 'normal',
'total-width' : 100%,
'gutter-width' : 0,
'inner-gutter-width' : 1.5rem,
'columns' : 12,
'column-float' : left,
'container-margin' : 0 auto,
'container-padding' : 0 1.5rem,
'container-min-width' : none,
'container-max-width' : 75rem,
) !default;
////////////////////////////////////////////////////////////////////////////////
// @Grid Functions
////////////////////////////////////////////////////////////////////////////////
// Column Width
// A function that returns the width of a column span.
// @param $index
// @type integer
// @desc The number of column span you want returned.
// @param $options
// @type map
// @default $grid map
// @return unit (pixel, percentage)
@function column-width($index, $options: ()) {
$o: map-merge($grid, $options);
$column-width: (map-get($o, 'total-width') - (map-get($o, 'gutter-width') * (map-get($o, 'columns') - 1))) / map-get($o, 'columns');
@return ($column-width * $index) + (map-get($o, 'gutter-width') * ($index - 1));
}
// Spacing Width
// A function that returns the spacing of a column span.
// @param $index
// @type integer
// @desc The number of column spacing you want returned.
// @param $options
// @type map
// @default $grid map
// @return unit (pixel, percentage)
@function spacing-width($index, $options: ()) {
$o: map-merge($grid, $options);
$column-width : column-width( 1, $o );
@return ($column-width * $index) + (map-get($o, 'gutter-width') * $index);
}
////////////////////////////////////////////////////////////////////////////////
// @Semantic Grid Mixins
////////////////////////////////////////////////////////////////////////////////
// Make Container
// Outputs all the styles needed to make an element a grid container.
// @param $options
// @type map
// @default $grid map
@mixin make-container($options: ()) {
$o: map-merge($grid, $options);
box-sizing: border-box;
@if (map-get($o, 'type') == 'mobile') {
width: 100%;
@if (map-get($o, 'container-min-width')) {
min-width: none;
}
@if (map-get($o, 'container-max-width')) {
max-width: none;
}
margin: 0;
padding: map-get($o, 'container-padding');
} @else {
width: map-get($o, 'total-width');
@if (map-get($o, 'container-min-width')) {
min-width: map-get($o, 'container-min-width');
}
@if (map-get($o, 'container-max-width')) {
max-width: map-get($o, 'container-max-width');
}
margin: map-get($o, 'container-margin');
padding: map-get($o, 'container-padding');
@include add-clearfix();
}
}
// Make Row
// Outputs all the styles needed to make an element a grid row.
// @param $options
// @type map
// @default $grid map
@mixin make-row($options: ()) {
$o: map-merge($grid, $options);
box-sizing: border-box;
@if (map-get($o, 'type') == 'mobile') {
width: 100%;
@if (map-get($o, 'inner-gutter-width') != 0) {
margin-left: 0;
margin-right: 0;
}
} @else {
width: auto;
@if (map-get($o, 'inner-gutter-width') != 0) {
margin-left: -(map-get($o, 'inner-gutter-width') / 2);
margin-right: -(map-get($o, 'inner-gutter-width') / 2);
}
@include add-clearfix();
}
}
// Make Base Column
// Creates the base styles for a column but excludes setting the width.
// @param $options
// @type map
// @default $grid map
@mixin make-column-base($options: ()) {
$o: map-merge($grid, $options);
box-sizing: border-box;
@if (map-get($o, 'type') == 'mobile') {
width: 100%;
float: none;
@if (map-get($o, 'gutter-width') != 0) {
margin-left: 0;
}
@if (map-get($o, 'inner-gutter-width') != 0) {
padding-left: 0;
padding-right: 0;
}
} @else {
min-height: 1px;
float: map-get($o, 'column-float');
&.#{map-get($o, 'class-column-left')} {
float: left;
}
&.#{map-get($o, 'class-column-right')} {
float: right;
}
@if (map-get($o, 'gutter-width') != 0) {
margin-left: map-get($o, 'gutter-width');
&:first-child {
margin-left: 0;
}
}
@if (map-get($o, 'inner-gutter-width') != 0) {
padding-left: (map-get($o, 'inner-gutter-width') / 2);
padding-right: (map-get($o, 'inner-gutter-width') / 2);
}
}
}
// Make Column
// Creates all the styles for a column and sets its width.
// @param $index
// @type integer
// @desc The number of column span you want set.
// @param $options
// @type map
// @default $grid map
@mixin make-column($index, $options: ()) {
$o: map-merge($grid, $options);
@include make-column-base($o);
width: column-width($index, $o);
}
// Add Prefix
// Creates the base styles for a column and sets its width.
// @param $index
// @type integer
// @desc The number of column prefix spacing you want set.
// @param $options
// @type map
// @default $grid map
@mixin add-prefix($index, $options: ()) {
$o: map-merge($grid, $options);
@if (map-get($o, 'gutter-width') != 0) {
margin-left: (spacing-width($index, $o) + map-get($o, 'gutter-width'));
&:first-child {
margin-left: spacing-width($index, $o);
}
} @else {
margin-left: spacing-width($index, $o);
}
}
// Add Suffix
// Creates the base styles for a spacing suffix.
// @param $index
// @type integer
// @desc The number of column suffix spacing you want set.
// @param $options
// @type map
// @default $grid map
@mixin add-suffix($index, $options: ()) {
$o: map-merge($grid, $options);
margin-right: spacing-width($index, $o);
}
////////////////////////////////////////////////////////////////////////////////
// @Build Grid Mixins
////////////////////////////////////////////////////////////////////////////////
// Build Grid System
// Outputs all the classes and styles for the class based grid system.
// @param $grid-type | $options
// @type string | map
// @default $grid map
@mixin build-grid-system($options: 'normal') {
$o: null;
// Check if options is map or not
// If it's a map, merge it with our global grid map
// Else set options as our grid type
@if (type-of($options) == map) {
$o: map-merge($grid, $options);
} @else {
$o: map-merge( $grid, ('type': $options));
}
// Output our container class
.#{map-get($o, 'class-container')} {
@include make-container($o);
}
// Output our row class
.#{map-get($o, 'class-row')} {
@include make-row($o);
}
// Output our column class
.#{map-get($o, 'class-column')} {
@include make-column-base($o);
}
// Check that this is not a mobile grid type
@if (map-get($o, 'type') != 'mobile') {
@if (map-get($o, 'gutter-width') != 0) {
.#{map-get($o, 'class-column')}-no-gutter {
margin-left: 0;
}
}
@if (map-get($o, 'inner-gutter-width') != 0) {
.#{map-get($o, 'class-column')}-no-inner-gutter {
padding-left: 0;
padding-right: 0;
}
}
// Output our column classes
@for $i from 1 through map-get($o, 'columns') {
.#{map-get($o, 'class-column')}-#{$i} {
width: column-width( $i, $o );
}
}
// Output our prefix classes if a class name is set
@if (map-get($o, 'class-prefix')) {
@for $i from 1 through (map-get($o, 'columns') - 1) {
.#{map-get($o, 'class-prefix')}-#{$i} {
@include add-prefix( $i, $o );
}
}
}
// Output our suffix classes if a class name is set
@if (map-get($o, 'class-suffix')) {
@for $i from 1 through (map-get($o, 'columns') - 1) {
.#{map-get($o, 'class-suffix')}-#{$i} {
@include add-suffix( $i, $o );
}
}
}
} // End if not mobile
}