Tools

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);
        }