Nearsighted Prank Master

    worko-mixins

    3.0.1 • Public • Published

    Worko Mixins

    Author: Worköholics workoholics.es

    Sass mixins to resolve common CSS functionalities. This package is dependency of other packages developed by Worköholics

    You can import each mixin file independently or import _mixins.scss if you need all the mixins of the package.

    Install

    npm install --save worko-mixins

    Usage

    Import independently the file you need or import all mixins using _mixins.scss file.

    // Enable mixins declared on transititons.scss
    @import "./path/to/node_modules/worko-mixins/transitions.scss";
    // Enable all mixins declared on the package
    @import "./path/to/node_modules/worko-mixins/mixins.scss"

    Files

    • _animations.scss: Mixins related with css animations

    • _grid.scss: Mixins related with elements of the grid: columns, rows, containers...

    • _media-queries: Mixins to manage css media queries and breakpoints

    • _transitions.scss: Mixins to manage css transitions

    • _utils: Mixins to solve different functionalities

    • _mixins.scss: Import this file to use mixins of all files described above

    Animations

    keyframes

    Add css keyframes supported by all browsers

    @include keyframes(animationName) {
      0% { transform: translateY(0) }
      100%{ transform: translateY(-50%)}
    }

    Media queries

    Mixins to manage media queries

    Default variables

    You can override the default variables to manage your custom breakpoints.

    $breakpoint-sm: 576px !default; 
    $breakpoint-md: 768px !default;
    $breakpoint-lg: 992px !default;
    $breakpoint-xl: 1200px !default;

    mq_sm

    Mixin to declare styles on screens bigger than $breakpoint-sm

    @include mq-sm {
      //your styles
    }

    mq_md

    Mixin to declare styles on screens bigger than $breakpoint-md

    @include mq-md {
      //your styles
    }

    mq_lg

    Mixin to declare styles on screens bigger than $breakpoint-lg

    @include mq-lg {
      //your styles
    }

    mq_xl

    Mixin to declare styles on screens bigger than $breakpoint-xl

    @include mq-xl {
      //your styles
    }

    mq($breakpoint)

    Mixin to declare styles on screens bigger than the value passed as $breakpoint parameter

    Parameters:

    Arguments Description
    $breakpoint Value of the breakpoint in pixels

    @include mq(500px) {
      //your styles
    }

    Transitions

    transition($args...)

    Mixin to autoprefix transition property

    Parameters:

    Arguments Description
    $args List of transition values

    @include transition(opacity .35s ease-in-out, color .5 ease-in);

    defaultTransition

    Mixin to add the transition "all .35 ease-in-out" prefixed

    @include defaultTransition;

    Utils

    prefixer($property, $value)

    Mixin to auto-prefix properties

    Parameters:

    Arguments Description
    $property Property to auto-prefix
    $value Value of the property

    @include prefixer(transform, translateY(-50%)); 

    #### opacity($value)

    Arguments Description
    $value Value of the opacity property from 0 to 1

    Mixin to set opacity to elements compatible with different browsers

    @include opacity(0.2); 

    Grid

    Default variables

    You can override the default variables to manage your custom properties.

    $cols: 12 !default;
    $gutter: 15px !default;
    $safe-area: 90px !default;
    $safe-area-xs: 30px !default;

    getWidthByCols($c)

    Function that returns the value of the column width in percentage

    Parameters:

    Arguments Description
    $c Column quantity from 0 to $cols

    div {
      width: getWidthByCols(2);
    }

    getWidthByColsAndTotal($c, $total)

    Function that returns the value of the column width in percentage from a total of columns

    Parameters:

    Arguments Description
    $c Column quantity from 0 to $total
    $total Total of columns

    div {
      width: getWidthByColsAndTotal(2, 6);
    }

    setFlexWidth($width)

    Mixin to set a fixed width element into the flexbox

    Parameters:

    Arguments Description
    $width Width of the element

    @include setFlexWidth(80%);
    
    //or
    
    @include setFlexWidth(getWidthByCols(6)); 
    
    //or
    
    @include setFlexWidth(getWidthByColsAndTotal(6, 10)); 

    buildGrid($prefix)

    Mixin to generate the css necesary to support the grid scaffolded with the attributes of .col elements

    Parameters:

    Arguments Description
    $prefix Prefix of each breakpoint

    .col {
      padding-left: $gutter;
      padding-right: $gutter;
      flex-grow: 1;
    
      @include buildGrid('xs');
      @include mq-sm {
        @include buildGrid('sm');
      }
      @include mq-md {
        @include buildGrid('md');
      }
      @include mq-lg {
        @include buildGrid('lg');
      }
      @include mq-xl {
        @include buildGrid('xl');
      }
    }
    

    Keywords

    Install

    npm i worko-mixins

    DownloadsWeekly Downloads

    80

    Version

    3.0.1

    License

    ISC

    Unpacked Size

    10.9 kB

    Total Files

    10

    Last publish

    Collaborators

    • myriamrr
    • eetxaniz
    • inigoh
    • nereagomez
    • igornietogarrote
    • ikerztipot
    • gorka1