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
* {
box-sizing: border-box;
position: relative;
&:after,
&:before {
box-sizing: border-box;
}
}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
$font-weight: (
default: (
...
),
secondary: (
normal: 400,
bold: 700,
),
fixed: (
...
),
) !default;
// settings/colors.scss
$blue: (
lightest: #e6f5ff,
lighter: #8bcdff,
...
) !default;... and can be used with mixins or functions afterwards:
// my-app.scss
@import '@spatie/scss/settings';
@import 'my-custom-settings';
@import '@spatie/scss/styles';
h1 {
@include font-secondary-bold;
color: blue(darkest);
}
Full documentation in progress
We invest a lot of resources into creating best in class open source packages. You can support us by buying one of our paid products.
We highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using. You'll find our address on our contact page. We publish all received postcards on our virtual postcard wall.
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, Kruikstraat 22, 2018 Antwerp, Belgium.
The best postcards will get published on the open source page on our website.
You can install the package via yarn:
yarn add @spatie/scssImport the base & styles file in your SCSS files.
@import '@spatie/scss/settings';
@import '@spatie/scss/styles';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
@import '@spatie/scss/settings';
// overwrite default settings
$gutter: (
xs: 5px,
s: 10px,
default: 20px,
...
);
@import '@spatie/scss/styles';CSS properties are not vendor-prefixed. Running autoprefixer in your own build process is recommended.
This package implements the ideas from our css-styleguide.
Work in progress
- Install cscomb globally via
npm i csscomb -g - Put a
.csscomb.jsonin root dir of your project - Run
csscomb src
Please see CHANGELOG for more information what has changed recently.
Please see CONTRIBUTING for details.
Spatie is a webdesign agency based in Antwerp, Belgium. You'll find an overview of all our open source projects on our website.
The MIT License (MIT). Please see License File for more information.