SCSS ToolBox

Frequently used functions and mixins for SCSS projects. No output will be generated by this toolbox.

Install

Simply use npm to install the scss-toolbox.

$ npm install scss-toolbox

Usage

To use the provided functions and mixins you need to import the toolbox.scss file in your project.

@import 'path/to/toolbox/toolbox.scss';

The ToolBox comes with some predefined variables and options defined in src/_config.scss. In most cases you want to overwrite these predefined variables and options. In order to do so you need to overwrite the corresponding variables in your project.

$toolbox-colors: (
	'red': #ff0000,
	'blue': #0000ff,
);

// Import the toolbox.scss after all overwritten variables.
@import 'toolbox.scss';

Make sure to overwrite the variables before you include the toolbox.scss in your project. Otherwise the default options are applied.

Configuration Variables

The ToolBox comes with some predefined variables. Each of them is defined the !default attribute so you can overwrite each of them according to your needs. Below is a overview of all predefined variables.

$toolbox-breakpoints

Frequently used breakpoint values. Each entry consists of a identifier and the corresponding viewport width.

/**
 * Breakpoint identifiers and sizes.
 *
 * @type {Map}
 */
$toolbox-breakpoints: (
    'xs': 500px,
    'sm': 700px,
    'md': 900px,
    'lg': 1100px,
    'xl': 1300px,
    'xxl': 1700px
) !default;

Make sure to remove the !default attribute in your own configuration.

$toolbox-colors

Frequently used color values to be used within the color() function. Each entry consists of a identifier and the corresponding color code (hex or rgb value).

/**
 * Color identifiers and values.
 *
 * @type {Map}
 */
$toolbox-colors: (
    'black': #000000,
    'white': #ffffff
) !default;

Make sure to remove the !default attribute in your own configuration.

$toolbox-typo-base

The base font-size used by the font-size() function and mixin.

/**
 * Typography base font-size.
 *
 * @type {Integer} (rem, em, px, pt, %)
 */
$toolbox-typo-base: 1rem !default;

Make sure to remove the !default attribute in your own configuration.

$toolbox-typo-ratio

The ratio used by the font-size() function and mixin. See the font-size() function documentation for more information.

/**
 * Typography ratio.
 *
 * @type {Integer}
 */
$toolbox-typo-ratio: 1.2 !default;

Make sure to remove the !default attribute in your own configuration.

$toolbox-typo-sizes

Font sizes and line-height's to be used with the font-size() function and mixin. See the font-size() mixin documentation for more information.

The first value sets the ratio for the given size, and the second value sets the line-height value.

/**
 * Typography sizes.
 *
 * @type {Map}
 */
$toolbox-typo-sizes: (
    'xxs': (-3, 1.4),
    'xs': (-2, 1.4),
    's': (-1, 1.4),
    'm': (0, 1.4),
    'l': (1, 1.4),
    'xl': (2, 1.4),
    'xxl': (3, 1.4),
    'xxxl': (4, 1.4)
) !default;

Make sure to remove the !default attribute in your own configuration.

Functions

pow($base, $exp)

Returns the result of raising $base to the power $exp.

Example:

pow(2, 8) // returns 256
pow(8, 3) // returns 512

color($name, [$opacity])

Returns the hexadecimal or rgba value for the given color $name found in $toolbox-colors. If $opacity is set, the returned color value is an rgba value with the provided transparency.

Example:

.example {
	color: color('black') // returns #000000
}

.example {
	color: color('black', 0.5) // returns rgba(0, 0, 0, 0.5)
}

font-size($name)

Returns the calculated font-size based on the given multiplier (from $name in $toolbox-typo-sizes) and the $toolbox-typo-ratio.

Example:

.example {
	font-size: font-size('xl') // returns 1.44rem
}

.example {
	font-size: font-size('s') // returns 0.83333rem
}

Font sizes are calculated with the typographic scale. See type-scale.com for more information and examples.

Mixins

accessibility

Hide an element visually but keep it accessible for screenreaders.

Example

.example {
	@include accessibility;
}

Compiled CSS

.example {
	border: 0 !important;
	clip: rect(0 0 0 0) !important;
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
}

aspect-ratio($width, $height)

Set an aspect-ratio for an element, by using padding-top.

Example

.example {
	@include aspect-ratio(16, 9);
}

Compiled CSS

.example {
	position: relative;
}

.example:before {
	content: '';
	display: block;
	padding-top: 56.25%;
	width: 100%;
}

.example > * {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

breakpoint($query, [$query_max])

With the breakpoint mixin you can easily use the defined breakpoints from the $fw-breakpoints-sizes variable or set some custom breakpoint queries.

The $query-max parameter is optional. You can use it to generate a media query for a specific size range. See Example 3 for more details.

Generated media queries are based on min-width.

Examples

Example 1

Change the background-color from red to blue at the 'm' breakpoint.

.foo {
	background-color: red;
	
	@include breakpoint('m') {
		background-color: blue;
	}
}

Compiled CSS

.foo {
	background-color: red;
}

@media screen and (min-width: 768px) {
	.foo {
		background-color: blue;
	}
}

Example 2

Change the background-color from red to blue at 1050px.

.foo {
	background-color: red;

	@include breakpoint(1050px) {
		background-color: blue;
	}
}

Compiled CSS

.foo {
	background-color: red;
}

@media screen and (min-width: 1050px) {
	.foo {
		background-color: blue;
	}
}

Example 3

Change the background-color from red to blue only between the 'm' breakpoint and 1050px.

.foo {
	background-color: red;

	@include breakpoint('m', 1050px) {
		background-color: blue;
	}
}

Compiled CSS

.foo {
	background-color: red;
}

@media screen and (min-width: 768px) and (max-width: 1050px) {
	.foo {
		background-color: blue;
	}
}

clearfix

Clear any previous floatings.

Example

.example {
	@include clearfix;
}

Compiled CSS

.example:before {
	clear: both;
	content: '';
	display: table;
}

.example:after {
	clear: both;
	content: '';
	display: table;
}

font-size($name)

Returns the calculated font-size and line-height based on the given multiplier (from $name in $toolbox-typo-sizes) and the $toolbox-typo-ratio.

Example:

.example {
	@include font-size('xl') // returns 1.44rem
}

Compiled CSS

.example {
	font-size: 1.44rem;
	line-height: 1.4;
}

Font sizes are calculated with the typographic scale. See type-scale.com for more information and examples.

reset-button

Remove default browser styling on buttons.

Example

.example {
	@include reset-button;
}

Compiled CSS

.example {
	background: none;
	border: 0;
	color: inherit;
	cursor: default;
	font: inherit;
	line-height: normal;
	overflow: visible;
	padding: 0;
	text-align: left;
	text-transform: inherit;
	user-select: none;
}

.example::-moz-focus-inner {
	border: 0;
	padding: 0;
}

text-truncate

Truncate long texts that expand over the container's width.

Example

.example {
	@include text-truncate;
}

Compiled CSS

.example {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

License

Code released under the MIT License.