The Gridbox design system. Chapter 1: Color variables

Introducing Color Variables

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!

The Gridbox Design System. Chapter 1: Color Variables

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.

Custom Color Scheme

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

Here are 2 reasons why you need to do this. We have changed the 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.

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.

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 to assign 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.

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 a fully featured color palette for your website. With help of Color variables, we have united all Gridbox items in a one-color chain.


2.4.0 — 05.04.2018

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

Leave a comment

Share with your friends

Newsroom on your favourite platforms