I decided yet again to throw together a new design for this site. At this point it feels like it’s almost getting a monthly thing, but hopefully I’ll stick with this one for a bit longer. I do really feel that I’m getting a bit better every time I do it though, which is something. This time around I took a much more OOCSS approach to the writing of the CSS and I mainly used the BEM syntax. I don’t find it particularly pretty but it’s quite logical.
Another thing I did was that instead of prefixing the classes of every major
part of the site with
site- I went for a much simpler
l-, which stands for
“layout”. I also used
br-, “breakpoint”, for the buttons in the main
navigation. They get much wider when the site’s viewed on a small screen and
instead of having to write a lot of code I simply added a class to them. Very
convenient! If I had more “media query”-based classes I probably would’ve used
other names for them, but as of right now it works well I think.
I once again used Sass’ excellent
lighten functions to generate the color palette. I can’t imagine how I’d do
without them, to be honest. Like I mentioned earlier I feel that I’m getting
better at designing in general but I’m not designer by far.
I finally added syntax highlighting too. For some reason I completely missed that Highlight.js, the engine that I now use, actually detects the language automatically without me having to add classes and span tags by hand. All the code is suddenly much more readable! I removed the Vim keybindings script for the site. It was getting on my nerves and the code looked truly awful.
And that’s a wrap!