Butterknife

Butterknife 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 butterknife.tj or if you're old-school download and import butterknife.tj ✌️

Responsive Mixin

| 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. If the base value as well as the list values are numerical and pixel-based, they will be interpolated and change fluidly between each breakpoint.|

Example

@include responsive(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.