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 framework of essential classes, components, and strategies to help you build efficiently for any brand and scale in Webflow.

Read Docs Clone styles

Less is more

Less classes, less elements, and less components 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

84 kb

Build mode system

11 Universal components

/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;
}

Build mode components

Class

Purpose

Section

Parent <section> and container

Grid - Row

Flex based modular row

Grid - Col

Modular column with 12 sizes

Button

Universal button with variants and icons

Icon

Multi-variant, CSS based icon system

Accordion

Flexible collapsable content

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 layouts.

DRY 12 column grid

67 classes

Strategic Utilities

50 classes

u-mb-sm

margin-bottom: 1em;

u-pt-0

padding-top: 0;

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

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

Prefix, Infix, Suffix

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.

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! 😎

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

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.

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 👏

Ollie Allen Fox

Jun 6, 2023

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

Ben Hammond

May 31, 2023

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

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...

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 🙌

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.

Watch the livestream

Check out these livestreams from Mast's creator — one covers the why, what and how (+ a Demo!) of Mast, and the other is a walkthrough of whats new in Mast 2.0.

Why Mast?

What's v2.0?