Skip to content
/ scss Public

Scss boilerplate with common functions, mixins, helpers and patterns.

License

Notifications You must be signed in to change notification settings

spatie/scss

Repository files navigation

scss

Latest Version on NPM Software License

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

Support us

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.

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, Kruikstraat 22, 2018 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 @spatie/scss

Usage

Import

Import the base & styles file in your SCSS files.

@import '@spatie/scss/settings';
@import '@spatie/scss/styles';

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
@import '@spatie/scss/settings';

// overwrite default settings
$gutter: (
    xs: 5px,
    s: 10px,
    default: 20px,
    ...
);

@import '@spatie/scss/styles';

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 Spatie

Spatie is a webdesign agency based in Antwerp, Belgium. You'll find an overview of all our open source projects on our website.

License

The MIT License (MIT). Please see License File for more information.