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!

Learn Bootstrap 4 by using a Bootstrap builder

In this article, I will describe how beginners can acquire a higher level of knowledge of Bootstrap 4 by using our builder.

1. Get to know all of Bootstrap’s classes.

Do you sometimes have to check on the Internet what the correct structure of, for example, Bootstrap’s navigation looks like?

If so, use our page with the list of all classes available in Bootstrap 4. You can browse classes by category, search for them by name, display their source code and implementation examples (ready to be copy-pasted into your project).

All Bootstrap classes

An example page for the .alert-danger class:

Bootstrap .alert-danger class

2. Use the powerful Bootstrap Sass configuration.

I use several groups on Facebook and Slack related to front-end development. Often, there are questions about how the styles of Bootstrap’s components should be changed.

Unfortunately, not all answers are optimal!

You can load Bootstrap’s CSS from a CDN and then overwrite the given class in your style file (or add your own modifier), but a much better solution is to use Bootstrap Sass variables where possible.

Using Bootstrap variables and compiling Bootstrap’s CSS from source files will assure that your template is consistent and the resulting CSS file is smaller! Less code means fewer potential errors.

For example, you would like to change the background of the Jumbotron component. How to quickly check which variable you should use?

Using our builder you can launch the “Change Styles” section, and then follow these steps:

  1. Search for “jumbotron” in the search engine
  2. In the search results you will see that Bootstrap provides two variables related to the Jumbotron component
  3. By clicking one of the results and going to the appropriate section (Containers/Jumbotron) you can change the component’s setting.
Search for Bootstrap settings

To learn the names of the appropriate settings, you can hover over any label to see what the variable name is. Of course, you don’t have to remember all the variables. Just know where you can look them up!

Hover on label

3. Experiment.

Using our style editor, you can change over 500 of Bootstrap’s settings. We provide them in thematically grouped categories.

If you are a beginner, it is worth checking and experimenting with these settings. In the editor you can use two preview modes:

a. Preview of the websites that you create.

Preview of index.html (your page)

b. Preview of the Bootstrap components available in the selected category.

Previw of Bootstrap UI (Jumbotron component)

By changing the settings you can see how the component changes live. Bootstrap UI preview has been prepared so that it is possible to inspect even those components that we aren’t currently using in our page.

4. Download the source files and adopt the best practices.

We strive to ensure that our code complies with the best practices. We use npm to download dependencies and build the project.

The source files use the CSS preprocessor called Sass and Pug templates. After downloading the project, you can preview the already compiled version in the public/ directory, but we recommend that you make changes to the source files in the src/ directory.

To view live changes in the sources, use the npm run watch command.

You can compile the production version of the project with the following command: npm run build.

5. Learn by building templates.

Read the “How to create a modern Bootstrap template in 10 minutes” article or watch a 6-minute video in which we show you how to quickly prepare a completely new Bootstrap template using Bootstrap builder.

Good luck!

PS. You can try demo of Bootstrap Shuffle here.

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.

How to create a modern Bootstrap template in 10 minutes (Using Bootstrap Builder)

Default Bootstrap styles and the final project created in 10 minutes

In this tutorial, we will create a website of a fictional Bold Internet company using the Bootstrap Shuffle tool.

What you will need:

  • An account in Bootstrap Shuffle (all steps given here can also be recreated in programs such as Visual Studio, using the Sass Bootstrap variables). 
  • A pack of free illustrations from Icons8 
  • Logo

Before we start, look at what we are building: index, contact, 404.

Step 1. Pages

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

Adding new pages in Bootstrap Shuffle

Step 2. Components

To each page, add the right components using the drag & drop method.

Bootstrap Shuffle builder

I chose components from the categories:

  • index.html: navigations (8th on the list), headers (13th), testimonials (5th), content (19th), features (8th), footers (5th)
  • contact.html: navigations (8th), contact (2nd), footers (5th)
  • 404.html: navigations (8th), HTTP Codes (4th), footers (5th)

Step 3. Typography

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.

Google Fonts picker

Having selected the font, set the appropriate weight of the usual headers and the headers of the Display class.

Example of headings settings in Bootstrap Shuffle

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

Preview of Bootstrap UI for the Colors category

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.

Search for Bootstrap variables

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.

Our changes:

# General/Appearance
$enable-shadows: true
$enable-gradients: true

# Buttons/Buttons
$btn-font-weight: 900
$btn-border-radius: 3rem
$btn-box-shadow: 0.2rem 0.2rem #000

# Forms/Buttons
$input-btn-font-size: $font-size-base * 1.2
$input-btn-padding-y: 1.125rem
$input-btn-padding-x: 4rem

# Forms/Inputs
$input-padding-x: 1rem

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:

CSS shadow builder

Final button:

Button created using Bootstrap builder

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.

Our changes:

# Navigation/Navbar (header)
$navbar-nav-link-padding-x: 1.75rem

# Navigation/Navbar (header)/Navbar - Light version
$navbar-light-toggler-border-color: $purple
$navbar-light-color: $purple
$navbar-light-hover-color: rgba($purple, .7)
$navbar-light-active-color: $purple
Bootstrap Navbar customization (before and after)

Step 7. Content

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.

Change component’s content

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.

Therefore if you want to speed up your work, try Bootstrap Shuffle (builder for busy developers).

Good luck!

The final version of the index.html

We updated our builder to support Bootstrap 4.2.1!

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!

Is our product heading in the right direction?

The best method of validating a product is to acquire paying customers.

But what if you already have paying customers, and you want to be REALLY sure that your product is heading in the right direction?

Check if you have paying customers, who overcome the EXTRA obstacles to buy your product.

We have such infamous examples in Bootstrap Shuffle:

  1. A Chinese user, who tried to buy a subscription through VPN (ultimately blocked by PayPal).
  2. Users who moved from a ($6/month) subscription to a ($60) license.

Why is the second example so crucial? Because to do that today, you have to:

(Remember that we started 2 months ago!)

  1. Check that you can’t do that in the interface.
  2. Write to the support@ with a question, what to do in this situation.
  3. In response, you will receive a message that moving from a subscription to a license is not yet available in the interface. BUT if you really care, you can:
    1. cancel a PayPal subscription
    2. create a new account with a made-up e-mail,
    3. pay for a full license ($60!),
    4. write about it to us, and we will connect your old and new account.

During last week, two users went through this procedure!

To be honest, until they applied for support I didn’t assume that such a situation will take place (so soon).

As a Product Owner your main goal should be to remove these obstacles! And that’s exactly what we do 🙂 If you’re our customer, can you share with me ( dawid@bootstrapshuffle.com ) what’s the one thing that nearly stopped you from buying from us?

Two things to pay attention to when creating a Page Builder

The authors of Pagedraw.io announced a few days ago that they are shutting down the project and the source code has been made available at GitHub.

  • Bad news: We also work at the export to React
  • Good news: At GitHub you can see how others have done it

Looking from the outside, in Pagedraw.io there were at least two problems.

1. It is not known who their tool is for

Their last post at Medium starts with: „We often get the question of who the target audience of Pagedraw is: designers or developers.”.

In Bootstrap Shuffle I wanted that it was clear from the start. Therefore our slogan is „Bootstrap builder for busy DEVELOPERS”.

2. It is very difficult to do a universal, simple to use editor that will suit everyone.

Choosing one technology (in our case Bootstrap), it is much easier to build an editor the handling of which is simple. Basically, our styles editor is UI for Sass variables used in Bootstrap.

Bootstrap SASS (left) and Bootstrap Shuffle editor (right)

Anyway, I look forward to the promised post in which the authors will share their lessons learned on their tool.

BLAZING FAST Bootstrap Builder! ⚡⚡⚡

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. 

Our configuration:

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