Welcome to LAYOUT-LAYER

LAYOUT-LAYER was made to let you build 99% of layouts without creating a single custom class. It comes with a set of reusable utility classes to control elements across all default breakpoints.

It's meant to be applied on top of a style system of your choice, e.g. Client-First by Finsweet. That's why classes for text sizes, spacers, paddings etc. were not included. Clone LAYOUT-LAYER and copy/paste ll-wrapper into a new draft page in your project.

Also, check the "Global Settings" tab in the side panel for useful CSS properties to be applied on HTML tags. Unfortunately, these styles will not be copied with the page. You have to set them manually.

Ideally, add classes as custom attributes
‍
Instead of adding classes in the Style panel, head over to settings, add attribute "class" and apply the utility classes in the value field. For example class="grid-3 ml-grid-2 gap-s"

‍

You won't have to deal with stacked classes if you want to change something.
Invalid styles cannot be accidentally applied to them - like text color on grid-1. It's especially useful if someone who doesn't know LAYOUT-LAYER uses the project as well.
If you need, you can add a custom class normally and apply styles without worrying about the utility classes, as they are sitting peacefully in the settings panel.

‍

The only disadvantage is that you will not be able to change a class name globally, but probably you will never have to. Also, for some unknown reason width and height classes sometimes doesn't work in the Designer when added as an attribute, so add them normally. That's a Webflow bug.

Why not custom classes?

‍

On bigger projects they generate a lot of CSS.
Many people have trouble strictly following class naming conventions defined in frameworks like Client-First, which makes projects harder to maintain, especially when many developers are involved.
Coming up with the names also takes noticable amount of time.

‍

Once you learn LAYOUT-LAYER, your workflow will be faster, easier and your projects simpler to manage and more performant.

Desktop

grid-1

grid-2

grid-3

grid-4

grid-5

grid-6

grid-7

grid-8

grid-unlimited

Tablet

t-grid-1

t-grid-2

t-grid-3

t-grid-4

t-grid-5

t-grid-6

Mobile Landscape

ml-grid-1

ml-grid-2

ml-grid-3

ml-grid-4

Mobile Portrait

mp-grid-1

mp-grid-2

Flex

flex

t-flex

ml-flex

mp-flex

flex-w

t-flex-w

ml-flex-w

mp-flex-w

flex-v

t-flex-v

ml-flex-v

mp-flex-v

Column Spans are meant to be applied on grid children.
They will not cause any change on elements inside flexboxes.
‍

Desktop

span-2

span-3

span-4

span-5

span-6

span-7

span-8

Tablet

t-span-1

t-span-2

t-span-3

t-span-4

t-span-5

t-span-6

Mobile Landscape

ml-span-1

ml-span-2

ml-span-3

ml-span-4

Mobile Portrait

mp-span-1

mp-span-2

Desktop

rspan-2

rspan-3

rspan-4

Tablet

t-rspan-1

t-rspan-2

t-rspan-3

Mobile Landscape

ml-rspan-1

ml-rspan-2

Mobile Portrait

mp-rspan-1

Gap

gap-xxs

gap-xs

gap-s

gap-m

gap-l

gap-xl

gap-xxl

Row Gap

rgap-0

rgap-xxs

rgap-xs

rgap-s

rgap-m

rgap-l

rgap-xl

rgap-xxl

Justify

EDGE CASE: if you put a justify class on top of a custom grid with fixed column width, it will not only change placement of items inside columns, but also columns themselves. That's because every justify class has justify-content property, to work on a flexbox. The moral is - if you create a custom grid, add a custom justify, unless you want your columns justified as well. Luckily, that's a very rare occurance.

justify-s

t-justify-s

ml-justify-s

mp-justify-s

justify-c

t-justify-c

ml-justify-c

mp-justify-c

justify-e

t-justify-e

ml-justify-e

mp-justify-e

t-justify-stretch

ml-justify-stretch

mp-justify-stretch

Flexbox specific

justify-b

t-justify-b

ml-justify-b

mp-justify-b

justify-a

t-justify-a

ml-justify-a

mp-justify-a

Self Justify

justify-self-s

t-justify-self-s

ml-justify-self-s

mp-justify-self-s

justify-self-c

t-justify-self-c

ml-justify-self-c

mp-justify-self-c

justify-self-e

t-justify-self-e

ml-justify-self-e

mp-justify-self-e

justify-self-stretch

t-justify-self-stretch

ml-justify-self-stretch

mp-justify-self-stretch

Align

align-s

t-align-s

ml-align-s

mp-align-s

align-c

t-align-c

ml-align-c

mp-align-c

align-e

t-align-e

ml-align-e

mp-align-e

t-align-stretch

ml-align-stretch

mp-align-stretch

Self Align

align-self-s

t-align-self-s

ml-align-self-s

mp-align-self-s

align-self-c

t-align-self-c

ml-align-self-c

mp-align-self-c

align-self-e

t-align-self-e

ml-align-self-e

mp-align-self-e

align-self-stretch

t-align-self-stretch

ml-align-self-stretch

mp-align-self-stretch

Order

t-order-f

ml-order-f

mp-order-f

t-order-l

ml-order-l

mp-order-l

Important!

Width classes may not work correctly in many cases if you add them as an attribute instead of normally in the style panel.

Width & Height - 100%

w-100

t-w-100

ml-w-100

mp-w-100

h-100

t-h-100

ml-h-100

mp-h-100

Width & Height - Viewport

w-vp

t-w-vp

ml-w-vp

mp-w-vp

h-vp

t-h-vp

ml-h-vp

mp-h-vp

Width

Notice that these classes have max-width set to a desired value and width of 100% to keep it responsive.

w-1

w-t

w-xxs

w-xs

w-s

w-m

w-l

w-xl

w-xxl

w-h

w-xh

w-xxh

t-w-t

t-w-xxs

t-w-xs

t-w-s

t-w-m

t-w-l

t-w-xl

t-w-xxl

t-w-h

t-w-xh

t-w-xxh

ml-w-t

ml-w-xxs

ml-w-xs

ml-w-s

ml-w-m

ml-w-l

ml-w-xl

ml-w-xxl

ml-w-h

ml-w-xh

ml-w-xxh

mp-w-t

mp-w-xxs

mp-w-xs

mp-w-s

mp-w-m

mp-w-l

mp-w-xl

mp-w-xxl

mp-w-h

mp-w-xh

mp-w-xxh

Height

h-1

h-t

h-xxs

h-xs

h-s

h-m

h-l

h-xl

h-xxl

h-h

h-xh

h-xxh

t-h-t

t-h-xxs

t-h-xs

t-h-s

t-h-m

t-h-l

t-h-xl

t-h-xxl

t-h-h

t-h-xh

t-h-xxh

ml-h-t

ml-h-xxs

ml-h-xs

ml-h-s

ml-h-m

ml-h-l

ml-h-xl

h-xxl

ml-h-h

ml-h-xh

ml-h-xxh

mp-h-t

mp-h-xxs

mp-h-xs

mp-h-s

mp-h-m

mp-h-l

mp-h-xl

mp-h-xxl

mp-h-h

mp-h-xh

mp-h-xxh

Width & Height - Unset

t-w-unset

ml-w-unset

mp-w-unset

t-h-unset

ml-h-unset

mp-h-unset

Position

Breakpoint-specific positions are not included, as you would very rarely use them for elements without custom styling.

absolute

relative

Useful global settings

Set color: inherit on All Links tag. It will make a link the same color as text around it.

Set text-wrap: balance on Body (All Pages) tag. It will make your content wrap in the most balanced way. Learn more here.

Set overflow: clip !important on All Images tag to eliminate "Deprecated APIs" issue that PageSpeed Insights sometimes detects. Set it in the custom properties and remember to add !important

"Specifying `overflow: visible` on img, video and canvas tags may cause them to produce visual content outside of the element bounds. See https://github.com/WICG/shared-element-transitions/blob/main/debugging_overflow_on_images.md."

Changelog

29.07.2024
- All justify and align classes were shortened (e.g align-start -> align-s), except []-stretch as it would cause collisions with []-start
- All order classes were shortened (e.g t-order-start -> t-order-s)

28.07.2024
- Added important styles to flex classes
- More width and height classes were added (viewport, unset, 1)
- Width and height values were increased
- Added position absolute and relative classes

27.07.2024
- Added classes for width and height
- Added "grid-auto-columns: 1fr" to grid-unlimited
- flex-vertical and flex-wrap becomes flex-v and flex-w