, ,

Why CSS loves PHP

css-phpHave you ever thought about CSS like about a simple programming language with simple syntax. Long hours of hard work suddenly disappear. Instead of writing many lines of code you can use a simple loop or easily define the whole layout grid. A few days ago I found a new framework called csscaffold. This is a PHP-powered CSS framework, its syntax is CSS friendly so you don’t need to learn a new syntax. Additionally this solution has very useful things embedded such as caching and minimizing css files. All of this happens in the background and is processed by PHP. csscaffold

You will see that the installation of this framework is very simple and you can do in a few steps.

1. Download the latest release of Scaffold. 2. Rename the downloaded file to scaffold 3. Place scaffold directory in CSS directory on your webserver. 4. Move css.htaccess into your css directory and rename it to .htaccess 5. Rename example-config.php to just config.php 6. Enjoy  it!!

Now I want to show you a few cool things in Csscaffold.

1: Constants

You are able to define your own  constants. Like you can see below it’s extremely simple.

@constants{ link-active: #98C8F5; link-no-active: #5E6164; }

2:  Mixins

Minxis are kind of functions available in this framework.
=function-name(!first_parametr, !second_parament){ color: !first_parametr; background: !second_parament; }
Assign functions to the selector:
.class-name{ +function-mane(#eee,#000000) }
Now this selector becomes:
.class-name{ color: #eee; background: #000000; }
What is this really cool about the built-in minxis is that the team of developers has done really well and they really define a lot. A few of them are: =border-box, =box-shadow(!blur, !color, !x, !y), =border-radius(!radius), =clearfix. Like you saw in the above example not every Mixins need parameters.

3: Iteration

You can simply build selectors by using loop.
@for !i from 1 to 12{ .li-!i { +function-name(!i); } }

4: Nested Selectors:

By nesting selectors you can remove mess from your code. Development becomes faster, simpler and cleaner.
#header{ ul{ horizontal-list; float(right); a{ color: !link-no-active; &:hover{ color: !link-active;} } } h1{ float(left);} }
This give us:
#header ul{margin:0;padding:0;zoom:1;display:block;float:right;display:inline} #header       ul:after{content:'\\0020';display:block;height:0;clear:both;visibility:hidden;overflow:hidden;font-size:0} #header ul li{list-style-type:none;margin-left:0;float:left;display:inline;white-   space:nowrap} #header ul a{color:#5E6164} #header ul a:hover{color:#98C8F5} #header h1{float:left;display:inline}

Plugins in csscaffold

To enable a plugin, place the folder in the scaffold/plugins/ directory and add the plugin name to your config.php file in the plugins array.

1: Layout Plugin

With this plugin you can easily create the whole layout.  Just enough few markup and all css for layout are done. To create simple 3 colum layout you only need:
@grid{ column-width:60; column-count:12; left-gutter-width:10; right-gutter-width:10; baseline:20; unit:px; } .container { +container; } +grid-classes; @constants{ link-active: #98C8F5; link-no-active: #5E6164;} #page{ #header         { +columns(12);} #content         { +columns(6);} #sub-content     { +columns(3); +float(right);} #aside         { +columns(3); +float(right);} #footer         { +columns(12);} }

2: image Replace Plugin:

This plugin creates new markup image-replace. With this plugin you can replace the element of any image.
#image { image-replace:url(../images/image.jpg); }
This markup gives us:
#image { background:transparent url(../images/image.jpg) no-repeat scroll 0 0; display:block; height:410px; width:480px; overflow:hidden; text-indent:-9999px; }

3: XML Constants Plugin:

This plugin allows us to define constants in XML file. If you want use this options you must edit config in  scaffold/plugins/xml_constants/config.php.
<?xml version="1.0" ?> <constants> <constant> <name>link-color</name> <value>color: red</value> </constant> </constants>
As I said at the beginning this post, csscaffold gives us big opportunity to develop faster and better. I look forward to a new release and plugins. If you want learn more about it please visit: http://anthonyshort.com.au/scaffold/#how-it-works http://wiki.github.com/anthonyshort/csscaffold