The Gridbox Design System. Chapter 1: Color Variables

Theme Color Scheme - Joomla Website Builder Gridbox

We are happy to announce you that we are starting a series of updates for the Joomla website builder Gridbox which we called "Gridbox Design System". Friends, we are changing the way we work with Gridbox!

Gridbox Design System we can characterize as a set of tools which will improve a theming in Gridbox.

In today's update, we’ll introduce you the first element of the Gridbox Design System - Color Variables.

Gridbox Color Scheme

Before you start exploring color variables in Gridbox 2.4.0, we strongly recommend you to install the Gridbox installation package on a fresh Joomla.

Here are 2 reasons why you need to do this. We have changed default theme and plugins styles. But the most important reason, that is all default color Hex values were replaced on Color variables. With the help of color variables, we managed to create a unified color scheme.

So, in Gridbox 2.4.0 all elements are interconnected and have a unified color system with which you can easily control your website color palette.

Gridbox Color Variables

The Color variables widely spread in modern CSS preprocessors. With color variables, you can easily change the color theme of your website without needing to open each plugin to change the color (Hex value).

Color variables you can find in the theme options: Theme >> Colors.

Color Variables - Joomla Website Builder Gridbox

There you will find a list of all available color variables. Color variables are systematized and divided into groups:

  • Brand Colors;
  • Typography Colors;
  • Background Colors;
  • Other Colors;
  • Custom Colors.

Brand New Color Picker

Okay, you have set colors for variables, and now time to assign variables. In order to allow you assigning theme color variables to Gridbox items, we have created a brand new color picker. Friends, the new color picker looks awesomely, you need to try it!

Color Picker - Joomla Website Builder Gridbox

Color picker in Gridbox 2.4.0 includes two tabs: classic color palette with the ability to enter a hex color value and list of color variables with predefined colors from the theme settings.

Color Picker and Color Variables - Joomla Website Builder Gridbox

So, to assign a color variable to an element, you need to switch to the "Color Variables" tab and select a variable.

Changelist

v.2.4.0 - 5/04/2018

  • Added: Color Variables;
  • Added: Brand New Color Picker;
  • Added: Default color variables for Gridbox items;
  • Added: Repeat-x and repeat-y values for background image;
  • Added: Back to “Admin Panel” button;
  • Changed: Default theme styles;
  • Fixed: Compatibility issue with PHP 7.0.28;
  • Fixed: Issue with a File Picker.


A website color scheme is one of the most important parts of a website. Choosing the right color scheme is essential to your website's success.

With Gridbox 2.4.0 you can create fully featured color palette for your website. With help of Color variables, we have united all Gridbox items in a one color chain.

We already started working on a next tool in the Gridbox Design system! if you'll have any questions about color variables, feel free to ask in the comments form below.