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 ↗Mast Guide GPT
Get your questions answered and technical guidance from our trained GPT! ChatGPT Plus subscription required.
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
- Clone the Mast style guide project
Update Project Settings
- General tab > name and subdomain
- Fonts > add any necessary custom fonts
- Custom code tab > custom highlight background and font colors
Customize Style Guide
Go to the Customize section to update any of the following elements and classes to align with the brand specs of your project.
How to add to an existing projectcopy link
- Clone the Mast style guide project
- Open the cloned style guide project in one tab, and your existing project in another.
- Create a new style guide page in your existing project.
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.
Style guide nav
- Once all sections below have been pasted, come back to the nav to update the anchor links appropriately.
Layout Section
- We do this one second so all other following sections can use the layout grid system as expected.
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.
- Color Section
- Components Section
- 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
- Select the Body element in the Navigator
- Within the Selector field of the style panel, select the Body (All Pages) element
- 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.
Elements
- Select a Heading (1-4) element on the canvas
- Within the Selector field of the style panel, select the All H(1-4) Headings element
- Update the font, font size, line height, letter spacing, and bottom margin as necessary across all breakpoints.
- Ensure the styles of the heading level match the styles of the equivalent class across all breakpoints.
Classes
- Select a heading with an h(1-4) class on the canvas
- Update the font, font size, and color
- Update the font, font size, line height, letter spacing, and bottom margin as necessary across all breakpoints.
- Ensure the styles of the heading level match the styles of the equivalent element across all breakpoints.
Paragraphs
- Select one of the paragraph classes on the canvas
- 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:
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.
- All vector images (icons, etc) should be exported as SVG images or code to be used within an embed.
- Font files can be loaded as .woff and .woff2 for broad browser support and smaller overall file sizes.
- 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.
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.
Purpose notationcopy link
We use some simple class name prefixes to make searching and understanding classes more efficient
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.
- Avoid stacking more then 4 utility classes
- Avoid more then 1 additional utility class to adjust styling at a lower breakpoint
- 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.
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
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
Text colorcopy link
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.
Formcopy link
Cardcopy link
Rich Text link
The rich text element natively uses the heading, paragraph, etc. styles defined in the typography for the rest of the site. By using a rich-text base class on any rich text element we can add further spacing and color style refinement to child elements as specified below.
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
Paddingcopy link
Alignmentcopy link
Overflowcopy link
Display + positioncopy link
Sizecopy link
Helperscopy link
These utilities have multiple properties assigned and exist to make adding common, brand agnostic UI patterns quick and easy.
Layoutcopy link
Page Structure link
Every page in your project should have consistent structure of global and common elements to optimize for reusability and accessibility.
Wrapping all elements in a single <div> with the page-wrapper class makes it more efficient to copy/paste all elements from one page to another.
Including any embeds of custom code (primarily CSS) at the top ensures the styling is read by the browser before the HTML so things are styled immediately when rendered.
Wrapping all main sections in a semantic <main> element with the page-main class improves page SEO and accessibility by differentiating the main content from the global <nav> and <footer>.
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.
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.
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.
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.
Align columns
Add these modifier classes after the row class to align the columns within it vertically.
Justify columns
Add these modifier classes after the row class to justify the columns within it horizontally.
Reorder columns
Add these modifier classes after the col class to reorder the column to first or last at each breakpoint.
Other column modifiers
These are a few additional modifier classes that are helpful for additional use cases.
Change Log
Notes on what changed with each version of Mast.
Version 1.4copy link
February 2024
Buttons
- The btn class default styling was adjusted to be display: inline-flex and gap: 0.4em to support native button icons.
- Default buttons now include more variants that include icons.
Utilities
- Added a new u-d-inline-flex utility class.
- 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.
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