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

Loved by Pros

Don't take it from us — from one page to Enterprise sites, many of the top Webflow Pros love and iterate upon Mast with every project.

Devin Fountain

Jan 25, 2024

No joke, switching over to @CoreyGMoen 's MAST system has allowed me to build about 10 pages in a day, structure complete.

Saying I'm a fan is an understatement.

View source

Ollie McMillan

Jan 2, 2024

Just finished converting the CSS framework for a client's #webflow site over to #MAST from @NoCodeSupplyCo and have reduced their CSS file size by 60%.

Not a bad way to start 2024! 😎

View source

Dive - Grace Walker

Sep 7, 2023

In her Deep Dive, @graceongrid shares her secret for how her efficiency has skyrocketed in Webflow over the past year 🚀

How?

Because she started using CSS frameworks like Mast from @NoCodeSupplyCo

View source

Greg Faulkner

Aug 1, 2023

It has made developing enjoyable again. Discovering fresh approaches and tinkering with my own improvements while building sites brings back my former love of development.

View source

Sara Brunettini

Jul 7, 2023

Just started building my first site using MAST and I'm absolutely blown away! I'm amazed at the results I can achieve with just a minimal number of elements and classes. Huge thanks to the team at @NoCodeSupplyCo 👏

View source

Ollie Allen Fox

Jun 6, 2023

MAST + Understanding Box Model & CSS has made me the most productive Webflow dev I’ve ever been.

View source

Ben Hammond

May 31, 2023

Since using the MAST framework, my workflow has been so much faster 🚀

View source

Matt Evans

May 11, 2023

Building with MAST by @NoCodeSupplyCo is such a joy

👋 Always there but never gets in the way

💡Opinionated but not dogmatic

🤝 The build partner you always wantedGive it a spin...

View source

Coco Vega

Mar 13, 2023

I’ve been using it for a couple of weeks now, and it is incredible. I’m already moving a client’s project to Mast and starting new projects with it.

View source

Grace Walker

Mar 13, 2023

I've launched 90+ client websites in the 6+ years I've been building in @webflow - MAST has been transformation in how I approach site builds 🙌

View source

Why Mast?

Check out this livestream presentation from one of Mast's creators — walking through the why, what and how (+ a Demo!) of Mast.

Watch video

Mast in the community

Advertise with No-Code Supply Co.

View item
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Which Webflow framework should I use for my project?

2.22.24

VANHA Digital

2.15.24

SPCSHP

2.1.24

High Alpha

12.29.23

MAST CSS Framework for Webflow — a quick explainer and comparison

12.6.23

Tredway

11.21.23

Gantry

8.5.23

Rotor

6.13.23

HARA

4.27.23

Webflow

8.28.22
Load more

Bummer, no results

Try a different search/filter combo, or drop us some feedback if there is something missing you would love to see!

Reset filters

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