bolts-lib

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('[e-mail]'); }
}

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

Changelog

[1.0.6] - 2022-05-19

Changed

• SCSS: Migrated deprecated / for division outside of calc()