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.

Hoisin doesn't have any dependencies other than Dart Sass 1.3 (The NPM version, Ruby Gem has been deprecated). 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.

Browser support

IE 10+ Firefox, Chrome, Android and iOS 6+.

Version 2 released

This new version is completely revamped and is it not compatible with previus versions. All namings have been changed to make better use of the CSS Grid Module and many unused classes have been removed.

This version also requires latest version of Sass to be compiled.

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

Ramon Lapenta@ramono

A simple responsive mini framework to kick start your web project. It containes a grid system, some mixins and functions and a base file structure to help you organize your styles.

Disclaimer: This is not a UI Kit, there are no predesigned components or widgets like buttons or forms.

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.

Installation

Place the scss and css folders in the relevan folder of your project and point your compiler to them. Link the generated CSS file to your web pages. That is all.

Requirements

  • Requires Dart Sass 1.3 and up
  • A good understanding of Sass
  • A basic understanding of the CSS Grid module is helpful
  • We recommend installing our front end build system for easy compiling of Sass.

Usage

The variables folder contain some basic files for colors, global variables and the grid system, feel free to modify them to fit your project, and to add new files with module specific variables.

File structure

We recommend to create individual files for elements and components and save them in the elements and components folders respectively. Be sure to name these files using the _filename pattern to avoid Sass compiling them separately, and remember to add the respective @use statements on these files to have access to variables or mixins.

Then add @use: 'elements/filename'; or/and @use: 'components/filename'; in the main styles file to import them into your main stylesheet.

The same applies to styles related to specific pages and don't belong to any component, these can be saved in individual files per page in the pages folder and add @use: 'pages/filename'; in the main styles file.

You can create as many element, component or page files as you want.

Grid

By default we use a CSS Grid setup with 1 to 6 columns and 24px gaps on small devices, 36px on larger desktop screens. All the values of the grid are configurable in the variables/_grid.scss file.

There are helper classes to remove grid gaps, reverse items placement, and make narrow or wider columns, and also to create some predefined common layouts like content/sidebar.

Please have a look at our samples files for ideas on how to apply it in useful ways.

Mixins

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.