A minimalist and lightweight starter CSS that prioritizes semantic HTML, uses CSS Variables and simple utility classes. It takes this minimalist approach to CSS frameworks and adapts them to the specific visual builder environment so that it aligns better with the logic of the UI and helps users get a quick start.

• Drop any html element into the canvas and it will look nice and be responsive out of the box.
• It takes care of the basic global styling so that you can extend it to fit your needs faster then building from scratch would take you.

• Responsive
• Looks great out of the box
• Lightweight
• Low Specificity for easy overrides
• Semantic styles (button, [input=submit], [role=button] and .button receive the same styles)

Quick explanation of assets available and how to approach them

Framework uses clamp() to set flexible sizes for typography that scale with the size of the browser making the typography fit every screen size.

Framework has to be easy to override on local level, without the need to overuse the high specificity selectors like ID based selectors. We use :where() frequently for this reason as well as making the selectors grouping more elegant and readable.

From tokens-based variables like --size--1 to a more specific --border--width the framework makes it easy to apply consistent changes to as many or as little elements one wants.

Builderius CSS uses a structured, token-based color system for consistency and flexibility. The primary color (--color--primary) generates 11 shades automatically, ranging from light to dark. The base grayscale (--color--base) also consists of 13 steps (0, 50, 100, 200, ..., 950, 1000) and is subtly tinted with the primary color. Additional colors can be defined (e.g., --color--secondary or any custom name), each generating its own 11 shades. Variable which name is suffixed with 'original' (example: --color--primary--original) is the reference color that is used to keep in sync all 11 shades generated.

Provides 6 sizes type scale applied to headings automatically or added with classes .font-size-1 or with variables like --font--size--1.

Tokens we use are --size--0, --size--1, --size--2 ... and each this variable is equal to 2*x where 'x' is the number in the name. Therefore, --size--1 equal to '2px, --size--2 is equal to '4px' and so on.

We use CSS variables --spacing--sm, --spacing--lg etc to apply spacing to your elements. These are mapped to size related variables mentioned before. Additionally, you might want to use more specific CSS variables like --spacing--block and --spacing--inline.

We offer variables like --border--color, --border--radius and --border--width.

Use --radius--md, --radius--lg ... to apply border radius to your elements. These are mapped to size related variables mentioned before. Add additional ones to the list, or change the values as per your need.

Use --container--width, for invoking the default maximum width for containers, or specify --container--min, --container--narrow, --container--max, and --container--full. We recommend not to give static value to --container--width itself, but reference one of the specific ones, by default we declare it like this --container--width: var(--container--max);.

We include --grid--item-min-width, --grid--item-max-width, --grid--gap and more, use these to maintain consistency over your grids, yet retain flexibility.

We include a series of utilities and common use classes to get you started. .flex-row, .flex-column, .grid, .card are notable examples. We also include some classes that do the same things some CSS variables do so you can use class or variable as per your preference.

Our parser in Builderius visual builder plugin captures the names of the variables and uses those names to organize the variables list in the UI. Knowing how this happens can help you organize the variables the way you want. By the way of naming, you can craft your own "Theme Settings" with the variables manager.

By default, shades of color 'primary' are used in all styles. There is also a special class .color-primary to quickly apply primary to some texts etc. Support for custom color must be added manually, preferably using the similar approach.

1. First part of the variable name will be the name of the variable group in "CSS vars" tab inside Builderius builder.
2. It is generally a good idea to group variables by their use-case, rather than the type.
3. We suggest creating "functional" variables, rather than trying to extend "design" ones.
4. It is generally better to redefine the variable in a specific "scope" then to make a new one.
5. color group is a special one: there are CSS variables related to colors/shades automatically created. We use oklch for color formats and current architecture configured the way when --color--<color_name>--original var will be used for automattic generation of color shades

If you name your variables like:

• --form--button--active
• --form--button--disabled
• --form--hero--section
• --border--hero--section

They will get grouped under the accordion Form, and Border

If you name your variables like:

• --button--color--active
• --button--color--disabled
• --hero--color--section
• --hero--border--section

They will get grouped under the accordion Button and Hero, and as a consequence your settings for hero sections will be grouped together, as well as for the buttons.

If you need to override the variable value do not make a higher specificity selector, or make a new variable rather redeclare the variable in the local scope.

Here is an example: A global variable will look like this:

:root {
--some--variable: 1234;
} 

And it can be override like this:

.button-primary {
--some--variable: 4321;
}

We provide only the basic classes to the framework for now. You can easily add more classes whichever way you will like. Pasting your usual ones inside the code editor. Making them as you go. Making them using the selectors panel.

If you think we should add certain classes out of the box, please recommend them and we will look into it.

You can use GitHub issues and comments to give us feedback. Alternatively you can send us an email to [email protected] or at Builderius Facebook Community.

Thank you for being a part of Builderius development.