Tjoolkit NPM | npm.io

tjoolkit

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

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.

scss sass css html boilerplate

1.2.1

4 years ago

1.2.0

4 years ago