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 →
HTML classes
H1
H2
H3
H4
H5
H6
HTML text classes
Text size classes
x9
x8
x7
x6
x5
x4
x3
x2
x1
x0
Color #
Brand
Brand is a set of your brand colors, and is used to set up your identity specific color styles.
bg-prim
bg-prim10
Base (neutral)
Base is a set of neutral shades and is the foundation of the color system.
bg-base10
bg-base20
bg-base30
bg-base40
bg-base50
bg-base60
Alert
Alert color group communicates a positive action, or a successful confirmation. If case you're using green as your primary color, consider introducing a different hue for your success color.
bg-suc10
bg-suc20
bg-suc30
bg-war10
bg-war20
bg-war30
bg-err10
bg-err20
bg-err30
Text color
color-base10
color-base60
color-prim
Forms #
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
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-weight-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-0
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-start
align-center
align-end
align-stretch
Flex justify content
justify-center
justify-end
justify-between
justify-around
Helpful links
Info #
Nube flow is clean and powerful Webflow oriented frontend toolkit. That helps you build fast, scalable and accessible websites. Where the main objective of Nube Flow is to streamline your development process and provide consistent, efficient workflow for all your web projects. With number of prebuilt classes it simplifies the process of creating even the most complex layouts, allowing you to work faster and more efficiently than before.
Change log
- v1.0.1 - Initial closed release Mar. 2023
- Redefined styleguide menu design
- Adjusted spacing sizes
- Improvements to fluid responsive system - v1.0.0 - Initial stable release Nov. 2022
Starters #
Get started right away by generating a desired file type, based on your needs. Learn more about each type of file on Nube Docs.
Docs #
The Nube Flow documentation contains all the information you need to learn and master the toolkit. We strive to make our documentation clear and comprehensive, and we are always working to improve it. If you have any suggestions or questions, please don't hesitate to contact us at stefan@wearenube.xyz. We value your feedback and are here to help you succeed with Nube Flow.
Explore docs