By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.
PreferencesDenyAccept
Naming Strategy
The
Hoxton Framework.1.0
Internal Webflow Cloneable file for Shoreditch Design Studio. Built on Tailwind and Block-Element-Modifier. Expanded with CSS Variables and Namespaces. Refer this page for commonly used utility classes and combo class systems. Keep it Simple, Stupid.
Text Classes

Text classes when typography style doesn't match the default <p> styling. Upload all font weights to the file to get consistent results.

Text Styles
u-text-x
u-text-strike

sample text to see how it looks

u-text-italic

sample text to see how it looks

u-text-muted

sample text to see how it looks

u-text-allcaps

sample text to see how it looks

u-text-nowrap

sample text to see how it looks

u-text-link

sample text to see how it looks

u-text-quote

Sample text is being used as a placeholder.

Text Alignments
u-text-x
u-text-left
sample text to see how it looks
u-text-center
sample text to see how it looks
u-text-right
sample text to see how it looks
Font Weights
u-font-x
u-font-xbold
sample text to see how it looks
u-font-bold
sample text to see how it looks
u-font-sbold
sample text to see how it looks
u-font-medium
sample text to see how it looks
u-font-normal
sample text to see how it looks
u-font-light
sample text to see how it looks
Useful utility systems

Utility classes to build leaner and faster; inspired by Tailwind.

u-hide-all
This element is hidden
u-hide-md
u-hide-sm
u-hide-xs
u-overflow-visible
u-overflow-hidden
u-overflow-auto
u-overflow-scroll
u-pointer-on
u-pointer-off
u-layer
u-z-index-1
u-z-index-2
u-vp-100h
u-vp-100w
image 1x1
image-1x1
cc-contain
image-16x9
image-16x9
cc-contain
Structure Classes

Core structure we can use on all or most pages. On Sections and Containers, we set global paddings and padding margins using CSS variables, to reduce nesting divs and to keep the navigator more readable for other designers.

page
main
container-sm
40 rem
container-md
48 rem
container-lg
80 rem
container-xl
90 rem
container-fw
100%
inner
wraps inner content inside a container
Width & Height

Text classes when typography style doesn't match the default <p> styling. Upload all font weights to the file to get consistent results.

Width & Height Percentages
wp/hp-xx

Use the width percentage global combo class on a parent class to contain inner content to a width percentage.

wp-100
wp-75
wp-50
wp-25
hp-100
hp-75
hp-50
hp-25
Max widths
mw-xx

Use the max width global combo class on a parent class to contain inner content to a maximum width.

mw-full
mw-sm
mw-md
mw-lg
mw-xl
Paddings
p/px/py

Use the padding global combo class on a parent class to determine horizontal and vertical paddings.

py-32
py-48
py-64
py-72
py-104
py-120
pt-0
pt-32
pt-48
pt-64
pt-72
pt-104
pt-128
pb-0
pb-32
pb-48
pb-64
pb-72
pb-104
pb-128
p-32
p-48
p-64
p-72
p-104
p-128
Spacers & Gaps
spacer-x
gap-x

Use spacer blocks with set dimensions tied to CSS variables to arrange spacing in flexboxes (or) set a gap global combo class.

gap-8
gap-12
gap-16
gap-24
gap-32
gap-48
gap-64
Flexbox Horizontal
row-xy

Use these combinations to set a div block to flexbox with corresponding align & justify. Use gap-x combo class to add a flex gap.

row-tl
top-left
row-tc
top-center
row-tr
top-right
row-l
left (center)
row-c
center (center)
row-r
right (center)
row-bl
bottom-left
row- bc
bottom-center
row-br
bottom-right
row-s
start (spaced bw)
row-m
middle (spaced bw)
row-e
end (spaced bw)
Flexbox Vertical
col-xy

Use these combinations to set a div block to flexbox with corresponding align & justify. Use gap-x combo class to add a flex gap.

col-tl
top-left
col-tc
top-center
col-tr
top-right
col-l
left (center)
col-c
center (center)
col-r
right (center)
col-bl
bottom-left
col-bc
bottom-center
col-br
bottom-right
col-s
start (spaced bw)
col-m
middle (spaced bw)
col-e
end (spaced bw)
Flexbox Grids
grid-x cc-yx

Use these combinations to set a div block to flexbox grid. Set respective rows and column counts using combo classes.

grid-cols
grid-cols
cc-2col
grid-cols
cc-3col
grid-rows
grid-rows
cc-2row
grid-rows
cc-3row