CSS Variables and Common Styles in Codux

In web development, maintaining consistent styling across a project is crucial. Codux offers two powerful tools to achieve this: CSS variables (custom properties) and common style classes.
Both CSS variables and common style classes are defined in stylesheets accessible throughout your project, providing consistency, efficiency, and easier maintenance. CSS variables allow you to reuse specific values like colors or sizes, while common styles are shared classes for predefined sets of styles. They provide consistency and make it easier to create valid variants.
You can also expect easier style updates (change one style, update everywhere), faster development (reuse styles instead of recreating them), and cleaner code (use predefined classes instead of inline styles).
Note:
To add your assets to the Add Elements panel as well as to easily view, edit, and create style variables through the Global Variables panel, you'll need to have common styles in your project. All projects started from one of our template projects come with common style files already set up.

CSS Variables (Custom Properties) 

CSS variables, also known as custom properties, are reusable values that you can reference throughout your stylesheets. The benefits of CSS variables include:
  • Easy global updates
  • Improved readability
  • Efficient theming
  • Consistent styling across the project
To create, edit, and manage CSS Variables in Codux, use the Global Variables panel. Alternatively, if you'd rather do this from scratch or import your styles from another source:
  1. Create a style file for the variables (e.g., variables.css). If you started your project from one of our templates, you'll already have various style files.
  2. Define your variables within a selector. For example, :root.
1
2
3
4
:root {
  --primary-color: #3498db;
  --font-size-base: 16px;
  --spacing-unit: 8px;

Common Style Classes 

Common style classes are shared CSS classes that define reusable styles for elements across your project. The benefits of common style classes include:
  • Consistency across UI elements
  • Faster development
  • Cleaner code
  • Easier maintenance
Examples of common styles include:
  • Text styles (like headings and body text)
  • Color schemes
  • Button styles, or any other basic elements (like titles and text)
  • Layout classes (for organizing content)
  • Form element styles
To create and use common styles effectively in your Codux project, follow these steps:

1. Create shared CSS files for your common styles 

Common styles can be organized into one or multiple CSS files, depending on your project's needs. If you started the project using one of our templates, you'll likely find multiple CSS files already set up for different aspects of the design.

2. Define your styles 

In your common class style file created above, define your styles. For example:
1
2
3
4
5
6
7
8
9
10
/* common-styles.css */
.primary-button {
    background-color: blue;
    color: white;
    padding: 10px 20px;
 }   
.large-text {
    font-size: 24px;
    font-weight: bold;
 }
While working in Codux, you can also create a new class with the styles you've defined in the Styles panel. When you add a new class, it's written directly to the style file you select.
Note:
We don't write to common styles by default so as to not affect the entire project. if however you want to create one, to be used in the entire project, you should do it as follows.
Tip!
You can also define variables in this file. For example: body { --main-bg-color: brown; }

3. Make global styles work in Codux 

To make your common styles available in your project, you need to import the common CSS files into each of your components by setting up global configuration. This configuration tells Codux where to find and how to use your common style files. Once configured, styles are automatically imported when your project boards and variants load, making them visually available across the entire application, right from the Styles panel where they are sorted by the file they are defined in.
IN THIS ARTICLE
Previous article