Saddle Framework
A Developer-First, Client-Focused Webflow Framework
The framework is intentionally designed to be as straightforward as possible, enabling quick onboarding for freelancers. Updates and bug fixes are quick and uncomplicated.
Saddle redefines the limits of Webflow's capabilities, merging code with the platform to enhance its efficiency, performance, and user-friendliness.
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
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 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.
They should be upper case with spaces. i.e.: Blog Card
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.
Unless they are very different, try using combo classes to create variants.
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.
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.
This component is actually a div that contains two embeds.
global CSS styles for the project, like font-smoothing, defaults, utilities, etc.
global JavaScript that is used for global animations or similar.
page-specific CSS styles for the page.
page-specific JS for the page, like interactions.
The Main wrapper of the page. This should NOT include the nav and footer. It should always have the Main HTML tag.
A section controls the vertical spacing between sections and has the HTML tag Section. It can include two embeds if it needs custom code.
Custom CSS specific to that section.
Custom JS specific to that section.
A container controls the horizontal spacing and max-width of the content.
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:
A wrapper div that holds a heading inside and provides a margin-bottom property. Add combo classes for smaller or larger margin.
A wrapper div for paragraphs, mostly used to set a max-width or align text.
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.
The image class is set to cover by default and 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
