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