Nihilist Pocket Monsters

    sass-utils-collection

    3.0.1 • Public • Published

    License

    Sass utils collection

    A collection of sass mixins and functions

    Table of contents

    1. Installation
    2. Usage
    3. Configuration
      1. Media breakpoints
      2. Flexbox Grid
    4. Utils
      1. Layout
        1. center-content
        2. center-self
        3. fill-space
        4. grid-column-width
        5. grid-container
        6. grid-row
        7. set-grid-column-width
        8. set-nested-column-width
        9. grid-column
        10. grid-offset
        11. hide-up
        12. hide-down
        13. media
        14. media-up
        15. media-down
        16. sticky-footer
      2. Resets
        1. reset-appearance
        2. reset-button
        3. reset-input
        4. reset-link
        5. reset-list
        6. reset-placeholder
      3. Misc
        1. aspect-ratio
        2. clearfix
        3. dynamic-shadow
        4. enable-kerning
        5. fluid-property
        6. fluid-value
        7. font-smoothing
        8. media-property
        9. prefix
        10. property
        11. random-color
        12. responsive-img
        13. sideways-text
        14. size
        15. system-font
        16. truncate-line
        17. visually-hidden
    5. License

    Installation

    Install with npm:

    npm install sass-utils-collection
    

    Install with yarn:

    yarn add sass-utils-collection
    

    Usage

    Import it in your main sass file:

    @import '~sass-utils-collection';
    

    Depending on your configuration, you may need to include a full path:

    @import './node_modules/sass-utils-collection/index';
    

    Or import modules manually:

    @import '~sass-utils-collection/lib/layout/media';
    @import '~sass-utils-collection/lib/layout/hide';
    @import '~sass-utils-collection/lib/layout/flexbox-grid';
    

    Configuration

    Media breakpoints

    Breakpoints values as well as breakpoint names can be overwritten.

    Default
    $media-breakpoints: (
      xs: 0,
      sm: 576px,
      md: 768px,
      lg: 1170px,
      xl: 1440px,
    );
    

    Flexbox Grid

    From version 1.0.0 grid module has to be imported manually lib/layout/flexbox-grid

    Grid's breakpoint names has to correspond to the media breakpoints.

    The $grid-columns map has to have a default property.

    Default
    $grid-gutter: (
      xs: 16px,
      md: 24px,
    );
    
    $grid-space-around: (
      xs: 24px,
      md: 64px,
      lg: 40px,
    );
    
    $grid-columns: (
      default: 12,
    );
    
    $grid-container-width: (
      default: 1440px,
    );
    

    Utils

    Layout

    center-content

    type: mixin

    Centers an element's content

    Parameters
    name type default description
    type string both one of: both, vertically, horizontally
    Example
    // Usage
    .element-1 {
      @include center-content;
    }
    
    .element-2 {
      @include center-content(vertically);
    }
    
    // Output
    .element-1 {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
    
    .element-2 {
      display: flex;
      flex-direction: row;
      align-items: center;
    }

    center-self

    type: mixin

    Centers an element

    Parameters
    name type default description
    type string both one of: both, horizontally, vertically
    position string absolute -
    Example
    // Usage
    .element-1 {
      @include center-self;
    }
    
    .element-2 {
      @include center-self(vertically, relative);
    }
    
    // Output
    .element-1 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%)
    }
    
    .element-2 {
      position: relative;
      top: 50%;
      transform: translate(0, -50%)
    }

    fill-space

    type: mixin

    Stretch an element to fill its parent

    Parameters
    name type default description
    size string 100% when it is smaller or greater than 100% content is also centered
    position string absolute -
    Example
    // Usage
    .element-1 {
      @include fill-space;
    }
    
    .element-2 {
      @include fill-space(80%, relative);
    }
    
    // Output
    .element-1 {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
    }
    
    .element-2 {
      position: relative;
      width: 80%;
      height: 80%;
      top: 10%;
      left: 10%;
    }

    grid-column-width

    type: function

    Gets a column width

    Parameters
    name type default description
    breakpoint-name string - one of breakpoint names declared in the media configuration
    columns-count number - -

    grid-container

    type: mixin

    Creates a grid container

    grid-row

    type: mixin

    Creates a grid row

    set-grid-column-width

    type: mixin

    Sets a grid column width properties

    Parameters
    name type default description
    width string - -

    set-nested-column-width

    type: mixin

    Sets a grid column width properties for nested column

    Parameters
    name type default description
    columns-count number - -
    container-size number - container size in columns
    breakpoint-name string - one of breakpoint names declared in the media configuration

    grid-column

    type: mixin

    Creates a grid column

    Parameters
    name type default description
    columns map () columns map like: (xs: 12, md: 6, xl: 4)

    grid-offset

    type: mixin

    Creates a grid column's offset

    Parameters
    name type default description
    columns map () columns map like: (xs: 12, md: 6, xl: 4)

    hide-up

    type: mixin

    Hides element on a screen resolution equal or greater than given one

    Parameters
    name type default description
    breakpoint-name string null one of breakpoint names declared in the media configuration
    width string null custom width can be used instead of breakpoint name
    Example
    // Usage
    .element-1 {
      @include hide-up(md);
    }
    
    .element-2 {
      @include hide-up($width: 1044px);
    }
    
    // Output
    @media (min-width: 768px) {
      .element-1 {
        display: none;
      }
    }
    
    @media (min-width: 1044px) {
      .element-2 {
        display: none;
      }
    }

    hide-down

    type: mixin

    Hides element on a screen resolution smaller than given one

    Parameters
    name type default description
    breakpoint-name string null one of breakpoint names declared in the media configuration
    width string null custom width can be used instead of breakpoint name
    Example
    // Usage
    .element-1 {
      @include hide-down(md);
    }
    
    .element-2 {
      @include hide-down($width: 1044px);
    }
    
    // Output
    @media (max-width: 767px) {
      .element-1 {
        display: none;
      }
    }
    
    @media (max-width: 1043px) {
      .element-2 {
        display: none;
      }
    }

    media

    type: mixin

    Applies styles to given media query

    Parameters
    name type default description
    breakpoint string null one of breakpoint names declared in the media configuration
    is-mobile-first boolean true -
    width string null custom width can be used instead of breakpoint name

    media-up

    type: mixin

    Applies styles to screen resolutions equal or greater than given one

    Parameters
    name type default description
    breakpoint string null one of breakpoint names declared in the media configuration
    width string null custom width can be used instead of breakpoint name
    Example
    // Usage
    .element-1 {
      @include media-up(md) {
        width: 50%;
      }
    }
    
    .element-2 {
      @include media-up($width: 1500px) {
        width: 1000px;
      }
    }
    
    // Output
    @media (min-width: 768px) {
      .element-1 {
        width: 50%;
      }
    }
    
    @media (min-width: 1500px) {
      .element-2 {
        width: 1000px;
      }
    }

    media-down

    type: mixin

    Applies styles to screen resolutions smaller than given one

    Parameters
    name type default description
    breakpoint string null one of breakpoint names declared in the media configuration
    width string null custom width can be used instead of breakpoint name
    Example
    // Usage
    .element-1 {
      @include media-down(md) {
        width: 100%;
      }
    }
    
    .element-2 {
      @include media-down($width: 1500px) {
        width: 500px;
      }
    }
    
    // Output
    @media (max-width: 767px) {
      .element-1 {
        width: 100%;
      }
    }
    
    @media (max-width: 1499px) {
      .element-2 {
        width: 500px;
      }
    }

    sticky-footer

    type: mixin

    Makes an element stay always at the bottom

    Note: for cross-browser support additional code may be needed: https://github.com/philipwalton/solved-by-flexbox/blob/master/assets/css/components/site.css

    Parameters
    name type default description
    content-selector string - selector like .content or &__content
    Example
    // Usage
    .element {
      @include sticky-footer(.content);
    }
    
    // Output
    .element {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }
    
    .element .content {
      flex: 1;
    }

    Resets

    reset-appearance

    type: mixin

    Resets the appearance property

    Example
    // Usage
    .element {
      @include reset-appearance;
    }
    
    // Output
    .element {
      -webkit-appearance: none;
      -moz-appearance: none;
    }

    reset-button

    type: mixin

    Resets a button's default styles

    Parameters
    name type default description
    cursor string pointer -
    Example
    // Usage
    .el {
      @include reset-button;
    }
    
    // Output
    .el {
      background: none;
    
      border: 0;
      border-radius: 0;
      outline: none;
      padding: 0;
    
      color: inherit;
      font: inherit;
      cursor: pointer;
    }
    
    .el::-moz-focus-inner {
      border: 0;
    }

    reset-input

    type: mixin

    Resets an input's default styles

    Example
    // Usage
    .element {
      @include reset-input;
    }
    
    // Output
    .element {
      background: none;
    
      border: 0;
      border-radius: 0;
    
      padding: 0;
      outline: none;
    
      box-shadow: none;
    }

    reset-link

    type: mixin

    Resets a link's default styles

    Parameters
    name type default description
    color string inherit -
    Example
    // Usage
    .element {
      @include reset-link;
    }
    
    // Output
    .element {
      text-decoration: none;
      color: inherit;
    }

    reset-list

    type: mixin

    Resets a list's default styles

    Example
    // Usage
    .element {
      @include reset-list;
    }
    
    // Output
    .element {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    reset-placeholder

    type: mixin

    Resets a placeholder's default style

    Example
    // Usage
    .element {
      @include reset-placeholder;
    }
    
    // Output
    .element::placeholder {
      opacity: 1;
      color: inherit;
    }

    Misc

    aspect-ratio

    type: mixin

    Sets width to height size ratio

    Parameters
    name type default description
    width number 1 -
    height number 1 -
    grow boolean false allows content to increase element size when content takes more space
    Example
    // Usage
    .element-1 {
      @include aspect-ratio(16, 9);
    }
    
    .element-2 {
      @include aspect-ratio(4, 3, true);
    }
    
    // Output
    .element-1 {
      position: relative;
    }
    .element-1::before {
      content: '';
      display: block;
      padding-top: 0.5625%;
    }
    
    .element-2::before,
    .element-2::after {
      content: '';
    }
    
    .element-2::before {
      padding-top: 75%;
      float: left;
    }
    
    .element-2::after {
      display: block;
      clear: both;
    }

    clearfix

    type: mixin

    Forces an element to self-clear its children

    Example
    // Usage
    .element {
      @include clearfix;
    }
    
    // Output
    .element::after {
      content: '';
      display: table;
      clear: both;
    }

    dynamic-shadow

    type: mixin

    Creates shadow based on an element's background

    Parameters
    name type default description
    offset-x string - -
    offset-y string - -
    blur-radius string - -
    opacity number 0.75 -
    Example
    // Usage
    .element {
      @include dynamic-shadow(20px, 20px, 5px);
    }
    
    // Output
    .element {
      position: relative;
      z-index: 1;
    }
    
    .element::after {
      content: '';
      position: absolute;
      top: 20px;
      left: 20px;
    
      width: 100%;
      height: 100%;
    
      filter: blur(5px);
      opacity: 0.75;
    
      background: inherit;
      border-radius: inherit;
      z-index: -1;
    }

    enable-kerning

    type: mixin

    Enables font kerning — improves spacing and fit of specific pairs of letters

    Example
    // Usage
    .element {
      @include enable-kerning;
    }
    
    // Output
    .element {
      font-feature-settings: 'kern' 1;
      text-rendering: optimizeLegibility;
    }

    fluid-property

    type: mixin

    Returns property with fluid value based on viewport size

    Parameters
    name type default description
    property string - -
    from number - -
    to number - -
    media-from number - -
    media-to number - -
    media-type number width width or height
    Example
    // Usage
    .el-1 {
      @include fluid-property(font-size, 10px, 23px, 375px, 1440px);
    }
    
    .el-2 {
      @include fluid-property(height, 100px, 200px, 768px, 1280px, height);
    }
    
    // Output
    .el-1 {
      font-size: 10px;
    }
    @media (min-width: 375px) {
      .el-1 {
        font-size: calc(1.22066vw + 5.42254px);
      }
    }
    @media (min-width: 1440px) {
      .el-1 {
        font-size: 23px;
       }
    }
    
    .el-2 {
      height: 100px;
    }
    @media (min-height: 768px) {
      .el-2 {
        height: calc(19.53125vh + -50px);
      }
    }
    @media (min-height: 1280px) {
      .el-2 {
        height: 200px;
      }
    }

    fluid-value

    type: function

    Returns fluid value based on viewport size

    Parameters
    name type default description
    from number - -
    to number - -
    media-from number - -
    media-to number - -
    unit number vw vw or vh
    Example
    // Usage
    .element-1 {
      font-size: fluid-value(16px, 24px, 320px, 768px);
    }
    
    .element-2 {
      font-size: fluid-value(16px, 24px, 320px, 768px, vh);
    }
    
    // Output
    .element-1 {
      font-size: calc(1.78571429vw + 10.2857142857px);
    }
    
    .element-2 {
      font-size: calc(1.78571429vh + 10.2857142857px);
    }

    font-smoothing

    type: mixin

    Enables anti-aliasing effect

    Example
    // Usage
    .element {
      @include font-smoothing;
    }
    
    // Output
    .element {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    media-property

    type: mixin

    Sets a property for multiple breakpoints

    Parameters
    name type default description
    property string - -
    values map () -
    Example
    // Usage
    .el-1 {
      @include media-property(font-size, (xs: 12px, md: 14px, lg: 16px));
    }
    
    // Output
    .el-1 {
      font-size: 12px;
    
      @media (min-width: 768px) {
        font-size: 14px;
      }
    
      @media (min-width: 1170px) {
        font-size: 16px;
      }
    }

    prefix

    type: mixin

    Applies prefixes to given property

    Parameters
    name type default description
    property string - -
    value string - -
    prefixes... string - any number of arguments with prefixes
    Example
    // Usage
    .element {
      @include prefix(appearance, none, moz, webkit);
    }
    
    // Output
    .element {
      -moz-appearance: none;
      -webkit-appearance: none;
      appearance: none;
    }

    property

    type: mixin

    Sets the same value to multiple properties

    Parameters
    name type default description
    value string - -
    properties... string - any number of arguments with properties
    Example
    // Usage
    .element {
      @include property(inherit, background-color, color, font);
    }
    
    // Output
    .element {
      background-color: inherit;
      colo: inherit;
      font: inherit;
    }

    random-color

    type: function

    Generates random rgba color

    Parameters
    name type default description
    alpha number 1 -
    Example
    // Usage
    .element-1 {
      background-color: random-color();
    }
    
    .element-2 {
      background-color: random-color(0.8);
    }
    
    // Output
    .element-1 {
      background-color: #8399f2;
    }
    
    .element-2 {
      background-color: rgba(218, 230, 202, 0.8);
    }

    responsive-img

    type: mixin

    Makes an image responsive

    Example
    // Usage
    .element {
      @include responsive-img;
    }
    
    // Output
    .element {
      width: 100%;
      display: block;
    }

    sideways-text

    type: mixin

    Turns a text sideways

    Parameters
    name type default description
    bottom-to-top boolean false -
    align string left -
    Example
    // Usage
    .el-1 {
      @include sideways-text;
    }
    
    .el-2 {
      @include sideways-text(true);
    }
    
    .el-3 {
      @include sideways-text(true, right);
    }
    
    // Output
    .el-1 {
      writing-mode: vertical-lr;
    }
    
    .el-2 {
      writing-mode: vertical-rl;
      transform: scale(-1);
    }
    
    .el-3 {
      writing-mode: vertical-lr;
      transform: scale(-1);
    }

    size

    type: mixin

    Sets width and height

    Parameters
    name type default description
    width string - -
    height string - if not supplied width parameter is used instead
    Example
    // Usage
    .element-1 {
      @include size(200px);
    }
    
    .element-2 {
      @include size(100%, 200px);
    }
    
    // Output
    .element-1 {
      width: 200px;
      height: 200px;
    }
    
    .element-2 {
      width: 100%;
      height: 200px;
    }

    system-font

    type: mixin

    Sets system's default font

    Example
    // Usage
    .el {
      @include system-font;
    }
    
    // Output
    .el {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    }

    truncate-line

    type: mixin

    Truncates one line text

    Example
    // Usage
    .element {
      @include truncate-line;
    }
    
    // Output
    .element {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    visually-hidden

    type: mixin

    Applies visually hidden utility — https://a11yproject.com/posts/how-to-hide-content/

    Parameters
    name type default description
    focusable boolean false -
    Example
    // Usage
    .element-1 {
      @include visually-hidden;
    }
    .element-2 {
      @include visually-hidden($focusable: true);
    }
    
    // Output
    .element-1 {
      position: absolute !important;
      height: 1px;
      width: 1px;
      overflow: hidden;
      clip: rect(1px, 1px, 1px, 1px);
      white-space: nowrap;
    }
    
    .element-2:not(:focus):not(:active) {
      position: absolute !important;
       height: 1px;
       width: 1px;
       overflow: hidden;
       clip: rect(1px, 1px, 1px, 1px);
       white-space: nowrap;
    }

    License

    sass-utils-collection is licensed under MIT license.

    Install

    npm i sass-utils-collection

    DownloadsWeekly Downloads

    46

    Version

    3.0.1

    License

    MIT

    Unpacked Size

    71.8 kB

    Total Files

    64

    Last publish

    Collaborators

    • adrianklimek