SCSS Army Knife

SCSS Army Knife is a SCSS and HTML boilerplate containing a set of functions and mixins essential to my front-end development workflow. For the moment, it uses the sass-planifolia library as a sole dependency.

Have any suggestions or feedback? Reach out!

Installation

npm install scss-army-knife or if you're old-school download and import scss-army-knife ✌️

Responsive Mixins

Name	Description
responsive()	Allows for inline responsive styling of a single CSS property. Accepts a property parameter, a base value and a list of key-value pairs consisting of a breakpoint and a value to be assigned to the property at said breakpoint.
fluid()	Similar to the responsive() mixin but employing linear interpolation between the respective values, thus allowing fpr fluid changes between each breakpoint. Especially useful for fluid typography and container widths.

Example

@include fluid(font-size, 12px, $md: 16px, $lg: 18px);

// compiles to
font-size: 12px;

@media screen and (min-width: 320px) {
    font-size: calc(0.8928571429vw + 9.1428571429px); 
    }
@media screen and (min-width: 768px) {
    font-size: calc(0.8928571429vw + 9.1428571429px); 
    }
@media screen and (min-width: 992px) {
    font-size: 18px;
    }

Layout Mixins

Name	Description
container()	Accepts a mode parameter and returns either a fluid 100% or stepped fixed-width container.
column()	Accepts a key-value-list of breakpoints and width values. Unitless width values are automatically converted to percentages, facilitating grid based widths.
row()	Creates a new row within a parent column for further nesting

Example

@include container(fixed);
@include column(2/3);
@include row();

/* container */
width: 100%;
margin-right: auto;
margin-left: auto;
display: flex;
overflow-x: hidden;

@media screen and (min-width: 768px) {
    width: 720px; 
    }
@media screen and (min-width: 992px) {
    width: 960px; 
    }
@media screen and (min-width: 1200px) {
    width: 1140px; 
    }
	
/* column */
width: 66.6666666667%;
padding-right: 1rem;
padding-left: 1rem;

/* row */
width: calc(100% + 2rem);
display: -webkit-box;
display: flex;
flex-flow: row wrap; 

Selector Mixins

Name	Description
nth()	Targets the n-th element of a specific type. Accepts a number parameter.
first()	Targets the first element of a specific type.
last()	Targets the last element of a specific type.
empty()	Targets an element of a specific type not containing any child elements.
count()	Targets elements of a specific type based on their number within a shared parent element. Accepts a number parameter.
range()	Targets a range of elements of a specific type. Accepts two number parameters for lower and upper range limit.

Functions

Name	Description	Example
ease()	Returns a cubic-bezier curve function for use with CSS transitions and animations. Accepts a direction and function parameter, the latter being optional and defaulting to a value of linear.	ease(in-out, quintic);
color()	Returns a color value from a key-value map. Accepts a color name.	color(blue);
pos()	Converts a color to CIELAB color space and optimizes it for positive (i.e. dark on light) applications. Accepts a color name and an optional lightness parameter between 0 and 1. The value of the lightness parameter defaults to 0.4.	pos(blue, 0.4);
neg()	Functionally identical to the pos() function but optimized for negative (i.e. light on dark) applications. The value of the lightness parameter defaults to 0.6.	neg(blue, 0.8);
tint()	Lightens a color by mixing it with white. Accepts a color name and an optional lightness parameter between 0 and 1. The value of the lightness parameter defaults to 0.5.	tint(blue, 0.5);
shade()	Darkens a color by mixing it with black. Accepts a color name and an optional lightness parameter between 0 and 1. The value of the lightness parameter defaults to 0.5.	shade(blue, 0.5);

Authors

• Tim Jüdemann - Initial work - timjuedemann.de

License

This project is licensed under the MIT License.