scss-base v1.5.0

scss-base

scss-base is a selection of styles that provide a clean default look for SCSS projects. The fonts used are Droid Sans and Droid Sans Mono.

This also uses Normalize.css to normalize styling across browsers. scss-base also includes the standard box-sizing: border-box; reset.

Even with that, scss-base is less than 3KB zipped (~10KB minified).

Demo

You can see a demo page with all the styles provided by scss-base at https://kiswa.github.io/scss-base

Usage

Simply run npm i scss-base -D to include scss-base in your project and save it in your package.json.

Import scss-base in your SCSS to use the provided styles.

//@import 'your-override-variables';
@import 'scss-base';

If you use Gulp and gulp-sass, your SCSS task looks something like this:

var sass = require('gulp-sass'),
    scss_base = 'node_modules/scss-base/src';

gulp.task('scss', function() {
    return gulp.src('/path/to/your/main.scss')
        .pipe(sass({
            precision: 10,
            includePaths: [
                scss_base,
                require('node-normalize-scss').includePaths
            ]
        })
        //.pipe(do other stuff - concat, minify, etc.)
        .pipe(gulp.dest('/path/to/ouput/css/'));
});

Customization

scss-base has a few variables to set the colors and fonts it uses. If you override these before including scss-base in your SCSS, the output changes to match your choices. The following variables are set by scss-base:

$color-background: #fefefe !default;
$color-text: #333 !default;
$color-text-button: #333 !default;
$color-mark: #f3f315 !default;

$color-border: #aaa !default;
$color-table-row: lighten($color-text, 75%) !default;

$color-primary: #7fd4ff !default;
$color-secondary: #86deb7 !default;

$color-toggle-on: #86deb7 !default;
$color-toggle-off: #da6869 !default;

$color-disabled: #aaa !default;

$font-url: 'https://fonts.googleapis.com/css?family=Droid+Sans:400,700|Droid+Sans+Mono' !default;
$font-name: 'Droid Sans' !default;
$font-name-mono: 'Droid Sans Mono' !default;

$white: #fff;