Posted in bootstrap
14831
5:14 am, August 31, 2020
 

extracting the useful bits of bootstrap

Back in the early instances of bootstrap they used to provide a build system for the individual components. It seems that these days its all or nothing, or use some kind of build tool to include the bits that you want.

How hard is it to manually extract components from bootstrap?

Lets start with an un-minimised/squished version of the bootstrap css. 

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css 

Here we have Bootstrap 4.5.2 which is 194kb uncompressed before we even add any javascript. This is a fairly heavy overhead to begin with, but it makes things a bit easier when starting with a site. Dont have to worry about grids or mobile, or anuthing like that. Anyway. 

The bits that i most commonly use from bootstrap are:

  • top nav
  • buttons
  • button dropdowns
  • form spacing
  • some of the margin classes like mb-3 
  • grid
  • card (i love this one, for adding some nice formatting to content easily)
  • fonts?

Lets see how hard they are to extract and if they work alone. 

I think the easiest way to see what is used is to add them all to one page, and hope i dont forget any of them. 

Here is the component testing demo

As soon as you start adding things like the nav dropdown it seems we also need to find the bits of js that are related to that item. So lets also grab the bootstrap js. 

OK so now if we load the demo above in chrome we can load our browser dev tools and check the coverage to see what bits of the bootstrap code are actually being used here.

Here is how we load the coverage in chrome dev tools

  1. Open the demo link in a new browser tab.
  2. Press F12 to open dev tools
  3. Press ctrl + shift + p (this will open a search)
  4. Type in coverage and select Show Coverage
  5. This will open a new coverage draw
  6. Then we can reload the demo and it should show the coverage of the loaded libraries

This just gives us an idea of how much wasted code there is in these libraries. But does not actually help to extract it. 

To extract the css, you can also use chrome dev tools. 

Select the element and then right click it, and copy the styles. 

This just gives us the css for that one item, so each sub element will also need to be copied like this. Which is a lot of effort! :P But it can be done for less complex components. 

How to copy styles of an element:

This gives the combined styles but no class selector. So add this to a class. navbar. You can see in the css below, the new navbar class with all of the copied elements. 

CSS

.navbar {
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      --blue: #007bff;
      --indigo: #6610f2;
      --purple: #6f42c1;
      --pink: #e83e8c;
      --red: #dc3545;
      --orange: #fd7e14;
      --yellow: #ffc107;
      --green: #28a745;
      --teal: #20c997;
      --cyan: #17a2b8;
      --white: #fff;
      --gray: #6c757d;
      --gray-dark: #343a40;
      --primary: #007bff;
      --secondary: #6c757d;
      --success: #28a745;
      --info: #17a2b8;
      --warning: #ffc107;
      --danger: #dc3545;
      --light: #f8f9fa;
      --dark: #343a40;
      --breakpoint-xs: 0;
      --breakpoint-sm: 576px;
      --breakpoint-md: 768px;
      --breakpoint-lg: 992px;
      --breakpoint-xl: 1200px;
      --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5;
      color: #212529;
      text-align: left;
      box-sizing: border-box;
      position: relative;
      display: flex;
      align-items: center;
      padding: 0.5rem 1rem;
      flex-flow: row nowrap;
      justify-content: flex-start;
      background-color: #f8f9fa !important;
    }

Scripts

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css" integrity="sha512-1sLg2zcT3n7osSBWgWwaLYULxlCxQ8ReyS+8QvjyhF8YxrESmO+yjB59f3sNLLN022lg1X2PMckOlXkMQfYoGA==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.js" integrity="sha512-2nWfr/l1RS9Cj5j3i7Shr8mcGA+CRKbmnhSKX7aDNsZvCn6xX2NpT4FHEhxOT8oaq9mwMdu9CNQ65xi41sJu2A==" crossorigin="anonymous"></script>

View Statistics
This Week
448
This Month
1832
This Year
1716

No Items Found.

Add Comment
Type in a Nick Name here
 
Related Search Terms
Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
Many of life's failures are people who did not realize how close they were to success when they gave up.
Thomas A. Edison
Random CSS Property

font-variant-numeric

The font-variant-numeric CSS property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers.
font-variant-numeric css reference