I like many others are always looking towards new ways to improve our workflow habit’s so we can cut down on our development time making our day-to-day job much more enjoyable for us and keeps our clients happy, one new technology that has been a big hit for pretty much the last two years now is preprocessors for CSS which can be explained by the following quote by Wikipedia.
In computer science, a preprocessor is a program that processes its input data to produce output that is used as input to another program. The output is said to be a preprocessed form of the input data, which is often used by some subsequent programs like compilers.
We can take advantage of these preprocessors by making simple and advanced maths that normally we couldn’t if we used a plain old .css file, because of these advantages we can also extend the abilities the compilers can manage allowing for the most efficient style sheet a developer could ever hope for.
I’m now starting to get a little deeper into the LESS CSS language and i thought i would challenge myself early on, basically i wanted to create a namespace that contained functions i could reference for things such as box-shadow and border-radius. The problem i found instantly is that while setting static vars is great and all it’s not ideal for dynamic values that you may want to use in a non standard order, to overcome the problem i did a little reading on the LESS CSS website and found i could reference @arguments to retrieve all the values given in the function and then use ~',' to escape the comma so i could then for instance create multiple box shadows without the need to call the namespace again and again.
So to start off with i simply created the namespace and the function with an empty argument reference so that it didn’t expect any specific value pattern which would cause parsing errors, next i simply set the vendor prefixed properties for box-shadow and passed @arguments as the value: Read more…
Chris Coyier shows us the benefits of using Sprite Cow which is a one of a kind online tool that allows us to see image positions within a sprite without the need to manually collect all the values in Photoshop for example, because of its power Chris decides to integrate sprites for browser support for a new of area of CSS-Tricks which will be public within the next month.
Unlike using normal syntax LESS allows you to code using a specific design pattern using nested selectors and function references that allow for default and custom arguments, when you think about how much time you spend coding vendor prefix specific syntax and other properties you really can start to see the bigger picture and why using LESS can improve the overall time in which it takes to develop a stylesheet. Read more…
So Chris Coyier posted a screencast about responsive web design which i am aware of and know how to use but when it comes to re-arranging pre-existing web designs i am hopeless as i don’t have the creative wisdom that most others do, never the less i want to share what i know about the topic and how you can use it to do some pretty cool stuff in modern browsers and on most mobile devices.