Repository files navigation

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.

npm i bolts-lib

yarn add bolts-lib

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

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

• 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 {@includeinline-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:

• retina()

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

Usage:

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

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

• reset

This mixin currently has no description

Usage:

// This mixin currently has no example

Arguments:

• sticky-footer()

This mixin currently has no description

Usage:

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

Arguments:

• font()

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

Usage:

@includefont($family:   FontAwesome,$filename: fontawesome-webfont,$formats:  ( eot, woff2, woff, ttf, svg ),$svg-id:   fontawesomeregular);@includefont($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:

• responsive-font-size()

This mixin currently has no description

Usage:

// This mixin currently has no example

Arguments:

• container()

Sets basic container styling on element.

Usage:

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

Arguments:

• clear-whitespace()

Eliminates the space betweeninline-block elements usingfont-size: 0.

Usage:

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

Arguments:

• overlay()

This mixin currently has no description

Usage:

.hero {positionrelative;height:100vh;&:before {content:'';@includeoverlay;background-color:rgba(black,0.5);    }}

Arguments:

• background()

This mixin currently has no description

Usage:

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

Arguments:

• 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;@includetransition(background-color);&:hover {background-color:red;    }}

Usage with $queue:

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

Usage:

// This mixin currently has no example

Arguments:

• transition-height()

This mixin currently has no description

Usage:

// This mixin currently has no example

Arguments:

• aspect-ratio()

Set an aspect ratio for a block element.

Usage:

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

Arguments:

• clear()

This mixin currently has no description

Usage:

// This mixin currently has no example

Arguments:

• 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. Usetransform-style: preserve-3d on the parent to avoid this.

Usage:

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

Arguments:

• vertical-align()

This mixin currently has no description

Usage:

.hero {@includevertical-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:

• line-clamp()

Truncate text at the selected number of lines.

Usage:

.excerpt {@includeline-clamp(3);}

Arguments:

• visually-hidden()

This mixin currently has no description

Usage:

// This mixin currently has no example

Arguments:

• antialias()

This mixin currently has no description

Usage:

.hero-text {color:white;@includeantialias;}

Arguments:

• scroll()

This mixin currently has no description

Usage:

.modal-inner {@includescroll;}

Arguments:

• viewport()

This mixin currently has no description

Usage:

.page {@includeviewport;}

Arguments:

• grayscale()

This mixin currently has no description

Usage:

.photo {@includetransition(filter-webkit-filter);&:hover {@includegrayscale;  }}

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

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

Usage:

HTML

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

SCSS

.items {@includeinline-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:

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

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

Usage:

.is-columns-4 {@includeflex-layout(1111,20px);          }

Arguments:

• auto-col()

Sets widths to dynamically fit all columns in one row

Usage:

.columns {@includeinline-layout;.column {// 5 columns = width: 20%// 2 columns = width: 50%@includeauto-col;  }}

Arguments:

• reverse()

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

Usage:

.items {@includeinline-layout;.item {width:25%; }@media (width-to(medium) ) {@includereverse;  }}

• state()

Matches elements based on current state.

Usage:

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

Arguments:

• select()

This mixin currently has no description

Usage:

// This mixin currently has no example

Arguments:

• placeholder()

This mixin currently has no description

Usage:

// This mixin currently has no example

Arguments:

• count()

This mixin currently has no description

Usage:

// This mixin currently has no example

Arguments:

• resizing()

This mixin currently has no description

Usage:

// This mixin currently has no example

Arguments:

• orientation()

Matches elements based on detected orientation state

Usage:

// This mixin currently has no example

Arguments:

• hover
• no-hover

This mixin currently has no description

Usage:

// This mixin currently has no example

Arguments:

JavaScript setup currently has no documentation.

JavaScript functionality currently has no documentation