one

Ideation

Lorem ipsum dolor sit amet consectetur. Habitant et et diam felis. Tortor duis lectus ridiculus a. Congue sagittis consequat sit nibh aenean pulvinar at orci felis. Nec nullam eu eu sit nullam euismod.

two

Exploration

Lorem ipsum dolor sit amet consectetur. Habitant et et diam felis. Tortor duis lectus ridiculus a. Congue sagittis consequat sit nibh aenean pulvinar at orci felis. Nec nullam eu eu sit nullam euismod.

three

Execution

Lorem ipsum dolor sit amet consectetur. Habitant et et diam felis. Tortor duis lectus ridiculus a. Congue sagittis consequat sit nibh aenean pulvinar at orci felis. Nec nullam eu eu sit nullam euismod.

four

Launch

Lorem ipsum dolor sit amet consectetur. Habitant et et diam felis. Tortor duis lectus ridiculus a. Congue sagittis consequat sit nibh aenean pulvinar at orci felis. Nec nullam eu eu sit nullam euismod.

Do you need help implementing this on your Webflow website?
Connect me with Webflow expert

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, or could use a reminder on how to use it? Make sure you visit Nube Flow Docs →

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
c--text-x0
c--text-x1
c--text-x2
c--text-x3
c--text-x4
c--text-x5
c--text-x6
c--text-x7
c--text-x8
c--text-x9

Core classes

Colors #

Brand
Brand is a set of your brand colors, and is used to set up your identity specific color styles.
c--bg-prim
c--bg-prim10
Base (neutral)
Base is a set of neutral shades and is the foundation of the color system.
c--bg-base10
c--bg-base20
c--bg-base30
c--bg-base40
c--bg-base50
c--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.
c--bg-suc10
c--bg-suc20
c--bg-suc30
c--bg-war10
c--bg-war20
c--bg-war30
c--bg-err10
c--bg-err20
c--bg-err30

Buttons #

Button
Button
Button
Button
Button
Button

Input fields #

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Structure classes

Page #

Container #

container
container-m
container-s

Columns #

Column grid
col-grid
Desktop
Tablet
Mobile landscape
Mobile

Spacing #

Vertical spacing
s--v-0
s--v-4
s--v-8
s--v-12
s--v-16
s--v-20
s--v-24
s--v-32
s--v-40
s--v-60
s--v-80
s--v-120
Horizontal spacing
s--h-0
s--h-4
s--h-8
s--h-12
s--h-16
s--h-20
s--h-24
s--h-32
s--h-40
Padding sizes
s--p-0
s--p-4
s--p-8
s--p-12
s--p-16
s--p-20
s--p-24
Padding directions
s--pt
s--pr
s--pb
s--pl
s--pv
s--ph
s--m-auto

Build classes

UI element classes#

Icons
Icons relative
Ratio

Text utility classes #

Text color

b--text-color-base10

b--text-color-base60

b--text-color-prim

Text weight
b--text-weight-light
b--text-weight-normal
b--text-weight-medium
b--text-weight-semibold
b--text-weight-bold
Text alignment
b--text-align-d-left
b--text-align-d-center
b--text-align-d-right
b--text-align-t-left
b--text-align-t-center
b--text-align-t-right
b--text-align-lm-left
b--text-align-lm-center
b--text-align-lm-right
b--text-align-m-left
b--text-align-m-center
b--text-align-m-right

Flex utility classes #

Flex direction
b--flex-direction-v
b--flex-direction-h
Flex alignment
b--flex-align-start
b--flex-align-center
b--flex-align-end
b--flex-align-stretch
Flex justify content
b--justify-start
b--justify-center
b--justify-end
b--justify-between
b--justify-around

Utility classes #

Helpful links

Info #

Nube flow is powerful and clean Webflow oriented frontend toolkit. That helps you build cleaner, 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. 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 public release Fab. 2022
    - Redefined styleguide menu design
    - Adjusted spacing sizes
    - Improvements to fluid responsive system
  • v0.8.2 - 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.

Nube Flow

Nube Flow Pro

Nube Flow Starter

Nube Flow Starter Light

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