Based on our users’ feedback, we have decided to combine the “CSS Classes” tab with “Visual Content”. This update will be of particular interest to Tailwind Builder users, where most of the work is related to CSS classes.
Now, if you want to add new CSS classes, you don’t need to switch tabs. Just hover on a label, and you’ll see an extra option, “CSS.”
That option will allow you to understand what classes are already used and modify them in one place (add new or delete previous ones).
Note: All screenshots come from Tailwind Builder, but this feature is available in all our editors. To open the Content menu and test this feature, you need to hover on a component and click the “Content” button.
TIP 1. Move mouse over the “CSS” element, and we’ll mark the related item.
TIP 2. You can add multiple classes at once (separate classes with space, confirm with the Enter key).
TIP 3. All classes have an autocomplete function enabled.
PS. We’ve left the old function with the full section’s structure at the bottom of the Visual Content as “CSS Classes (advanced).”
In this mini-tutorial, I’ll show you how to use three functions to change background color in your project. The background color is just an example, and you can change other properties in the same way.
This description applies to three editors, Bootstrap Shuffle, Bulma Builder, and Tailwind Builder. The screens come from Bootstrap Shuffle but are so readable that you will easily find the same functions in the editor you are using.
Note: The last method (Custom CSS) is a new feature, that’s why I created this mini-tutorial 🙂
1. Visual panel with convenient pickers.
The easiest way to change your style is simply to find the right option in the variable settings of the CSS framework.
You can use a search bar for this.
2. HTML Structure
The second method is to add the appropriate CSS class to the body element. You can do this in the HTML Structure panel.
To open it:
Hover over the component you want to edit.
Click the “Content” icon.
Go to the “HTML Structure” tab
Note: Each component you are editing has an additional “Parents” section, which includes a body element and a global wrapper.
You need a good knowledge of the CSS framework classes, but for ease of use, we have auto-completion, which will tell you the name of the class you are looking for.
We have made it possible to add your CSS code, so you can simply add a code that will change the background color for the body. Of course, you can create your CSS classes here and then add them in the HTML Structure panel (see step 2).
Note: Please use the Save button to save the CSS code. All other changes made in steps 1 and 2 are saved automatically. The CSS code can be so large that the autosave would be very inefficient (every time we save the changes, we have to recompile the framework to CSS).
When you open the content panel, you will see two tabs (see the image below).
One is Visual Content, which allows you to change texts and images in your project.
The second is the HTML Structure. This is an option for more advanced users who know the given CSS library. It allows you to modify CSS classes directly from our panel.
Component content window is divided into two columns.
I will start description from the right column because you know it well from the main application screen. This is a preview of the currently edited page with a small addition. The two side markers show which component you are editing.
What’s in the HTML Structure tab
The left column is divided into two sections: Parents and Component. Parents are wrappers in which the component is located, thanks to them you can change CSS classes for body elements and the main container.
Each section has an HTML element tree. When you move over an item, it will be highlighted on the right in the preview so you can be sure which item will be edited.
After clicking the HTML tag, the class edit field will expand with the current classes assigned to the given element. You don’t need to know the names of all classes in the library because we have an auto-complete mechanism! Start writing, and we’ll tell you what classes are available.
The Component section has an additional “copy HTML” link that allows you to copy the entire item to the clipboard – if, for example, you would like to use it in another project.
All changes made to this panel are saved in real-time.
We’ve just published the largest Bootstrap Shuffle update!
From now on, we support Material Design for Bootstrap. It is based on the most popular Bootstrap Material implementation, designed and built by FezVrasta.
Thanks to this update our builder is no longer dependent on library’s version, and the available settings are generated based on SCSS files (we can support any UIKit / library, which is based on Sass).
You can select a base frontend library when you’re creating a new project.