Honing the craft.

Blog facelift

My humble blog's design has turned 5 years old last month, so it was time for a revamp. Since this is a personal blog, I have decided to keep things minimal and use a framework that saves me from doing the research of the latest trends in CSS layouts, and Bootstrap has proven to be a great companion to accomplish this mission. You will find details about my goals, tools and process below.

Goals

These were the bulletpoints I have put down before getting started with the redesign:

• Make the design more up to date with today's design standards, without delving too deep into researching the latest trends in web design.
• I want something minimal in nature, concentrating on typography and a good layout, to create a simple, but professional looking interface.
• Make the change quickly, so that I can move on with my other priorities including creating the company website. Ideally, I want to spend less than a week on this.
• Keep the main color palette elements the same, as I still like it and I also want to keep the logo.

Multiple of these goals stem from my preference for streamlined and clean aesthetics, versus more complex structures and fancy graphics. Some other are related to the fact, that simply put, I am not a web designer and I haven't worked with CSS lately. My focus is on systems development and DevOps at the moment.

On the other hand, I think the logo that I have created back then still looks pretty slick and it stands the test of time. :)

Tools

Since I haven't been working on the web frontend lately, I am not up to date with the latest trends in CSS styling, so I knew that I want something that will help with the layout. CSS grid systems are around for a while and they can help you to create pretty complex layouts quickly and prototyping is so much easier using the grid utility classes.

If you are looking into grid systems, Bootstrap is pretty much the go to grid framework for many, and above that, it provides components, that are frequently updated to keep up with the trends in web design while keeping things simple, so it was a great fit with my minimal design goals.

Also, the Bootstrap team uses Sass to build the framework's CSS and since I already have been using Sass for the blog's stylesheets, it makes things pretty convenient: I have been able to use existing variables I had, like colors. Customizing Bootstrap was a breeze this way.

Needless to say, I went all in with Bootstrap.

For the code snippets, Prism JS has served me well all these years and I never had an issue with it, moreover my markdown plugin is set up to allow the specification of the snippet's language, that tells Prism JS what syntax highlight scheme to use. Hence, I have sticked with Prism JS of course.

On the other hand, there were some tools and libraries, that I have decided to drop. Most of these resources either had a replacement included with Bootstrap or became obsolete with time:

• Web fonts have been dropped in favor of Bootstrap 4's native font stack.
• Normalize.css was dropped as Bootstrap 4 includes a normalization component anyway.
• Fastclick is no longer needed, as the 300 ms touch delay is no longer present in modern browsers.
• Since I wanted a typography heavy, minimalist look, I have removed the dependency on Font Awesome icons.

Process

This section goes over the high level steps, that I have followed to update the blog's design.

First of all, I have removed all Jinja2 (HTML) template references to the resources I no longer planned to use, including webfonts, normalization stylesheets, JS libraries and icon packs.

Then I have removed all includes from the root Sass stylesheet file screen.scss that referred to the old styling, apart from references to Sass variables, like colors.

I am using GNU Make, I know I know, that's pretty old school, to build my project, which includes compiling the Sass source files to CSS, hence I had to update the sass command to search for includes in the Bootstrap Git submodule of my project, so that I can @include 'bootstrap'. Luckily, I have already used Bootstrap for the admin interface, so I only had to make sure, that the desired release tag is checked out in the submodule and update the compile command, which looked like this in Makefile after the update:

screen.css : $(scss_target)screen.scss
             sass --no-source-map \
             -I libs/bootstrap/scss \
             $(scss_target)screen.scss \
             $(css_target)screen.css

After a successful make build, that also included the Bootstrap styles, I started to prototype the layout using the grid utility classes (eg. row, col-5-sm), until I got pretty close to the layout that I wanted.

Once the grid was roughly figured out, I started to update the templates to use the Bootstrap components, like a responsive navigation bar and badges for the tags. I also made some adjustments to make the tag display logic fit better with the new layout.

Of course, there were some customizations done on the more nuanced details as well, like adding the circular green background to the logo, customizing text and link color and adjusting spacing.

Bootstrap has a lot of preset default variables, but you can define the variable before including Bootstrap if you are using Sass. Changing each variable can customize one aspect of the framework. For example, to change the default link color, I have a variable set in my _colors.scss file:

$link-color: $mintgreen3;

where $mintgreen3 is a variable I have defined previously.

Through this whole process, I kept playing with different viewport sizes to check the responsiveness of the page and see if there is any edge case to take care of.

After this, things started to come together, so to slim things down and make my classes more semantic, I have started to use my own HTML grid classes, defined with the help of the grid mixins provided by Bootstrap. For instance, to get the same effect as you would get using the row class on an HTML element, you can define a more semantic class and use the make-row() mixin in your Sass file.

Once all the grid layout classes were defined and working as expected, I was able to disable the generic grid classes in my _variables.scss file slimming my output CSS down considerably:

$enable-grid-classes: false;

Results

Now let's sum up the results. Although the new design is nothing fancy or particularly complicated, I really think it is pretty sleek and I like it a lot. That of course is very subjective, so let me share with you some objective results as well:

• Based on my time tracking, the redesign took 20 hours of work in total, including reading most of the Bootstrap docs and doing any additional research necessary.
• Page size has been reduced by roughly 50%, it sits around 550kB including all resources, which isn't too bad and there is room for further optimization.

All in all, I am satisfied with the outcome of this micro-project.