Welcome to Mast

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. Go to the Customize section below to learn how to update the variables and classes that align with the brand specs of your project.

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

Update Variables

This first step to customizing Mast for your project is to open up the variables panel in Webflow, and go through each collection to update the type, colors, layout, and component variables to match your project's design system. Below is a bit more details to consider when going updating each variable collection:

Update Classes link

Once all variables have been updated, now its time to go through the styles and components pages section by section to refine any additional styling on base classes further.

Using the Figma Style Guidecopy link

The Mast Style Guide for Figma (Beta) is the design companion to Mast. This is the first of many steps towards a more one-to-one workflow (using Mast!) between Figma and Webflow. Subscribe to get access to the Figma file as the best way to get started designing a site in Figma for Mast.

The Figma Style Guide is intended to match the style guide page in Webflow that you update with the type, color, button, and form styles of your project. Below are a few notes to keep in mind when using the Figma Style Guide:

• All type and color properties are setup as variables and type styles in Figma to make updating those efficient, as well as setup the guide for future iterations that will enable syncing these properties to Webflow as seamless as possible using the Figma to Webflow plugin.

• Buttons and form inputs are setup as components in Figma so they can be globally updated and maintained across your design.

• All layer names and structure are setup to match the class names and HTML structure of the Mast style guide in Webflow. This is a first step towards future Figma template files we plan to create for Mast that will allow you to copy/paste fully responsive layouts from Figma to Webflow using the plugin in the future.

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.

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.

• Headings have a default bottom margin
  

  Since headings commonly sit above a paragraph or other element, the margin is already set and can be globally updated in relation to the heading. For times when no bottom margin is desired on the heading, we simply add the u-mb-0 utility to remove it.

• Columns in the layout system have a default gap
  

  This gap simply acts as a minimum and columns can otherwise be offset with row level justification combo classes. The default gap can be adjusted globally, or even removed with a column level combo class of col-no-gutters.

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.

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.

• 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

    • Example: u-bg-primary
      

      The utility for a primary background color

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

    • Example: blog_header-title
      

      A class created to only be used on a specific page.

Purpose notationcopy link

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

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.

Size notationcopy link

We differentiate size variants of classes with t-shirt sizing nomenclature which is postfixed as the end of the class name. The benefit of abstracting the size variants of classes in this means that those class names can remain the same from one project to the next, even if the style properties of them are different between those projects.

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 at the bottom of the Components 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.

Variable Strategycopy link

Variables allow for even more efficiency and reusability across a web design system within Webflow using Mast. We have taken an approach to implementing variables in Mast with a setup efficiency mindset focusing on the highest level values which are most commonly updated across the Mast style guide. 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 Collections link

Variables in Mast are organized into the following collections to make finding and updating variables efficient, while ensuring the association of variables and styles is performant and semantic. Variables play a key role in making the initial project setup process much faster by handling the majority of core design system styling in these easy to navigate collections, and leaving only secondary styling to be done manually direct in classes and styles.

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.

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.

Best Practices link

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

Spacingcopy link

Unlike 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 uses consistent variables to style both the base heading element (i.e. All H1 Headings) and 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

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

Modescopy link

Margincopy link

Paddingcopy link

Alignmentcopy link

Clamping link

Wrapping

Overflowcopy link

Display + positioncopy link

Responsive modifiers

Sizecopy link

Aspect ratio link

Helperscopy link

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

Buttoncopy link

The button in Mast is primarily used as a component across your project. The foundational btn class does however exist for use on things like form submit buttons or the modal trigger button, and you can extended the btn classes available for the needs of your specific project.

Formcopy link

Mast comes with a set of custom styled common inputs managed through static classes. By default, the inputs use a nested label aesthetic, but if this is not preferred for your project's design system, you can simply update the style props for the input, input-label, and input-group to reset it back to a more traditional approach with the label sitting above the input.

Accordion link

Modal

Eyebrow

Breadcrumb link

Icon 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 refinement to child elements as specified below.

Nav link

Nav banner

A link banner meant to add above the Nav component to use for important annoucement and CTAs across your site.

Footer

The footer component is intended to be a generic start point and example of how we recommend controlling a few footer specific classes and elements. Using the grid and utility classes in Mast you can create a wide variety of footer layouts that best fit the needs of your project.

Section

Grid

Using the same foundational approach as the class based Mast Grid, we combine row and column components to create a simple, modular approach to build a wide variety of layouts.

Content

A component based rich text element that is the primary way to add content in any Section or Grid - Col with the Build mode components.