Getting up to date on CSS24 Aug 2014
I have been coding in CSS for a few years. I started when IE6 was the major browser but had to stop when HTML5 started to became a buzzword. Too bad. At that time, I had a job where I mostly handled server-side stuff and couldn't really keep on the newest CSS topics. Then I took a year off abroad.
Now that I'm back, I decided to get up to speed with all the goodness the CSS world now has to offer. I decided to rewrite the default Hyde theme of this blog with my own to better understand how it's done. Here is what I learned along the way.
This is the first time I'm using a preprocessor, and the simple joy of being able to use variables and mixins is great. The nesting is nice but I try not to use it too much. I'd rather have a OOCSS naming convention than too much hierarchy in my selectors.
I added autoprefixer instead of SCSS mixins to handle cross-browser compatibility as it seems a more future-proof approach. It leaves the underlying SCSS files simpler to read.
I grabbed a font on FontSquirrel to use on the titles. I simply copy-pasted the relevant CSS code, but still do not understand all the details of it. I'll have to read a bit more to really understand the browsers it covers.
I started using
rem units as most as I could. This really removes the burden
of having to handle the math involved in using
em. I still had to use
for media-queries, though.
I still struggle in remembering which one of
min-width I need
to use in a given context, but otherwise media-queries are great. I coded first
for the perfect (or optimal) layout, and then added media-queries to handle
bigger and smaller screens.
In my case optimal means enough space to display the sidebar and the text in a way that's easily readable. I then transformed the sidebar into a header for smaller screens, and even added a menu icon to display the menu on really small screens.
It's nice how SCSS lets you define media-queries inside of selectors, and using variables for you breakpoints. This really fluidified the way I write code.
I had to resort to two small CSS tricks (or mind puzzle) for this new design.
I like bending my mind to find creative solutions with a declarative language
like CSS. Here I created a menu (hamburger) icon in pure CSS using
:after borders. I also displayed a menu when this icon is clicked using
<label> bound to a
checkbox and selecting the menu with a clever
Tags : #css
Want to add something ? Feel free to get in touch on Twitter : @pixelastic