@bravobit/scss-starter NPM

Use command + F or ctrl + F to search for a keyword.
Contributions welcome, please see contribution guide.

Getting Started

Installation

You can install this package locally with npm or yarn. You should install the latest stable version in the devDependencies section in your package.json.

# To get the latest stable version in devDependencies

npm install @bravobit/scss-starter --save-dev

# or

yarn add @bravobit/scss-starter --dev

Usage

If you want to use the mixins and are working in a .scss file You should import our all.scss file into your project to get the full product.

@import '~@bravobit/scss-starter/src/all.scss';

Or you can import all the files you want individually.

@import '~@bravobit/scss-starter/src/variables/_index.scss';
@import '~@bravobit/scss-starter/src/mixins/_index.scss';
@import '~@bravobit/scss-starter/src/generic/_index.scss';
@import '~@bravobit/scss-starter/src/elements/_index.scss';

If you want to include our default styling in your HTML you can use the compiled (and minified) version.

<link rel="stylesheet" href="%RELATIVE_NODE_MODULES%/@bravobit/scss-starter/dist/styles.css">

Mixins

Device

Do you want to use media queries for different device-sizes in your project, use the device mixin.

.content {
    max-width: 100%;
    
    @include device(tablet) { max-width: 800px; }
}

Z-index

You should add your z-index items to the $z-indexes list to keep the layers organized, then use the z-index mixin.

$z-indexes: (
    'header',
    'footer'
);

.header { @include z-index('header'); }
.footer { @include z-index('footer'); }

Positioning

If you want an easy way to set the position of the element use the position mixin.

.cube {
    @include position(absolute, top 100% left 0);
}

Or you can use one of the helper mixins (relative, absolute, fixed).

.cube {
    @include relative(top 100% left 0);
    @include absolute(left 0 right 50px);
    @include fixed(top 0 bottom 0);
}

Prefixing

Do you want your animations and/or placeholder to work on every browser, use the prefix mixins.

@include placeholder { color: red; };
@include keyframes(slide) { color: red; };
@include animation('slide 5s 3');

Colors

Do you want to use colors in your project, use the colors function. To get a full list of the supported colors click here.

.main {
    color: color('yellow', 400);
    background-color: color('red');
}

Elements

Grid

You can use the 12-column grid system by using the following classes:

<div class="row">
    <div class="column--8"></div>
    <div class="column--4"></div>
</div>

<div class="row">
    <div class="column--2"></div>
    <div class="column--2"></div>
    <div class="column--2"></div>
    <div class="column--2"></div>
    <div class="column--2"></div>
    <div class="column--2"></div>
</div>