Custom responsive grid with sass susy – grids on demand

While starting the responsive web development, first question pops up. Which grid framework to use? There are many grid framework to choose like bootstrap, foundation, 960 Grid System, Golden Grid System and many more. Are these grid framework flexible enough for modern designs?

Class based grid frameworks are not flexible enough

Bootstrap is one of the popular grid system. It’s not only a grid system it’s a complete toolkit for responsive web development. But still it’s not flexible enough for modern design trend. There are limitations attached when using class based grid systems.

Classes used in a grid systems like .row, .col2, .col6 is a major criticism in the web community as it overlap the presentation layer on content.

Grid customization

Bootstrap is a grid system that use preprocessor; that makes it more flexible. You can choose numbers of columns, size of gutters and 4 different breakpoints (xs, sm, md and lg). You can customize the bootstrap from customize tab or by changing the _variable partial. Is it sufficient for modern design trend? or we need more flexibility?

Yes, we need more grid customization

I want to change number of columns any time, anywhere at any breakpoints. I don’t want a fixed gutter size or gutter placement. I want complete control over breakpoints. I want object oriented CSS without overlapping of presentation and content layer.

Susy play the magic – grids on demand

Susy is a plugin to compass that allows to create your own customizable grid. No mathematical calculation is required. You can change number of columns, size and position of gutters anytime anywhere in the page or part of a page.

If you don’t want to constrain your responsive website with available framework, go with susy

Susy Installation

Susy is a plugin to compass so, first you need to install sass and compass.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

/*in ruby command window type*/

gem install sass

/*After sass installation install compass*/

gem install compass

/*setup your sass project*/

compass create folderName

/*Install Susy*/

gem install susy

/*Now you need to add following in your config.rb*/

require‘susy’

Global settings for susy project

Now you are ready to fly with susy. Let’s setup the global setting for your susy project or you can refer the susy global setting support for more details.

1

2

3

4

5

6

7

8

9

10

11

12

/*first you need to import susy*/

@import'susy';

/*here is the default setting for you project*/

$susy:(

columns:12,

container:1140px,

gutter:1/4,

math:fluid,

output:float,

gutter-position:before/after/split/inside/inside-static,

);

Creating containers – by using container() mixin

Mixin container setup a container (clearfix, max-width and centered). By default it will take the setting from susy global setting. It can be overridden anytime by passing the value in parentheses. This tells Susy where to start all the calculations from.

1

2

3

4

5

.wrap{

@include container();

/*or any by passing a value*/

@include container(1200px);

}

Columns for your grid- by using span() function

Span function is used to create columns for your grid. It takes 3 parameter in susy – span, location and layout. It can be used by passing minimum one argument and other as optional. Span can also be used with margin, padding or anywhere, where you need a calculated span value. Or you can can play with arithmetic operations.

You can use span for column width other than grid, it may be an image width, height or margin padding

1

2

3

4

5

6

7

8

9

@include span(6);

/*change the number of columns*/

@include span(4of8);

@include span(2of8last);

/*playing with span mixin*/

margin-left:span(2);

margin-left:span(2)*2;

Getting or changing the gutter – gutter() function

Gutter function returns gutter width set in the global susy settings. You can further customize it as per your requirement.

1

2

3

4

margin-bottom:gutter();

margin-bottom:gutter()*2;

/*override the gutter*/

span(1of241/9before);

Change your global grid setting – with-layout() Mixin

Yes, you can override all your default grid setting. Number of columns, gutter size, gutter position anything.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

$new-settings:(

columns:8,

gutters:1/2,

output:float,

gutter-position:before,

global-box-sizing:border-box,

);

.my-custom-container{

@include with-layout($new-settings){

.special-col{

@include span(1);

div{

background:#ffcc00;

}

}

}

}

Making a responsive grid – breakpoint

Breakpoint helps with writing media query. It doesn’t come by default with susy. It is a gem that need to be installed before using it.

1

2

3

4

5

gem install breakpoint

/*Now you need to add following in your config.rb*/

require‘breakpoint’

/*import breakpoint in you main scss*/

@import‘breakpoint’;

Now you are ready to use breakpoint.

Using breakpoint with susy

You need to call the breakpoint by passing set of arguments and these arguments will change to media queries. You can easily make it mobile first by passing just one argument that changed to min-width.

From my experience, even classical grid systems with fixed number of columns may be too hard for average developers, when RWD is used. Dynamically changing number of columns, and creating other custom RWD rules might exponentially increase amount of design documentation for RWD, same for communications and UI validation. This approach might work with strong designers teams, though.

Yes, a strong UI team is always required to get even class-based-grid system implemented properly. Using susy we can even create our own class-based-grid system; that can be used further by developers without UI team.
But again, if I discuss on the standards, class based grid system make life easier but semantically it’s wrong; it overlap the content and presentation layer.