Developers February 13, 2020

Thinking About Switching to Bootstrap - Feedback/Input Please!

Simon Le Pine @Lakebed_io

Hi All,

The first screenshot is what Lakebed looks like right now. The second is a Bootstrap theme I found that is obviously similar and I can make work with relatively low effort.

My question is, the Bootstrap theme requires jQuery so that's yet another dependency and yet another reduction in load times (albeit a small reduction). What's your opinion on requiring jQuery just for the template/UI? Is that a worthwhile tradeoff?

  1. 11

    I recently migrated my product from bootstrap to tailwindcss, and I couldn't be happier. I found I was customizing bootstrap so much to get the exact look I wanted, but the results often ended up looking inconsistent because of the mix of bootstrap and custom styling. Tailwind puts just the right constraints on your css so that you can style things how you like within the design system.

    1. 4

      I'd second this. Bootstrap is becoming painful once you start customizing it. I've migrated from Boostrap to Bulma and I'm pretty happy as of now.

    2. 2

      From the website

      Most CSS frameworks do too much.
      They come with all sorts of predesigned components like buttons, cards, and alerts that might help you move quickly at first, but cause more pain than they cure when it comes time to make your site stand out with a custom design.

      100% agree. I don' t use bootstrap other than simple landing pages. I tried using it for dashboards a few times, it always ended up sucking so much time.

    3. 2

      I would second Tailwind CSS. I first used it for https://makerlist.cc/ and I think it's far superior to Bootstrap and Bulma (which I've both used for previous projects). Bootstrap and Bulma allow you to get started much quicker, but end up becoming a pain to customize when you want to have a more unique UI.

      1. 1

        I vote tailwind also. Using it with Iaravel and vue

      2. 1

        Another vote for Tailwind here. I'm actually using Bulma on all my sites (which I like far better than Bootstrap) but am planning to use Tailwind on future sites.

        1. 1

          Yeah, I'm going to have to vote for Tailwind as well. I was a bit apprehensive at first but after a few hours learning the library I don't think I can ever go back.

    4. 1

      I have checked tailwind recently, but the mess in html it created with all the classes was unmaintainable so i left it.

    5. 1

      Could you recommend a good tutorial for angular / tailwind. I'm only finding react which I don't as of yet like or use.

      1. 2

        I learned tailwind via the documentation on their site. It's not specific to any frontend framework. I'd recommend trying it out via CDN as described in their docs, and if you like it, go through the process of installing it.

    6. 1

      I remember the first 30 minutes of looking at Tailwind with disdain. Utility classes? Ugh.

      Then I tried it on two side projects and haven't looked back.

      1. 1

        I went through the exact same thought process. Tailwind goes against all the "best practices" I had learned for css. Now I can't imagine going back.

    7. 1

      Thanks so much, I'll take a look.

      1. 1

        Thanks again, in really liking the look & feel of Tailwind.

        1. 1

          I'd also recommend checking out https://refactoringui.com by the authors of Tailwind if you (like me) are not an experienced designer. They give some great practical tips on how to make your app look good. I should try to get some kind of referral deal with them :)

          1. 1

            I was already a few pages through Refactoring UI and didn't realize it was the same people until looking at the Tailwind docu.

  2. 3

    I'd say nobody is going to know/care whether it has jquery in it or not so go for it if you like the look more.

  3. 2

    If the app is facing regular users I personally would trade the new look for a few hundred miliseconds lost.

  4. 2

    If it gets you to where you need to be faster than any other option, then consider it.

    My personal gripe with bootstrap apps is that they all look the same and components are shoehorned into pre-made bootstrap elements rather than being designed as their own thing.

    If you really want to use a CSS framework, there are much better ones out there that look much better than bootstrap.

    jQuery is great for small interactions, but building a web-app in jQuery is messy as hell and quickly gets unmanageable with everything in global scope.

    1. 1

      Thanks. I'm not using jQuery for anything else so that is/was part of my concern.

      It's a long story but I've decided on the route and it's neither of the options I was considering. I'm not going to go into my thought process for fear of starting a flame war...

      1. 2

        HTML tables on Geocities? 😜

        1. 1

          and iFrames!
          and <blink>

  5. 2

    I wouldn't worry about using Bootstrap, or using JQuery at all. I know both are no longer fashionable with shiny object lovers but I am so incredibly productive with both that I still choose them for all my projects. Which CSS and JS framework is used should for many startups be the least of their worries. So, just pick what allows you to develop fast.

    1. 1

      +1 for shiny object lovers!

      My thoughts as well. I think part of the challenge is I dislike jQuery so dislike any solution involving it.

  6. 2

    If you've found a design you like that you can make work with 'relatively low effort', it would make sense to stick with what you already have! Of course, it all depends of how much time you want to spend and your priority. If your intention is to learn more about different CSS frameworks and have time to spare, you can swap Bootstrap and try other options (which may not require jQuery per your original question).

    I am currently using bootstrap and am hitting up against some limitations with customization so I am encouraged by the comments here for other options to try. But in reality this means allocating some hours to install and get tailwindcss configured and working within my project to see for myself :)

  7. 2

    I would highly recommend Bulma.

    Much better looking than Bootstrap, and does not require ANY dependencies.

    You just import your scss files for components that you need.

    Heard a lot of great things about tailwind too. At this point I would just pick one, because the reduction in load time just for boilerplate bootstrap is not that significant.

    1. 1

      Yes, I used Bulma for https://www.gettandem.com for example. Little effort and things looking decent.

      1. 1

        The great thing is that it's highly customizable, and you only use what you need.

        You could use their columns, and then use tailwind for their components.

  8. 1

    Bootstrap 4 is very nicely organized. I am also using it on a personal project. The jquery dependency can be solved using cdn. The chances that someone visiting your site have already made a cache copy of the cdn jquery is higher than 0. If you decide to host it locally the chance is 0 for a new visitor. So I would go with the cdn version

  9. 1

    I'm not good at UI development so I like starting with a nice theme, preferably built on Bootstrap so I know it's solid. I'm currently using CoreUI.

  10. 1

    Tailwind is really nice but it’s still very low level. If you’re looking to quickly improve the look of your app and are okay with some limitations then Bootstrap or Bulma may be the better choice.

  11. 1

    I've been using Bootstrap and one of their Themes for about 2-3 weeks now. I started down that path to get a quick mock-up of my screens done with no functionality. Once I got used to it, it was quite easy. However, there are sooo many compiled CSS files and JS files and you really have to get in to someone else's head to start to modify it. It looks great, but I added soo much stuff to my project and when I go to develop I will strip it all out and probably wind up re-writing a lot of it to look very similar and simpler because I won't need every bit of CSS and JS that was provided in the template. My template even had a To-Do list that was built into javascript. I spent more time trying to trace through what files and folders I'd have to add than I did laying it out. I agree with some of the other comments that Bootstrap is a pain to customize to get the look you want, but once I got a base done I was able to quickly get non-functioning screens setup which is what I wanted.

  12. 1

    From left to right? It's a no brainer, just do it!

  13. 1

    Another vote for Tailwindcss here. Takes a little while to get used to, but a couple of hours in and I feel so much more productive than when I was using Bootstrap.

    It feels a lot quicker to use, more reusable and is actually nice not having to recompile stylesheets all the time.

  14. 1

    just load jquery from a CDN in minimified form and it's likely already cached.. your users won't be able to tell the difference with out without it and it's quite useful to have it available

  15. 1

    jQuery so that's yet another dependency and yet another reduction in load times

    I wouldn't worry about this at all as long as you're loading it from a CDN. So many sites on the web use jQuery that nearly all your visitors will have it cached already from visiting other sites. The same is also true for Lodash.

  16. 1

    In use bootstrap for ABSOLUTELY EVERYTHING I do.

    Checkout
    Https://songbox.rocks
    Https://getfed.net
    Http://lomondwebsites.com
    Https://scottishtech.com

    I think if you have problems customising bootstrap then you’re using it wrong.

    My opinion... use bootstrap and install query. Boone is going to care about the extra millisecond load time.

  17. 0

    Don't worry about such a stupid thing. Jquery's minified JS is 30kb. That is 0.03 MB. That is 100ms first time because it gets downloaded, and 50ms afterwards because it is cached. It's such a little compromise to boost the looks of your website.

    I bought a premium theme and it was much more bloated and how I am in the progress to switching to the classic bootstrap, customized to my needs.

    Your number one concern should be to minimize time to market and create something people want and will pay for, instead of prematurely optimizing and worrying about a 30kb download.

    1. 2

      Why would you worry about such a stupid thing as a bloated template?

Recommended Posts