1.0.0 • Published 8 years ago
kickoff-functions-and-mixins.scss v1.0.0
kickoff-functions-and-mixins.scss
Sass Functions and Mixins for the Kickoff framework
Install
npm install kickoff-functions-and-mixins.scss --save
Usage
With scss and the npm-sass or similar importer
@import "kickoff-functions-and-mixins.scss"
Functions
_get-value.scss
Retrieve value from sass map
_map-deep-get.scss
Retrieve value from deeply nested sass map
$grid-configuration: (
'columns': 12,
'layouts': (
'small': 800px,
'medium': 1000px,
'large': 1200px,
),
);
div {
font-size: map-deep-get($grid-configuration, 'columns');
width: map-deep-get($grid-configuration, 'layouts', 'medium');
}
_modular-scale.scss
Sizes type using a consistent vertical rythm
// Used in the kickoff $type sass map variable
modular-scale($font-size-base, -1, $type-scale)
modular-scale($font-size-base, 0, $type-scale)
modular-scale($font-size-base, 1, $type-scale)
_px-to-em.scss
Convert px em
_px-to-rem.scss -
Convert px rem
_strip-units.scss
Strip units
_tint-shade.scss
// Add percentage of white to a color
background-color: tint(blue, 20%);
// Add percentage of black to a color
background-color: shade(blue, 20%);
Mixins
_hidpi.scss
Hi-dpi media query mixin
@include hidpi {
...
}
_module-naming-helpers.scss
Provides consistent class naming through the usage of mixins
See https://gist.github.com/mrmartineau/0cd2010bf265d712bafb for usage
_position.scss
Position shortcut
@include position(absolute, 10px 20px 30px 10px);
_responsive.scss
Responsive media-queries
// min-width
// Equivalent to: @media screen and (min-width: 20em) { ... }
@include respond-min(mid) { ... }; // uses the $breakpoints sass-map
@include respond-min(650) { ... }; // converts to px
// max-width
// Equivalent to: @media screen and (max-width: 20em) { ... }
@include respond-min(large) { ... }; // uses the $breakpoints sass-map
@include respond-min(460) { ... }; // converts to px
// min-max-width
// Equivalent to: @media screen and (min-width: 10em) and (max-width: 20em) { ... }
@include respond-min-max(narrow, large) { ... }; // uses the $breakpoints sass-map
@include respond-min-max(460, 900) { ... }; // converts to px
_units.scss
Dimension-based mixins
- REM calculation:
@include rem(margin, $font-size-base);
- REM font-size:
@include font-size(16);
- REM line-height:
@include line-height(22);
- EM font-size:
@include font-size-ems(20, 16);
_utility.scss
Utility Mixins
- clearfix:
@include clearfix;
- Text truncation:
@include truncate(100%);
- and a bunch more
_vertical-centre.scss
Vertically center any element. Needs support for CSS tranforms.
@include vertical-center;
1.0.0
8 years ago