Going to Grid
It's always time to learn something new. If one can couple learning something new and removing a dependency, why not?
The target for this learning? Remove react-bootstrap from this site, replacing it with vanilla CSS. In my day job, I have focused on the front end for several implementations. CSS Grid has been my primary tool for positioning elements on the page.
I began with the most minor, straightforward components to get started with this task. Launching each refactor by React Bootstrap tag into a div removing any additive Bootstrap styles. With a terrible-looking feature, I began to sprinkle in the structure of the component. Continuing to refine the appearance from the largest to most minor elements within the presentation.
To handle some of the styles I used in almost every component, a couple of mixins came in handy for reuse. One is to set the container break widths. Now for every presentation width greater than a handheld device, the container will be fixed to a preset size. The other mixin is for the standard presentation of links.
With the small size of the components, I could refactor them within an hour. I saved the header for last as I saw the main navigation as the most challenging task. Before tackling this effort, I researched how I may want to handle the click handling of mobile navigation. Within a couple of hours, the result was a working header with a hamburger menu. When clicked, the mobile presentation of the menu items is displayed.
Is everything perfect with this refactor? No! But, I was able to achieve my goal of learning something new. The refactor opened the door to learning more about styling as new features get added to the site without Bootstrap DOM bloat.
I knew jumping into this work would increase the project's overall size. Here are the stats:
Initial file count: 21 Initial size of files: 16.2 KB
Post refactor file count: 25 Post refactor size of files: 20.8 KB
The change was a slight increase. I'm confident the JS and SCSS could be optimized, but that effort needs more value.