I told myself I need to start documenting my thoughts and knowledge. I actually have useful things in my brain that could help others. Who knew!? So, I’m going to join the 52-Week Writing Challenge. My goal is to pour out my knowledge and experience about web development, mostly front-end. Anything from dabbling into a new framework to my daily work experience with projects at Creed Interactive.
How it started
How many times have you defaulted to using Bootstrap as your CSS framework because it just works? I’ve done it plenty of times. There are other solutions available, but when you’re working in a team setting, it’s difficult to introduce something new to developers who do not focus on the front-end.
With many viable solutions like Bootstrap, Foundation, Semantic UI, and more, its reasonable to think there’s no real need to create another framework. But I’m an innovator! I enjoy making things better, faster, more efficient, therefore, I’m going to build my own.
My Aha moment
We were conducting an audit on one of our client’s websites because it wasn’t performing well. The obvious issues were: large images, too many Javascript plugins, and large CSS files. You know what I’m talking about if you’ve worked with plenty of WordPress and Drupal websites. After optimizing and resizing the images down to the proper dimensions and minifying both Javascript and CSS files, the performance was much better. But knowing myself, I wanted more improvements. I’m a big fan of lean solutions and removing unneeded extra code. So I ran an audit with Chrome’s developer tools. When I went to look at the “Remove unused CSS rules”, I was surprised that there were over 1800+ rules not used on the homepage. By default, Bootstrap’s CSS file is around 192 kb and 151 kb minified. This doesn’t even include the Javascript file that is 47 kbs minified. Yes, you can remove some features and modify it’s core, but that’s more work on your end. Foundation does an awesome job of providing an interface for you to choose what you want to include/exclude in your base CSS file. But even then, I found myself wanting to something with my knowledge and skills.
My first thought was to create something lean but not too different. My team was familiar with Bootstrap’s class naming convention, so I was going to keep that part. Our team was also experienced in SASS, so building a base SASS system was ideal. I chose to use Gulp.js over Grunt and WebPack for our build system because it was lean and easier to learn. What I wanted to improve was the use of BEM (Block Element Model) CSS class naming convention. We also had been using Includes Media for our media queries. Lastly, I had to decide how we were going to build our grid system. After discussions with our creative director, we agreed that a 1200px 12 column grid with 10px gutters on both sides would be best for our future designs. At the time I was developing this new CSS framework, Flexbox was just becoming ready to use across all major browsers. In anticipation of this great news, I had a great idea of how to streamline building columns. Why do we have to call out individual column classes that have the same exact column width with the size of each column in it’s own element? That’s because we’re built to do it this way. Well, you don’t have to anymore. Let me save you a couple lines of code from your DOM.
In the example above, you can see the common way to call out a row and a few columns to build a footer with side by side links.
Doesn’t that look so much better!? If the columns are going to be the same size, why not control that in the row? It makes for less code and improved efficiency. Yes, it means less control over each column, but in some cases I find that it is a valuable trade-off.
The Magic Row
The ability to control the outcome of all columns within a row is amazing to me. Less code, less clutter, and increased efficiency. Let’s take a look at the magic.
Using wildcard selectors for the row class allows you to reference the different screen sizes (xs, sm, md, lg, xl) without adding additional code. Now, all references of the class name of row- will use the same styles.
The child combinator is something awesome. It will select elements that are direct descendants. Basically, your first cousin. This eliminates the use of individually assigning each column a class name.
https://medium.com/media/27d002c840b86ff4d890715ac85f0b63/href
What’s Next
Everyone wants to do things better and faster. In development, if you can’t improve what you do on a daily basis, you will fall behind and eventually be replaced. Learn how to do what you do with less. As they say, less is more.
I didn’t intend this to be an article of series, but if I’m going to keep up with my 52 blog articles in 52 weeks, I’m going to stop here and continue adding my thoughts on next week's article.
Top comments (0)