In 2010, (then-called) Twitter Bootstrap was launched after being announced around the time that South By Southwest (SXSW) came through Austin, Texas. An idea by two developers at Twitter, born out of tweet discussions about a library concept for easy spinning of sites with nice looking default styles within a design system, today is on its 5th major version and now completely separated from Twitter as a whole. This design system was more than just “better default styles with a grid.” It was a full-on starting point if you needed to put an idea up quickly or have a landscape ready for whatever you wished to throw at a website.
For me, it was largely default styles for common items like buttons, forms, and a grid that was bulletproof on all browsers. It took out a lot of guesswork and its navigation, collapse function, and (insert audible groan here) slider was monumental in many projects. But like any design system, you either rely on it and aren’t concerned about the extra weight of all those classes, the large jQuery of expansion abilities, and even more that came along with it – or you come up with your own system.
To be honest, over the years, I got lazy with using it. It was an easy drop in and I knew it so well. But the reality is, I also knew better and it was holding me back. Instead of considering stopping using version 3 or 4 and moving on to version 5, I should have been writing my own. Everything else in my tool kit has been customized, why wouldn’t I do it here? Even with clients or businesses I worked at asking for it, there was a better way forward, especially with my many years of styling skills under my belt.
While I can’t believe it took so long, I also am really excited to begin work on this and use my own site as the test bed. It’s not going to be perfect, but it’s going to be huge for stretching my skills and also learning a new design system for my future projects. I full intend on using it moving forward on new projects, unless particular dependencies are asked of me on those projects.
Here’s what I am starting with:
- CSS Reset
- Grid – Flexbox
- Content Helpers (Horizontal lines, Buttons, Forms)
These are the essential needs I have on nearly every single site and they are the basis for every project. After this initial first phase, I plan to add ways to use PostCSS to bring in additional needs, for special cases. This will make projects as slim as possible, bringing in only what is needed. PostCSS will also bring a (still) much-needed auto prefixer ability.
Reset
There are so many resets out there. No reason to reinvent the wheel, but most definitely make sure things like border-box sizing are set and other default resets. We don’t want any accidents on random browsers because I forgot something small and then have to be remembering to fix it on every site.
Grid
This is a big one for me. I’ve been using your standard float:left grid for so long that I was late to the game with Flexbox and only started using it about 3 years ago. Fortunately, I’ve used it in a lot of other capacities and I have a few projects running Bootstrap 4, which uses Flexbox, so switching to Flexbox seemed like an easy/natural move. CSS Grid is going to be in all of our collective futures, just as Bootstrap 5 went with, but for now, I am embracing my already big, big love for Flexbox.
Content Helpers
Horizontal lines, buttons, and forms are the most commonly used content objects for that I needed some default styles. Just takes a little tweaking to get them looking nice. I don’t want to do too much here, especially with forms and buttons, because of the likelihood that a project will require changing the look. Just some natural spacing and default colors here, to keep things looking clean while I build.
Sizing
For the viewport media queries, I’m still using pixels, but font sizes and most of the margin/padding are all rem. We’re in a mobile-dominated world and pixel size isn’t what it was when we were all chained to our desks.
The Future
At the moment, I am shipping this without any Javascript, just as this site has none. I’ve been steering away from jQuery over the past few years and I am trying to only use plain, vanilla Javascript. I mentioned PostCSS above, which will be in the future and I am sure there will be more options to add as needed!
Carry on, Jimi
My affinity for naming things has no real rhyme or reason. I’ve used Latin words for Time and Japanese words drawn from Wabi Sabi traditions. So in the interest of making inconsistent names, this system is being called Jimi, named after one of my favorite guitarists, Jimi Hendrix.
Stay tuned for more updates, as I dive down this process of bettering my front-end workflows.