Updates

A complete documentation section has been added to the SML website, covering architecture, components, variables, typography, responsive behavior, conventions, CSS classes, Build Mode, and AI integration.

The main website has also been updated to better demonstrate the advantages of building with SML, with a clearer separation between product information and technical documentation.

Updated the SML typography system to improve accessibility by supporting both viewport-based scaling and browser font-size preferences. Layout and typography scale with viewport width as before, but now text also adapts to individual browser font-size preferences.

Added a minimum font size of 16px for the standard body text.

The Reframe app was completed and submitted to Webflow for review. The app lets users reposition and scale images directly inside the SML Image component. Read more

The SML Skill got a small update. It has become fast enough to occasionally run into Webflow’s API rate limits, so I added a safety clause that handles those limits without unnecessarily slowing down the build.

Small Medium Large now uses Webflow Agent Instructions to store the framework registry and rules directly with the site. This gives connected AI agents the context they need to understand and work with SML without having to rediscover its structure each time.

I also implemented Webflow's new component visibility controls, hiding developer-only components from the Marketer role and keeping the component library focused on what clients actually need.

The accordion animation no longer uses GSAP and the JavaScript for the background video and video lightbox are now integrated inside the image component, only to be loaded in the DOM when a background video or lightbox video is used.

The SML Claude skill has been updated to support Webflow MCP 2.0. You can now let Claude build sections inside your SML project without the need for having the browser window active. So while you work on Project A, Claude can work at the same time in Project B.

Small Medium Large now supports AI-assisted layout building with Claude.

With the first public release of the SML Webflow skill, Claude can read the structure of an SML project and build Webflow layout sections from the active site registry. That means components, variants, properties, and slot names come from the project itself, not from memory, assumptions, or generated code.

The skill turns Claude into a controlled builder for SML. It can construct sections, place components and set properties.

Custom CSS has been optimized by replacing most :has() selectors with direct data-sml-* runtime attributes. This reduces selector complexity in the Webflow Designer and removes the hidden helper divs from the published DOM.

A major update. Small Medium Large is now a Controlled Webflow Component Framework. This update makes the structure behind the system more explicit, clearly separating components, the foundational layer, and workflow. The goal is simple: build with control, keep structure intact, and scale without creating complexity.

The length of the class names have been reduced, to give a better overview and to save a few bytes. Therefore layout classes no longer start with layout__, so instead of layout__row we now simply have row. Background classes went from background-primary-500 to bg-primary-500 and breakpoint specific classes went from bp-s__text-center to s__text-center.

I altered the rem scaling logic. Only the L version of the framework scales down from 1920 to 1280, the other two versions only scale between 1680 and 1280. I also cleaned up that bit of custom code.

Webflow introduced variable modes today! With this update, all text sizes can now be controlled directly from the variables panel. Additionally, responsive sizing for spacing, gaps, and gutters is now fully adjustable within the same panel.

The Small Medium Large component library now includes tabs, sliders, image lightboxes, and video lightboxes. Each uses component slots to support flexible content layouts.

Also the component blocks now take advantage of Component Variants. These let you change column size, image size, or content layout with a dropdown. And instead of 25 components we now only need 8.

Component variants are here. The pre-built components PB03, PB07 and PB08 now have variants that let you swap the image and text position.

All component blocks and pre-built sections now incorporate native header levels. Previously, this required a custom element, which came with its own limitations. Now, marketing teams can, for example, hide the H1 eyebrow headline and change the main heading from H2 to H1 without leaving the canvas.

The starter template page now comes with a page slot. Ready for starting to build pages using the S‑M‑L Component blocks.

You can now choose from three different sizes for the spacing between rows and columns. You can adjust them in the Variables panel and see examples of their use on the Layout page.

Updated the small-medium-large.com website with pages dedicated to developers and marketing teams.

Organized all components into folders.

Small Medium Large now comes with a system of what I call Component blocks. L-components (section, container, row) have slots for M-components (col) and those have slots for S-components (visual content). This makes newly built sites with Small Medium Large ready for the moment that Webflow releases Page Build Mode.

Class names are now written in all lowercase. Even though Webflow converts all class names to lowercase, using capitals can cause problems.

Release of a 12-hour long YouTube playlist of a website built using the Small Medium Large Framework. From setting up the styles and adjusting the variables to creating collections and making the pages responsive. Go to the YouTube playlist.

All components now come with properties to enable you to change text, sizes, and links and control the visibility of elements.

Some CSS custom code has been deleted and replaced by custom properties in the style panel. The need for half-gap size variables has also become obsolete, and calc() is now used instead.

Small Medium Large can now handle different design file sizes. When working with different designers you can get design files in either 1440, 1680, or 1920 width. Previously, this meant adjusting the scaling to ensure that 1rem corresponded to 16px in the design. SML now handles this automatically.

Fully responsive pre-built layout components have been added to the framework.

After ten years of working in Webflow, I made my Small Medium Large Framework public and cloneable.