Marcel Deelen
+31 6 3560 8517
hello@marceldeelen.com
small medium large

A Webflow Framework

Small Medium Large has been built upon 10 years of experience and a healthy bundle of personal preference. Focusing on clarity and adaptability.

Small Medium Large is designed for Webflow developers who need a flexible system without compromising build speed. The framework is inherently adaptable to any design, while it still offers a large variety of predefined classes to facilitate a quick start.

Not to everybody's taste is that Small Medium Large does not use any margins or paddings, instead it uses spacer divs. This creates instant clarity in the Navigator. Your use of margins and paddings is not hidden away in combo-classes, instead, they will be instantly readable inside the navigator panel across an entire page.

At the core of Small Medium Large lies small, medium, and large. It is used to define text sizes, spacing, shadows, and breakpoints. XXL, XL, L, M, S, XS, XXS. A clear system that can easily be expanded upon with additional classes if a design calls for it. XXXL, XXXS...

Small Medium Large keeps it clean. No big chunks of custom code, and the right amount of predefined classes to aid a quick building process. It does not put the client first, nor the developer. It puts efficiency first. It puts you in control while providing your client with valuable insights into its inner workings.

Webflow Cloneable S - 1440px
Webflow Cloneable M - 1680px
Webflow Cloneable L - 1920px

The Global Styles custom code component should be present on all pages at the top of the page. Within this component, amongst other things, the fluid scaling is defined. This approach aims to streamline the development process, by eliminating the need for adding additional larger breakpoints. And for tablet only layout changes should suffice.

How the scaling is handled depends on the chosen screen size in the design file. Therefore, you must pick the version that matches the design file. In all cases, 16 px in the design is equal to 1 rem.

Designed on 1920 px

Scaling in this version of the SML framework is defined for viewport widths ranging from 1920 to 1280 px. Between 1280 and across tablets there will be no scaling.

On a 1920 width 16 px is 1 rem, on mobile landscape 16 px is again 1 rem.

The designer needs to ensure that the main text size doesn't scale down below 16 px. As an example, a 24 px font size in a design made on a width of 1920 will scale down to 16 px on a tablet. It will not scale up on a screen larger than 1920.
‍

Webflow Cloneable L - 1920px

Designed on 1680 px

Scaling in this version of the SML framework is defined for viewport widths ranging from 1920 to 1280 px. Between 1280 and across tablets there will be no scaling.

On a 1680 width 16 px is 1 rem, on mobile landscape 16 px is again 1 rem.

The designer needs to ensure that the main text size doesn't scale down below 16 px. As an example, a 21 px font size in a design made on a width of 1680 will scale down to 16 px on a tablet and scale up to 24 px on a 1920 screen and larger.
‍

Webflow Cloneable M - 1680px

Designed on 1440 px

Scaling in this version of the SML framework is defined for viewport widths ranging from 1920 to 1280 px. Between 1280 and across tablets there will be no scaling.

On a 1440 width 16 px is 1 rem, on mobile landscape 16 px is again 1 rem.

The designer needs to ensure that the main text size doesn't scale down below 16 px. As an example, an 18 px font size in a design made on a width of 1440 will scale down to 16 px on a tablet and scale up to 24 px on a 1920 screen and larger.
‍

Webflow Cloneable S - 1440px


If you got handed a design that does not accommodate any form of scaling or if you prefer to adjust it by hand, then simply remove this function, it is the first chunk of code in the Global Styles Component.

   Layout

The layout system used in Small Medium Large is nothing new, based on the 12‑column principle.

A layout row with left and right negative margins and inside that columns with left and right side padding to create the gutter and a width set in percentages. The size of the gutter is set inside the variables panel.

Add a flexbox layout to control the elements inside a div

More ready‑made classes turn an element into a flexbox and add control to the placement of the elements inside it.

All classes that are used for layout start with layout__
Each class is well‑named, leaving little to the imagination.

See the Layout Classes Sheet
layout__col
layout__vertical
layout__align-center
layout__justify-space-between
layout__col-3

Predefined classes give you full control across all breakpoints

Small Medium Large is not built to save a few seconds of your time. When it comes to choosing between automation or giving you control, we choose control.

This framework will not automatically turn your 4‑column layout into a 2‑column layout for tablets or a 1-column layout for mobile. No, you determine the layout changes for each breakpoint by adding the matching class name. Maybe a 3‑column layout on tablet is better and does the content still fit nicely in a 2‑column layout on mobile? It's up to you.

The classes that target a specific breakpoint start with bp‑S__ for tablet, bp‑XS__ for mobile landscape, and bp‑XXS__ for mobile portrait. There are no predefined classes for the optional bigger breakpoints, but if you need them then you can name them using the same logic: bp‑L__, bp‑XL__, and bp‑XXL__.

See the Responsive Classes Sheet
layout__col
layout__vertical
layout__align-center
layout__justify-space-between
layout__col-3
bp-S__layout__col-4
bp-XXS__layout__col-6

   Spacing

Small Medium Large does not have a system for using margins or paddings, instead, it uses separate divs to create space ranging from spacing‑XXS to spacing‑XXL.

Square div blocks are helping to keep a consistent use of whitespace

The problem with using margin and padding combo classes is that their names are not shown in the navigator, and therefore it is all too easy to be inconsistent in your use of space across a website, especially over time when a website grows and new pages need to be added.

Therefore this approach. We can now right away see in the Webflow Navigator the spacing elements with their class indicating the size.

All sizes can be easily adjusted inside the variables panel.

See the Layout Classes Sheet
Screenshot from Webflow Navigator panel showing the different spacing classes.

   Typ

The headlines and text sizes are of course named according to the Small Medium Large logic.

H1 is the same as heading‑XL and H6 is identical to heading‑XXS. And for plain text is the body equal to text‑M and from there, we go up to text‑XXL and down to text‑XS.

Alignment also has its predefined classes, you can have text‑left for desktop and bp‑S__text‑center for tablet.

See the Typ Classes Sheet
heading-XL
E
C
B
heading-L   
D
N
L
F
heading-M  .
P
T
E
O
R
heading-S     
F
Z
B
D
U
E
heading-XS   
L
C
P
T
Z
Z
E
heading-XXS 
U
E
B
D
P
H
C
F

   Color

The Small Medium Large starter doc already has color variables defined, split up into a base, primary, and secondary sets where primary‑500 and secondary‑500 are the brand colors. Needless to say, you will have to change the colors to match your brand inside the variable panel.

There are predefined background color classes for all tints. And for text colors, you have the base and brand colors preset.

Shadow elevation levels

To make life just that little bit easier the starter doc also comes with 6 predefined levels of shading. The highest level aka biggest shadow is shadow‑XL and from there we work our way down to the lowest level, being shadow‑XXS.

See the Color Classes Sheet
Screenshot from Webflow Variables panel showing the color setup

   Components

A variety of pre-built, fully responsive basic layout components have been made to save time when creating rows and columns.

Intentionally, you won't find more complex designs here—no navigation bars, footers, or tab sections. These elements vary too much from one design to another and cannot be standardized without turning this into a template.

See the Components Sheet