/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;
}
col
col
col-lg-8
col
col-lg-7
col-sm-5
col
col-lg-5
col-sm-7
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;

Welcome to Mast

Mast is a lightweight, developer-first CSS framework for Webflow. It uses tried and true front-end development methodologies from inside and outside of the Webflow community to enable you to build in an efficient, scalable and reusable way.

Read Docs ↓Why mast ↗
New!

Mast Guide GPT

Get your questions answered and technical guidance from our trained GPT! ChatGPT Plus subscription required.

Start Chatting ↗

Getting Started

Getting started with Mast is as easy as cloning the style guide and adjusting it to suit your projects brand. Also learn how you can add it to existing projects, or kick start a project with a pre-built theme.

Style Guidecopy link

How to start a new projectcopy link

  1. Clone the Mast style guide project
  2. Update Project Settings

    • General tab > name and subdomain
    • Fonts > add any necessary custom fonts
    • Custom code tab > custom highlight background and font colors
  3. Customize Style Guide

How to add to an existing projectcopy link

  1. Clone the Mast style guide project
  2. Open the cloned style guide project in one tab, and your existing project in another.
  3. Create a new style guide page in your existing project.
  4. Copy and paste all elements from the Mast style guide project into your existing project, in the order below. Following the correct order is important to ensure Webflow creates the class in the proper cascade.

    ⚠️

    Note: When pasting elements into the existing project, if there happens to be duplicate classes you will see a notification in the top right corner. If you see this, undo the paste, then update the class names of any existing classes that were stated in the notification so their have a prefix of old_. This way, pasted Mast classes will take priority and not be renamed.

    ⚠️

    Note: Mast v1.2 introduced Variables. Unfortunately they are not yet supported in this "existing project" copy/paste workflow.

    1. Style guide nav

      • Once all sections below have been pasted, come back to the nav to update the anchor links appropriately.
    2. Layout Section

      • We do this one second so all other following sections can use the layout grid system as expected.
    3. Typography Section

      • You will need to update the element level headings to match the Mast class level headings.
      • Also check the element level styling of the paragraph, unordered list, and ordered list to ensure they align with your preference or the Mast base styles.
    4. Color Section
    5. Components Section
    6. Utilities Section

Customizing Mastcopy link

Typographycopy link

📌

Tip: Mast uses only 4 heading levels by default in order to keep the type system minimal and efficient. If your project’s brand demands all 6 levels of headings, you can add those using the same structure and nomenclature. To learn more about minimal-type systems thinking, check out this video we feel summarizes the topic well.

Body
  1. Select the Body element in the Navigator
  2. Within the Selector field of the style panel, select the Body (All Pages) element
  3. Update the base font, font size, and color
Headings

Mast styles both the heading element and a matching class. This enables you to always use the proper heading element order for accessibility while being able to control the visual size of a heading to match the design with the classes when necessary.

  1. Elements

    1. Select a Heading (1-4) element on the canvas
    2. Within the Selector field of the style panel, select the All H(1-4) Headings element
    3. Update the font, font size, line height, letter spacing, and bottom margin as necessary across all breakpoints.
    4. Ensure the styles of the heading level match the styles of the equivalent class across all breakpoints.
  2. Classes

    1. Select a heading with an h(1-4) class on the canvas
    2. Update the font, font size, and color
    3. Update the font, font size, line height, letter spacing, and bottom margin as necessary across all breakpoints.
    4. Ensure the styles of the heading level match the styles of the equivalent element across all breakpoints.
Paragraphs
  1. Select one of the paragraph classes on the canvas
  2. Update the font, font size, line height, letter spacing, and bottom margin as necessary across all breakpoints.

Colorscopy link

📌

Tip: we recommend only brand colors that you know will be used in the project. For example, if the brand guidelines has 12 colors, but only 6 are used throughout the site, just add those 6 and any others can be added later as they are also added to some part of the UI.

Light/style dark style guide

Select the page-wrapper element and adjust the font color and background color accordingly.

This is the class you can also target and toggle a combo class on to enable a site-wide light/dark mode switch alongside some custom code.

Background colors

Within each card, locate the class prefixed with u-bg- wrapping the color swatch area. Update, rename or remove it accordingly for each essential background color of the brand.

Text colors

Within each card, locate the “Aa” text sample element with the class prefixed with u-text- and update, rename or remove it accordingly for each essential text color of the brand.

Designing for Mastcopy link

Mast has been iterated on privately for years to work with virtually any brand. From its versatile grid system, to the core fundamentals that still encourage custom classes when needed, you can be confident to build anything with Mast.

12 Column Guidescopy link

When setting up static design files, the only important, but intentionally not unique, thing to do is use a 12 column guide for each page design. While you can easily adjust the base grid gap in Mast, if you want to stick with the default to be sure your 12 column guides use a 40 pixel gap, and the side margins are inset from the frame/artboard width to match your ideal max-width of the base container class.

Spacingcopy link

By default Mast uses mostly EM and REM based spacing across our base and utility classes, so all spacing is relative to the font size of the elements that are adjusted or the body font size. Since most static design tools don’t use these relative units, you can easily convert from the PX units of design tools to relative units with a calculator. If a design demands a hyper specific approach like an 8pt grid, you would adjust each spacing utility to closely align with that system based on the also adjust typography sizes.

Asset prepcopy link

Nothing unique here, we just wanted to put in the friendly reminder to prepare your assets responsibly to ensure they are just as performant as your Mast built site can be. If you are just getting familiar with preparing assets for the web, here are some quick pointers to remember:

  1. All raster images (photos, etc) should be exported as JPG/PNG and then converted and compressed to a Webp. Try tools like Optimage to do this locally, or Webflow’s asset panel will also do it now as well!

    Ensure raster images are exported at at least 2x their final max size for their use case on the site.

  2. All vector images (icons, etc) should be exported as SVG images or code to be used within an embed.
  3. Font files can be loaded as .woff and .woff2 for broad browser support and smaller overall file sizes.
  4. All videos should ideally be implemented through a third party hosting and player service like YouTube, Vimeo or Wistia.

Fundamentals

Understand the fundamental methodologies that Mast is based on so you can use it as efficiently and effectively. As a developer-first framework, these fundamentals are time tested to be useful for the majority of circumstances, while also not being a burden when you are able to more efficient solve for something with custom classes and code, validated by your experience as a developer.

📌

For almost every rule in life, as well as Mast, there is an exception. Always follow the rule, except when there is an exception, in which case you follow a new rule based on that exception. Following this pattern ensures you approach all development is a systematic and scalable way.

Mindsetcopy link

80/20 rulecopy link

Mast is an intentionally minified system of classes we have created to be one of the best ways to quickly develop ~80% of any site, BUT the remaining 20% will always be best executed form your intuition and experience as a developer using the power of Webflow and HTML/CSS/JS to create fully custom experiences in Webflow. This concept is at the core of why we refer to Mast as a “developer-first” framework.

Keep it DRYcopy link

"Don't Repeat Yourself" — this means that code should be reused whenever possible to avoid duplication and keep projects maintainable. By reusing classes and leveraging the inheritance capabilities of CSS, you will reduce complexity and development time.

Already styledcopy link

Mast intentionally includes some default styling to certain elements and classes so it’s already there to support the most common use cases and can be globally controlled compared to solely relying on utility classes that must be manually added to every instance. These defaults have been added, tested and refined over years of building sites with and without Webflow.

Class typescopy link

Base classescopy link

These are foundational classes that are essential to creating common layouts and UI structures. They don’t include a prefix as they often function similar to custom classes in that they may have modifier combo classes added for different variants.

Utility classescopy link

These are modifier classes that are added to elements to quickly modify a finite amount of styling for a specific purpose. Utilties can be added alongside other Utilties, or alongside base classes for simple style adjustments.

They usually don’t have their own Combo classes, and shouldn’t ever be added to a base or custom class which also has a combo already applied. Utility classes are prefixed with u- to make them easy to identify.

Custom classescopy link

You are encouraged to create custom classes for unique components that require very specific styling. Custom classes often also utilize Combo classes (prefixed with cc-) to support different variants of a class. Avoid adding both Utility and Custom classes to a single element, and instead just add all style attributes needed directly to the Custom class.

Combo classescopy link

These are modifier classes prefixed with cc- that are only added to Custom or Base classes to support different variants of a class. Avoid adding both Utility and Custom classes to a single element, and instead just add all style attributes needed directly to the Custom class.

Class nomenclaturecopy link

Naming strategycopy link

Mast follows a modified approach to the BEM, short for Block Element Modifier, front-end methodology for naming classes in HTML and CSS. It is a way of structuring and organizing code that makes it easier to maintain and understand. BEM is based on the idea of modularity and encourages the reuse of code. It also helps to ensure that all related code is kept together and is easy to find and use.

  • Units: Refer to sizes and scales with numbers relative to their CSS specifications, not abstractions like s, m, l, xl, etc.
  • Names: Use meaningful, but short names when describing things. Abbreviate long words when necessary.
  • Characters: Only use characters that are also supported by the CSS syntax, so the class names shown in Webflow are identical to the class names rendered in the live HTML/CSS, whenever possible*. This ensures their is semantic consistency from Designer to live code, which also helps if you need to target a class with custom code, although we don’t recommend this per our code best practices.

    • Use only lowercase characters
    • Use a dash “-” between words within a multi-word name or as a decimal in a number

    • Use an underscore “_” between words that separate different levels of context within a specific component or page.

📌

An example exception to the Characters rule above (3) is seen in the Mast paragraph-1.5 and paragraph-1.25 classes which opt to prioritize the Units (1) rule above for clarity in the Designer on the purpose of the class, knowing its also unlikely this class would be targeted with custom code per our code best practices.

Breakpoint notationcopy link

We use the infix below to reference each of the 4 default breakpoints in Webflow, within certain classes of the utility and layout system of Mast. If you wish to support additional breakpoints, you can follow a similar nomenclature to extend the system.

Breakpoints
Infix
Dimensions
Desktop
-lg-
<992px
Tablet
-md-
>991px
Mobile Landscape
-sm-
>767px
Mobile Portrait
-xs-
>478px

Purpose notationcopy link

We use some simple class name prefixes to make searching and understanding classes more efficient

Breakpoints
Infix
Utility Class
u-
Combo Class
cc-
Style Guide ONLY Class
styles__

Class managementcopy link

Avoid combining too many utilitiescopy link

You can add a couple different utility classes to an element to quickly adjust it’s styling without the need to create a new custom class, but if you need to add more than 4 utility classes, consider making a new custom class instead. Follow the guidelines below to determine when it may be time to create a new custom classes, versus leveraging several utility classes in a single element.

  1. Avoid stacking more then 4 utility classes
  2. Avoid more then 1 additional utility class to adjust styling at a lower breakpoint
  3. If you still prefer to use all utility classes to accomplish your layout, but it is breaking the guidelines of items 1 and 2 above, then consider adding an extra <div> to separate and group different types of utility classes together.

Avoid combining custom classes and utility classescopy link

When you create a custom class and need to make an additional styling adjustment that is already a utility, avoid using the Utility class and instead add that styling attribute directly to the custom class. This way you avoid the potential of accidentally editing the styling of the element while the utility class is applied, which will then combine the custom class and utility class as a combo set within the rendered CSS on the backend of the Webflow project. Doing so would reduce the global value of the utility class that would otherwise be able to be adjusted in one place and take effect in all instances its used.

Always clear unused classescopy link

Once you have finished a new page, or updates within a project, clear all unused classes and interactions.

To ensure you are always confident in clearing unused classes, there is a "Prevent delete" section in the style guide page that should be used to document any class being used within custom code somewhere and shouldn't be removed when unused classes are cleared.

Variablescopy link

Variable Strategycopy link

Variables allow for even more efficiency and reusability across a web design system within Webflow using Mast. We have taken an initial approach to implementing variables in Mast with a efficiency-first mindset focusing on the highest level values which are most commonly updated across the Mast style guide during project setup. This means that core fonts, sizing, and spacing can almost entirely be defined from variables alone, but with more granular, site-specific styling like the use of color we recommend keeping the assigning of variables within classes directly.

Variable Nomenclature

Unlike class nomenclature, we use title case + spaces to name variables in Webflow to prioritize legibility and scanning. Ultimately, no matter how you write variable names in Webflow, they will get re-written to the CSS variable name, compared to classes which can be written in Webflow exactly as they will be rendered in the live website code.

Variables should also be named in away that clearly groups/associated related type of variables. For example, all component specific variables are named with Component - at the beginning of the group name.

Color Management

We recommend storing all core brand colors as variables in the Colors - All group. When assigning those colors to elements on the site, we prefer to assign the colors directly to the classes used throughout the system, opposed to creating class or component oriented variables which have the core brand color variables assigned. This way, managing color across all styling on a site can be more easily controlled in the canvas, while also not bloating the variable panel of the project.

Spacing Variables

There are two types of spacing variables (EM and REM based) in Mast. The Spacing - Utility EM group is used on all spacing utility classes, and thus can be quickly updated via the variables if you prefer to adjust the utilities to be a different range of values and units. The Spacing - Utility REM group is only used on the section class in the base cloneable, but has a wider range of values that can be used as a baseline 8px system on any other classes as you build out your project. As with many other aspects of Mast though, note that you can always used more specific, unique values directly custom classes without using existing variables or utilities.

Progressive Enhancement link

When Webflow launched native variables at Webflow Conf 2024, it was a huge milestone towards scalable design systems functionality, but there are still several features to be desired in native variables that we have chosen to take a progressive enhancement mindset with. Below are examples of how we are handling certain variable management concepts in lieu of the native functionality for them currently missing, but hopefully coming in the future.

Responsive Variants

When variables (i.e. font-size) should be adjusted at each breakpoint, we add a suffix to the end of the variable name that corresponds to the breakpoint where that variable is used. See the suffix for each breakpoint below, and note their similar nomenclature to breakpoint notation in class management above.

Breakpoints
Suffix
Dimensions
Desktop
[LG]
<992px
Tablet
[MD]
>991px
Mobile Landscape
[SM]
>767px
Mobile Portrait
[XS]
>478px
Font Weight Workaround

One commonly adjusted property not yet supported in native variables, is font-weight. We use a workaround to assigning font weight in variables, by first creating a variables for every possible font weight (100-900), each with a value of 0px. Then, within the Global Designer Custom Code component and embed used on every page in Mast, we have some custom CSS that reassigns the value of each font weight variable to the proper value (100-900), followed by assigning the type or component specific variable font weight to their associated element or class.

Layout System Gap Spacing

Another benefit of using variables is the ability to set a single editable value which can be manipulated with CSS to define several properties at once. This is exactly the route and benefit gained with the new Row & Col Gap variable in the Spacing - Layout group. This value is used within the Global Designer Custom Code component and embed to set the vertical and horizontal gap between columns in the Mast layout system. So, be sure to always include that component on every page to ensure consistent gaps are applied throughout your site.

📌

Still getting the hang of variables and prefer to work without them? Send us a message and we can transfer you the original Mast v1.0 without variables.

Interactions & animationscopy link

Avoid using CSS transition allcopy link

To ensure you leverage every possible aspect of optimal performance, always add CSS transitions for only the specific styles you want to transitions (i.e. font color, background color, etc.). Using transition:all can force some browsers to re-paint then entire UI for each transition when that isn’t necessary for certain common styles. Learn more about this here.

Always consider motion preferencescopy link

Avoid all flashing, fast and jarring motion within your UI and visualizations on the page. When those are necessary to align with the design and art direction of a project, ensure you add a fallback that will automatically hide or pause them if a user has a reduced motion preference turned on in their OS.

Always ensure interactions are reusablecopy link

To do this, be sure you are always targeting classes with interactions and not an element. Also, leverage the ability to target parent, sibling and children classes to the trigger whenever possible so those interactions can be easily reused in any instance with the same HTML structure.

Custom Codecopy link

Global Canvas CSScopy link

There is a global component in the style guide project called Global Canvas CSS that should be add to the top of the navigator on every page of your project.

This component contains custom CSS that is used to reset, polish, and adjust certain things across the entire project, and which should also be visibly altered within the Designer canvas.

Hostingcopy link

We recommended you be strategic on where you place and host any custom code across a Webflow project to balance both performance and maintainability.

Embed

Code in an embed should only be used if on canvas development precision is a priority. For example, if the code must be placed in a specific location of the HTML, or if you have CSS that needs to render live in the canvas while developing other components/layouts natively. If it is CSS, just be sure the embed element is at the top of the navigator to ensure styling takes effect before corresponding HTML is rendered in the live site.

Page Settings

Add custom code to page settings if that code is only used 1-5 pages across the site. For example, if you have a custom slider or other JavaScript enabled components which only occur on a few pages across the site, so there is no need to load the JavaScript code for them on every page of the site (from project settings).

Best Practices link

Some things to keep in mind when implementing any type of custom code.

HTML
SVG’s in an embed
  • Remove fixed height/width: Sometimes the exported SVG code from design tools like Figma will come with fixed width="XX" and height="XX" values in the main <svg> element. In order to more easily control the sizing of the SVG directly in the Designer, you can remove those two attributes, while ensuring you leave the viewBox attribute which is what will retain the proper aspect ratio of the SVG. From there, you can give the embed element a custom class with a set width or height to easily control the size of the SVG.

  • Add a <title>: If you are using SVG code within an embed which is within a link block that doesn’t have additional text, be sure to add the <title>Example Name</title> element within the SVG to act as an alternative to alt text for people using screen readers. Learn more here.

  • Use currentColor: If you want to upload an SVG and control it’s color from within the Designer, you can replace all fill or stroke attribute values with currentColor.

CSS
Keep it DRY

DRY stands for ‘Don't Repeat Yourself'. Not only is this best practice, but it will help you create, edit and maintain CSS much more efficiently. Here is a simple DRY example if we wanted to force several different types of link elements to inherit the text color of their parent, which doesn’t natively happen in Webflow:

Javascript
Non-class Targeting

When possible, target attributes and ID’s instead of classes. This way you separate the purpose of styling from the purpose of adding functionality with JS in order to prevent accidentally breaking functionality based on changing a class name for the purpose of a better class nomenclature.

Load external scripts in the <body>

When loading external javascript libraries, you should almost always load them within the Before </body> custom code section in order to not delay page load speeds. One exception to this is if you are going to include an async or defer method within the script so that it can then be included in the <head>. Learn more about async and defer here.

Styles

An overview of how to use the specific pre-built styles that come in the base Mast style guide.

Typographycopy link

Documentation and examples for Mast typography, including global settings, headings, body text, lists, and more.

Type systemcopy link

Mast uses only 4 heading levels by default in order to keep the type system minimal and efficient. If your project’s brand demands all 6 levels of headings, you can add those using the same structure and nomenclature. To learn more about minimal-type systems thinking, check out this video we feel summarizes the topic well.

Spacingcopy link

Unlike some other systems that remove all default margins from type elements and classes, Mast has strategic default bottom margins set across most of the type system. This approach follows our Already Styled mindset because we have found it to be more efficient to build and maintain type styling globally when these margins are pre-applied.

A key aspect of what makes this type approach powerful is using EM units for the bottom margin. This allows the bottom spacing to always match the proportions of the font size which will naturally get smaller on smaller devices, therefore, there is no need to add an individual margin utility for every single breakpoint.

Font sizecopy link

All font sizes are in REM to ensure users default browser font size changes are properly reflected. If you aren’t familiar with working in REM or developing designs that only use PX you can refer the the calculation of 1rem = 16px, or use an online calculator to do this for you.

Heading element vs classcopy link

Mast styles both the base heading element (i.e. All H1 Headings) and has an identically styled class (i.e. h1) to enable maximum control over both design and accessibility with any use of headings. For example, if you need to use an h3 heading element in order to follow a semantic HTML structure, but you want that heading to be visually the size of an h2, then you would first set it to be an h3 in the heading’s element settings, then you would apply the h2 class.

Type sizecopy link

Class or Element
Desktop
Tablet
Mobile Landscape
Mobile Portrait
h1
5.5rem
4.8rem
3.6rem
2.8rem
h1
5.5rem
4.8rem
3.6rem
2.8rem
h2
3.8rem
3.2rem
2.5rem
2rem
h2
3.8rem
3.2rem
2.5rem
2rem
h3
1.8rem
1.4rem
h3
1.8rem
1.4rem
h4
1.2rem
h4
1.2rem
paragraph-1.5
1.5rem
1.3rem
paragraph-1.25
1.25rem
1.1rem
p
1rem
paragraph-0.9
0.9rem
eyebrow
0.8rem
ol
1rem
ul
1rem

Colorcopy link

Mast starts with a minimal color system that themes our styles and components. This enables comprehensive customization and extension for any project.

Less is morecopy link

Similar to the minimal approach to the Mast type system, colors are also intentionally minimal with the mindset of only including the colors you will actually use within the project, opposed to including every single color within a brand palette.

The default Mast style guide follows a color palette of our core No-Code Supply Co. brand, but you can easily customize the color palette to align with the brand of your project.

Color as a utilitycopy link

All color classes are setup and prefixed with u- to recognize them as utility classes that can operate like any other utility where they are added as needed on top of elements, typography and other utility classes for quick styling adjustments.

All colors are also setup as global swatches in Webflow, so they can adjusted globally across all use cases within both utility or custom classes.

Background colorcopy link

Class
Property
Value
u-bg-primary
color
#d14424
u-bg-black
color
#1d1c1a
u-bg-darkgray
color
#302f2c
u-bg-midgray
color
#888680
u-bg-lightgray
color
#dfddd6
u-bg-white
color
#ffffff

Text colorcopy link

Class
Property
Value
u-text-primary
color
#d14424
u-text-black
color
#1d1c1a
u-text-darkgray
color
#302f2c
u-text-midgray
color
#888680
u-text-lightgray
color
#dfddd6
u-text-white
color
#ffffff

Componentscopy link

Mast comes with a few of the most common components almost every website needs.

Classescopy link

Components follow the base and combo naming conventions. This allows them to be globally controlled and easily adjusted for different variants. As you build out projects for specific brands, you can add and document additional components within the style guide.

Buttoncopy link

Class
Property
btn
Default with primary background
btn cc-light
Light version of default
btn cc-secondary
Secondary variant of default
btn cc-secondary cc-light
Light version of secondary variant of default
btn-icon
Global styles for icons within buttons
All Links
All text links

Formcopy link

Class
Property
form
Default <form> style
input-group
A wrapper for all <label> and <input>
input-label
Default <label> style
input
Default <input> style
input cc-light
Variant of <input> for dark background
input cc-select
Variant of <input> for <select>
input cc-textarea
Variant of input-group for <textarea>
input cc-toggle
Variant of input-group for checkbox or radio
input-radio
Default <input type=“radio”>
input-radio cc-light
Variant of <input type=“radio”> for dark background
input-check
Default <input type=“checkbox”>
input-check cc-light
Variant of <input type=“checkbox”> for dark background
form_required-note
Absolute positioned required asterisk text

Cardcopy link

Class
Property
card
Wrapper for border radius and background
card-body
Modular child with padding

Prevent delete sectioncopy link

This section is included with components as a specific place you can store an example of any component that is created and styled natively in Webflow, but you are using its classes within an embed or custom code somewhere. This supports our clear unused classes fundamental by ensuring you are always confident to keep unused classes cleared without the worry that you may accidentally clear a class that is used in custom code, but no longer exists on a canvas somewhere so Webflow won’t know its not ok to clear.

Utilitiescopy link

Mast has several different sets of modifier classes that are added to elements to quickly adjust a finite amount of styling for a specific purpose.

Margincopy link

Class
Property
Value
Top
u-mt-0
margin-top
0
u-mt-1
margin-top
1em
u-mt-2
margin-top
2em
u-mt-3
margin-top
3em
u-mt-auto
margin-top
Auto
Bottom
u-mb-0
margin-bottom
0
u-mb-1
margin-bottom
1em
u-mb-2
margin-bottom
2em
u-mb-3
margin-bottom
3em
u-mb-auto
margin-bottom
Auto
Other
u-m-0
margin
0
u-mlr-auto
margin
0 auto; (centers element)
u-mr-1
margin-right
1em
u-ml-1
margin-left
1em

Paddingcopy link

Class
Property
Value
Top
u-pt-0
padding-top
0
u-pt-1
padding-top
1em
u-pt-2
padding-top
2em
u-pt-3
padding-top
3em
Bottom
u-pb-0
padding-bottom
0
u-pb-1
padding-bottom
1em
u-pb-2
padding-bottom
2em
u-pb-3
padding-bottom
3em
Other
u-p-0
padding
0
u-p-1
padding
1em

Alignmentcopy link

Class
Property
Value
u-text-center
text-align
center
u-text-right
text-align
right

Overflowcopy link

Class
Property
Value
u-overflow-hidden
overflow
hidden
u-overflow-visible
overflow
visible

Display + positioncopy link

Class
Property
Value
u-d-none
display
none
u-d-block
display
block
u-d-flex
display
flex
u-d-inline-flex
display
inline-flex
u-position-relative
position
relative
u-position-sticky
position
sticky

Sizecopy link

Class
Property
Value
u-w-100
width
100%
u-h-100
height
100%
u-minh-100vh
min-height
100vh

Helperscopy link

These utilities have multiple properties assigned and exist to make adding common, brand agnostic UI patterns quick and easy.

Class
Definition
u-img-cover
Absolute full and object-fit image in relative parent
u-link-cover
Absolute full link block in relative parent
u-aspect-1x1
Set square aspect ratio with 100% top padding
u-z-index-1
Change z-index of any element to 1
u-sr-only
Screen-reader only visually hidden text
u-border
100% width, 1px height modular border

Layoutcopy link

Sectioncopy link

This is a base class used on a <section> or <div> that wraps each section of content on a page to create consistent top/bottom padding across the project. As a base class, it can have both custom combo classes created for special variants, as well as accommodate various utility classes that work well with it like the u-pt-0 or u-pb-0 to remove the top or bottom padding to more precisely control a page’s visual rhythm.

Class
Definition
section
Top/bottom padding for all sections

Containercopy link

This is a base class used on a <div> that wraps all content which isn’t full width to create a consistently centered and left/right spacing. As a base class, it can have both custom combo classes created for special variants like a cc-narrow, as well as accommodate various utility classes as needed, though they are less commonly applied to these.

Class
Definition
container
Max-width for all contained content

Gridcopy link

A powerful, responsive 12 column system of rows, columns and modifier classes, built with Flexbox and a time tested methodology. The system is an iteration of an approach originally inspired by Bootstrap columns, as well as other instances of people in the community using this approach like in this great video from También.

Structure

The grid system is setup with any number of columns (col) nested within a row (row).

The row can be given additional modifier combo classes to adjust vertical alignment and horizontal justification of the columns within it.

Each col is given any variety of breakpoint specific combo classes (see Responsive columns below) that define how wide the column should be at each breakpoint. All columns start off at equal-widths by defining the class of "col" and auto-collapse at the mobile portrait breakpoint if no responsive classes are defined.

Since Webflow also makes almost every aspect of native components and collection lists styleable you can use the grid for them as well! For example, create a blog grid with a collection list by setting the row on the collection list element and the col on the collection item element.

Class
Definition
row
Flexbox parent of all columns
col
Padded container for column content
Responsive columns

To define our responsive 12 column grid, all classes after the initial class of col. If responsive columns are placed within a single row and which the total result in greater then 12, they will automatically wrap onto a new line.

When setting the combo class to define how many columns out of 12 the selected column should span, the number cascades down the breakpoints, so you only need to add a combo class for any break point where the width should change.

📌

As you add responsive combo classes to the selector field in Webflow, the type ahead search will only show suggestions for the first responsive combo you add. Each additional responsive combo class you add won’t display in the search suggestions, but when you add them (spelled correctly) they will still take effect as expected. This is experience is due to a limitation of the Webflow class search functionality.

Desktop
Tablet
Mobile Landscape
Mobile Portrait
col-lg-1
col-md-1
col-sm-1
col-xs-1
col-lg-2
col-md-2
col-sm-2
col-xs-2
col-lg-3
col-md-3
col-sm-3
col-xs-3
col-lg-4
col-md-4
col-sm-4
col-xs-4
col-lg-5
col-md-5
col-sm-5
col-xs-5
col-lg-6
col-md-6
col-sm-6
col-xs-6
col-lg-7
col-md-7
col-sm-7
col-xs-7
col-lg-8
col-md-8
col-sm-8
col-xs-8
col-lg-9
col-md-9
col-sm-9
col-xs-9
col-lg-10
col-md-10
col-sm-10
col-xs-10
col-lg-11
col-md-11
col-sm-11
col-xs-11
col-lg-12
col-md-12
col-sm-12
col-xs-12
Align columns

Add these modifier classes after the row class to align the columns within it vertically.

Class
Definition
row-align-center
Vertically align columns within to center
row-align-end
Vertically align columns within to bottom
Justify columns

Add these modifier classes after the row class to justify the columns within it horizontally.

Class
Definition
row-justify-center
Horizontally align columns within to center
row-justify-end
Horizontally align columns within to bottom
row-justify-around
Horizontally align columns within to be evenly distributed
row-justify-between
Horizontally align columns within to ends
Reorder columns

Add these modifier classes after the col class to reorder the column to first or last at each breakpoint.

Desktop
Tablet
Mobile Landscape
Mobile Portrait
col-lg-first
col-md-first
col-sm-first
col-xs-first
col-lg-last
col-md-last
col-sm-last
col-xs-last
Other column modifiers

These are a few additional modifier classes that are helpful for additional use cases.

Class
Definition
col-shrink
Shrink the column to the width of its content
col-no-gutters
Remove left/right padding on column
row-no-gutters
Remove negative left/right margin offset on row

Change Log

Notes on what changed with each version of Mast.

Version 1.4copy link

February 2024

Buttons

  1. The btn class default styling was adjusted to be display: inline-flex and gap: 0.4em to support native button icons.
  2. Default buttons now include more variants that include icons.

Utilities

  1. Added a new u-d-inline-flex utility class.
  2. Added a new u-position-sticky utility class.

Version 1.3copy link

February 2024

Updated how custom CSS is used throughout Mast to move as many properties as possible into the new Custom Properties feature in Webflow.

Version 1.2copy link

February 2024

Added and integrated a full range of native Variables across all critical elements and styling.

Version 1.1copy link

October 2023

General bug fixes and style refinement.

Version 1.0copy link

February 2023

Original release of the Mast framework.

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
Link copied