Test – Bricks Native Framework

Bricks native framework v1.0

Introduction & How to use

This is a basic framework built with the Bricks Native Framework. The built-in design system and styling management features introduced in Bricks Builder 2.2, designed to act as a native alternative to third-party CSS frameworks like Automatic CSS (ACSS), Core Framework or Advanced Themer Framework. It allows users to define design tokens (colors, typography, spacing) and manage CSS variables directly within the Bricks editor, promoting a dependency-free workflow.

This basic framework covers all the essentials needed to built your next project. The reason we created this is to simplify and make the current CSS versions scalable and maintanable. Also to save you lot's of setup time on your next project. The time it takes to build your own and setup even a basic framework can take a while.

We also ensured that it's backwards compatible by adding fallback to the variables(var(--space-m, 1.6rem)). By doing this we ensure that your current setup does not break. We do encourage using the framework as you move forward or use the framework as a base to build your own.

What you should know

There are no generated utility classes from the created variables. If you need them you can simply create them from the Bricks native framework. I prefer working with variables over utility classes, you can however use utility classes with components to still keep things manageable.

How does this work?

Watch this quick overview video to find out how this works. We go over how to install it, how to make edits and how to apply it to your development.

Save time on your next project

If you dread thinking or coming up with your own framework you can this design system/framework as a starting point. Sign up for the FREE version of Bricksmaven(Get access to 104 patterns which you can use in your new projects) or get a CSS license.

Grab the framework Get a license

Colors

When it comes to colors you want to have enough options to choose from for your project. The Bricks native framework gives you the ability to create your own. For Bricksmaven we created a range of colors that will be suffiecient for your project. The good thing is that you can always create more if you feel that it's not suffiecient.

To help you on your way I advised using a monochrome color scheme as that is easier to work vs multi-colured schemes. If you do run into a project with multi-colors then determine how you will use the colors in the design beforehand.

To give you an idea how to use these colors:

- Primary, secondary and tertiary should be used for your buttons and links. You can also use it in illustration as a subtle highlight.
- Base colors should be used for backgrounds and border lines.
- Neutral colors should be used for your text.
- Accent colors should be used sparringly to highlight key elements or grab the users attention.

For multi-color schemes you might use the primary, secondary and tertiary as background colors for certain sections or cards. It's a matter of experimenting and coming to a good balance. Colors should enhance the design and bring it to life not distract or disgust the user.

Primary color

Primary

--primaryloading...

Primary tint

--primary-l-1loading...
--primary-l-2loading...
--primary-l-3loading...
--primary-l-4loading...
--primary-l-5loading...
--primary-l-6loading...
--primary-l-7loading...
--primary-l-8loading...
--primary-l-9loading...
--primary-l-10loading...

Primary shade

--primary-d-1loading...
--primary-d-2loading...
--primary-d-3loading...
--primary-d-4loading...
--primary-d-5loading...
--primary-d-6loading...
--primary-d-7loading...
--primary-d-8loading...
--primary-d-9loading...
--primary-d-10loading...

Primary transparent

--primary-t-1loading...
--primary-t-2loading...
--primary-t-3loading...
--primary-t-4loading...
--primary-t-5loading...
--primary-t-6loading...
--primary-t-7loading...
--primary-t-8loading...
--primary-t-9loading...
--primary-d-10loading...

Secondary color

Secondary

--secondaryloading...

Secondary tint

--secondary-l-1loading...
--secondary-l-2loading...
--secondary-l-3loading...
--secondary-l-4loading...
--secondary-l-5loading...
--secondary-l-6loading...
--secondary-l-7loading...
--secondary-l-8loading...
--secondary-l-9loading...
--secondary-l-10loading...

Secondary shade

--secondary-d-1loading...
--secondary-d-2loading...
--secondary-d-3loading...
--secondary-d-4loading...
--secondary-d-5loading...
--secondary-d-6loading...
--secondary-d-7loading...
--secondary-d-8loading...
--secondary-d-9loading...
--secondary-d-10loading...

Secondary transparent

--secondary-t-1loading...
--secondary-t-2loading...
--secondary-t-3loading...
--secondary-t-4loading...
--secondary-t-5loading...
--secondary-t-6loading...
--secondary-t-7loading...
--secondary-t-8loading...
--secondary-t-9loading...
--secondary-d-10loading...

Tertiary color

Tertiary

--tertiaryloading...

Tertiary tint

--tertiary-l-1loading...
--tertiary-l-2loading...
--tertiary-l-3loading...
--tertiary-l-4loading...
--tertiary-l-5loading...
--tertiary-l-6loading...
--tertiary-l-7loading...
--tertiary-l-8loading...
--tertiary-l-9loading...
--tertiary-l-10loading...

Tertiary shade

--tertiary-d-1loading...
--tertiary-d-2loading...
--tertiary-d-3loading...
--tertiary-d-4loading...
--tertiary-d-5loading...
--tertiary-d-6loading...
--tertiary-d-7loading...
--tertiary-d-8loading...
--tertiary-d-9loading...
--tertiary-d-10loading...

Tertiary transparent

--tertiary-t-1loading...
--tertiary-t-2loading...
--tertiary-t-3loading...
--tertiary-t-4loading...
--tertiary-t-5loading...
--tertiary-t-6loading...
--tertiary-t-7loading...
--tertiary-t-8loading...
--tertiary-t-9loading...
--tertiary-d-10loading...

Base color

Base

--baseloading...

Base tint

--base-l-1loading...
--base-l-2loading...
--base-l-3loading...
--base-l-4loading...
--base-l-5loading...
--base-l-6loading...
--base-l-7loading...
--base-l-8loading...
--base-l-9loading...
--base-l-10loading...

Base shade

--base-d-1loading...
--base-d-2loading...
--base-d-3loading...
--base-d-4loading...
--base-d-5loading...
--base-d-6loading...
--base-d-7loading...
--base-d-8loading...
--base-d-9loading...
--tertiary-d-10loading...

Base transparent

--base-t-1loading...
--base-t-2loading...
--base-t-3loading...
--base-t-4loading...
--base-t-5loading...
--base-t-6loading...
--base-t-7loading...
--base-t-8loading...
--base-t-9loading...
--base-d-10loading...

Neutral color

Neutral

--neutralloading...

Neutral tint

--neutral-l-1loading...
--neutral-l-2loading...
--neutral-l-3loading...
--neutral-l-4loading...
--neutral-l-5loading...
--neutral-l-6loading...
--neutral-l-7loading...
--neutral-l-8loading...
--neutral-l-9loading...
--neutral-l-10loading...

Neutral shade

--neutral-d-1loading...
--neutral-d-2loading...
--neutral-d-3loading...
--neutral-d-4loading...
--neutral-d-5loading...
--neutral-d-6loading...
--neutral-d-7loading...
--neutral-d-8loading...
--neutral-d-9loading...
--neutral-d-10loading...

Neutral transparent

--neutral-t-1loading...
--neutral-t-2loading...
--neutral-t-3loading...
--neutral-t-4loading...
--neutral-t-5loading...
--neutral-t-6loading...
--neutral-t-7loading...
--neutral-t-8loading...
--neutral-t-9loading...
--neutral-d-10loading...

Accent color

Accent

--accentloading...

Accent tint

--accent-l-1loading...
--accent-l-2loading...
--accent-l-3loading...
--accent-l-4loading...
--accent-l-5loading...
--accent-l-6loading...
--accent-l-7loading...
--accent-l-8loading...
--accent-l-9loading...
--accent-l-10loading...

Accent shade

--accent-d-1loading...
--accent-d-2loading...
--accent-d-3loading...
--accent-d-4loading...
--accent-d-5loading...
--accent-d-6loading...
--accent-d-7loading...
--accent-d-8loading...
--accent-d-9loading...
--accent-d-10loading...

Accent transparent

--accent-t-1loading...
--accent-t-2loading...
--accent-t-3loading...
--accent-t-4loading...
--accent-t-5loading...
--accent-t-6loading...
--accent-t-7loading...
--accent-t-8loading...
--accent-t-9loading...
--accent-d-10loading...

Typography

Here goes your text ... Select any part of your text to access the formatting toolbar.

Heading

Heading 1

--h1loading...

Heading 2

--h2loading...

Heading 3

--h3loading...

Heading 4

--h4loading...

Heading 5

--h5loading...

Heading 6

--h6loading...

Body text

Text 4XL

--text-4xlloading...

Text 3XL

--text-3xlloading...

Text 2XL

--text-2xlloading...

Text XL

--text-xlloading...

Text L

--text-lloading...

Text S

--text-sloading...

Text XS

--text-xsloading...

Text 2XS

--text-2xsloading...

Visual font pairing example

With this visual card you can test and see if your fonts work well together. You can also change the font size to see how it looks like visually.

This is an example heading

Accent heading

A placeholder copy that just fills up the empty space. Feelfr ee to write down whatever you see fit.

Call to action

Spacing

Having consistent spacing in your project is important to have a consistent presentation.

Spacing scales are used to create space between elements and section spacing are used within sections. For the inline-padding we have a var(--gutter) variable which controls the inline padding of the sections.

Spacing scales

--space-4xsloading...

--space-3xsloading...

--space-2xsloading...

--space-xsloading...

--space-sloading...

--space-mloading...

--space-lloading...

--space-xlloading...

--space-2xlloading...

--space-3xlloading...

--space-4xlloading...

Section spacing scales

--section-space-2xsloading...

--section-space-xsloading...

--section-space-sloading...

--section-space-mloading...

--section-space-lloading...

--section-space-xlloading...

--section-space-2xlloading...

--gutterloading...

Width

Width controls the inline-size of your elemnts withing your projects. The container element is set to the var(--content-wdith) variable and if youwant to limit the inline-size of an element you can use either the percentage width variable(--width-60) or the t-shirt size width variable(--width-m)

--content-widthloading...

Width %

--width-10loading...

--width-20loading...

--width-30loading...

--width-40loading...

--width-50loading...

--width-60loading...

--width-70loading...

--width-80loading...

--width-90loading...

Width T-shirt size

--width-xsloading...

--width-sloading...

--width-mloading...

--width-lloading...

--width-xlloading...

--width-2xlloading...

Radius

Radius variables give you the power soften your overall look and feel on images, cards and elements. Tweak and edit them to your liking or create more if needed via the Bricks native framework.

Contextual radius

We create 3 contextual variables you use for specific elements and control their overall look and feel throughout your project.

radius-btn: var(–radius-s)
radius-img: var(–radius-s)
radius-card: var(–radius-s)

--radius-xsloading...

--radius-sloading...

--radius-mloading...

--radius-lloading...

--radius-xlloading...

--radius-2xlloading...

--radius-50loading...

--radius-circleloading...

Box Shadow

Need to give your elements a bit of an illusion of elevation? Then box shadows are your friend. You have 5 different box-shadows style to your disposal. You can edit or create more if needed for your project, Bricks gives the freedom to do so.

--box-shadow-xsloading...

--box-shadow-sloading...

--box-shadow-mloading...

--box-shadow-lloading...

--box-shadow-xlloading...

Buttons

All buttons are using the in-built button system provided by Bricks. You get a wide variety of style to use within your project and if it's not enough you can always create your own button with the variables we provided for you.

Custom buttons

If you want to create custom buttons that is also possible as we have provided variables you can use to build your own button.

This is a list of available variables you can use to create your own button:

btn-border-radius: var(–radius-xs)
btn-border-radius–hover: var(–radius-xs)
btn-border-width: 1px
btn-border-width–hover: 1px
btn-shadow: none
btn-transition: all var(–at-duration–fast) ease
btn-outline-shadow: none
btn-outline-border-width–hover: 1px
btn-outline-border-width: 1px
btn-shadow-hover: var(–box-shadow-xs)
btn-outline-border-radius: var(–radius-xs)
btn-outline-border-radius–hover: var(–radius-xs)

You can also add the existing color variables to your card. We only support primary, secondary, light and dark. To use the other colors just swap out “primary” for “secondary” or “dark”. You can always create your variables or tweak the value of the existing variables to whatever you like.

btn-primary-color: var(–body-text-white)
btn-primary-color–hover: var(–body-text-white)

btn-primary-background: var(–primary)
btn-primary-background–hover: var(–primary-d-2)

btn-primary-border-color: var(–primary)
btn-primary-background–hover: var(–primary-d-2)

For outline button just add ‘outline’ after the color name, for example: btn-primary-outline-color: var(–body-text-white).

The full reference of all variables can be found in the theme style panel under variables in the Bricks editor.

Primary

Button default

Button circle

Button outline

Secondary

Button default

Button circle

Button outline

Light

Button default

Button circle

Button outline

Dark

Button default

Button circle

Button outline

Sizes

Button small

Button medium

Button large

Button extra Large

Speed up your webdevelopment process in Bricks

Start your free trial and grab the framework today.

Grab the framework Get a license