simple-css-responsive-grid v1.0.0

Simple Responsive Grid

This module provide a simple responsive grid in CSS. It's write in SCSS.

Demo here

Include this in your page:

<link href="path/to/node_modules/simple-css-responsive-grid/dist/grid.min.css" rel="stylesheet" type="text/css">

Specs

• 24 columns
• 3 size
  • small: <= 768px
  • medium: <= 992px
  • large: <= 1200px
• gutter: 20px

• push and pull: include in s/l/m and normal mode
• support of subcontainer

How to use

Container classe: container

Row classe: row

You can use this classes for columns:

• col-<number>: for default screen size
• col-l-<number>: for max screen size of 1200px
• col-m-<number>: for max screen size of 992px
• col-s-<number>: for max screen size of 768px

Number need to be between 1 and 24, exemple: col-7, col-s-24

For push and pull, you can use this classes:

• col-<push|pull>-<number>
• col-l-<push|pull>-<number>
• col-m-<push|pull>-<number>
• col-s-<push|pull>-<number>

Number need to be between 0 and 24, exemple: col-push-6, col-s-pull-12

value 0 it's for reset size fixed by other screen size

Exemple:

<div class="row">
	<div class="container">
		<div class="row">
			<div class="col-12 col-l-12 col-m-15 col-s-24">12</div>
			<div class="col-12 col-l-12 col-m-15 col-s-24">12</div>
		</div>
		<div class="row">
			<div class="col-24">24</div>
		</div>
		<div class="row">
			<div class="col-6">6</div>
			<div class="col-4">4</div>
			<div class="col-2">2</div>
			<div class="col-12">12</div>
		</div>
	</div>
</div>

License

MIT