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).
You can see a demo page with all the styles provided by scss-base
at https://kiswa.github.io/scss-base
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/'));
});
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;