About Hoisin.scss

Hoisin is a very simple responsive front end mini framework made to kick start your web project, written in Sass.

This framework was created as an alternative to more complex and bloated front end frameworks, with a focus on organisation, speed and flexibility. We also aim to keep its codebase fresh including new techniques, whilst maintaining good support for the most common browsers.

Please note that this framework is not an UI kit and it does not include predefined styles for components like forms, widgets or buttons. We aim to create an organised base from which you can create your own library instead of a one-size-fits-all solution.

Hoisin doesn't have any dependencies other than Sass 3.3, but we have included a basic Gulpfile to get you started on it. You will only need the Sass compiler installed to be able to compile your changes. More information about installing and using Sass can be found on their website.

We did not include a reset or normalize since we don't require them in our projects. We encourage you to define the styles you need for your project, and leave the non styled elements to the browser. In the case that you still need to use a normalise, just include it at the top of the main stylesheet and make sure you edit this file to fit your project to avoid unnecessary overwriting of rules.

Browser support

IE 6+ (Only large breakpoint, using clear elements). Firefox 3.6+, Chrome, Opera, Android 2.3+ and iOS 6+.

Hoisin's grid system will allow you to create complex layouts easily and the file structure will help you stay organised when coding large scale websites.

Ramon Lapenta@ramono



This is done via the vars file. Open the _vars.scss file and add your variables to it, including the size of your base grid. You can add any variables you will be using like colors, font files, sizes, etc.



$ bower install hoisin.scss


Place the scss and css folders in the relevan folder of your proyect. If they need to be separate from each other (like in a Laravel project) you will need to adjust the config variable in the Gulpfile.

File structure

We recommend to create one individual file for each component and save it in the components folder then use @include: 'components/filename'; in the main styles file. The same with styles that apply only to individual pages and don't belong to any component can be saved in individual files per page in the pages folder and use @include: 'pages/filename'; in the main styles file. You can create as many component or page files as you want.

Grid system

By default we use a small desktop 12 column grid with 60px columns and 20px gutters (960gs standard) and a larger desktop grid with 70px columns and 30px gutters. The column spans have simple names like ".col4". There are also some helper classes like ".colr" to pull a span to the right, and ".pre1" to ".pre10" as well as ".suf1" to ".suf10" for offset spans.

Tablet and mobile spans can be altered by using extra helper classes depending on the layout requirements, we've included classes for full, half one third and two thirds (widths) which override default column behaviour. We also added a ".clear" helper class for browsers that can't clear themselves out.

We have added four common breakpoints in the variables file, you can adjust these to match your content and layout, or even add new breakpoints for more control.

Example of a typical layout:

See samples.html file for more examples.


We have included a mixins file with all common mixins we use everyday. This file doesn't output anything by itself, so it's safe to include in the main styles file so the mixins are always available. Please check the _mixins.scss file for usage information about each one of them.


We have also included a functions file with a few functions we use in every project. This file doesn't output anything by itself either, so it's always included in the main styles file so the functions are available across all components and pages. Please check the _functions.scss file for usageinformation about each one of them.