Version 1.0.1

Style guide

On this page, you can customize the core classes for your project and make global edits to your site at any time.

Are you new to Nube Flow? Make sure you visit Nube Flow Docs →

Core classes

Typography #

HTML classes

H1

H2

H3

H4

H5
H6
HTML text classes

All Paragraphs

All Links
  • All Unordered Lists

  • All Unordered Lists

  1. All Ordered Lists

  2. All Ordered Lists

Text size classes
x9
x8
x7
x6
x5
x4
x3
x2
x1
x0

Structure classes

Page #

page
main
code-embeds

Container #

container
container-m
container-s

Grid #

Row
row
Column
col
col

Columns #

Note that following classes are not global but rather combo classes to class of .col therefore are never to be used as standalone classes.
Column - Desktop
d-12
d-1
d-11
d-10
d-2
d-3
d-9
d-8
d-4
d-5
d-7
d-6
d-6
Column - Tablet
t-12
t-1
t-11
t-10
t-2
t-3
t-9
t-8
t-4
t-5
t-7
t-6
t-6
Column - Mobile Landscape
ml-12
ml-1
ml-11
ml-10
ml-2
ml-3
ml-9
ml-4
ml-8
ml-5
ml-7
ml-6
ml-6
Column - Mobile
m-12
m-1
m-11
m-10
m-2
m-3
m-9
m-8
m-4
m-5
m-7
m-6
m-6

Build classes

UI element classes#

Icons
Icons relative
Ratio

Text utility classes #

Text weight
txt-light
txt-normal
txt-medium
txt-semibold
txt-bold
Text alignment
txt-center
txt-right
txt-center-t
txt-right-t
txt-center-ml
txt-right-ml
txt-center-m
txt-right-m

Extra utility classes #

Visibility
hide
hide-t
hide-ml
hide-m
Overflow
overflow-x
oveflow-y
oveflow-hidden

Spacing #

Vertical spacing
v-0
v-4
v-8
v-12
v-16
v-20
v-24
v-32
v-40
v-60
v-80
v-120
Horizontal spacing
h-4
h-8
h-12
h-16
h-20
h-24
h-32
h-40

Padding #

Padding sizes
p-0
p-8
p-12
p-16
p-20
p-24
p-32
pt-8
pt-16
pt-32
pb-8
pb-16
pb-32
-margin-auto

Flex utility classes #

Flex direction
flex-ver
flex-ver-t
flex-ver-ml
flex-ver-m
flex-hor
flex-hor-t
flex-hor-ml
flex-hor-m
Flex alignment
align-center
align-end
align-stretch
Flex justify content
justify-center
justify-end
justify-between
justify-around