Tools
These are Sass mixins and functions used thorought the framework.
Breakpoints
The breakpoint mixins make it very easy to call upon preset media query boundaries.
The default $breakpoint sizes are xs
sm
md
lg
xl
xxl
xxxl
@include breakpoint-min($breakpoint) {
.foo {}
}
@include breakpoint-max($breakpoint) {
.foo {}
}
Scales
It is recommended that you use rem
units with Tent CSS. We have packaged a Sass function entitled rem()
within the framework.
selector {
font-size: rem(16px);
padding: rem(16px) rem(32px);
}
Box Sizing
A simple Sass mixin for setting the box-sizing.
selector {
@include box-sizing(content-box | border-box);
}