superior-scss

    3.0.3 • Public • Published

    superior.scss

    Superior is a complete grid system powered by scss mixins that reduce code bloat and allow more flexibility! Highly influenced and inspired by Susy and Bootstrap.

    Superior does not include browser prefixes. Superior was created under the assumption most developers use autoprefixers for the most control of browser support.

    Demo

    Install

    NPM

    npm install superior-scss --save

    Yarn

    yarn add superior-scss

    CDN

    https://cdn.jsdelivr.net/npm/superior-scss/superior.scss"
    

    Import into scss

    // scss 
    @import "~superior";
    ...

    Default Variables

    $superior-cols   : 12 !default;
    $superior-gutter : 1rem !default;

    Superior defaults to a 12 column grid system with 16px gutters. Gutters can be set to pixel, em, rem etc. although percentage gutters are not recommended due to issues when nesting.

    Column Wrapper (row)

    All columns need to be wrapped with a div that uses the cols() mixin. It is NOT recommended to use cols() directly on your .container element.

    Mixin:

    @mixin cols($flex: flex, $dir: row, $wrap: wrap, $justify: flex-start, $align-items: flex-start)

    Example:

    // scss 
    .my-div {
      @include cols();
    }
     
    // compiled css 
    .my-div {
      margin: 0 -0.5rem;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: flex-start;
    }

    Don't want to use flexbox? Set $flex: false to use floated columns.

    Columns

    The total number of columns is defaulted to the $cols variable but can be changed to any number.

    Flexbox columns

    Mixin:

    @mixin make-flex($span, $cols: $cols, $order: null)

    If $order is left null it will not be included in the compiled css. Note: The column count passed to the mixin can be a decimal number (ex: make-flex(4.5)).

    Example:

    // scss 
    .my-div {
      @include make-flex(3);
    }
     
    // compiled css 
    .my-div {
      flex: 0 1 25%;
      max-width: 25%;
      padding: 0 0.5rem;
      box-sizing: border-box;
    }
     
     
    // scss 
    .my-div {
      @include make-flex(6, $order: 2);
    }
     
    // compiled css 
    .my-div {
      flex: 0 1 50%;
      max-width: 50%;
      padding: 0 0.5rem;
      box-sizing: border-box;
      order: 2;
    }

    Update flexbox columns

    To add new flex dimensions on an element that already has makeFlex use updateFlex.

    Mixin:

    @mixin update-flex($span, $cols: $cols)

    Example:

    // scss 
    .my-div {
      @include make-flex(3);
     
      @media(...) {
        @include update-flex(12);
      }
    }
     
    // compiled css 
    .my-div {
      flex: 0 1 25%;
      max-width: 25%;
      padding: 0 0.5rem;
      box-sizing: border-box;
    }
     
    @media(...) {
      .my-div {
        flex: 0 1 100%
        max-width: 100%;
      }
    }

    Floated Columns

    Mixin:

    @mixin make-float($span, $cols: $cols, $float: left)

    Example:

    // scss 
    .my-div {
      @include make-float(4);
    }
     
    // compiled css 
    .my-div {
      width: 25%;
      padding: 0 0.5rem;
      box-sizing: border-box;
      float: left;
    }

    Functions

    Span

    span($span, $cols: $cols)

    Example:

    // scss 
    .my-div {
      width: span(4);
    }
     
    .my-other-div {
      flex: 0 1 span(3, 6);
    }
     
     
    // compiled css 
    .my-div {
      width: 25%;
    }
     
    .my-other-div {
      flex: 0 1 50%;
    }

    Utility Mixins

    Offset

    Mixin:

    @mixin offset($span, $direction: left, $cols: $cols)

    Example:

    // scss 
    .my-div {
      @include offset(3);
    }
     
    // compiled css 
    .my-div {
      margin-left: 25%;
    }

    Clearfix

    The clearfix mixin is already included in the cols() mixin if $flex: false

    Mixin:

    @include clearfix;

    Bonus

    Make Classes

    Don't want to use the mixins? Use makeClasses() to output a class for every column size.

    Mixin:

    @include make-classes($flex: true);

    Flexbox Example:

    // scss 
    @include make-classes;
     
    // compiled css 
    .cols {
      margin: 0 -0.5rem;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: flex-start;
    }
     
    .col-1 {
      flex: 0 1 8.3333333333%;
      max-width: 8.3333333333%;
      padding: 0 0.5rem;
      box-sizing: border-box;
    }
    .col-2 {...}
    .col-3 {...}
    .col-4 {...}
    ...

    Floated Example:

    Prefer floated columns? Set $flex to false.

    // scss 
    @include make-classes(false);
     
    // compiled css 
    .cols {
      margin: 0 -0.5rem;
     
    }
     
    .cols::after {
      content: '';
      display: table;
      clear: both;
    }
     
    .col-1 {
      width: 8.3333333333%;
      padding: 0 0.5rem;
      box-sizing: border-box;
      float: left;
    }
    .col-2 {...}
    .col-3 {...}
    .col-4 {...}
    ...

    Install

    npm i superior-scss

    DownloadsWeekly Downloads

    27

    Version

    3.0.3

    License

    SEE LICENSE IN LICENSE

    Unpacked Size

    110 kB

    Total Files

    5

    Last publish

    Collaborators

    • jbsmith731