HTML 5

CSS 3/Sass

Susy

Ciné chez soi

Brand & Website Design

Ciné chez soi (or theater at home) is an ongoing personal project that combines two of my main passions; movies and web design/web development. I designed the brand and developed the website using Sass and Susy for the responsive grid.

in_browser
01
Concept

Movie Recommendations

This website is a movie recommendation platform aimed at movie-lovers that will provide movie reviews, ratings, summaries, comments, and more.

I wanted the website to be accessible on multiple devices, browsers, and screen sizes and have a clean, movie-poster-centric look.

img-project-center

There are desktop and mobile version of the website.

02
Code

Responsive Design with LibSass and Susy

The homepage was developed using HTML and Sass. Because my Sass workflowincludes multiple plug-ins like Bourbon, vertical rhythm and Susy, I used LibSass rather than Ruby to compile Sass into CSS. LibSass is a c/c++ port of Sass that is up to 4000 times faster than Ruby and is easier to integrate into any project.

There are many tools available on the web that I have used in the past to quickly design grid for the web, from CSS framework like Bootstrap, Foundation, to sites like responsive grid System. The problem with these solutions is that they usually add a large number of classes to my mark-up that is already getting crowded because of my adoption of the BEM conventionBEM convention into my workflow which can sometimes produce a bloated codebase that can impact performance.

The solution to these problems for me was Susy: a Sass based grid framework that is fast, responsive, lightweight, and enables me to create an entirely customized grid without adding anything to the mark-up.

Setting up the grid

First of all, I created default parameters for the grid in a map sorted in setting.scss scss that contains all of the global settings of the website. Here is how the syntax look:


                  						$susy: (
                                						  container: 100%,
                                						  columns: 12,
                                						  gutters: 0,
                                						  global Box Sizing: border-box,
                  						);
                  				

In this map, several global values are defined. The container is set to 100% so that the layout extends to the full width of the page, the number of columns is set to 12 and all the blocks in the website will be a subdivision of that number, gutters value is set to 0 and the box model used is set to border-box.

Here is the layout that was implemented using the default Susy map value:

img-project-center

There are desktop and mobile grid version of the website.

As stated previously, each main container is a subdivision of the grids total number of columns. Thanks to the default values set up in the settings file, the block size will be updated automatically if the container size or the number of columns change.

Implementing the grid system

Susy depends entirely on Sass to customize the grid, so there is no need to add anything else to the HTML mark-up. The most important feature for creating grids in Susy is the span mixin.

As you can see from the image above, the main blocks must occupy a specific space inside the 12 columns grid.
On mobile devices, all of the main blocks extend to the full width of the grid and the header is divided into 2 parts, the logo that takes 4 columns out of 12 and the menu that takes 8 columns.

Here is how the main level grid blocks were implemented with a mobile first method:



                  					.container{
                  						 @include container;
                  						 position: relative;
                  					}
                            .grid-logo{
                  						@include span(4);
                  						height:100%;
                  					}

                  					.grid-menu{
                  						@include span(8);
                  						height:100%;
                  					}

                  					.grid-hero-big{
                  						@include span(12);
                  						height: 766px;
                  					}

                  					.grid-hero-long{
                  						@include span(12);
                  						height: 383px;
                  					}

                  					.grid-hero-small{
                  						@include span(12);
                  						height: 383px;
                  					}

                  					.grid-box-office-movies{
                  						@include span(12);
                  					}

                  					.grid-new-movies{
                  						@include span(12);
                  						margin-top: -411px;
                  					}
                  				

Making it responsive with breakpoint

Although the grid built with Susy is fluid at this stage, the website is still not responsive. To make the layout responsive, I used another mixin, susy-breakpoint. The Susy-breakpoint mixin makes it easier to handle media queries in the layouts. It does so by simplifying the language needed to create media query breakpoints.

In my settings.css file, I defined a set of default breakpoints by devices:


                  				$desktop : 1040px;
                  				$tablet  : 780px;
                  				$mobile  : 430px;
                			   

Those variables are then used inside the susy-breakpoint mixin when needed.
This is how the main blocks of the homepage layout were modified to include the breakpoints.


                                              .grid-logo{
                					@include span(4);
                					height:100%;
                				}

                				.grid-menu{
                					@include span(8);
                					height:100%;
                				}

                				.grid-hero-big{
                					@include span(12);
                					height: 300px;
                					@include susy-breakpoint($desktop , $susy) {
                						 @include span(5);
                						height: 766px;
                				 	 }

                				}

                				.grid-hero-long{
                					@include span(12);
                					height: 300px;
                					@include susy-breakpoint($desktop, $susy) {
                						@include span(5);
                						height: 383px;
                					}

                				}

                				.grid-hero-small{
                					@include span(12);
                					height: 300px;
                					@include susy-breakpoint($desktop, $susy) {
                						@include span(2);
                						height: 383px;
                				 	 }

                				}

                				.grid-box-office-movies{
                					background:$blue--dark;
                					@include span(12);
                					margin-top: 0;
                					padding:20px;
                					@include susy-breakpoint($desktop, $susy) {
                						@include span(7);
                				 	 }

                				 	 @include susy-breakpoint($tablet , $susy) {
                				 	 	padding	: em(72px) em(110px) em(109px) em(157px);
                				 	 }
                				}

                				.gild-classique-movies{
                					margin-top: 133px;
                					@include span(12);

                					@include susy-breakpoint($desktop, $susy) {
                							@include gallery(6);
                							padding-left: 40px;
                					 }
                				}
                        

Conclusion

Using Susy in this project made me realize how easy and fast it is to create simple or complex layouts with this grid framework without a huge amount of code. This framework will save me time in the future, especially when designing directly in the browser or prototyping a website layout.