Core
This is the heart and soul of BaseWeb. At a bear minimum, the Settings and Core files are required for BaseWeb to function. Core files do not output styles directly but are a collection of global functions and mixins.
Functions
This is where we define custom functions for our framework. These functions are global and don't apply specifically to a single element/block component.
-
map-extend
jQuery-style extend function for when `map-merge()` is not enough. Use when you need to merge more than two mixins and/or need our merge to be recursive.
@function map-extend( $map, $maps..., $deep ) // @param $map // @type first map // @param $maps // @type list of maps // @param $deep // @type boolean // @desc Whether or not to enable recursive mode. // @return merged map value
Example Usage
$grid-configuration-default: ( 'columns': 12, 'layouts': ( 'small': 800px, 'medium': 1000px, 'large': 1200px, ), ); $grid-configuration-custom: ( 'layouts': ( 'large': 1300px, 'huge': 1500px ), ); $grid-configuration-user: ( 'direction': 'ltr', 'columns': 16, 'layouts': ( 'large': 1300px, 'huge': 1500px ), ); // Not deep $grid-configuration: map-extend($grid-configuration-default, $grid-configuration-custom, $grid-configuration-user); // -> ("columns": 16, "layouts": (("large": 1300px, "huge": 1500px)), "direction": "ltr") // Deep $grid-configuration: map-extend($grid-configuration-default, $grid-configuration-custom, $grid-configuration-user, true); // -> ("columns": 16, "layouts": (("small": 800px, "medium": 1000px, "large": 1300px, "huge": 1500px)), "direction": "ltr")
-
map-fetch
An easy way to fetch a value in a multi-level map. Works much like
map-get()
except that you pass multiple keys as the second variable argument to go down multiple levels in the nested map.@function map-fetch( $map, $keys... ) // @param $map // @type map // @param $keys // @type list // @return map value
Example Usage
$grid-configuration: ( 'columns': 12, 'layouts': ( 'small': 800px, 'medium': 1000px, 'large': 1200px, ), ); // Without `map-fetch` $medium: map-get(map-get($grid-configuration, 'layouts'), 'medium'); // With `map-fetch` $medium: map-fetch($grid-configuration, 'layouts', 'medium');
-
map-set
An easy to to set a deep value in a multi-level map. This by passing in a map, value and keys to the original map value you want changed.
@function map-set( $map, $value, $keys... ) // @param $map // @type map // @param $value // @type value // @param $keys // @type list // @return updated map value
Example Usage
$grid-configuration: ( 'columns': 12, 'layouts': ( 'small': 800px, 'medium': 1000px, 'large': 1200px, ), ); // Without `map-set` $grid-configuration: map-merge($grid-configuration, map-merge(map-get($grid-configuration, 'layouts'), ('large': 1300px))); // With `map-set` $medium: map-set($grid-configuration, 1300px, 'layouts' 'medium');
-
strip-units
Strips the unit from a value. For example, if you pass it 12px, it will strip off the px unit and return the number 12.
@function strip-units( $val ) // @param $val // @type unit (pixel, em, percent, number) // @return number
-
px-to-em
Converts a pixel value to ems. By default it'll use the base font size, but can be passed a custom base font size.
@function px-to-em( $px, $base ) // @param $px // @type unit (pixel, number) // @param $base-font-size // @type unit (pixel, number) // @default $base-font-size // @return unit (em)
-
px-to-rem
Converts a pixel value to rems. Rem units use the base font size set on the
<html>
element which BaseWeb uses$base-font-size
to set.@function px-to-rem( $px ) // @param $px // @type unit (pixel, number) // @return unit (rem)
-
em-to-px
Converts an em value to pixels. By default it'll use the base font size, but can be passed a custom base font size.
@function em-to-px( $em, $base ) // @param $px // @type unit (em, number) // @param $base-font-size // @type unit (pixel, number) // @default $base-font-size // @return unit (px)
Mixins
Global mixins for our framework. These mixins are global and don't apply specifically to a single element/block component.
-
clearfix
Allows you to clear an element that contains floats.
@mixin clearfix()
Example Usage
// SCSS .wrapper { @include clearfix(); } // CSS Output .wrapper:after { content: ''; display: table; clear: both; }
-
remove-clearfix
Removes the clearfix styles from an element. This is typically used when a clearfix is inherited on an element and you'd like it removed.
@mixin remove-clearfix()
-
float-modifiers
Adds the float modifier classes to an element.
@mixin float-modifiers( $left, $right ) // @param $left // @type class name // @default $class-float-left // @param $right // @type class name // @default $class-float-right
Example Usage
// SCSS .button-group-wrapper .button-group { float: left; @include float-modifiers(); } // CSS Output .button-group-wrapper .button-group { float: left; } .button-group-wrapper .button-group.float-left { float: left; } .button-group-wrapper .button-group.float-right { float: right; }
-
size
Shorthand for adding width and height dimensions to an element. If you only pass in a width, the height will be set to equal the width and create a square. If either the width or height are unit-less, it defaults to pixels.
@mixin size( $height, $width ) // @param $width // @type unit (number, pixel, percentage) // @param $height // @type unit (number, pixel, percentage, false) // @default false -> $width
Example Usage
// SCSS .my-special-box { @include size(100px, 50px); ... } // CSS Output .my-special-box { width: 100px; height: 50px; ... }
-
vertical-center
Centers an element vertically within it's parent. Parent element may need to have transform-style set to `preserve-3d` to prevent half pixel bluring.
@mixin vertical-center()
Example Usage
// SCSS .vertical-center { @include vertical-center(); } // CSS Output .vertical-center { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
-
scrollable
Makes touch devices use momentum-based scrolling for the given element.
@mixin scrollable()
-
box-sizing
The box-sizing CSS property is used to alter the default CSS box model used to calculate widths and heights of elements.
@mixin box-sizing( $box-sizing ) // @param $box-sizing // @type box-sizing value (content-box, padding-box, border-box, inherit) // @default $box-sizing
-
box-shadow
The box-shadow CSS property describes one or more shadow effects as a comma-separated list.
@mixin box-shadow( $shadow... ) // @param $shadow // @type box-shadow value ([horizontal offset] [vertical offset] [blur radius] [spread radius] [color]) // @default $box-shadow
-
border-radius
Define border radius using mixin shorthand and global defaults.
@mixin border-radius( $radius ) // @param $radius // @type unit (pixel, percent)
Example Usage
// SCSS .box-1 { @include border-radius(); } .box-2 { @include border-radius-left(20px); } .box-3 { @include border-radius-top(50%); } // CSS Output .box-1 { border-radius: 3px; } .box-2 { border-top-left-radius: 20px; border-bottom-left-radius: 20px; } .box-3 { border-top-left-radius: 50%; border-top-right-radius: 50%; }
Available Mixins
border-radius()
border-radius-top()
border-radius-top-left()
border-radius-top-right()
border-radius-bottom()
border-radius-bottom-left()
border-radius-bottom-right()
border-radius-left()
border-radius-left-top()
border-radius-left-bottom()
border-radius-right()
border-radius-right-top()
border-radius-right-bottom()
For the list above of available mixins, I'm passing in a border-radius of
50%
so the effect is more obvious. -
transform
The CSS transform property lets you modify the coordinate space of the CSS visual formatting model.
@mixin transform( $function... ) // @param $function // @type transform-function ([matrix] [perspective] [rotate] [scale] [skew] [translate])
Example Usage
// SCSS .demo-transform-skew { ... @include transform(skew(30deg, 10deg)); } // CSS Output .demo-transform-skew { ... -webkit-transform: skew(30deg, 10deg); -ms-transform: skew(30deg, 10deg); transform: skew(30deg, 10deg); }
For a full list of transform functions, checkout the CSS documentation at MDN.
-
transform-style
The transform-style CSS property determines if the children of the element are positioned in the 3D-space or are flattened in the plane of the element.
@mixin transform-style( $style... ) // @param $style // @type transform style (flat, preserve-3d, inherit)
-
rotate
Adds transform rotate styles using a degree and the transform mixin.
@mixin rotate( $deg ) // @dependency mixin transform() // @param $deg // @type unit (degree)
Example Usage
// SCSS .demo-rotate { @include rotate(45deg); } // CSS Output .demo-rotate { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
-
transition
The CSS transition property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay. It allows to define the transition between two states of an element. Different states may be defined using pseudo-classes like :hover or :active or dynamically set using JavaScript.
@mixin transition( $transition... ) // @param $transition // @type transition value ([transition-property] [transition-duration] [transition-timing-function] [transition-delay]) // @default $transition
Example Usage
// SCSS .demo-transition { background-color: $blue-green-darker; @include transition(); } .demo-transition:hover { background-color: $red-violet; } // CSS Output .demo-transition { background-color: #3da96d; -webkit-transition: all 0.25s linear; transition: all 0.25s linear; } .demo-transition:hover { background-color: #d25992; }
Available Mixins
You can also set transition properties separately using the transition property, duration, timing-function and delay mixins.
@mixin transition-property( $transition-property ) // @param $transition-property // @type property name // @default $transition-property @mixin transition-duration( $transition-duration ) // @param $transition-duration // @type time value (seconds, milliseconds) // @default $transition-duration @mixin transition-timing-function( $transition-timing-function ) // @param $transition-timing-function // @type timing function (linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end) // @default $transition-timing-function @mixin transition-delay( $transition-delay ) // @param $transition-delay // @type time value (seconds, milliseconds) // @default $transition-delay
-
keyframes
The
@keyframes
CSS at-rule lets you control the intermediate steps in a CSS animation sequence by establishing keyframes (or waypoints) along the animation sequence that must be reached during the animation.@mixin keyframes( $name ) // @param $name // @type animation name // @param @content (passed in brackets) // @type style block
Example Usage
// SCSS @include keyframes('example') { 0% { background-color: $red; } 100% { background-color: $blue; } } // CSS Output @-webkit-keyframes example { 0% { background-color: #de5151; } 100% { background-color: #2ab0ea; } } @keyframes example { 0% { background-color: #de5151; } 100% { background-color: #2ab0ea; } }
-
animation
The animation CSS property is a shorthand property for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode and animation-play-state.
@mixin animation( $animation... ) // @param $animation // @type animation value ([animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state])
Example Usage
// SCSS .demo-animation { ... @include animation(example 10s linear 1s infinite normal); } // CSS Output .demo-animation { ... -webkit-animation: example 10s linear 1s infinite normal; animation: example 10s linear 1s infinite normal; }
Available Mixins
You can also set animation properties separately using the animation name, duration, timing-function, delay, iteration, direction, fill mode and play stay mixins.
@mixin animation-name( $name... ) // @param $name // @type animation name @mixin animation-duration( $duration... ) // @param $duration // @type time value (seconds, milliseconds) @mixin animation-timing-function( $timing-function... ) // @param $timing-function // @type timing function (linear, ease, ease-in, ease-out, ease-in-out) @mixin animation-delay( $delay... ) // @param $delay // @type time value (seconds, milliseconds) @mixin animation-iteration-count( $iteration-count... ) // @param $iteration-count // @type unit (number, infinite) @mixin animation-direction( $direction... ) // @param $direction // @type direction (normal, reverse, alternate, alternate-reverse) @mixin animation-fill-mode( $fill-mode... ) // @param $fill-mode // @type fill mode (none, forwards, backwards, both, initial, inherit) @mixin animation-play-stay( $play-stay... ) // @param $play-state // @type play state (running, paused)
-
linear-gradient
Creates an image which represents a linear gradient of colors.
@mixin linear-gradient( $gradient... ) // @param $gradient // @type gradient ([side-or-corner] [angle] [color-stop])
Example Usage
// SCSS .demo-linear-gradient { @include linear-gradient(left, $green, $blue, $violet); } // CSS Output .demo-linear-gradient { background-image: -webkit-linear-gradient(left, #8ecb25, #2ab0ea, #bc6bd3); background-image: -moz-linear-gradient(left, #8ecb25, #2ab0ea, #bc6bd3); background-image: -ms-linear-gradient(left, #8ecb25, #2ab0ea, #bc6bd3); background-image: linear-gradient(left, #8ecb25, #2ab0ea, #bc6bd3); }
-
radial-gradient
Creates an image which represents a gradient of colors radiating from an origin, the center of the gradient.
@mixin radial-gradient( $gradient... ) // @param $gradient // @type gradient ([position] [shape] [size] [color-stop] [color-stop] [extent-keyword])
Example Usage
// SCSS .demo-radial-gradient { @include radial-gradient(circle, $violet, $violet-darker); } // CSS Output .demo-radial-gradient { background-image: -webkit-radial-gradient(circle, #bc6bd3, #aa44c7); background-image: -moz-radial-gradient(circle, #bc6bd3, #aa44c7); background-image: -ms-radial-gradient(circle, #bc6bd3, #aa44c7); background-image: radial-gradient(circle, #bc6bd3, #aa44c7); }
-
font-weight
Output the font weight using the weight key to output the number weight.
@mixin font-weight( $weight ) // @param $weight // @type font-weight keyword (thing, hairline, light, regular, medium, semi-bold, bold, extra-bold, black)
Example Usage
// SCSS h1 { @include font-weight('light'); } //CSS h1 { font-weight: 300; }
-
text-truncate
Truncates text with an ellipsis. Element this is applied to must be block or inline-block.
@mixin text-truncate() // @param $display // @type display property (block, inline-block) // @default block
Example Usage
// SCSS .demo-text-truncate { @include text-truncate(); } // CSS Output .demo-text-truncate { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
This is some text that will get truncated -
reverse-index
Sets the index of a set of elements to stack in reverse order.
@mixin reverse-index( $items ) // @param $items // @type number // @desc The number of elements in the set.
Example Usage
ul.example-reverse-index li { @include reverse-index( 3 ); }
ul.example-reverse-index li:nth-child(1) { z-index: 1; } ul.example-reverse-index li:nth-child(2) { z-index: 2; } ul.example-reverse-index li:nth-child(3) { z-index: 3; }
-
text-hide
Hides text from an element. This is most commonly used as an image replacement technique for hiding text in an element to reveal a background image.
@mixin text-hide()
Example Usage
// SCSS .demo-logo-image { ... @include text-hide(); } // CSS Output .demo-logo-image { ... font-size: 0; line-height: 0; text-indent: 100%; white-space: nowrap; overflow: hidden; }
<div class="demo-logo-image">Demo Logo Image Replace</div>
Demo Logo Image Replace -
make-text-mask
Lets you easily create text masks using background-clip.
@mixin make-text-mask( $bg-image, $text-color ) // @param $big-image // @type background-image property // @default null // @param $text-color // @type transparent color // @default transparent // @param @content // @type style block // @desc use this to set custom background styles (such as gradients).
Example Usage
// SCSS // Applied to a wrapping text element .demo-text-mask { @include make-text-mask(url('../img/demo-mask.jpg'), rgba($black, 0.25)); // Style text, or whatever... p { ... } } // CSS Output .demo-text-mask { -webkit-text-fill-color: rgba(0, 0, 0, 0.25); -webkit-background-clip: text; background-clip: text; background-image: url('../img/demo-mask.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover; }
<div class="demo-text-mask"> <p>Demo Text Mask</p> </div>
Demo Text Mask
-
make-triangle
Uses the
0*0
element with borders trick to draw arrows. The base styles for creating CSS triangles must be applied either through mixin, class or extend.@mixin make-triangle-base()
@mixin make-triangle( $size, $color, $direction ) // @param $size // @type unit (pixel, em, rem) // @param $color // @type color // @param $direction // @type string ('up', 'right', 'down', 'left', 'up-right', 'up-left', 'down-right', 'down-left') // @desc The direction that the triangle will point.
Example Usage
// SCSS %triangle { @include make-triangle-base(); } .example-triangle-1 { @extend %triangle; @include make-triangle( 14px, $blue-darker, 'left' ); } .example-triangle-2 { @extend %triangle; @include make-triangle( 14px, $blue-violet-darker, 'down' ); } .example-triangle-3 { @extend %triangle; @include make-triangle( 14px, $violet-darker, 'right' ); } // CSS Output .example-triangle-1, .example-triangle-2, .example-triangle-3 { content: ''; display: inline-block; width: 0; height: 0; border: 0 none; border-style: solid; border-color: transparent; } .example-triangle-1 { border-width: 14px 14px 14px 0; border-right-color: #1495cd; } .example-triangle-2 { border-width: 14px 14px 0 14px; border-top-color: #4469da; } .example-triangle-3 { border-width: 14px 0 14px 14px; border-left-color: #aa44c7; }
Media Queries
The core framework mixins that deal with media queries. These break down to three primary mixins for setting minimum width, maximum width and retina display mixins.
-
media-min
A media query mixin that deifnes a query using min-width. You can pass in the key to the
$teakpoints()
or$breakpoints()
maps to access that value, or pass a value to create your media query.@mixin media-min( $point ) { @content } // @param $point // @type map key | unit (pixel) // @param @content (passed in brackets) // @type style block
Example Usage
// SCSS .something { width: 100%; } @include media-min('medium') { .something { width: 300px; } } // CSS Output .something { width: 100%; } @media (min-width: 760px) { .something { width: 300px; } }
-
media-max
A media query mixin that deifnes a query using max-width. You can pass in the key to the
$teakpoints()
or$breakpoints()
maps to access that value, or pass a value to create your media query.This mixin will shave a pixel off your breakpoint value so that it never overlaps with a breakpoint that might be used in the
media-min
mixin except when a value is passed directly.@mixin media-max( $point ) { @content } // @param $point // @type map key | unit (pixel) // @param @content (passed in brackets) // @type style block
Example Usage
// SCSS .something { width: 300px; } @include media-max('medium') { .something { width: 100%; } } // CSS Output .something { width: 300px; } @media (max-width: 759px) { .something { width: 100%; } }
-
media-retina
Media query mixin can be used for setting styles specifically to retina screens. Used when setting higher resolution background images.
@mixin media-retina() { @content } // @param @content (passed in brackets) // @type style block
Example Usage
// SCSS .logo { background-image: src('logo.png'); } @include media-retina { .logo { background-image: src('logo-2x.png'); background-size: 100px 50px; } } // CSS Output .logo { background-image: src('logo.png'); } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .logo { background-image: src('logo-2x.png'); background-size: 100px 50px; } }
Grid System
BaseWeb is built with a very flexible grid system. Out of the box, you can use the default classes and settings to have a basic twelve column flexible grid. The basic things to know when using the base grid system is the markup structure.
<div class="container">
<div class="row">
<div class="col col-4"><p>...</p></div>
<div class="col col-4"><p>...</p></div>
<div class="col col-4"><p>...</p></div>
</div>
<div class="row">
<div class="col col-6"><p>...</p></div>
<div class="col col-6"><p>...</p></div>
</div>
<div class="row">
<div class="col col-12"><p>...</p></div>
</div>
</div>
.col-4
.col-4
.col-4
.col-6
.col-6
.col-12
The class based grid system is generated using: build-grid-system()
. By default it's going to generate all the classes for the container, row and columns based on the grid variables. You can also pass in a map to override any default grid map settings based on different media breakpoints.
You can also set the grid type by passing a non-map parameter build-grid-system(mobile)
which will make columns staked at 100% width.
@include build-grid-system(mobile);
@include media-min('medium') {
@include build-grid-system(('total-width': 740px));
}
@include media-min('large') {
@include build-grid-system(('total-width': 960px));
}
Semantic Grids
The BaseWeb grid system also supports the use of semantic grids. That means you can define a grid without having to use grid classes and instead use mixins to define grid elements directly in your stylesheets.
.wrapper {
@include make-container();
.content {
@include make-row();
.aside {
@include make-column(4);
}
.article {
@include make-column(8);
}
}
}
There are also a set of functions that you can use for setting column and spacing widths. These can be used along with make-column-base()
to define multiple columns and set the widths separately to reduce our CSS output.
.wrapper {
@include make-container();
.content {
@include make-row();
.aside,
.article {
@include make-column-base();
}
.aside {
width: column-width(4);
}
.article {
width: column-width(8);
}
}
}
Prefix and Suffix
You can also create spacing on columns using the prefix and suffix modifiers. These classes are used by adding the prefix and suffix class with the appropriate amount of column spacing you want to be added before or after a column.
<div class="container">
<div class="row">
<div class="col col-4 suffix-3">...</div>
<div class="col col-3 prefix-2">...</div>
</div>
<div class="row">
<div class="col col-5 prefix-4 suffix-3">...</div>
</div>
</div>
The semantic grid system equivalent would use the add-prefix()
and add-suffix
mixins.
.aside {
@include make-column(4);
@include add-suffix(3);
}
.article {
@include make-column(3);
@include add-prefix(2);
}
.section {
@include make-column(5);
@include add-prefix(4);
@include add-suffix(3);
}
.suffix-3
.prefix-2
.prefix-4 .suffix-3
Nested Columns
You can created nested columns in your grid system by adding a new row element inside a column. It's important to note that the first element inside a row should always be a column. Otherwise, you'll need to either manually remove the gutter margin or use the .col-no-gutter
modifier class.
When using a fluid grid (percent based) the sum of columns in a row must equal the total column value $grid('columns')
. But when using a fixed grid (pixel based), the sum must equal the column span of it's parent column element. If you want to mix fixed and fluid grids between breakpoints, it's recommended to use the semantic grid method.
<div class="container">
<div class="row">
<div class="col col-6">
...
<div class="row">
<div class="col col-6">...</div>
<div class="col col-6">...</div>
</div>
</div>
<div class="col col-6">
...
<div class="row">
<div class="col col-4">...</div>
<div class="col col-4">...</div>
<div class="col col-4">...</div>
</div>
</div>
</div>
</div>
.col-6
.col-6
.col-6
.col-6
.col-4
.col-4
.col-4
By default, our grid system uses inner-gutter-width (padding) instead of gutter-width (margins). So we're able to keep absolute gutters with a fluid grid for nested elements. But if you used margin gutters with a fluid grid, gutters would need to be percentage based.
Mini Grid System
The Mini Grid System works independently of the core Grid System. It's output using the build-mini-grid-system()
mixin and takes the $mini-grid
map as a parameter to customize the classes it outputs.
.has-#
The .has-#
class is applied to the parent element where #
represents the number of children it wraps. The parent receives a clearfix and all children are given equal widths to span their container.
<div class="has-3">
...
</div>
<div class="has-6">
...
</div>
<div class="has-9">
...
</div>
.is-1-of-#
The .is-1-of-#
class is applied as a child element to represent a fraction of its parent container. Just keep in mind that .is-1-of-#
elements get floated so its parent should receive a clearfix..
<div>
<span class="is-1-of-3">1/3</span>
...
</div>
<div>
<span class="is-1-of-3">1/3</span>
<span class="is-1-of-9">1/9</span>
<span class="is-1-of-9">1/9</span>
<span class="is-1-of-9">1/9</span>
<span class="is-1-of-3">1/3</span>
</div>
<div>
<span class="is-1-of-5">1/5</span>
...
</div>
Grid Functions
These functions are used to calculate specific grid maths such as the width a set number of columns should span. These are used within grid mixins and are often used when defining semantic grid systems.
-
column-width
A function that returns the width of a column span.
@function column-width( $index, $options: () ) // @param $index // @type integer // @desc The number of column span you want returned. // @param $options // @type map // @default $grid map // @return unit (pixel, percentage)
-
spacing-width
A function that returns the spacing of a column span.
@function spacing-width( $index, $options: () ) // @param $index // @type integer // @desc The number of column spacing you want returned. // @param $options // @type map // @default $grid map // @return unit (pixel, percentage)
Grid Mixins
These mixins are used to output styles that define a grid system's components. Such as grid containers, rows and columns as well as modifier classes like prefix and suffix spacing. They are also used for outputting the class based grid system.
-
make-container
Outputs all the styles needed to make an element a grid container.
@mixin make-container( $options: () ) // @param $options // @type map // @default $grid map
-
make-row
Outputs all the styles needed to make an element a grid row.
@mixin make-row( $options: () ) // @param $options // @type map // @default $grid map
-
make-column-base
Creates the base styles for a column but excludes setting the width.
@mixin make-column-base( $options: () ) // @param $options // @type map // @default $grid map
-
make-column
Creates all the styles for a column and sets its width.
@mixin make-column( $index, $options: () ) // @param $index // @type integer // @desc The number of column span you want set. // @param $options // @type map // @default $grid map
-
add-prefix
Creates the base styles for a column and sets its width.
@mixin add-prefix( $index, $options: () ) // @param $index // @type integer // @desc The number of column prefix spacing you want set. // @param $options // @type map // @default $grid map
-
add-suffix
Creates the base styles for a spacing suffix.
@mixin add-suffix( $index, $options: () ) // @param $index // @type integer // @desc The number of column suffix spacing you want set. // @param $options // @type map // @default $grid map
-
build-grid-system
Outputs all the classes and styles for the class based grid system. You can either pass in a map that overrides the grid map defaults, or a single grid type parameter to trigger normal or mobile grid systems.
@mixin build-grid-system( $grid-type | $options: () ) // @param $grid-type | $options // @type string | map // @default $grid map
Example Usage
The most basic use of
build-grid-system()
is to output mobile styles and within a media query output our standard grid system. This is present in yourcustom/_custom.scss
file by default.// Output our mobile grid system classes. @include build-grid-system(mobile); // Media query for styles that target tablet sized devices and above. @include media-min('medium') { // Output our standard grid system using all our default settings. @include build-grid-system(); }
Classes Output
These are all the default classes that become available when generating your grid. Keep in mind that class names can be changed using the class name variables in our
$grid
map.<div class="container"> <div class="row"> <div class="col col-4"> ... </div> <div class="col col-8"> ... </div> </div> <div class="row"> <div class="col col-4 suffix-2"> ... </div> <div class="col col-4 prefix-2"> ... </div> </div> </div>
.col-4
.col-8
.col-4
.col-4
You can disabled the output of prefix and suffix classes by setting their class name variables to
none
in$grid
map or passing it directly to the mixin manually. -
build-mini-grid-system
Outputs all the classes for a mini-grid system using the
$mini-grid
map to set default parameters. You can also pass a custom map to customize the output or create multiple mini grid systems.@mixin build-grid-system( $options: () ) // @param $options // @type map // @default $mini-grid map
Example Usage
The mini grid system is called in your
custom/_custom.scss
file by default.@include build-mini-grid-system();
<!-- .has-# Classes --> <div class="has-4"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> </div> <!-- .is-1-of-# Classes --> <div> <span class="is-1-of-3">1/3</span> <span class="is-1-of-3">1/3</span> <span class="is-1-of-3">1/3</span> </div>
1 2 3 41/3 1/3 1/3There may be modules who's features are dependent on a mini-grid system being output (such as the button groups module). Make sure that you're outputting one if the modules you use have a mini-grid as a dependency.