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 */

Gist example

===

####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%;
    }
}

Gist example

===

####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 */

Gist example

===

####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

Gist example