adastra.me

 

The Mess that is CSS

06 Sep 2015   647 words   , , , ,

closeThis post was published 6 years 1 month 10 days ago, which probably makes it incredibly outdated. It may not represent my current opinion on the subject, it may be an incoherent mess or it may just be way below the standards of my more recent posts. Please keep this in mind when reading.

Now that my blog is receiving such an unusual amount of attention by me, I was heavily reminded that I’ve been wanting to give it a new look for about half a year. And look, it has a new look! I actually stole the general idea for this layout from the “Freak” WordPress Theme, but this new layout here is almost 100% self-coded by me (and SO much better!). Here’s a screenshot, in case you’re reading this from a feed reader:

Screenshot 2015-09-06 10.30.09

Whenever I come across nice looking WordPress Themes, I’m always astonished by just how messy and cluttered they are. There is almost always quite a lot of stuff I would want to improve when I use pre-made themes, but just trying to wrap my head around the messy CSS and PHP in those themes sometimes takes days. So rather than trying to do just that with the Freak theme, I started completely from scratch – with a little help from Bootstrap.

This was actually the first time ever that I worked with Bootstrap – which shows how incredibly out of touch I have become with the web dev world. I haven’t really coded much since I started university 4 years ago, and 4 years is an aeon in web dev time. Everything is completely different – for one everything is responsive nowadays! No more IE6 optimization! Lots of fancy CSS3! More fun! Anyway, Bootstrap is really awesome and I wonder how people ever managed without frameworks like that.

Now with all of this as a basis, I named my new WordPress Theme “Freaky Bootstraps”. If you are familiar with the Freak theme, you will have noticed that I got rid of the ridiculously huge header and replaced it with a all-in-one header that either uses featured images or excerpts. I made the thumbnails on the front page all the same size, and if there is none, there’s an excerpt. I added a word count to all posts, since word count has become quite an interesting aspect of writing for me since I started university. I also kept the colors of my previous layout, because I like them I and usually keep at least something when I change layouts. As a reminder, here’s my previous layout:

Screenshot 2015-09-06 10.30.59

It was pretty buggy, because those excerpts were actually supposed to expand on click, but somehow that feature stopped working a few weeks after I switched to that layout. Sadly, my new layout is still a bit buggy as well, since I don’t really care enough to figure out how to fix the header to the top underneath the WP bar (which you probably won’t see) and how to make the comment reply box embedded into the comment you’re replying to.

Some of these bugs are probably a result of my drastic housekeeping. My previous layouts were basically other WordPress themes (usually the standard twentysomething themes) which I then adapted to the layout I created in Photoshop or in CSS. This time, however, I threw out all the files and re-created everything from scratch, using really only the files I need for this theme. Why adapt files like content-aside.php, content-video.php, author.php, etc. when I don’t use them anyway? Same goes for the majority of stuff in the functions.php.

So even though I put such an effort into cleaning up, it basically turned into a mess yet again. This always happens when I code CSS; it starts out so neatly, and then suddenly, everything is crazy convoluted! I don’t really know how I managed to create such a mess yet again, but I’m just to lazy to clean it up as long as everything looks and works the way it should (more or less).

I hope you will enjoy reading my future ramblings on this new layout. Let me know if you find any other bugs that I haven’t mentioned above!

One comment on “The Mess that is CSS

  1. Georgie says:

    Looks good! I like the clean look and the colours. I feel the same way about my own code – I used to never start from scratch, instead just butchering my previous template/theme to create my new one. Recently I decided to completely rewrite parts and remove certain things I don’t need. Although there are crazy bits of legacy code in my work, I like to take the time to re-do bits and bobs.

    I generally think that everything can be improved so I know I have bugs in my theme too. I have some annoying CSS hacks on my homepage on the mobile-friendly version, which I could really have done more effectively with PHP. But if we tried to get everything perfect in the first go, we would end up never publishing our themes. xD

Leave a Reply