FrontierCSS Documentation

FrontierCSS Documentation

A comprehensive utility preset for building beautiful web pages from structured markdown files.

Philosophy

The Frontier preset builds layers of abstraction: Foundation → Building Blocks → Layout Patterns → Complete Components. This allows you to create sophisticated designs with minimal class names while maintaining full customizability through CSS variables.

Foundation Layer

CSS Variables System

The preset relies on CSS variables that you define in your stylesheet. These create a consistent design system:

:root {
  --color-primary: #c31e64;
  --color-secondary: #d94e7a;
  --color-accent: #d9ff00;
  --color-complement: #164987;
  --color-text: #5d5d5d;
  --color-neutral: #f3f6fa;
  --color-heading: var(--color-primary);
  --color-light: white;
  --text-bold-color: #312a2a;
  --btn-bg: var(--color-primary);
  --btn-font-weight: 700;
  --btn-padding-x: 1.5rem;
  --btn-padding-y: 0.7rem;
  --btn-border-radius: 0.5rem;
  --text-bold-font-weight: 700;
  --text-font-weight: 300;
  --color-dark: #312a2a;
  --color: #ffffff;
  --font-primary: 'Poppins';
  --font-secondary: 'Luckiest Guy';
  --main-header-box-shadow: none;
  --font-size-multiplier: 0rem;
  --content-width: 80rem;
  --nav-image-height: 50px;
  --border-radius: 0.5rem;
  --image-border-radius: 1rem;
  --block-padding-y: 4rem;
  --nav-active-item-color: var(--color-primary);

  --filter-primary: brightness(0) saturate(100%) invert(20%) sepia(100%) saturate(2727%) hue-rotate(320deg) brightness(79%) contrast(92%);
  --filter-complement: brightness(0) saturate(100%) invert(20%) sepia(22%) saturate(5715%) hue-rotate(198deg) brightness(94%) contrast(88%);
  --filter-accent: brightness(0) saturate(100%) invert(65%) sepia(87%) saturate(4153%) hue-rotate(300deg) brightness(86%) contrast(99%);

  @screen lg {
    --block-padding-y: 7rem;
    --nav-image-height: 80px;
  }
  @screen xl {
    --nav-image-height: 120px;
  }
}

Variable Utilities

These utilities apply your CSS variables directly:

bg - Background color + padding from variables
background - Background color only
color - Text color from --color
padding - Applies --padding-x and --padding-y
padding-x - Horizontal padding
padding-y - Vertical padding
gap - Grid/flex gaps from --gap-x and --gap-y
gap-x - Horizontal gap
gap-y - Vertical gap
margin - Margins from variables
margin-x - Horizontal margins
margin-y - Vertical margins
rounding - Border radius from --border-radius
shadows - Box shadow from --box-shadow
columns - Column count from --columns

Special Variable Utilities

borders - Applies border width, color, and radius together
card - Combines rounding + shadows
padding-square - Makes --padding-x equal to --padding-y
gap-square - Makes --gap-x equal to --gap-y

Dynamic Utilities

Color System

Access any color from your palette using --color-{name}:

bg-color-{name} - Background color
text-color-{name} - Text color
border-color-{name} - Border color
bg-block-{name} - Sets --bg variable to color

Examples: bg-color-primary, border-color-danger

Grid Utilities

Auto-fit/fill columns:

grid-fit-cols - Auto-fit with 10rem default
grid-fill-cols - Auto-fill with 10rem default
grid-fit-cols-{size}{unit} - Custom size (e.g., grid-fit-cols-15rem, grid-fill-cols-200px)

Dynamic gap:

gap-square-{size} - Sets equal x/y gaps (size in 0.25rem units, e.g., gap-square-4 = 1rem)

Grid Areas

area-{name} - Sets grid-area: name for named grid layouts

Content Images

content-chevron-right - Chevron icon
content-map-pin - Map pin outline
content-map-pin-solid - Solid map pin
content-checkmark - Checkmark icon
motif-image-{name} - Loads motif SVG: /media/images/motif-{name}.svg

Filter

filter-{color} - Applies var(--filter-{color}) for SVG color filters

Layout Patterns

Container Widths

mx-content-width - Max width with auto margins (constrained by --content-width)
mx-text-width - Optimal reading width (constrained by --text-width)
mx-fit - Fit content with auto margins
w-fit - Width fits content
text-formal - Text-width container, left-aligned text

Responsive Grids

grid-even - 1→2→4 column grid (md:2, xl:4)
grid-odd - 1→3 column grid (lg:3)
matrix - 2-column spans with brick styling

Positioning

centered - Text and items centered
flex-col-center - Vertical flex, centered both axes
span-full - Spans all grid columns, centered text

Full-Width Backgrounds

bg-block - Background extends edge-to-edge of viewport
bg-content - Background constrained to content width with rounded corners
vw-centered - Absolutely positioned, full viewport width, vertically aligned

Building Blocks

Brick (Base Component)

brick - The foundation for all layout blocks:

  brick: 'rounding grid gap relative place-content-center'

Grid display
Gap from variables
Relative positioning
Rounded corners
Centered content

This is your starting point. Everything builds on brick.

Specialized Blocks

box - Enhanced brick with background, squared padding, and squared gap

  box: 'brick bg padding-square gap-square'

State Utilities

outlined - Inverted colors with inset ring (button variant)
secondary - Colored background with inverted text
filled - Standard filled appearance
muted - Muted color scheme
warning, danger, success, info - Semantic color states

Complete Content Patterns

These combine multiple utilities into ready-to-use content blocks:

Text Blocks

block-with-text

Brick base + vertical padding
Simple text content container

block-with-content

Text block + nested article styling
For rich content with multiple elements

Media Blocks

block-with-media

Content block that becomes horizontal flex on lg screens
Perfect for image + text layouts

block-with-columns

Same as media block
Semantic name for column layouts

Header Blocks

block-with-header

Content block with special first-child treatment
First child spans full width and is centered
Other children flex equally
Wraps on lg+ screens

block-with-grid

Brick with vertical padding
Headers automatically span full width

Variant System

Target child elements with prefixes:

Element Variants

image:{utility} - Targets .image elements
btn:{utility} - Targets .btn elements
heading:{utility} - Targets .heading elements
article:{utility} - Targets .article elements
item:{utility} - Targets .item elements
child:{utility} - Targets first child (> *:first-child)

Example: image:rounded-lg btn:self-end heading:text-2xl

Button Positioning

Use btn-{position} to place buttons within their container:

btn-left / btn-start - Align to start
btn-right / btn-end - Align to end
btn-center - Center alignment

Heading Variants

Use headings-{modifier} to style all headings in a container:

headings-center - Center-aligned text
headings-left / headings-start - Align to flex start
headings-right / headings-end - Align to flex end
headings-underline - Underline from --heading-underline variable

Special Utilities

Background Management

bg-before - Creates a ::before pseudo-element for layered backgrounds:
Absolute positioning
Full height
Uses --bg variable
Overlay blend mode

Combine with relative z-0 on parent for layered effects.

Layout Helpers

gap-glue - Negative top margin to “glue” elements (removes gap)
text-shadow - Adds text shadow with --text-shadow-color variable

Practical Example

---
classes: block-with-header lg:gap-y-16 lg:btn-left
---

## ABOUT THE MOP SQUAD

We’re a **locally woman-owned business**, and every member of our squad is chosen for their dedication, attitude, and commitment to doing the job right, every time. We take pride in the work we do and in the relationships we build with our clients.

===

### WHAT SETS US APART

What sets us apart is our consistency. Whether it’s your first cleaning or your fiftieth, you can count on the same level of detail, care, and professionalism.

>[.box]
>
> _“At The Mop Squad, we believe a clean home makes life better. Our mission is simple: deliver reliable, consistent, and high-quality cleaning services that give our clients more time to focus on what matters most.”_
>
> **_- Terri, Owner_**

===

<Image loading="eager" source="/media/images/terri.jpg" text="Terri, Owner" showText width="768"/>
<Image loading="eager" source="/media/images/cleaners-at-work.jpg" width="768"/>
<Image loading="eager" source="/media/images/cleaner-thumbs-up.jpg" width="768"/>