Designers Hand – Dynamic Stylesheet

submit to reddit

Hi folks !! Today i am going to speak about the greatest problem we all face in CSS. It’s none other than writing your CSS code from scratch.

Hate writing vendor prefixes for all browsers ? Hate organizing your CSS files ? Hate hard coding the same values every time in the properties field?

Here comes the solution for you guys.

Just by typing this,

1
2
3
4
.banner{
border-radius: 2em;
box-shadow: #f2f2f2 0 0 5px;
}

You can get this,

1
2
3
4
5
6
7
8
.banner {
-moz-border-radius: 2em;
-moz-box-shadow: #f2f2f2 0 0 5px;
-webkit-box-shadow: #f2f2f2 0 0 5px;
-webkit-border-radius: 2em;
border-radius: 2em;
box-shadow: #f2f2f2 0 0 5px
}

But HOW ? CSSPrefixer does it for you!

CSS Prefixer turns your ‘Simple code’ into ‘Cross browser supported’ code. This Python Framework will include all the vendor prefixes for all browsers. See an example below,

Want to create a Dynamic Stylesheet with reusable values?
LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. Less is a well known CSS Preprocessor application created in PHP. LESS will allow you to specify widely used values in a single place. It’s cool isn’t it ! Lets see some examples below.,

{Courtesy LESSCSS.Org}

You can check the Less code in the above Screen shot. It declares a new reusable color variable, so that, whenever we need to change the color, we can go ahead and change the color value in single place. It makes life easy :) Lets see another example.,

You can find the list of CSS Preprocessors @ Speed up development time.

Stay tuned for more “Make your life easy” kind of posts :)