Installation

• Download the latest release of 24SS on Github :

  https://github.com/zessx/24SSgrid/releases

• Copy this file in your project

  scss/24SSgrid.scss

• Add this line to your main SASS file :

  @import "24SSgrid";

Customize your grid

You are able to specify a few variables to custom your grid,
adding those lines to your main SASS file :

$sg-nb-columns:   24;   // columns number
$sg-class-prefix: '';   // class prefix
$sg-column-width: 30px; // columns width
$sg-gutter-width: 10px; // space between columns
$sg-margin-width: 5px;  // space around rows

Usage

<!-- .row class on your wrapper -->
<div class="row">
	<!-- both .col and .col-x classes on your columns -->
	<div class="col col-4"></div>
	<!-- .offset-x classes to manage empty columns -->
	<!-- .break class to add a new line -->
	<div class="col col-18 offset-2 break">
		<!-- you can use nested columns -->
		<div class="col col-6"></div>
		<div class="col col-6"></div>
		<div class="col col-6"></div>
	</div>
	<div class="col col-12"></div>
	<div class="col col-12"></div>
</div>

Example

Find 24SSgrid useful ? Share it !