Kruxor Moving from Bootstrap to CSS Grid

This is my notes on upgrading this site from bootstrap to css grid. 

Mission: Make this look good! and fast :)

Mmm… not so good at the moment, removed bootstrap and dark theme. But there is still some custom css being added here i think to add the purple in the header and things. 

Mission one was to move the main site into a dev site so i can totally break it and then rebuild the elements. 

Usually I just do this stuff and then give up in the middle, but i thought if i document this i might be more likely to come back to it again. 

Before Removal

Yeah its nothing to be too excited about just functional.

Stage 1 : Bootstrap Removed

Here I moved the site to dev and removed bootstrap and added custom css grid.

Yep thats pretty ugly now! But its an opportunity to make it nice! :)

Bootstrap CSS and JS

Lets have a look at the css that is added in bootstrap and see what kind bloat its adding. 

CSS:

157kb to beat with my new grid.css file, oh and the javascript. Which im not actually sure if i use many of the features.

Javascript: 

Another 77k of js. So total of about… 234kb. Does not seem like much, but probably a lot of it is unused anyway as i only really use the basic elements.

Update: So far the new grid.css CSS is currently.. 22kb which includes light mode and dark mode css. Where the old site used to reload the whole of bootstrap again to switch modes. Now i add a class to the header to switch modes, much quicker. Currently saving 212kb.

When you change from dark to light mode up here:

You can see that it switches pretty much instantly, where as the old version used to have to download the whole bootstrap darkly css file, which was another 160 ish kb. 

Top Bar

Not too hard to recreate this in the new structure. Had to remove the nav elements, as they do not conform to the new grid layout. 

The Menu + Navigation + Toggles

Ok how to sort out this mess!

What is going on here, well this menu is set out to use the bootstrap navigation layout, so its a bit of a mess now that the style and js is removed, not sure if the menu’s use js on bootstrap but they probably do. Lets see what needs to be changed to fix them, and still get the same kinda layout.

Bootstrap uses toggles for dropdowns and the menu’s so when i replicate this it will also work for the side nav toggles. 

Here is what they look like with bootstrap enabled.

Pretty neat, plus the mobile version is similar and easy to navigate.

See what we can do up the top here, using similar elements. 

Sidebar toggles:

I spent some time extracting some of the elements and re-doing them in both dark and light mode, here is what they look like so far. 

Light Mode:

Dark Mode:

I changed the padding to pixels rather than rem’s as i’m more used to the pixels. I find them a bit more accurate.

The responsive version im still working on the toggle function and appearance. 

Elements to Document

I think i will extract the code for these and add to a new code articles so it can be more easily re-used.