Susy Grid Layout

Susy Grid

Simple Install

# command line
gem install susy


Install using npm

npm install susy sass-loader --save-dev

Install Susy in Compass: If you want to use Susy with Compass

For new Compass project:

# command line
compass create --using susy <project name>

Add Susy to a current project

# command line
compass install susy


Install Susy in Gulp

Install susy with npm:

npm install susy --save-dev

Add Gulp Task:

// gulpfile.js
gulp.task('sass', function() {
 return gulp.src('scss/*.scss')
     .pipe(sass({
         outputStyle: 'compressed',
         includePaths: ['node_modules/susy/sass']
     }).on('error', sass.logError))
     .pipe(gulp.dest('dist/css'));
});

Install Susy in Grunt

To add Susy: Edit Gruntfile.js in your project.

// Gruntfile.js
sass: {
 dist: {
   options: {
     style: 'expanded',
     require: 'susy'
   },
   files: {
       'css/style.css': 'scss/style.scss'
   }
 }
}

Install Susy in Bower

# command line
bower install susy --save


Add require: 'susy' inside the options object:


Once you have everything installed, you can import Susy in your project.

@import "susy";

$susy: (

 columns: 12,

 gutters: .1,

 gutter-position: after

);

Use Susy in SCSS:

Mixins:

@include container(<width>);

@include span(<width>);

These are already defined in susy plugins

Example usage:

.content-div { @include container(1200px); }
.col-div { @include span(4); }

For main container (.content-div): You can define main container width.

For grid width: (.col-div)

span(4) defines 12/4=3 when default value of column is set to 12 in $susy above.

So 3 column grid will be displayed.


Also you can use mixin:

nav { @include span(3 of 12); }

Here you can change manually total number of column for every section. In above example, 12 defines column.

Other examples

nav { @include span(3 of 16); }

nav { @include span(3 of 24); }

nav { @include span(3 of 100); } etc...


Manage Gutter in Susy

Gutter position:

Gutter position is set to ‘after’ by default by margin-right property in Susy

$susy: (

 gutter-position: after (before | after | split | inside | inside-static )

);

Gutter width:

Manage gutter width

$susy: (

 gutters: .1,

);

Range of gutter value will be 0 to 1.

Remove gutter from last child

$last-item: 4;

.box {

 @include span($last-item of 16);

 &:nth-child(#{$last-item}n) {

   margin-right: 0;

 }

}

Benefits:

  • Susy gives you a way to write HTML without using messy classes like col-md-61.
  • We can use any number of grid (12 grid, 16 grid, 24 grid, etc) for individual div.
  • Very easily maintain grid width by Susy compare to all other methods.
  • No more CSS code required for grid.

and benefit can roll down endless, hope you all liked the usage of Susy. So start using it and feel free to drop any message to us for any concerns or for Best Web Design Company.