Mast <> A CSS Framework for Webflow

A CSS Framework for Webflow by No-Code Supply Co.

by No-Code Supply Co.

Mast is a lightweight, developer-first framework of essential classes and strategies to help you build efficiently for any brand and scale.

Read Docs Clone styles

Less is more

Less classes, less elements, and less maintenance equals faster site, development and customization. Build from scratch in record time, and quickly customize the base styles to match your brand.

Light BASE CSS

32 kb

Minimal type system

h1 - h4

/css/mast-framework.css


body {
  font-family: 'General Sans', Arial, sans-serif;
  color: #1d1c1a;
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
}

h1 {
  margin-top: 0px;
  margin-bottom: 0.2em;
  font-size: 5.5rem;
  line-height: 1.1;
  font-weight: 500;
}

h2 {
  margin-top: 0px;
  margin-bottom: 0.3em;
  font-size: 3.8rem;
  line-height: 1.1;
  font-weight: 500;
}

h3 {
  margin-top: 0px;
  margin-bottom: 0.5em;
  font-size: 1.8rem;
  line-height: 1.2;
  font-weight: 500;
}

h4 {
  margin-top: 0px;
  margin-bottom: 0.8em;
  font-size: 1.2rem;
  font-weight: 500;
}

p {
  margin-bottom: 1em;
}

a {
  color: #d14424;
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

a:focus-visible {
  outline-color: #d14424;
  outline-offset: 2px;
  outline-style: solid;
  outline-width: 2px;
}

a[data-wf-focus-visible] {
  outline-color: #d14424;
  outline-offset: 2px;
  outline-style: solid;
  outline-width: 2px;
}

ul {
  margin-top: 0px;
  margin-bottom: 1em;
  padding-left: 2.2em;
}

ol {
  margin-top: 0px;
  margin-bottom: 1em;
  padding-left: 2.2em;
}

li {
  margin-bottom: 0.3em;
}

strong {
  font-weight: bold;
}

.h3 {
  margin-top: 0px;
  margin-bottom: 0.5em;
  font-size: 1.8rem;
  line-height: 1.2;
  font-weight: 500;
}

.h4 {
  margin-top: 0px;
  margin-bottom: 0.8em;
  font-size: 1.2rem;
  font-weight: 500;
}

.section {
  position: relative;
  padding-top: 8rem;
  padding-bottom: 8rem;
}

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-right: -20px;
  margin-left: -20px;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
}

.row.row-justify-end {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.row.row-justify-between {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.row.row-align-end {
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.row.row-justify-center {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.row.row-align-center {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.row.row-justify-around {
  -webkit-justify-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

.row.row-gutterless {
  margin-right: 0px;
  margin-left: 0px;
}

H1 headings

H2 headings

H3 headings

H4 headings

col

col-lg-8

col

col-lg-7

col-sm-5

col

col-lg-5

col-sm-7

Create vs copy

Leverage the power of Webflow to quickly build anything from scratch with an essential set of HTML/CSS building blocks, versus spending time finding and modifying pre-built templates and components.

DRY 12 column grid

66 classes

Strategic Utilities

39 classes

u-mb-1

margin-bottom: 1em;

u-pt-2

padding-top: 2em;

u-text-center

text-align: center;

u-d-none

display: none;

u-overflow-hidden

overflow: hidden;

u-position-relative

position: relative;

Helpers

Class

Purpose

u-img-cover

Absolute full and object-fit image

u-link-cover

Absolute full link block

u-aspect-1x1

Set square aspect ratio

u-z-index-1

Position relative + z-index : 1

u-sr-only

Visually hide but read to screen readers

u-border

Full-width 1px modular border

Class notation

Label

Notation

-lg-

Desktop infix

-md-

Tablet infix

-sm-

Mobile (L) infix

-xs-

Mobile (P) infix

Utility prefix

cc-

Combo prefix

Tried & true

An opinionated framework of fundamental base, layout and utility classes defined from 10+ years of front-end development best practices that are applicable to almost any use case.

Powerful Unit strategy

REM + EM + % + PX

Robust Nomenclature

Prefixing + Infixing

Why Mast?

Check out this livestream presentation from one of Mast's creators — walking through the why, what and how of Mast and building the web with frameworks.

Watch video