Saddle Framework

A Developer-First, Client-Focused Webflow Framework

After building countless websites and experimenting with various popular frameworks such as Tailwind, BEM & Client-First we were driven to develop our very own framework: Saddle.  
‍
Much like a saddle on a mule helps maintain control, Saddle is designed to keep control over your projects.

Clone Style Guide

Read Docs

Easy

The framework is intentionally designed to be as straightforward as possible, enabling quick onboarding for freelancers. Updates and bug fixes are quick and uncomplicated.

Empowering

Saddle redefines the limits of Webflow's capabilities, merging code with the platform to enhance its efficiency, performance, and user-friendliness.

Fast

Saddle uses variables for efficient reuse and updates of design elements like colors and fonts, enhancing both efficiency and user experience.

The mindset

Our objective was to maximize reusability and utility, enabling any editor to enhance functionality effortlessly by incorporating a component or attribute to a page or element. For instance, implementing a fade-in animation using GSAP could be achieved by targeting any element with the "fade-in" attribute. This approach is efficient, customizable, and adaptable.

Naming

Page Structure

Layout

Content

Naming

Classes

Class names are all lowercase, with dashes and underscores to separate words. Use underscores for children elements. For example, a blog-card class could have a child element called blog-card_image.
Do not use automatically created classes.

Combo classes

Combo classes need to be distinct from base classes to avoid collisions. We have global utility classes, and scoped combo classes. Utility classes have a u- prefix, while other combo classes have a cc- prefix.

Components

They should be upper case with spaces. i.e.: Blog Card

Size Variants

We use the 2-letter abbreviation of the sizes: xs, sm, md, lg, xl.
We do not use one letter abbreviations like s, m, l.
For even larger/smaller, just append a number (2xs, 2xl) to keep it short

Element Variants

Unless they are very different, try using combo classes to create variants.

❌

button-large

✅

button

cc-large

Animations

Name of element + [state/action]. Keep the names short, but descriptive.
Examples: Nav Dropdown [Open], Section [Fade in].
"While scrolling" and "Mouse move" animations are special. They don't typically change to a specific state, so you can get more descriptive with them. Examples: Background change to white, Case studies floating cards.
If you are using GSAP animations, put them in an embed element and turn them to components so that you can drop them in any page needed.

Page Structure

You can use the interactive element tree above as a quick reference of the basic structure. There should be a clear distinction between sections, and section-specific code should be inside that section to make it easy to find.

page

This div contains the entire page’s content. It doesn’t have any styling, but makes it easier to copy pages around. It should contain the nav, footer, main, global code, and page transition if it applies.

Global Code

This component is actually a div that contains two embeds.

css

global CSS styles for the project, like font-smoothing, defaults, utilities, etc.

global JavaScript that is used for global animations or similar.

css (optional)

page-specific CSS styles for the page.

js (optional)

page-specific JS for the page, like interactions.

main

The Main wrapper of the page. This should NOT include the nav and footer. It should always have the Main HTML tag.

section

A section controls the vertical spacing between sections and has the HTML tag Section. It can include two embeds if it needs custom code.

css (optional)

Custom CSS specific to that section.

js (optional)

Custom JS specific to that section.

container

A container controls the horizontal spacing and max-width of the content.

{name}-layout

This name can either be something generic that will be used again (i.e. “hero-layout”), or it could be page and section-specific. Take a good look at the design and look for opportunities to reuse a layout class.

Layout

Although you should try using flex/grid with gap to space things evenly, you often need some standard spacing under/above headings, CTA’s, or a max-width on paragraphs.

We provide a few classes to help with this:

title-wrapper

A wrapper div that holds a heading inside and provides a margin-bottom property. Add combo classes for smaller or larger margin.

text-wrapper

A wrapper div for paragraphs, mostly used to set a max-width or align text.

cta-wrapper

A wrapper div for buttons which gives you margin-top. It is also set to flex with a gap to be able to hold multiple buttons.

image-wrapper

The image wrapper class has combo classes to control its aspect ratio or set it to contain. You can add more or modify them. Default: cc-1x1 cc-4x3 cc-16x9 and cc-contain

Layout

For text and images, we have specific classes that we can reuse to avoid creating a new class for each block of content.

Once in a while, you may have a design that requires a unique text size. In that case, you can create custom text classes. Try not to do this too much!

text-*

These are classes for styling text. There are 2 groups: headings and body text.
Heading text styles start from text-h1 , down to text-h6, while body text classes start from text-xl, down to text-xs

rich-text

There is a generic rich-text class that helps make the defaults a bit better. Of course, you are free to create more specific classes.

image

The image class sets your images to full width and height, and the object fit to cover. You can also use a combo class to set it to "contain".

Read the docs

Learn more about the underlying CSS system, best practices and documentation on how to get started with Saddle and use it to its full potential

Read Docs

Clone style guide

Start each project from this base project of classes that are the foundation of the Saddle framework

Clone style guide

Saddle Framework Showcase

Dive into a Collection of Stunning websites crafted by Talented Developers and Studios

Explore Showcase