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 ↗
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
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.
Style guide nav
- Once all sections below have been pasted, come back to the nav to update the anchor links appropriately.
- We do this one second so all other following sections can use the layout grid system as expected.
- 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
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.
- 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
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.
- 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.
- 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.
- Select one of the paragraph classes on the canvas
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.
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.
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.
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.
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.
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.
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.
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.
We recommended you be strategic on where you place and host any custom code across a Webflow project to balance both performance and maintainability.
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.
Best Practices link
Some things to keep in mind when implementing any type of custom code.
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.
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:
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>
An overview of how to use the specific pre-built styles that come in the base Mast style guide.
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.
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
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.
Background colorcopy link
Text colorcopy link
Mast comes with a few of the most common components almost every website needs.
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.
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.
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.
Display + positioncopy link
These utilities have multiple properties assigned and exist to make adding common, brand agnostic UI patterns quick and easy.
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.
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.
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, a Webflow cloneable by Kevin Houle, as well as other instances of people in the community using this approach like in this great video from También.
The grid system is setup with any number of columns (col) nested within a row (row).
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.
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.
Add these modifier classes after the row class to align the columns within it vertically.
Add these modifier classes after the row class to justify the columns within it horizontally.
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.
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