A17 SCSS Utilities

A series of utilities to enable/encourage systematised web design/development.

AREA 17 strongly believes in design systems and then using these systems to build products for both ourselves and our clients. Utility classes are thus a natural fit for us, and so we "systematised" the utilities to tie closer to our design methodology.

We also wanted to include a few utility classes that would simplify some common styling requirements.

What this isn't is a replacement or alternative to Tailwind - which is a utility CSS class library. These SCSS utilities are intended to help you write SCSS and use your responsive/grid system.

Setup

Required: Setup - a walk through of the setup
Optional: CSS-Class-Generation - configure which CSS classes are generated

Featured utility classes

Layout

container - centered column container
colspan - generates design column spanning classes (for flex/float/other)
Grid Columns - generates CSS Grid design column spanning classes
Spacing - generates spacing utilities for gutters and responsive spacing groups

Typography

Typography - generates responsive typography classes

Color

Color - generates colour variables and utility classes

Dev Tools

Dev Tools - generates colour variables and utility classes

Other useful utility classes

visually-hidden/sr-only - visually hidden screen reader only text class
float-clear - float clearing utility
background-fill - draws a full width background color block

Featured utility mixins and functions

Layout

@mixin breakpoint - inserts a media query
@mixin container - centered column container
@mixin colspan - mixin to add a design column spanning width to an element
@function colspan - function that returns a design column spanning CSS calc()
@function rem-calc - converts px and em to rem

Typography

@mixin typeset - adds responsive type set to an element

Other useful utility mixins and functions

@mixin placeholder - form input placeholder styling
@mixin visually-hidden - visually hidden screen reader only text class
@mixin float-clear - float clearing utility
@mixin background-fill - draws a full width background color block
@mixin keyline-full - draws a keyline the full viewport width
@mixin font-smoothing - controls the anti-aliasing of text
@function strip-units - removes unites from a CSS distance value
@function string-replace - replaces item in string with new string
@function map-deep-get - returns item from nested map

Internal mixins and functions

@mixin processStructure
@mixin processColors
@mixin processTypography
- @mixin typeStyles
- @mixin typeStyle
- @mixin typeAttribute
@mixin processGrid
- @mixin setupDevTools
- @mixin setColspan
- @mixin setBreakpointColspan
- @mixin setGridCol
- @mixin setBreakpointGridCol
- @mixin setStartEndCColumn
- @mixin setBreakpointStartEndCColumn
@mixin processSpacing
@mixin setupDevTools

@function get-breakpoint-directions
@function get-media
@function process-breakpoints
@function get-smallest-breakpoint
@function isColorVariable
@function get-max