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.
This is a question asked by one of our users on our chat. He said: “I use … to create HTML templates. What is the difference between that one and Bootstrap Shuffle and which Bootstrap builder is the best?”
Facts: The best Bootstrap builder is the one that best suits your present way of working.
Let me explain.
There are several Bootstrap builders available on the market, but they differ in approach and features they offer. Some are designed exclusively for layouts, others only for modifying default Bootstrap styles, while others are a mix of both solutions.
Bootstrap Shuffle is an example of this mix. Our Bootstrap builder consists of two elements:
1. Builder interface – where you have more than 230 components grouped into various most commonly used categories.
2. Default Bootstrap styles editor – where all Bootstrap settings are equipped with convenient pickers + several improvements, like Google Fonts search engine.
We do not know each other so I do not know how you work.
However, over the last 12 years, I’ve been working on hundreds of web projects and I have some observations that guide us when creating our Bootstrap builder.
Observation 1. Developers do not have time to learn new tools.
This is the reason why we want our builder to be as simple to use as possible.
Observation 2. Developers do not want to change their optimal way of working. Often developed over the years of their career.
That’s the reason why we do not want to replace your IDE! I won’t say that you will do EVERYTHING in our builder. That’s the point here. You do just enough to speed up your work, but when it comes to details, you should use your favourite IDE.
See a 6-minutes long video about creating a Bootstrap template, where at the end I switch to IDE (I use Visual Studio Code) to make some final adjustments.
Observation 3. Developers leave the most difficult elements of the project for the end.
As I said above, I have been working in the web development industry for 12 years now and I worked with dozens of developers at different levels of experience. All of them (including me!) do the same thing and leave the most difficult elements for the end of work.
Therefore, if you work on a technology project, for the first 50-80% of the time everything goes well and no one anticipates delays and everyone is sure that you will make it on time.
This is due to the fact that the whole team works on things that they already know and have done repeatedly, and the more difficult are left for the final phase and this is where delays start.
What developers should do is shorten the time of simple things to the maximum so they can get to those difficult ones as soon as possible.
That’s why we created Bootstrap Shuffle. A tool to help you deliver projects on time, within your budget and without stress.
Working with Bootstrap Shuffle comes down to a few steps:
Add pages needed in a given project (e.g index.html, contact.html, faq.html)
Add the appropriate layout components (navigation, header, footer, etc.)
Upload assets and target text content
Change the color palette
Change the Bootstrap component styles (e.g. buttons, navbar)
Download the project on your hard drive and run it, e.g in Visual Studio.
Start working on difficult elements! For example, animations and interactions or backend communication.
PS. Currently, Bootstrap Shuffle exports code to HTML/CSS and PUG/SCSS source files. We’re working on version 2.0 that will allow you to export to React. All accounts created before March 1th, 2019 will receive this update for free.
Bootstrap Shuffle offers in various categories as many as 230 components ready to be implemented on production. You can create any number of pages from them, but for the purpose of this course we will focus on three (in the title I promised that the whole thing will take up to 10 minutes!).
We add pages: index.html, contact.html and 404.html
Step 2. Components
To each page, add the right components using the drag & drop method.
I chose components from the categories:
index.html: navigations (8th on the list), headers (13th), testimonials (5th), content (19th), features (8th), footers (5th)
Bootstrap 4 uses system default fonts. We will choose a pro font to distinguish ourselves. A good choice might be Maven Pro as it even has ‘pro’ in the name 😉
Select variant 900, because we will need it in the extra-bold version.
Having selected the font, set the appropriate weight of the usual headers and the headers of the Display class.
Step 4. Colors
Our Bootstrap builder allows you to easily manage the entire Bootstrap color palette, but we have only 10 minutes, so we will only change the $primary color (choose purple), and leave the rest as the default.
Important: If you create a template that you want to share with other people, always make sure that all key variables are set correctly so that the template is completely consistent.
To check what components look like in the category of settings you are working on, just change the preview to the predefined page __boostrap-ui.html
Step 5. Buttons
We want our template to be different than the default Bootstrap, so we will include shadows ($enable-shadows) and gradients ($enable-gradients).
Important: From this point, I will use the names of the Bootstrap variables to make this post shorter. If you have a problem locating the variable in the builder, simply use the search engine.
Our fictional company has a bold in the name, that’s why we’ll do everything bigger! We will increase the fonts, paddings and border radius.
Bootstrap Shuffle builder is basically a UI for a Sass compiler. You don’t have to know all variables names (as above), because all settings have convenient pickers:
Step 6. Navigation
Everyone who worked with Bootstrap will recognize it thanks to its navbar. That’s why we will add a logo and increase the space between items in the menu right away. We also need to change the colors of the links and the toggler that is activated on the mobile.
I was not able to come up with new texts within 10 minutes, so we will only change the images, and here and there adjust the text to suit this project better than default one.
I selected illustrations from the Mirage catalog in the Icons8 pack.
You can check how I’ve changed text content and illustrations in the live previews: index, contact, 404.
Step 8. Export and work on the details
Here we finish working with the online builder.
Bootstrap Shuffle works with the latest version of Bootstrap 4.2.1, so you even can edit in it the appearance of new components: toasts and spinners. For the purposes of this tutorial, I skipped about half the settings because my goal was to create a template within 10 minutes.
Having a design you are happy with, you can download it to your drive and start working on the details. Bootstrap Shuffle allows for exporting to HTML/CSS and source files (PUG templates and SCSS files).
The purpose of Bootstrap Shuffle is to allow developers to switch from simple to complicated tasks (such as back-end integration) as quickly as possible.
Update to Bootstrap 4.2.1 is the most important change that we implemented in the editor in the last few days.
But I will start with another convenience, which will make your work faster! We added a possibility to search for Bootstrap variables, which will immediately direct you to the right bookmark.
Searching for a Bootstrap variable, you will straight away receive an information in what category it is, what’s the name of the label and the variable itself. You can of course click a variable, and then you will be redirected to the right bookmark.
What’s new in Bootstrap 4.2.1?
In the new version, Bootstrap creators added two new types of components:
Spinners – used as indicators informing e.g. about loading of the site. All edition options made available as Bootstrap variables are of course available in the builder.
Toasts – are light messages, resembling notifications on mobile devices. In their case, you can also control the look using our builder.
Building a theme based on Bootstrap, remember to set the styles even for the components that you are not using on your site. Thanks to that, the whole template will be consistent, even in the case of adding new components in the future!
The user described operation of the builder’s interface but they didn’t see what happened in the background, and this is something I’m specifically proud of.
Our infrastructure was tested in action and we were able to sustain traffic from Hacker News and Product Hunt with not problem.
Dedicated servers in OVH (3x cheaper than AWS!)
Using data center in Canada and France (vRack between servers)
Cloudflare as CDN (Content Delivery Network) and Load Balancer
In Cloudflare, Cache services are active as well as Argo (optimised routes) and Load Balancing with Geo steering
Geo steering means (with appropriate settings) that users from the Americas are transferred to the data center in Canada, while users from Europe are transferred to the data center in France. Only if the basic (closest) location fails, will the user be transferred to a more distant server.
Using the Bootstrap Shuffle (Bootstrap builder for busy developers), configuring the appearance of the theme, you will often compile Sass to CSS on our server (each change of settings will generate a new Sass compilation).
This is why the fastest connection is very important to us and load balancer from Cloudflare is perfect here!
Compilation of Bootstrap Sass files takes approximately 300ms. If we had servers only in America, users in Europe would see results of compilation 110 ms later! This is unacceptable! (You can verify the time of connection with the data center in Canada by completing the following: ping proof.ovh.ca)
Another data center that we will use is in Singapore (it will manage traffic from Asia).