-
Notifications
You must be signed in to change notification settings - Fork 3
Media queries component
List of the available mixins
Mixin name | Example | Code |
---|---|---|
addColumnsSet | Gist example | Source code |
addContainerRow | Gist example | Source code |
addMarginOffset | Gist example | Source code |
addViewportsSteps | Gist example | Source code |
===
####addColumnsSet
This mixin generate the entire classic grid system based on float:left;
, box-sizing: border-box
and it's relative width
steps.
Param | Default value | Required | Comment |
---|---|---|---|
@hdSteps |
12 |
no | The number of grid columns generated for HD viewports |
@tabletSteps |
@hdSteps |
no | The number of grid columns generated for Tablet viewports |
@smartphoneSteps |
@tabletSteps |
no | The number of grid columns generated for Smartphone viewports |
@hdViewportPrefix |
hd- |
no | A prefix for the grid rules in front of HD viewports hd- 2-of-12
|
@tabletViewportPrefix |
tablet- |
no | A prefix for the grid rules in front of Tablet viewports tablet- 2-of-12
|
@smartphoneViewportPrefix |
smartphone- |
no | A prefix for the grid rules in front of Smartphone viewports smartphone- 2-of-12
|
@fillFromViewport |
"smartphone-landscape" |
no | By default, the grid rules between HD and Tablet viewports will be set to width: 100%; . Available rules "hd-full" , "hd-ready" , "tablet-landscape" , "tablet-portrait" , "smartphone-landscape" , "smartphone-portrait"
|
@viewTotalColumns |
true |
no | When the rule is generated, it shows the total columns: tablet-2 -of-12
|
@columnsSeparator |
-of- |
no | The separator between current column step and total columns steps of the rule generated: hd-6 -of- 12 , this portion will be generated only if @viewTotalColumns is set to true
|
@useHdRules |
true |
no | This will enable HD rules to be generated by the mixin |
@useTabletRules |
true |
no | This will enable Tablet rules to be generated by the mixin |
@useSmartphoneRules |
true |
no | This will enable Smartphone rules to be generated by the mixin |
As result this mixin will generate CSS code like this:
/* from */
.hd-1-of-12 { /* rules */ }
/* to */
.hd-12-of-12 { /* rules */ }
/* this will be generated also for tablet and smartphone viewports */
===
####addContainerRow
This mixin generate a container row with a list of properties to make columns behave better. Mixed with addColumnsSet can solve almost all problems.
Param | Default value | Required | Comment |
---|---|---|---|
@selector |
row |
no | |
@hdFullSteps |
0 |
no | Sets a clear:both; every N elelemnts defined by @hdFullSteps and sets e default width to every sibiling and |
@hdReadySteps |
12 |
no | Not applied if @hdFullSteps is set to 0
|
@tabletLandscapeSteps |
6 |
no | Not applied if @hdFullSteps is set to 0
|
@tabletPortraitSteps |
3 |
no | Not applied if @hdFullSteps is set to 0
|
@smartphoneLandscapeSteps |
1 |
no | Not applied if @hdFullSteps is set to 0
|
@smartphonePortraitSteps |
1 |
no | Not applied if @hdFullSteps is set to 0
|
It sets a clear:both;
every N
elements defined from @hdFullSteps
to @smartphonePortraitSteps
parameters. So if @hdFullSteps
is 4
it will be applied the rule:
@media /* media query for Full HD rule here */ {
.row > *:nth-child(4n+1) {
/* ... various rules before ... */
clear:both;
}
}
It also sets e default width
based on the number of steps defined divided by 100
.
So on a column set where @hdFullSteps
is 4
it will be applied the rule:
@media /* media query for Full HD rule here */ {
.row > *:nth-child(4n+1) {
/* ... various rules before ... */
width:25%;
}
}
===
####addMarginOffset
This mixin generate a list of margin offset set of rules for addColumnsSet and it can be based with the same paramters
Param | Default value | Required |
---|---|---|
@hdSteps |
12 |
no |
@tabletSteps |
hdSteps |
no |
@smartphoneSteps |
tabletSteps |
no |
@hdViewportPrefix |
hd-offset- |
no |
@tabletViewportPrefix |
tablet-offset- |
no |
@smartphoneViewportPrefix |
smartphone-offset- |
no |
@fillFromViewport |
smartphone-landscape" |
no |
@viewTotalColumns |
true |
no |
@columnsSeparator |
-of- |
no |
@useHdRules |
true |
no |
@useTabletRules |
true |
no |
@useSmartphoneRules |
true |
no |
As result this mixin will generate css code like this:
/* from */
.hd-offset-1-of-12 { /* rules */ }
/* to */
.hd-offset-12-of-12 { /* rules */ }
/* and also */
.hd-offset-disabled { /* rules */ }
/* this will be generated also for tablet and smartphone */
===
####addViewportsSteps
This mixin generate a selector which is aliged to center of it's container and has a max-width
property based on the current viewport size subtracted to the size you set
Param | Default value | Required | Comment |
---|---|---|---|
@selector |
use-steps |
no | |
@hdFullMargin |
500px |
no | The max-width will be set to @hd-full-step - @hdFullMargin , @hd-full-step can be set on your theme's app.less bootstrap file |
@hdReadyMargin |
100px |
no | |
@tabletLandscapeMargin |
50px |
no | |
@tabletPortraitMargin |
20px |
no |