layout
variables
smart-grid-gutter
$smart-grid-gutter: 16px !default;Description
% should not be used here as Firefox doesn't like it
Used by
- [function]
grid-width - [function]
grid-width
smart-grid-columns
$smart-grid-columns: 12 !default;Used by
- [function]
grid-width - [mixin]
smart-grid
smart-grid-sizes
$smart-grid-sizes: 1, 2, 3, 4, 6 !default;smart-grid-breakpoints
$smart-grid-breakpoints: (
'small': 400px,
'medium': 600px,
'large': 900px,
) !default;smart-grid-generate-css
$smart-grid-generate-css: true !default;smart-grid-selector
$smart-grid-selector: '.smart-grid' !default;functions
grid-width
@function grid-width($columns) { ... }Description
Get width of grid item calc() is returned b/c you can use px gutters and % width.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$columns | How many columns from | | — none |
Returns
Number —a calc() value to use in width
Example
.class {
width: grid-width(4); // becomes `width: calc((50% + 1%) - 2%);`
}Requires
- [variable]
smart-grid-columns - [variable]
smart-grid-gutter - [variable]
smart-grid-gutter
Used by
- [mixin]
smart-grid
mixins
smart-grid
@mixin smart-grid($row-items: 4, $gutter: 1rem) { ... }Description
Smart Grid Include in a parent element to layout all children
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$row-items | How many items per row | | 4 |
$gutter | Space between Items | | 1rem |
Requires
- [function]
grid-width - [variable]
smart-grid-columns
General
mixins
arrow-btn
@mixin arrow-btn($direction, $height, $border-color, $bg, $arrow-length, $border-width, $base) { ... }Description
Arrow Button
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$direction | 'left' or 'right' | | — none |
$height | Height of the Button | | — none |
$border-color | — none | | — none |
$bg | Background color of button | | — none |
$arrow-length | how far out the button the arrow sticks | | — none |
$border-width | — none | | — none |
$base | set to false to easily override just $bg and $border-color for hover or active states | | — none |
Requires
center
@mixin center($horizonally-center, $vertically-center, $absolute-positioning, $undo) { ... }Description
Center. Center an element vertically or horizontally in its container, and optionally horizontally. Option to undo.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$horizonally-center | center horizontally | | — none |
$vertically-center | center vertically | | — none |
$absolute-positioning | position absolutely, rather than relatively | | — none |
$undo | undo vertical centering on an element it was previously applied to | | — none |
full-width
@mixin full-width($undo: false) { ... }Description
Full Width, even outside container
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$undo | — none | Bool | false |
Links
google-font-import
@mixin google-font-import($variants, $family) { ... }Description
Import Google Font
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$variants | Font Weight and Style variants (i.e. | List | — none |
$family | Font Family with spaces as | String | — none |
Example
@include google-font-import($variants: ("300", "400", "400i", "700"), $family: "Source+Sans+Pro");
// would output `@import url("//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700");`Output
@import() statement
Requires
- [function]
to-string
quantity
@mixin quantity($query: exactly, $i: 1, $element: *) { ... }Description
Quantity Queries Query for a number of elements (not selectors).
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$query | Options: exactly, more-than, less-than | String | exactly |
$i | How many elements | Number | 1 |
$element | What HTML element | String | * |
Content
This mixin allows extra content to be passed (through the @content directive).
Example
.exactly-5 {
@include quantity(exactly, 5, li) {
color: red;
}
}
.more-than-5 {
@include quantity(more-than, 5, li) {
color: red;
}
}
.less-than-5 {
@include quantity(less-than, 5, li) {
color: red;
}Links
triangle
@mixin triangle($color: black, $direction: right, $length: 0.66em, $width: $length * 1.515151515, $base) { ... }Description
Triangle
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$color | — none | | black |
$direction | — none | | right |
$length | — none | | 0.66em |
$width | — none | | $length * 1.515151515 |
$base | pass | | — none |
Used by
functions
to-string
@function to-string($list, $glue: '', $is-nested: false) { ... }Description
List to String (like JS's join) Converts Sass list to string using $glue separator.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$list | — none | List | — none |
$glue | What join list items with (ex | String | '' |
$is-nested | — none | Bool | false |
Returns
StringUsed by
- [mixin]
google-font-import