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 DocsClone 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
H1
H2 headings
H2
H3 headings
H3
H4 headings
H4
h1
H1
h1
H2
h1
H3
h1
H4
col
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-top2em;
u-text-center
text-align: center;
u-d-none
display: none;
u-overflow-hidden
overflowhidden;
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
u-
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

Read the docs

Learn more about the underlying strategy, best practices and documentation on how to get started with Mast and use it to its full potential.

Read Docs

Clone style guide

Start each project from this base project of classes that are the foundation of the Mast framework.

clone styles

Share some feedback

Have a question or comment related to MAST? We are grateful for anyone that has the time to take it for a spin and welcome all feedback!

Send Feedback