NASA Planetary Mission

    @degordian/sassbox

    0.4.0 • Public • Published

    Sassbox

    Set of SCSS helpers, mixins and base css to startup your front end project.

    Installation

    npm install --save @degordian/sassbox

    Usage

    Gulp

    // Gulpfile.js
    gulp.task('sass', function() {
      return gulp.src('path_to_scss/style.scss')
          .pipe(sass({
              includePaths: ['node_modules/@degordian/sassbox/src']
          })
          .pipe(gulp.dest('dist/css'));
    });
    

    Usage in SCSS

    /* style.scss */
    @import "sassbox";
    
    or import individual modules:
    
    @import "base";
    @import "helpers";
    @import "layout";
    @import "zkeleton";
    

    Webpack

    You need to have sass-loader installed and enabled:

    npm install sass-loader --save-dev
    
    // webpack.config.js
    loaders: [
      {
        test: /\.scss$/,
        loader: 'style!css!sass'
      }
    ]
    

    Usage in SCSS

    /* style.scss */
    @import "~@degordian/sassbox/src/sassbox";
    
    or import individual modules:
    
    @import "~@degordian/sassbox/src/base";
    @import "~@degordian/sassbox/src/helpers";
    @import "~@degordian/sassbox/src/layout";
    @import "~@degordian/sassbox/src/zkeleton";
    

    Overriding defaults

    If you need to override some default variables, just define them before importing the sassbox modules.

    /* _overrides.scss */
    
    $font-primary: 'Lato', sans-serif; 
    
    /* style.scss */
    
    @import "overrides";
    @import "sassbox";
    
    
    /* style.css */ 
    
    html {
    ...
    font-family: 'Lato', sans-serif;
    ...
    }
    
    

    Suggested overrides

    /* _colors.scss */
    
    $c-white: #ffffff !default;
    $c-black: #000000 !default;
    
    $default-body-text-color: $c-black !default;
    $default-body-link-color: $c-black !default;
    
    $default-selection-text-color: $c-white !default;
    $default-selection-bg-color: $c-black !default;
    
    /* _z-index.scss */ 
    
    $z-layers: (
            highest : 50,
            banner : 20,
            menu : 10,
            header : 2,
            default : 1
    ) !default;
    
    /* _typography.scss */
    
    $browser-context: 18 !default; // px
    $browser-line-height: 18 !default; // px
    
    $font-primary: Helvetica, Arial, sans-serif !default;
    
    /* _routes.scss */
    
    $img-link-type: REL !default;
    
    /* _grid-values.scss */
    
    $z-grid-number: 24 !default;
    $zgrid-default-gutter: 0 !default;
    

    Install

    npm i @degordian/sassbox

    DownloadsWeekly Downloads

    1

    Version

    0.4.0

    License

    MIT

    Unpacked Size

    31.1 kB

    Total Files

    34

    Last publish

    Collaborators

    • jakagacic
    • dvorsky
    • degordian-dev
    • renatoruk
    • ilesar
    • kru