Bolts

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
-	-	-	-

Files

README.md

Latest commit

History

README.md

File metadata and controls

Bolts

Installation

npm

yarn

Sass

Usage

Including Bolts in your Sass files

Configuration variables

Functions

Breakpoint

Retina

Easings

Mixins

Reset

Sticky footer

Fonts

Responsive font size

Container

Clearing whitespace

Overlay

Backgrounds

Transitions

Transition height

Element aspect ratio

Classic clearfix

Element centering

Vertical alignment

Line clamp

Visually hidden

Antialiasing

Scrollable content

Viewport

Grayscale

Layouting with inline blocks

Layouting with flex

Auto columns

Reversing columns

States

Selecting elements

Styling input placeholders

Select elements of a given amount

Selector mathing a resizing window

Match image orientation

Hover

JavaScript

Setup

Functions