aleut.tools.mixins

inuitcss’ default mixins

Showing:

Popularity

Downloads/wk

1

GitHub Stars

1

Maintenance

Last Commit

6yrs ago

Contributors

6

Package

Dependencies

1

License

Apache-2.0

Type Definitions

Tree-Shakeable

No?

Categories

Readme

Mixins

The aleutcss mixins module contains a few framework mixins that are required for using any of the rest of aleutcss.

Create a fully formed type style (sizing and vertical rhythm) by passing in a single value.

Install using npm:

$ npm install --save-dev aleut.tools.mixins

Usage

Basic usage of the mixins in a SCSS-file:

.foo {
    @include font-size(12px);
}

This will generate a rem-based font-size with its pixel fallback, as well as a unitless line-height which will place the element on your baseline, e.g.:

.foo {
    font-size: 12px;
    font-size: 0.75rem;
    line-height: 2;
}

If you do not want css to generate you a line-height automatically, you simply pass in your own as a second paramater:

.foo {
    @include font-size(12px, 1.5);
}

This will yield:

.foo {
    font-size: 12px;
    font-size: 0.75rem;
    line-height: 1.5;
}

This parameter can be any integer, ‘inherit’, or ‘normal’. If you don’t want a line-height at all, pass in a second paramater of ‘none’ or ‘false’:

.foo {
    @include font-size(12px, false);
}

This will yield:

.foo {
    font-size: 12px;
    font-size: 0.75rem;
}

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial