@joskoomen/scss-grid v1.1.0

Front-end Grid

Scss Core | Grid

Based on: http://flexboxgrid.com/

containers

• .container
• .container-fluid
• .container-sm //fixed size with max-width $breakpoint sm
• .container-md //fixed size with max-width $breakpoint md
• .container-lg //fixed size with max-width $breakpoint lg
• .container-xl //fixed size with max-width $breakpoint xl

columns

• .xs-col // 100% width with flex-grow for auto sizing
• .sm-col //100% width with flex-grow for auto sizing
• .md-col //100% width with flex-grow for auto sizing
• .lg-col //100% width with flex-grow for auto sizing
• .xl-col //100% width with flex-grow for auto sizing
• .xs-col-1 //untill 12 or other value based on $grid-columns-count
• .sm-col-1 //untill 12 or other value based on $grid-columns-count
• .md-col-1 //untill 12 or other value based on $grid-columns-count
• .lg-col-1 //untill 12 or other value based on $grid-columns-count
• .xl-col-1 //untill 12 or other value based on $grid-columns-count

justify alignment

• .xs-x-start //for all other $breakpoint classes as well
• .xs-x-center //for all other $breakpoint classes as well
• .xs-x-end //for all other $breakpoint classes as well

align alignment

• .xs-y-top //for all other $breakpoint classes as well
• .xs-y-middle //for all other $breakpoint classes as well
• .xs-y-bottom //for all other $breakpoint classes as well