Bootstrap was one of those little things that changed how I designed websites as well as how I coded them. It was a beautiful introduction into the wonderful world of responsive web design.
However, that love affair was short lived. Like many developers, I eventually found Bootstrap to be too bloated for full web production work. I felt I’d spend way more time overriding the inherent styles included in the framework in order to get my visual look and feel in place. Plus there were many features I did not need nor ever used, and yet some I wished were in the framework.
I’ve always found a project is a good motivation to pick up a new skill. Rather than just taking tutorials on a new language or technique, an actual deliverable can do more to help learn something new. For me, it was SCSS. I had been using .LESS, but wanted to make the jump to SCSS after reading about what you can do with the kinds of mixins SCSS offers.
One of the main reasons I wanted to learn SCSS with this project was because I wanted a grid system that could be customized by the user through some pre-set configurations and mixins that would be processed into the final CSS.
I also wanted to improve on the system with things I had wished were in Bootstrap. Most of all I wanted to strip out all the items I never used and just keep it a simple grid. No style overlay, carousel, and other bells and whistles that I rarely used.
I also wanted to add more breakpoints. Now I know there has been endless debate on making more single-column and fluid layouts that do not need breakpoints, but I always felt limited by the five breakpoints Bootstrap offered. I know many times I had wished for another breakpoint between their “small” and “extra small” breakpoints, and eve something larger than their “extra large” breakpoint to handle modern screens and even big screens.
Now the discussion came up as to why Flexbox has not made its way into this system, but I developed Basic Grid 1.0 before Flexbox gained enough browser support to be used. I am thinking about making a 1.5 version using Flexbox, even though I later updated the system using CSS Grid.
The finished product creates a system based on the configuration the user can put in before processing the CSS. The user can select how many columns they want, what the breakpoint sizes should be, and even add/remove breakpoints at their discretion.
I brought in both Normalize and Eric Meyer’s Reset to clear up the issues many find in browsers when coding. Obviously one can alter the code to use their own resets or what not.
Now there’s the obvious question as to why I named the classes similar to Bootstrap’s. I’ve read many times on how some complain that Bootstrap’s class names aren’t “meaningful”, but they are what they are. I more wanted to make this easier for a dedicated Bootstrapper to grab and use, rather than re-learn a whole new system.
The final compiled minified file is around 17KB, a very small footprint for a website framework, and it doesn’t require jQuery in order to work. While I’m quite proud of my achievement, I’ve also deemed this grid to be obsolete as it’s using floats while CSS Grid has now become standard. It’s why I created a 2.0 to utilize CSS Grid.