CSS Frameworks like Bootstrap, Foundation or Bulma are very powerful tools that can be used to quickly build out your website and have it looking sharp. At Code Koalas we are fans of frameworks that let us build software for our clients faster so we can spend the budget on the cooler things. We for years used Foundation and have built many sites using that framework, but one day we decided it was no longer working for us. We were spending so much time fighting the system that it felt like we were throwing more of the system away than we were using. Foundation is great and allows you to only include that parts that you actually need, but why pull in a massive framework and thrown 80% of it out?
The problem with larger frameworks
The very essence of a framework is that it creates walls for you to live inside of to keep you safe, but once you want knock out a wall the roof collapses on you. When we would use Foundation anytime we had to modify the way the default menu worked, buckle up for a very bad week. Do you not like the way the default buttons are styled, well that sucks because blue buttons are going to keep showing up in QA results somehow. I hope you like using !important all over your CSS, you're going to need it to override some framework declarations.
I fully admit the developer I was two days ago was an idiot and didn't know what he was talking about, so it's very possible I was using it wrong.
Josh Fabean - right now.
When CSS Frameworks like Foundation were first created laying out a website was quite hard, IE 7 was still something we had to support for some clients. Trying to get columns working right across all the different browsers was a pain, it still is a pain today but it's way better. Today we build component based layouts, JavaScript front-ends, CSS Grid and flexbox, I don't need a giant framework to give me walls, I like the open air.
So what's the solution?
Another framework, but this time built right! Actually my solution was to build a very small, simple and powerful CSS library to handle page layouts using Flexbox. I present to you Koality Flexbox Grid! Koality Flexbox Grid is built with the Unix Philosophy of "Do One Thing and Do It Well", it creates a grid layout and nothing else. This grid will not restyle your buttons, change your font sizes, to make your dreams of having a nice custom looking menu a nightmare. This grid will give you some easy to use and understand classes to break your content into sections and be fully responsive.
Koailty Flexbox Grid is small 30kb (less than 4kb when gziped by your server) can be used as standalone CSS or has Sass which provides your variables to change most things about the grid to customize it how you'd like.
How do I use this grid?
Depending on how you learn there are two main ways to learn, you can jump right into a CodePen example I have create that shows up what is available for you, or you can read the README on the git repo and learn all there is to know.
Quick Example
How the grid works is you have the parent class of flex-container that becomes display flex and takes any direct children and will set them to flex: 0 1 100% so they will display side by side no matter how many items you have. That's not too impressive on it's own, the real power comes when you add classes to the children. The grid by default is based off of 12 columns so you have a class to display every width between 1/12 and 12/12 as defined like flex-1-12 (will be 8.33333% wide) or flex-4-5 (will be 80% wide) or flex-3-8 (will be 37.5% wide). There also are responsive prefixes you can place on every class that makes it apply at that breakpoint and up, no prefix is 0px+ but if you write flex-1-1 md-flex-1-3 on smallest screens it will be 100% wide and on medium and up (768px) it will be 33% wide. There also are classes that affect flex properties like flex-jc-flex-end will put justify-content: flex-end on the container. With that you know all that you need to know to start using the grid effectively and it's faster than writing that all yourself every time you need it on each component.
How well does it work?
This grid actually works quite well, which is one of the good things about not trying to do everything. I first created Koality Flexbox Grid in December 2017, since then it has been used in all of our new websites we have built at Code Koalas and it just works, and it's a framework our developers actually use unlike with Foundation where half of the team understood how to use it. Along with the change to this grid we also moved to component based styling and our front-end QA for websites has more than halved because we are no longer fighting a framework and just building websites.
I will admit it's not for everyone, just like giant frameworks that we left aren't for everyone. I think the people who built Foundation, Bootstrap, and Bulma are way smarter than me but that doesn't mean their solution is for everyone in every situation. So next time you are building a new website think about it maybe Bootstrap isn't what you need, maybe what you need is Koality Flexbox Grid, or your own forked version of it.