scss
SCSS boilerplate with common functions, mixins, helpers and patterns to kickstart CSS authoring.
The package sets some sensible defaults for HTML elements eg.:
// base/*.scss *
Generic helper classes are included for common layout issues:
// helpers/margin.scss .h-margin .h-margin-none .h-margin-small ...
Default settings are stored in Sass maps...
// settings/typography.scss ; // settings/colors.scss ;
... and can be used with mixins or functions afterwards:
// my-app.scss ;;; h1
Full documentation in progress
Postcardware
Spatie is a webdesign agency based in Antwerp, Belgium. You'll find an overview of all our open source projects on our website.
You're free to use this package (it's MIT-licensed), but if it makes it to your production environment we'd appreciate if you send us a postcard from your hometown, mentioning which of our package(s) you are using.
Our address is: Spatie, Samberstraat 69D, 2060 Antwerp, Belgium.
The best postcards will get published on the open source page on our website.
Install
You can install the package via yarn:
yarn add scss-boilerplate
Usage
Import
Import the base & styles file in your SCSS files.
;;
Overwriting defaults
All default settings are stored in src/settings
. Copy 1 or more of these Sass maps to your own project and import them before you import the main file.
Eg. to set your own gutters in px
instead of rem
, you would construct or import your own $gutters
variable.
Be sure to remove the !default
flag for this variable.
// your-app.scss ; // overwrite default settings ; ;
Autoprefixing
CSS properties are not vendor-prefixed. Running autoprefixer in your own build process is recommended.
Documentation
This package implements the ideas from our css-styleguide.
Work in progress
Code Style
- Install cscomb globally via
npm i csscomb -g
- Put a
.csscomb.json
in root dir of your project - Run
csscomb src
Change log
Please see CHANGELOG for more information what has changed recently.
Contributing
Please see CONTRIBUTING for details.
Credits
About Filip
I am a student from Belgium who loves to develop with laravel, SCSS/SASS preprocessor and other languages. I speak Dutch, French and English. You can soon find an overview of all my open source projects on my website which I will create at the end of June 2017.
License
The MIT License (MIT). Please see License File for more information.