Using keyboard shortcuts

All our editors support several useful keyboard shortcuts. Here’s a list of them all:

Key Action
C Open/Close Components library.
S Open Change Styles menu.
A Open Visual Content settings (when hovering on a component).
H Open Custom HTML settings (when hovering on a component).
↑ ↓ Move a component UP or DOWN (when hovering on a component).
← → Change a component to PREVIOUS or NEXT in the library (when hovering on a component).
Backspace Delete a component (when hovering on a component).
1, 2, 3, …, 9 Change page preview to <number> (when you’ve created more than one).
D Resize the preview window to desktop size.
F Resize the preview window to tablet size.
G Resize the preview window to mobile size.
N Open the preview in a new window.
E Export the project.
ESC Close modals.

Try them out yourself using your favorite CSS framework:

PS. Once you have logged in, you can find the same list on the menu: Account -> Keyboard shortcuts.

Build your own UI components, VISUALLY!

A month ago, we published a blog post with instructions on how to create components using Custom HTML feature (you can read it: here).

Today, we have an even bigger announcement! You can build your own UI components, VISUALLY!

How?

There are new options in the menu: Containers and Elements.

Containers are unique components that allow you to drop other components into them. So that you can build, e.g., grid structures.

Elements are low-level UI components (button, paragraph, etc.) that allow you to build more advanced UI structures (e.g., header section).

Below you can watch a short video (only 45s) where I re-create one of our Headers section from Tailwind Builder:

Please note that this feature is available in all our editors:

Access to CSS classes where you need them.

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). 

Classes list in the Content menu.

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.

The related item has a special background.

TIP 2. You can add multiple classes at once (separate classes with space, confirm with the Enter key). 

Add multiple classes at once.

TIP 3. All classes have an autocomplete function enabled.

The autocomplete example from the Tailwind Builder.

PS. We’ve left the old function with the full section’s structure at the bottom of the Visual Content as “CSS Classes (advanced).”

As always, I appreciate your feedback! support@shuffle.dev

Build your own UI components!

We have released a new feature that allows you to create UI components or modify ours in all three editors (Bootstrap Shuffle, Bulma Builder, Tailwind Builder).

To use this option:

1. Add any component on the canvas and click “Content” on it. Do this even if you want to create a new one from scratch (just remove its code in the next step).

1. Open the “Content” menu.

2. Go to the “Custom HTML” tab.

2. The “Custom HTML” panel.

Custom HTML panel includes:

  • HTML code editor. It supports keyboard shortcuts (ctrl+v, ctrl+c, etc.).
  • Live preview of your project.
  • Library of small HTML snippets to help you build faster.

Our plan for the next few days is to load the panel with many useful HTML snippets, so that you don’t have to write the code yourself.

I encourage you to test the new powerful feature! 💪

[1] Both screenshots come from Bootstrap Shuffle, but content applies to all three editors.

Three ways to change CSS styles.

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.

Using Color Picker to change background color.

You can use a search bar for this.

Searching for framework variables.

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:

  1. Hover over the component you want to edit.
  2. Click the “Content” icon.
  3. Go to the “HTML Structure” tab
The HTML Structure panel.

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.

Suggesting CSS classes.

You can read more about this panel here: “Using advanced editor functions to modify CSS classes“.

3. Custom CSS

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).

Using new panel to write your own CSS.

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).

Try it yourself: Bootstrap Shuffle

Using advanced editor functions to modify CSS classes.

We are very proud that you can very quickly create the first version of the layout using only the drag & drop function in our editor.

However, this is not always enough. That’s why in this post, I will describe the advanced feature of HTML Structure, which is available after clicking “Content” on each component added to the project.

Click button to open Component Content settings.

Note: This description applies to both Bootstrap Shuffle and Bulma Builder.

Visual Content and HTML Structure

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.

Component Content settings.

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.

Hover on an item will highlight it in preview.

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.

Autocomplete when typing class name.

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.

Copy component’s HTML to clipboard.

All changes made to this panel are saved in real-time.

Try the HTML Structure panel in any of our applications: Bootstrap Shuffle and Bulma Builder.

Bootstrap vs Bulma

As many of you have already noticed, we have launched a new theme builder dedicated to Bulma CSS framework ( https://bulma.dev ).

Bulma is based on flexbox and used by more than 150,000 developers.

All Bootstrap Shuffle users automatically get access to Bulma Builder for FREE (and vice versa). By creating an account in one of these applications, you gain access in both of them.

Some of you ask me how these frameworks are different and which is better.

There is no clear answer to this question. A good comparison is in Bulma’s documentation.

For beginners, the most crucial difference is that Bulma doesn’t provide any JavaScript and you have to write it yourself or use other ready-made solutions.

But I recommend to familiarize yourself with both Bootstrap Shuffle and Bulma Builder, add similar components, change styles, export the project and see which one suits you best!

TIP for beginners: When you start a new project based on Bootstrap or Bulma you can download a starting project in our demo (full pug / scss configuration and watch & build commands).

Try Bootstrap Shuffle demo here, and Bulma Builder demo here.

Material Design is coming to our Bootstrap builder!

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.

Bootstrap Material Design (beta) available now.

You can try demo here: Bootstrap builder for busy developers

Read more about Material Design for Bootstrap here.

Default Bootstrap Material styles:

Example of a page with default Bootstrap Material styles.

CSSAuthor.com have put us in their compilation of the best Bootstrap Builders!

CSSAuthor.com is a very respected source of knowledge for web developers.

That’s why we were so glad to note that we’ve been put in their compilation of the best Bootstrap Builders – and in the first place at that! (7 March 2019)

If you’re interested, go to the “CSSAuthor: Best Bootstrap Editors & Builders” article or try out our demo!

Which Bootstrap builder is the best?

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?”

Dwight Schrute from The Office

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.

Bootstrap Shuffle builder interface

2. Default Bootstrap styles editor – where all Bootstrap settings are equipped with convenient pickers + several improvements, like Google Fonts search engine.

Bootstrap settings editor

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:

  1. Add pages needed in a given project (e.g index.html, contact.html, faq.html) 
  2. Add the appropriate layout components (navigation, header, footer, etc.) 
  3. Upload assets and target text content 
  4. Change fonts 
  5. Change the color palette 
  6. Change the Bootstrap component styles (e.g. buttons, navbar) 
  7. Download the project on your hard drive and run it, e.g in Visual Studio. 
  8. Start working on difficult elements! For example, animations and interactions or backend communication.

I recommend trying the demo version so you can check if this model fits your way of working.

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.