jayyajgh / sass-boilerplate

This is a sample project containing the basic boilerplate Sass styling code to get a project up and running.

Sass boilerplate library

This is a boilerplate project containing the basic Sass styling code to get a project up and running.

Its structure is based on the SMACSS and 7-1 architecture patterns and it contains the basic code to get up and running with breakpoints, typography, colours and other core elements.

Many of the ideas are combinations of various other ideas with some enhancements. I have tried to list all sources in the acknowledgements section. It follows as many of the latest best practices as possible including atomic CSS, BEM, low selector specificity, good vertical rhythm, single direction margins etc.

This is not a library of awesome design ideas. The colours etc. are for demonstration purposes only. The breakpoints, font-sizing and margins etc. are valid and could be used although you will probably want to swap them out for something to fit with your own design.

If vertical rhythm and modular type scales are new to you then these are some good articles to read:

• Modular type scale
• Vertical rhythm
• Baseline grid
• Putting it all together in code

This project is work in progress and will forever stay that way as new concepts appear and best practice changes.

Getting Started

These instructions will get you a copy of the project up and running on your local machine. All documentation is contained within the files themselves. It can be read directly but a nicer way is to run it through SassDoc

Component based architecture

If you are using a component based architecture then this layout will fit in well to the structure. e.g. Vue or React. The main app should include the general CSS build as main.css and each component can include only the required CSS for that component and if required, also scope it to that component. The default included here has all components included in the main CSS file. To support a component structure then remove the components from being included in the main CSS and include the individual component Sass files in each component. They will then also need to import the combined abstracts file.

Prerequisites

This project is written in Sass and so you will need a way of building Sass. All the tools I have used are run using Node and Gulp although you can use anything that can compile Sass (.scss style). I am using gulp-sass. How to install and use gulp-sass

Authors

• Jason Harris - Initial work - JayyajGH

See also the list of contributors who participated in this project.

Contributing

Please read CONTRIBUTING.md for details on the code of conduct, and the process for submitting pull requests.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgements

The structure of the boilerplate is based on two main patterns:

• SMACSS
• Sass Guidelines 7-1 pattern

The colour palette ideas were formed from these articles:

• Using maps for setting up the colour palette
• Using maps for setting the tone of the palette

The initial idea for using Sass maps for breakpoints came from here:

• Responsive breakpoints

Should we use pixels, rems or ems? The general rules are:

• Never use pixels
• Use rems for sizing and spacing
• Use ems for media queries
• Should we use pixels, rems or ems?

Using utility classes:

• The role of utility classes
• Namespaces for utility classes

Breakpoints and tweakpoints:

• Breakpoints and tweakpoints in Sass
• 3 types of breakpoints in responsive designs

Using single direction margins:

• Single direction margins

Should we use extends or mixins: (Hint: Use mixins...)

• Extends or mixins

Some static code analysis tools I've used are:

• Sass linter
• Stylesheet analysis tool - Parker