The Gridbox Design System. Chapter 3: Introduction to Presets

We are continuing series of Gridbox Design System updates, and today we want to introduce you Gridbox Presets. Presets it's a fantastic tool for Joomla website builder Gridbox which allows you to style Gridbox items much faster, create your own UI library and override default styles of the Gridbox items.

Gridbox Preset is a Saved Item Style. You can to configure the style of any Gridbox item and save it for future using. Saved item style (preset) can be assigned to other Gridbox items with the same type.

By changing the style of the item with an active preset, the style also will be changed for all other Gridbox items which have the same preset.

If you are familiar with Gridbox Library Tool, looks like a "Preset" is very similar to "Library Global Items", but this is only at first glance.

Unlike "Library Global Items" presets include only item style info, settings from tabs: design, background and layout (typography, colors, shadows, borders, margins, paddings, etc.). Preset does not include information about item labels, links, etc., settings from the tab "General".

Preset can be compared with classes in the CSS, by changing the rules for the CSS class, changes will be assigned to all items which have the same class.

Gridbox Presets you can find in the item settings panel, tab "General".

Creating and Saving Presets

To save an item preset, open Presets Library and click on the icon "Save Preset".

In the opened window, you need to enter a name for preset and click on the button "Save".

We want to note, that in a preset library are available only presets with the same type, that's mean, for the Gridbox plugin button, will be available only saved button presets, etc.

To assign created preset to another item with the same type, just open item settings and select created preset.

All items with an active preset come with an icon "Preset". This will help you quickly understand whether this element is with the preset or not.

Gridbox presets allow you to override the default style of the Gridbox items. Using this option you can configure the default item's style to fit your website design.

In order to set a preset as a default, you need to select a preset from the list and click on the icon "Edit".

In the opened window, you need to pick the "Default" and click on the button "Save". After that by adding a new item, the item will come with your preset styles.

If you decide to return the standard element styles, you’ll need to open the Preset editing window and uncheck "Default".

We strongly recommend you start using presets in your projects. Presets, Gridbox Color Variables and Typography Inheritance System are advanced tools and require a professional approach to website building. The advantages of Gridbox presets are obvious!

Build Faster

Using presets, you can greatly speed up the process of customizing the style of elements. For example, you need to configure 3 columns in the same style. With the help of presets, it will be very easy and fast, you will just need to adjust 1 column, for the rest of the columns you can assign the preset of the first column.

Default Styles

Customize the default style of Gridbox items to fit your website design.

Think Ahead

Trends in web design change very often and if in a one day you decide to change the style of all buttons on your site, you will need to change the style only for the one button, other buttons will inherit the same style. But of course, it will work you'll start adding presets.

Build UI Kit

You can create your own starter UI Kit. Configure the default style of Gridbox items as you need, export the theme and use it for all your future projects.

2.4.2 — 10.05.2018

• Presets
• Gradients overlays to Slideset and Carousel plugins
• Align for Smooth Scrolling plugin
• Value None for Overlay option

• Issues with a plugin Facebook Comments
• Issue with 404 page

Leave a comment