Herow, the saving time grid in Sass
API
mixins
Herow-column
@mixin Herow-column($column-span: 1, $column-count: 12, $gutter-width: 1em, $column-flow: 'inline', $column-offset: 0) { ... }Description
Include the styles of a column
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$column-span |
The span length of the column |
Integer |
1
|
$column-count |
The number of columns of the grid |
Integer |
12
|
$gutter-width |
The gutter size of the grid |
Length |
1em
|
$column-flow |
The flow of the column |
'inline', 'left', 'right' |
'inline'
|
$column-offset |
The span length for the left offset of the column |
Integer |
0
|
Requires
Author
Thomas ZILLIOX
Herow-row
@mixin Herow-row($gutter-width: 1em, $external-gutter: false) { ... }Description
Include the styles of a row
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$gutter-width |
The size of the grid gutter |
Length |
1em
|
$external-gutter |
Set if an external padding is displayed on the grid |
Boolean |
false
|
Requires
Used by
Author
Thomas ZILLIOX
Herow-class-generator
@mixin Herow-class-generator($column-count: 12, $gutter-width: 1em, $external-gutter: false, $class-prefix: '', $class-suffix: '') { ... }Description
Generate atomic classes to use Herow grid directly in CSS
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$column-count |
The number of columns of the grid |
Integer |
12
|
$gutter-width |
The gutter size of the grid |
Length |
1em
|
$external-gutter |
Set if an external padding is displayed on the grid |
Boolean |
false
|
$class-prefix |
The prefix of the generated class names |
String |
''
|
$class-suffix |
The suffix of the generated class names |
String |
''
|
Requires
-
Herow-grid-row -
Herow-grid-column -
Herow-column-width -
Herow-column-flow -
Herow-column-flow -
Herow-column-flow -
Herow-column-offset
Author
Thomas ZILLIOX
Herow-grid-column
@mixin Herow-grid-column($column-span: 1, $grid: layout) { ... }Description
Include the styles of a grid column
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$column-span |
The span length of the column |
Integer |
1
|
$grid |
A grid map or the name of a defined grid |
Map, String |
layout
|
Requires
Used by
Author
Thomas ZILLIOX
Herow-grid-row
@mixin Herow-grid-row($grid: layout) { ... }Description
Include the styles of a grid row
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$grid |
A grid map or the name of a defined grid |
Map, String |
layout
|
Requires
Used by
Author
Thomas ZILLIOX
Configuration
functions
Herow-add-grid
@function Herow-add-grid($grid-name: layout, $column-count: 12, $gutter-width: 1em, $external-gutter: false, $column-count-map: ()) { ... }Description
Add a grid
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$grid-name |
The name of the grid |
String |
layout
|
$column-count |
The default number of columns of the grid |
Integer |
12
|
$gutter-width |
The size of the grid gutter |
Length |
1em
|
$external-gutter |
Set if an external padding is displayed on the grid |
Boolean |
false
|
$column-count-map |
The number of columns of the grid at different breakpoints |
Map |
()
|
Requires
Author
Thomas ZILLIOX
Herow-add-grid-breakpoint
@function Herow-add-grid-breakpoint($grid-name: layout, $breakpoint-map: ()) { ... }Description
Add a breakpoint to a predefined grid
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$grid-name |
The name of the grid |
String |
layout
|
$breakpoint-map |
The number of columns of the grid at different breakpoints |
Map |
()
|
Requires
Author
Thomas ZILLIOX
variables
Herow-debug
$Herow-debug: false !default;Description
Set if the debug the output contains debug traces
Type
Boolean
Used by
Author
Thomas ZILLIOX
Herow-default-column-count
$Herow-default-column-count: 12 !default;Description
Defines the default number of column.
Type
Integer
Author
Thomas ZILLIOX
Herow-default-column-flow
$Herow-default-column-flow: 'inline' !default;Description
Defines the default column flow.
Type
'inline', 'left', 'right'
Author
Thomas ZILLIOX
Herow-default-gutter-width
$Herow-default-gutter-width: 1em !default;Description
Defines the default gutter.
Type
Length
Author
Thomas ZILLIOX
Herow-default-external-gutter
$Herow-default-external-gutter: false !default;Description
Defines the default gutter.
Type
Length
Author
Thomas ZILLIOX
Herow-generator-class-map
$Herow-generator-class-map: (
row: 'row',
col: 'col',
col-span: 'col-',
col-flow-left: 'col-left',
col-flow-right: 'col-right',
col-flow-inline: 'col-inline',
col-offset-left: 'col-offset-'
) !default;Description
Defines the default generated class names.
Type
Map
Author
Thomas ZILLIOX
Herow-grid-map
$Herow-grid-map: () !default;Description
Defines the grid properties.
Type
Map
Used by
Author
Thomas ZILLIOX
Herow-default-grid-name
$Herow-default-grid-name: layout !default;Description
Defines the default grid name.
Type
String
Author
Thomas ZILLIOX
Herow-default-grid-state
$Herow-default-grid-state: 'layout:default' !default;Description
Defines the default grid state.
Type
String
Author
Thomas ZILLIOX
Atomic API
mixins
Herow-column-width
@mixin Herow-column-width($column-span: 1, $column-count: 12) { ... }Description
Change the size of the column
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$column-span |
The span length of the column |
Integer |
1
|
$column-count |
The number of columns of the grid |
Integer |
12
|
Requires
Used by
Herow-columnHerow-class-generatorHerow-grid-column-widthHerow-grid-responsive-columnHerow-grid-column-width-breakpoint
Author
Thomas ZILLIOX
Herow-column-gutter
@mixin Herow-column-gutter($gutter-width: 1em) { ... }Description
Change the gutter of the column
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$gutter-width |
The gutter size of the grid |
Length |
1em
|
Used by
Author
Thomas ZILLIOX
Herow-column-flow
@mixin Herow-column-flow($column-flow: 'inline') { ... }Description
Change the flow of the column
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$column-flow |
The flow of the column |
'inline', 'left', 'right' |
'inline'
|
Used by
Herow-columnHerow-class-generatorHerow-class-generatorHerow-class-generatorHerow-grid-column-flowHerow-grid-columnHerow-grid-column-flow-breakpoint
Author
Thomas ZILLIOX
Herow-column-offset
@mixin Herow-column-offset($column-offset: 1, $column-count: 12) { ... }Description
Change the left offset of the column
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$column-offset |
The span length for the left offset of the column |
Integer |
1
|
$column-count |
The number of columns of the grid |
Integer |
12
|
Used by
Author
Thomas ZILLIOX
Herow-column-core
@mixin Herow-column-core() { ... }Description
Include the core styles of a column
Parameters
None.
Used by
Author
Thomas ZILLIOX
Herow-row-gutter
@mixin Herow-row-gutter($gutter-width: 1em, $external-gutter: false) { ... }Description
Change the gutter size of the row
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$gutter-width |
The size of the grid gutter |
Length |
1em
|
$external-gutter |
Set if an external padding is displayed on the grid |
Boolean |
false
|
Used by
Author
Thomas ZILLIOX
Atomic Grid API
mixins
Herow-grid-column-width
@mixin Herow-grid-column-width($column-span: 1, $grid: layout) { ... }Description
Change the width of the grid column
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$column-span |
The span length of the column |
Integer |
1
|
$grid |
A grid map or the name of a defined grid |
Map, String |
layout
|
Requires
Used by
Author
Thomas ZILLIOX
Herow-grid-column-gutter
@mixin Herow-grid-column-gutter($grid: layout) { ... }Description
Change the gutter of the grid column
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$grid |
A grid map or the name of a defined grid |
Map, String |
layout
|
Requires
Used by
Author
Thomas ZILLIOX
Herow-grid-column-flow
@mixin Herow-grid-column-flow($column-flow: 'inline', $grid: layout) { ... }Description
Change the flow of the grid column
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$column-flow |
The flow of the column |
'inline', 'left', 'right' |
'inline'
|
$grid |
A grid map or the name of a defined grid |
Map, String |
layout
|
Requires
Author
Thomas ZILLIOX
Herow-grid-column-offset
@mixin Herow-grid-column-offset($column-offset: 1, $grid: layout) { ... }Description
Change the left offset of the grid column
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$column-offset |
The span length for the left offset of the column |
Integer |
1
|
$grid |
A grid map or the name of a defined grid |
Map, String |
layout
|
Requires
Author
Thomas ZILLIOX
Responsive Grid API
mixins
Herow-grid-responsive-column
@mixin Herow-grid-responsive-column($column-span: 1, $grid: layout) { ... }Description
Include the styles of a grid column for all grid state
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$column-span |
The span length of the column |
Integer |
1
|
$grid |
The name of a defined grid |
String |
layout
|
Requires
Author
Thomas ZILLIOX
Herow-grid-column-width-breakpoint
@mixin Herow-grid-column-width-breakpoint($column-span: 1, $grid-state-list: layout:default) { ... }Description
Change the width of the grid column at specific breakpoint
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$column-span |
The span length of the column |
Integer |
1
|
$grid-state-list |
A state list of a defined grid |
List<string> |
layout:default
|
Requires
Author
Thomas ZILLIOX
Herow-grid-column-flow-breakpoint
@mixin Herow-grid-column-flow-breakpoint($column-flow: 'inline', $grid-state-list: layout:default) { ... }Description
Change the flow of the grid column
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$column-flow |
The flow of the column |
'inline', 'left', 'right' |
'inline'
|
$grid-state-list |
A state list of a defined grid |
List<string> |
layout:default
|
Requires
Author
Thomas ZILLIOX
Herow-grid-column-offset-breakpoint
@mixin Herow-grid-column-offset-breakpoint($column-offset: 1, $grid-state-list: layout:default) { ... }Description
Change the left offset of the grid column
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$column-offset |
The span length for the left offset of the column |
Integer |
1
|
$grid-state-list |
A state list of a defined grid |
List<string> |
layout:default
|
Requires
Author
Thomas ZILLIOX
Herow-on
@mixin Herow-on($column-span: 1, $grid-state) { ... }Description
Create a media-query by grid state
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$column-span |
The span length of the column |
Integer |
1
|
$grid-state |
A state list of a defined grid |
List<string> | — none |
Used by
Herow-grid-column-width-breakpointHerow-grid-column-flow-breakpointHerow-grid-column-offset-breakpoint
Author
Thomas ZILLIOX
Herow-grid-responsive-row
@mixin Herow-grid-responsive-row($grid: layout) { ... }Description
Include the styles of a grid row
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$grid |
A grid map or the name of a defined grid |
Map, String |
layout
|
Requires
Author
Thomas ZILLIOX