This blog is now online since nearly a year but I didn’t wrote a lot articles yet. Hopefully this will change in future. When I started my blog, I decided to use a ready-made WordPress theme, because I didn’t had the time, nor the motivation, to create one on my own. Now for the course Internet Technologies, I have to make an own website which uses some fancy HTML5 stuff, to receive the attestation for the final module examination. I took this opportunity to do what I should have done in the first place, to create an own WordPress theme for my blog. And what you can see now, is the final result.
For this theme I’ve used the following technologies and features:
- New semantic HTML5 Tags (section, aside, nav, header, footer, …)
- Responsive Design (Media Queries)
- LESS CSS
- semantic.gs (Grid System)
At this point, I want to spend a few extra words about semantic.gs. Before I started to implement the new design, I thought about using Twitter’s Bootstrap framework. I already worked with Bootstrap in another project and I really liked it, because you can create nice websites within minutes. What I do not like though, is the way how you have to use it. Instead of keeping your HTML clean and semantic, you have to stuff it with a lot of different classes. That, and the fact I would only need Bootstraps grid system, I decided to look for a grid framework only. After a little research I found semantic.gs which was exactly what I was looking for. It’s a tiny grid system which supports responsive design and LESS. And, as one could guess from the name, it’s also semantic, because you don’t define your grid in HTML but in CSS with LESS mixins. I know this is also possible in Twitter’s Bootstrap, but it’s not documented and that’s a no-go for me.
Here’s a little example of how you would create a simple layout in Bootstrap and how you would achieve the same thing with semantic.gs and LESS. Read More »