CSS Classes
SML is designed to be used through components. Its predefined CSS classes remain available for layout situations where components cannot be applied directly, such as Webflow Collection Lists.
For typography, images, and other visual elements, use the corresponding SML components and their properties.
Structural classes
The following classes provide the foundation for SML layouts.
Class
Purpose
.container
Controls the maximum content width and horizontal page padding.
.row
Creates a flex layout for arranging elements.
.col
Creates a flexible column within a Row.
.col-6
Assigns a specific column width.
These classes can be applied directly to Webflow elements when the component structure isn't available.
Using classes with Collection Lists
Webflow Collection Lists are a common example of where layout classes are useful.
Rather than introducing additional wrappers, apply SML's classes directly to the elements Webflow already provides.
- Select the Collection List element and add the
rowclass. - Select the Collection Item and add the
colclass. - Add the required column-width classes and any additional layout utilities.
For example:
<div class="w-dyn-items row">
<div class="w-dyn-item col col-6 xs__col-12">
<!-- CMS content -->
</div>
<div class="w-dyn-item col col-6 xs__col-12">
<!-- CMS content -->
</div>
</div>
This creates a two-column layout on Desktop and Tablet, switching to a single column on Mobile Landscape and Portrait.
The same approach can be used with other native Webflow elements when introducing a component would add unnecessary structure.
Column widths
The .col class provides the default flexible column behavior.
Add a width class when a specific width is required.
The SML classes uses a 12‑column system across all four breakpoints:
Class
Width
.col‑1
8.33%
.col‑2, .s__col‑2, .xs__col‑2, .xxs__col‑2
16.66%
.col‑3, .s__col‑3, .xs__col‑3, .xxs__col‑3
25%
.col‑4, .s__col‑4, .xs__col‑4, .xxs__col‑4
33.33%
.col‑5
41.66%
.col‑6, .s__col‑6, .xs__col‑6, .xxs__col‑6
50%
.col‑7
58.33%
.col‑8, .s__col‑8, .xs__col‑8, .xxs__col‑8
66.66%
.col‑9, .s__col‑9, .xs__col‑9, .xxs__col‑9
75%
.col‑10, .s__col‑10, .xs__col‑10, .xxs__col‑10
83.33%
.col‑11
91.66%
.col‑12, .s__col‑12, .xs__col‑12, .xxs__col‑12
100%
Column widths are applied as combo classes alongside .col. Selected widths also have responsive equivalents, identified by the .s__, .xs__, and .xxs__ prefixes.
Layout utilities
Additional classes can be combined with .row and .col to adjust their layout behavior.
Class
Purpose
.horizontal
Arranges elements horizontally.
..vertical
Arranges elements vertically.
.align-start
Aligns elements to the start of the cross axis.
.align-center
Centers elements on the cross axis.
.align-end
Aligns elements to the end of the cross axis.
.align-stretch
Stretches elements across the cross axis.
.justify-start
Positions elements at the start of the main axis.
.justify-center
Centers elements along the main axis.
.justify-end
Positions elements at the end of the main axis.
.justify-space-between
Distributes available space between elements.
.justify-space-around
Distributes available space around elements.
.no-wrap
Prevents elements from wrapping onto another line.
.reverse
Reverses the order of elements.
Gap and gutter
Rows support separate controls for spacing between elements.
- Gap controls the spacing between rows of content.
- Gutter controls the horizontal spacing between columns.
The available classes include gap-s, gap-m, gap-l, gutter-s, gutter-m, and gutter-l, along with options to remove spacing.
Their values are connected to Webflow's spacing variables, allowing the spacing system to be adjusted centrally.
See the Variables documentation for configuring these values.
When to use classes
Use SML components wherever possible. Their properties expose the available layout and styling options without requiring developers to manage classes manually.
Use the predefined layout classes when working with native Webflow elements or structures that cannot be built directly with SML components.
For requirements beyond the existing system, add site-specific CSS to the Global Styles element.
