Is Bootstrap Still Worth It? -- 1 Design, 2 Code Bases.

Key Takeaways

two code bases and one design bootstrap versus custom HTML and CSS before we begin this video sponsor is Linode and they make it easy and affordable to host your site app or service on whatever technology stack you use unlike entry-level hosting services lonoa is a step up to powerful fast fully configurable cloud computing with server plans starting at just five dollars plus no hidden fees or surprise outages Linode offers a no-nonsense hosting at a price you can afford so sign up now using the link below to get a twenty dollar credit on your new low note account hey everyone what's up Gary Simon of course hecho comm so today we're gonna take a look at a single UI design and we're gonna look at the results specifically file size associated with using bootstrap as opposed to just doing it with custom HTML and CSS and this is the design something I came up with very fast and a single sitting I you know very simple there's nothing else it's just these elements that you see and this is the custom HTML version that I did and then here's the bootstrap version over here you can see it's port 5,000 verse 5,000 one so these are two different designs and I'm going to show you basically what I did I and give you my thoughts about using bootstrap here in 2019 alright so let's go ahead and get started all right so let's go ahead and talk about the minified HTML and CSS for both versions first we're going to cover the custom HTML CSS that I wrote meaning I wrote all the HTML and the CSS without the help of bootstrap or any other framework just a straight-up HTML file and a CSS or a sass file so the HTML for that demo the example that I showed you came in at 1.3 kilobytes and the CSS at 1.4 totaling in at 2.7 kilobytes a nice real low I HTML and CSS file size for the site to load fast so now let's talk about doing that same layout and the same structure with bootstrap for all right so the HTML this time came in at 3.1 kilobytes as opposed to the HTML only being 1.3 kilobytes here and let's examine why so right here we have the bootstrap HTML first actually let's look at my HTML without the bootstrap you can see it's nice and clean I there's not a lot of classes applied to it very very simple and of course it is 63 lines of code and then bootstrap the bootstrap way of doing is doing things in structuring things is by specifying a number of different classes for the grid also for margin and padding and things like that and you can also see there's a lot more nested elements in here doing it the bootstrap way of using their cards for instance and this came in at 77 lines however there's also a lot more characters as well all right I so continuing on we have our CSS though it's which is smaller the custom CSS so whenever you're working on a bootstrap project you're probably gonna want to make unique adjustments to your own CSS file itself and so I only had a you know probably like less than half of the amount of CSS required here compared to the CSS of 1.4 KB here and then bootstrap min which I included in this version for from a CDN or a content delivery network total in at 152 kilobytes and I know some people do that and that shows us that there's a total of 155 kilobytes meaning if you were to make this production ready with your bootstrap 4 for that element or for that UI design it would be 58 times larger than the custom HTML CSS of just 2.7 kilobytes now I know you're thinking that's not exactly fair because people can take their bootstrap 4 and run it through purged CSS or uncie SS which is simply the process of specifying your HTML file and it will look automatically through all of your selectors that you're using like your classes and then compare it based on the CSS that you're using such as bootstrap and it will get rid of all those selectors and those rule sets from bootstrap and from the CSS which will result in a much less smaller file size so I did the same idea with purge see to see how much closer we can get these two to being so this of course is all the same we didn't run it through he didn't need to run that through prove CSS with bootstrap for the HTML of course remain the same but with purged CSS it did get it down drastically from a hundred something kilobytes hundred fifty five down to 6.2 kilobytes which is huge the total of course is 9.3 Kb however we still see a large discrepancy yeah of course being 58 times verse three point four times is a massive difference and a huge improvement however three point four times is a ton especially if we're talking about in the context of a real project where you have a site perhaps with multiple pages a lot more HTML a lot more CSS a lot more needs where perhaps your custom HTML CSS may be total is in at 50 kilobytes with bootstrap for it might end up being 150 kilobytes even while using purged CSS so that begs the question is bootstrap worth it all right so should you use bootstrap if you don't know CSS or if you suck at it my answer is no I don't think that's a good enough excuse especially because you're still gonna have to learn the bootstrap way of doing things understanding all the classes the grid system the utilities you're still gonna spend a lot of time trying to memorize that and bake that into muscle memory by applying it to a number of projects I think you would be better spent your time would be better spent by just learning CSS itself and how it works on a very base level idea now should you use bootstrap for production no I think we already went over the reasons why you would want to avoid that production because even with using something like uncie SS or purchase CSS it's still going to be larger you could use it for production if you don't care about file sizes and load times which I think that's a bad thing anyways you should always worry about that should you use bootstrap for prototypes or demos maybe I would say yes if you already have an understanding a solid understanding you've already used it for a while of bootstrap and how it works I but there are probably but other tools on CSS frameworks such as Balma that might be more suitable to learn if you want to go that rough and finally should you use bootstrap if you suck at design and you're unwilling to pay for a UI designer and you won't buy an optimized template or a theme and you won't use another CSS framework if you fall into this you know this cascading criteria then yes you were fine to use bootstrap in my opinion but if you suck at design and perhaps you're a front-end developer and/or you're a back ender and you want to put your together your own project if you suck at design don't do it yourself you if it's something that's gonna be production-ready maybe like a portfolio don't do it yourself you should try to pay somebody like a UI designer that should be your next step if you're not willing to pay for a UI designer then I think you would be better served to buy a optimized template or theme that's not based on any CSS framework but something that's very low in file size that looks great and also performs well on different devices after that if you're not willing to do that then perhaps at least definitely do your research on other more modern CSS frameworks such as Balma and if you're unwilling to do that then fine go right ahead and use bootstrap all right so hopefully you found that helpful one of the driving reasons that the minified version with purged CSS of bootstrap was still quite a bit larger is because it does include different things such as more CSS classes for the grid system that it uses and I definitely use the grid system especially for the header where we had the logo on the left and also the navigation on right and also the gallery the forward thumbnails that you saw there when it comes to writing your own CSS using using for instance the CSS which bootstrap does not use then I achieved the responsive gallery through three single properties in one selector so that is a big advantage that you know writing custom CSS has over bootstrap itself alright so if you're interested and you like these videos make sure to subscribe leave your thoughts down below do you still use bootstrap or bootstrap for do use something else or do you prefer to stick with everything being custom alright see you guys soon goodbye [Music] [Music]