Worköholics SASS grid

Author: Worköholics

Sass/CSS files to scaffold Worköholics grid

Install

npm install --save worko-grid

Usage

Sass version

Import ./src/grid.scss file in your main sass file. With Sass version you can override grid variables and customize your own grid.

You can declare your own variables above the import to override them.

//Override variables
$gutter: 30px;
$cols: 14;

//Import file
@import './path/to/node_modules/worko-grid/src/grid.scss'

Override variables

• $gutter: Separation between columns (default: 15px)
• $cols: Columns of the grid (default: 12)
• $safe-area-xs: Horizontal padding of the container-fluid (breakpoints xs and sm default: 30)
• $safe-area: Horizontal padding of the container-fluid (breakpoints md, lg and xl default: 90)
• $breakpoint-sm: Breakpoint sm (default: 576px)
• $breakpoint-md: Breakpoint sm (default: 768px)
• $breakpoint-lg: Breakpoint sm (default: 992px)
• $breakpoint-xl: Breakpoint sm (default: 1200px)

Compiled

Import ./dist/grid.css file in your main sass file.

@import './path/to/node_modules/worko-grid/src/grid.css'

Use grid elements

Wrapper Fluid

Flexible wrapper adapted to the width of his parent element. The horizontal padding of the wrapper is defined with the variables $safe-area for desktop devices and $safe-area-xs for mobile devices.

<div class="main-wrapper-fluid">
  <!-- Your code goes here... -->
</div>

Row

Row is used to group columns horizontaly

| options | Description | | ------------- | --------------------------------------------- | | .row-wrap | Add this class to the row to enable flex-wrap |

<div class="row">
  <!-- Your code goes here... -->
</div>

Column

Attributes

• data-xs: Width set in columns for screens smallers than $breakpoint-sm
• data-xso: Offset set in columns for screens smallers than $breakpoint-sm
• data-xst: Total of columns of the row for screens smallers than $breakpoint-sm (default: 12)
• data-sm: Width set in columns for screens between $breakpoint-sm and $breakpoint-md
• data-smo: Offset set in columns for screens between $breakpoint-sm and $breakpoint-md
• data-smt: Total of columns of the row for screens between $breakpoint-sm and $breakpoint-md (default: 12)
• data-md: Width set in columns for screens between $breakpoint-md and $breakpoint-lg
• data-mdo: Offset set in columns for screens between $breakpoint-md and $breakpoint-lg
• data-mdt: Total of columns of the row for screens between $breakpoint-md and $breakpoint-lg (default: 12)
• data-lg: Width set in columns for screens between $breakpoint-lg and $breakpoint-xl
• data-lgo: Offset set in columns for screens between $breakpoint-lg and $breakpoint-xl
• data-lgt: Total of columns of the row for screens between $breakpoint-lg and $breakpoint-xl (default: 12)
• data-lg: Width set in columns for screens greater than $breakpoint-xl
• data-lgo: Offset set in columns for screens greater than $breakpoint-xl
• data-lgt: Total of columns of the row for screens greater than $breakpoint-xl

<div class="col">
  <!-- Your code goes here... -->
</div>