Thursday, 6 December 2012

Css Frameworks and Less!

Lately, I haven't so much been writing too much raw PHP but rather PHP within a very popular CMS (Content Management System); Wordpress. 

Learning Wordpress?
I have been on a crash course of wordpress and website frameworks/helpers. I have seen quite a bit of job opportunities and even had a few questions from friends, and they all have been concerning Wordpress! So I figured I would have to expand my knowledge and took up learning how to create themes in Wordpress. I am halfway there. I then began to read an article on nettuts.tutsplus.com which gave advice when developing a theme. It highly suggested that a 'responsive design' approach should be taken, so that the blog displays well on all devices; PCs, laptops, tablets and phones. It suggested a few good responsive frameworks such as:
- bootstrap
- less framework
- Foundation and
- Yaml

This got  me onto Less.

Less?
I cannot believe I hadn't heard of Less sooner. I guess I'm still learning, but I shouldn't ignore/be scared of helpful frameworks. 

Less is just amazing and makes writing CSS so much easier. Just like how jQuery makes simple javascript tasks effortless. 

So say you want to style a list which had links in them, your css (without content) would look something like this:
#menu {
}
#menu li {
}
#menu li a {
}

Less allows you to do this:
#menu {     /*Styling for the whole menu goes here*/     #menu li {           /*styling such as positioning might go here*/           #menu li a {           /*Fancy styling for menu*/           }     }}
Oh that's just so amazing! And it's not even the best part. You can do things with variables even! You heard that right! You can have a variable resembling a certain margin offset value, or even a certain theme color that you have set. Variables can be used to help change wordpress themes, even! You can even reuse whole classes, as in you can reference it in another class, and that class will inherit all of its styling. With using another class you can also pass in a variable! So you can set the padding of certain boxes or the color of a something!  There is just so many goodies. The article I got this from was smashing magazine: 
http://coding.smashingmagazine.com/2010/12/06/using-the-less-css-preprocessor-for-smarter-style-sheets/
This will now make a huge difference in the way I approach CSS as it offers much much more flexibility and as a bonus it offers a much cleaner css (less) file. 

For all that it just takes a single .less file - which can contain both standard CSS and LESS styling - and lastly a single javascript file to compile the the LESS into css code. I might check out the PHP version since everyone doesn't all have Javascript enabled in their browsers, and it would be a complete sham if they turned up to your site and - because javascript is disabled - there are no styles. 

Anyway that's enough from me!



No comments:

Post a Comment

Feel free to leave a comment or question about my posts :)