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

Github 星跟踪图

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

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 @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.

项目概况

主要编程语言SCSS
编程语言JavaScript
许可证MIT License
最新版本名称1.1.3
第一版名称1.0.0
最后发布时间2017-01-27 10:12:02
首次发布2017-01-20 11:52:34
最后一次提交2022-03-21 13:45:23
创建于2016-11-08T14:41:54
推送于2022-03-21T12:45:23
提交数66
关注者数8
名称与所有者spatie/scss
派生数14
星数77
发布数2
语言数2
拉请求数2
关闭的拉请求数2
已启用问题?
已启用Wiki?
已存档?
是分叉?
已锁定?
是镜像?
是私有?
To the top