bolts-lib

    1.0.6 • Public • Published

    Bolts

    Version Total Downloads License

    Bolts is a front-end helper library, consisting of practical Sass mixins and functions, along with a collection of JavaScript functions, helping you deal with all the mundane website building and styling tasks, so that you can focus on creating something new. It aims to be a toolkit that takes care of the things you're tired of doing.

    Bolts doesn't output any unnecessary styles, and all JavaScript functions can be loaded separately through ES6+ imports, making its footprint as tiny as possible.

    Installation

    npm

    npm i bolts-lib

    yarn

    yarn add bolts-lib

    Sass

    Usage

    Including Bolts in your Sass files

    @import '~bolts-lib/src/sass/bolts';

    Configuration variables

    Define any of the following variables before including Bolts to set default options for many of the mixins and functions.

    Variable name Example value Description
    $bolts-reset-focus-styles true Removes outline on :focus state
    $bolts-reset-list-styles true Resets list-style on all <ul> and <ol> elements
    $bolts-reset-legacy-element-styles true Resets styles on some deprecated elements (such as font, marquee, blink, nobr and more
    $bolts-default-sticky-footer-wrapper-selector '> *:first-child' Selector for wrapper (content without footer) used by sticky-footer mixin
    $bolts-default-sticky-footer-footer-selector '> footer' Selector for footer used by sticky-footer mixin
    $bolts-default-pseudo before Pseudo selector used by aspect-ratio, clear and vertical-align mixins if argument is not passed
    $bolts-default-font-path '../fonts' $path used by font mixin if argument is not passed
    $bolts-default-container-width 90% $width used by container mixin if argument is not passed
    $bolts-default-container-max-width 1080px $max-width used by container mixin if argument is not passed
    $bolts-default-container-align center '$align' used by container mixin if argument is not passed
    $bolts-default-inline-layout-align top $align used by inline-layout mixin if argument is not passed
    $bolts-default-inline-layout-gutters 20px $gutters used by inline-layout mixin if argument is not passed
    $bolts-default-flex-layout-align top $align used by flex-layout mixin if argument is not passed
    $bolts-default-flex-layout-gutters 20px $gutters used by flex-layout mixin if argument is not passed
    $bolts-default-background-image '../images/bg.jpg' $image used by background mixin if argument is not passed
    $bolts-default-background-size cover $size used by backgound mixin if argument is not passed
    $bolts-default-background-position 50% 50% $position used by backgound mixin if argument is not passed
    $bolts-default-background-repeat repeat $repeat used by backgound mixin if argument is not passed
    $bolts-default-background-attachment fixed $attachment used by backgound mixin if argument is not passed
    $bolts-default-background-color #ddd $color used by backgound mixin if argument is not passed
    $bolts-default-transition-property opacity $property used by transition mixin if argument is not passed
    $bolts-default-transition-duration 0.2s $duration used by transition mixin if argument is not passed
    $bolts-default-transition-easing ease-in-out $easing used by transition mixin if argument is not passed
    $bolts-default-transition-delay 0.1s $delay used by transition mixin if argument is not passed
    $bolts-default-transition-queue true Enables queue with default property on transition mixin unless overwritten
    $bolts-default-transition-queue-property visibility $queue (property) used by transition mixin if argument is not passed
    $bolts-default-transition-queue-duration 0s $queue-duration used by transition mixin if argument is not passed
    $bolts-default-transition-queue-easing linear $queue-easing used by transition mixin if argument is not passed
    $bolts-default-auto-col-min 1 $min (minimum amount of columns) used by auto-col mixin if argument is not passed
    $bolts-default-auto-col-max 12 $max (maximum amount of columns) used by auto-col mixin if argument is not passed
    $bolts-default-responsive-font-size-ratio 1.6 $ratio used by responsive-font-size mixin if argument is not passed
    $bolts-breakpoints (medium: 500px) Breakpoints that can be accessed by the width and height functions when writing media queries
    $bolts-selectors (headings: 'h1, h2') Map containing element collections that can be accessed by the select mixin
    $bolts-easings ( ease-in-quad: '0.55, 0.085, 0.68, 0.53' ) Map containing element collections that can be accessed by the select mixin



    Functions

    Breakpoint

    • width()
    • width-from()
    • width-to()
    • height()
    • height-from()
    • height-to()

    Functions to run inside your @media queries that lets you access your defined breakpoints. It automatically compensates your pixel values to prevent duplicate properties being set.

    Usage:

    .columns {
      @include inline-layout;
    
      .column {
        @media ( width-to(small) )      { width: 100%; }
        @media ( width(small, medium) ) { width: 50%; }
        @media ( width(medium, large) ) { width: 25%; }
        @media ( width-from(large) )    { width: 12.5%; }
      }
    }

    Arguments:

    Name Accepted values Description
    $from CSS length unit or key name from the $bolts-breakpoints map Sets the min-width or min-height in the media query.
    $to CSS length unit or key name from the $bolts-breakpoints map Sets the max-width or max-height in the media query.

    Retina

    • retina()

    Function to run in your @media queries to target retina screens.


    Usage:

    .icon {
      @media ( retina() ) { background-image: url('icon@2x.jpg'); }
    }

    Easings

    • ease()

    Returns a cubic-bezier with the specified easing. If a named easing if supplied, it looks for easings defined in $bolts-easings, otherwise the supplied value is used directly.

    Name Accepted values Description
    $easing CSS standard named easings, cubic-bezier, or key name from the $bolts-easings map Desired easing



    Mixins

    Reset

    • reset

    This mixin currently has no description

    Usage:

    // This mixin currently has no example

    Arguments:

    Name Accepted values Default value Description
    - - - -

    Sticky footer

    • sticky-footer()

    This mixin currently has no description

    Usage:

    .page {
      @include sticky-footer(
        '.page-wrapper',
        '.page-footer'
      );
    }

    Arguments:

    Name Accepted values Default value Description
    $wrapper-selector - - -
    $footer-selector - - -

    Fonts

    • font()

    Simpler declaration of @font-faces (include this before any output, including the reset and boilerplate).

    Usage:

    @include font(
      $family:   FontAwesome,
      $filename: fontawesome-webfont,
      $formats:  ( eot, woff2, woff, ttf, svg ),
      $svg-id:   fontawesomeregular
    );
    
    @include font(
      $family: 'Lato',
      $formats: ( woff ),
      $variations: (
        ( filename: 'Lato-Regular' ),
        ( filename: 'Lato-Italic', style: italic ),
        ( filename: 'Lato-Bold', weight: 700 ),
        ( filename: 'Lato-BoldItalic', weight: 700, style: italic )
      )
    )

    Arguments:

    Name Example values Description
    $family 'Lato' Font family name
    $weight 400 font-weight
    $style normal font-style
    $filename Lato-Regular Font filename without extension
    $formats (ttf, otf, woff, woff2, svg) List of the available formats of your font
    $path '../fonts' Defaults to $bolts-font-path
    $svg-id latoregular Defaults to filename
    $variations ( (filename: Lato-Regular), (filename: Lato-Bold, weight: 700) ) List of maps with font variations. You only need to enter the properties that deviate from the defaults.

    Responsive font size

    • responsive-font-size()

    This mixin currently has no description

    Usage:

    // This mixin currently has no example

    Arguments:

    Name Accepted values Default value Description
    $ratio - - -
    $min - - -
    $max - - -

    Container

    • container()

    Sets basic container styling on element.

    Usage:

    .page {
      .page-inner {
        @include container(90%, 1080px);
      }
    }

    Arguments:

    Name Accepted values Default value Description
    $width CSS length unit Value of $bolts-default-container-width Width of container
    $max-width CSS length unit Value of $bolts-default-container-max-width Max width of container
    align left, center, right Value of $bolts-default-container-align Container alignment

    Clearing whitespace

    • clear-whitespace()

    Eliminates the space between inline-block elements using font-size: 0.

    Usage:

    .header {
      @include clear-whitespace($font-size: 12px);
    
      .header-logo {
        display: inline-block;
        width: 120px;
        height: 60px;
      }
    }

    Arguments:

    Name Accepted values Default value Description
    $font-size CSS length unit 1rem Font size to reset child elements to (can't use em)

    Overlay

    • overlay()

    This mixin currently has no description

    Usage:

    .hero {
        position relative;
        height: 100vh;
    
        &:before {
            content: '';
            @include overlay;
            background-color: rgba(black, 0.5);
        }
    }

    Arguments:

    Name Accepted values Description
    $force-size Bool sets width and height to 100% (necessary when applied to iframes)

    Backgrounds

    • background()

    This mixin currently has no description

    Usage:

    .icon {
      @include background(
        '../images/icon.png',
        $size: contain,
        $position: 50% 50%
      );
      width: 40px;
      height: 40px;
    }

    Arguments:

    Name Accepted values Default value Description
    - - - -

    Transitions

    • transition()

    Sets transition with pre set vales for duration and easing. Second argument queues a second transition after the initial transition is done.

    Usage:

    .button {
        background-color: black;
        @include transition(background-color);
    
        &:hover {
          background-color: red;
        }
    }

    Usage with $queue:

    .header-icon {
        visibility: hidden;
        opacity: 0;
        @include transition(opacity, $queue: visibility);
    
        @include state('menu-open') {
          visibility: visible;
          opacity: 1;
          @include transition(opacity);
        }
    }

    Usage:

    // This mixin currently has no example

    Arguments:

    Name Accepted values Default value Description
    - - - -

    Transition height

    • transition-height()

    This mixin currently has no description

    Usage:

    // This mixin currently has no example

    Arguments:

    Name Accepted values Default value Description
    - - - -

    Element aspect ratio

    • aspect-ratio()

    Set an aspect ratio for a block element.

    Usage:

    .hero {
      @include background('../images/background.jpg');
      @include aspect-ratio(16, 9);
    }

    Arguments:

    Name Accepted values Description
    $x Number What width value to base the ratio calculation on
    $y Number What height value to base the ratio calculation on

    Classic clearfix

    • clear()

    This mixin currently has no description

    Usage:

    // This mixin currently has no example

    Arguments:

    Name Accepted values Default value Description
    - - - -

    Element centering

    • center()

    Center an element inside it's closest relatively positioned parent in either, or both direction (vertical/horizontal)

    Known issue: Some browsers positions the element "between pixels", making it appear blurred. Use transform-style: preserve-3d on the parent to avoid this.

    Usage:

    .hero {
      position: relative;
    
      .hero-text {
        @include center(vertical);
        left: 0;
        right: 0;
      }
    }

    Arguments:

    Name Accepted values Default value Description
    $direction both, vertical, horizontal both What axis to center the element on

    Vertical alignment

    • vertical-align()

    This mixin currently has no description

    Usage:

    .hero {
      @include vertical-align(middle);
      min-height: 100vh;
      text-align: center;
    
      .hero-inner {
        width: 90%;
        max-width: 1080px;
        text-align: left;
    
        .hero-title {
          @extend %title-large;
        }
    
        .hero-subtitle {
          @extend %title-medium;
        }
      }
    }

    Arguments:

    Name Accepted values Default value Description
    - - - -

    Line clamp

    • line-clamp()

    Truncate text at the selected number of lines.

    Usage:

    .excerpt {
      @include line-clamp(3);
    }

    Arguments:

    Name Accepted values Default value Description
    $rows integer 0 If no number is specified the text is not truncated

    Visually hidden

    • visually-hidden()

    This mixin currently has no description

    Usage:

    // This mixin currently has no example

    Arguments:

    Name Accepted values Default value Description
    - - - -

    Antialiasing

    • antialias()

    This mixin currently has no description

    Usage:

    .hero-text {
      color: white;
      @include antialias;
    }

    Arguments:

    Name Accepted values Description
    $method default, none, reset Sets font smoothing (webkit and moz-osx), defaults to antialiased/grayscale

    Scrollable content

    • scroll()

    This mixin currently has no description

    Usage:

    .modal-inner {
      @include scroll;
    }

    Arguments:

    Name Accepted values Default value Description
    - - - -

    Viewport

    • viewport()

    This mixin currently has no description

    Usage:

    .page {
      @include viewport;
    }

    Arguments:

    Name Accepted values Default value Description
    - - - -

    Grayscale

    • grayscale()

    This mixin currently has no description

    Usage:

    .photo {
      @include transition(filter -webkit-filter);
    
      &:hover {
        @include grayscale;
      }
    }

    Layouting with inline blocks

    • inline-layout()
    • inline-row()
    • inline-column()

    The inline-layout component is another take on layouts, where the columns are inline-block elements, which eliminates the need for rows, and makes them respond to text-align. This is especially useful for dynamic content.

    Usage:

    HTML

    <div class="items">
      <div class="item is-small"></div>
      <div class="item is-medium"></div>
      <div class="item is-small"></div>
      <div class="item is-large"></div>
      <div class="item is-small"></div>
    </div>

    SCSS

    .items {
      @include inline-layout;
    
      .item {
        @media ( width-to(medium) ) {
          &.is-small { width: 50%; }
          &.is-medium, &.is-large { width: 100%; }
        }
    
        @media ( width-from(medium) ) {
          &.is-small  { width: 25%; }
          &.is-medium { width: 50%; }
          &.is-large  { width: 75%; }
        }
      }
    }

    Arguments:

    Name Accepted values Default value Description
    $gutters CSS length unit 0 Size of gutters
    $col String '> *' Selector used to find a direct descendant column element

    Layouting with flex

    • flex-layout()
    • flex-row()
    • flex-column()

    Sets element to display: flex and set behaviour of child elements

    Usage:

    .is-columns-4 {
      @include flex-layout(1 1 1 1, 20px);          
    }

    Arguments:

    Name Accepted values Default value Description
    $columns numbers false Set amount of columns per row and how much space they will take
    $gutters px false Set gutters between child elements - ex 20px
    $align string false Set the alignment of child elements

    Auto columns

    • auto-col()

    Sets widths to dynamically fit all columns in one row

    Usage:

    .columns {
      @include inline-layout;
    
      .column {
        // 5 columns = width: 20%
        // 2 columns = width: 50%
        @include auto-col;
      }
    }

    Arguments:

    Name Accepted values Default value Description
    - - - -

    Reversing columns

    • reverse()

    Reverse the order of an element's children without the need for duplicate markup.

    Usage:

    .items {
      @include inline-layout;
    
      .item { width: 25%; }
    
      @media ( width-to(medium) ) {
        @include reverse;
      }
    }

    States

    • state()

    Matches elements based on current state.

    Usage:

    .menu {
      @include state('menu', false) { 
        display: none; 
      }  
      @include state('menu') { 
        display: block; 
      }
    }

    Arguments:

    Name Accepted values Default value Description
    $key string false The state to match, ex menu
    $value bool, string true State value to match
    $local bool false If true, based on the state of the current element. If false, the global state

    Selecting elements

    • select()

    This mixin currently has no description

    Usage:

    // This mixin currently has no example

    Arguments:

    Name Accepted values Default value Description
    - - - -

    Styling input placeholders

    • placeholder()

    This mixin currently has no description

    Usage:

    // This mixin currently has no example

    Arguments:

    Name Accepted values Default value Description
    - - - -

    Select elements of a given amount

    • count()

    This mixin currently has no description

    Usage:

    // This mixin currently has no example

    Arguments:

    Name Accepted values Default value Description
    - - - -

    Selector mathing a resizing window

    • resizing()

    This mixin currently has no description

    Usage:

    // This mixin currently has no example

    Arguments:

    Name Accepted values Default value Description
    - - - -

    Match image orientation

    • orientation()

    Matches elements based on detected orientation state

    Usage:

    // This mixin currently has no example

    Arguments:

    Name Accepted values Default value Description
    $orientation portrait, landscape, square false Match the orientation of the element

    Hover

    • hover
    • no-hover

    This mixin currently has no description

    Usage:

    // This mixin currently has no example

    Arguments:

    Name Accepted values Default value Description
    - - - -



    JavaScript

    Setup

    JavaScript setup currently has no documentation.

    Functions

    JavaScript functionality currently has no documentation

    Install

    npm i bolts-lib

    DownloadsWeekly Downloads

    6

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    80.9 kB

    Total Files

    13

    Last publish

    Collaborators

    • andreekeberg
    • kotte
    • djurnamn