ABOUT POSE
Pose (php powered css engine) is a lightweight php powered css engine that allows you to use variables, mixins, includes and even php directly in your css files. It can also merge multiple stylesheets into one css file and even minify it for you. Pose aims to make your stylesheets faster, smaller, easier to code and more dynamic.
Pose outputs 100% pure css, and uses standard .css files, so there’s no need for proprietary file extensions or anything that wont play nice with your current stylesheets. Installation is a snap as well, simply copy a couple files to your sites css directory and your ready go. And, pose is easy to customize. Most of it’s internal settings can be easily accessed & modified from a well commented configuration file.
On top of pose’s impressive css processing abilities, it also includes some cool extras like a collection of custom “shortcut classes”, the ability to automatically include a number css frameworks (52framework, 960gs, blueprint & bluetrip currently), as well as several of the most popular reset stylesheets (YUI2,YUI3, Eric Meyer and HTML5Doctor.com) with a single line of code.
WHO SHOULD USE IT ?
Pose is “powered by php” which mean that you do have to have php 5+ installed on your server to use it. However, you don’t actualy need to know a single thing about php in order to use pose. In fact, you don’t even have to use it in php files. You could be using plain old .html files and pose will still work just fine. So, even if you don’t know a lick of php, don’t worry. Just check with your web host to make sure that your server can run php scripts, and if it does (most do), then you can use pose for your website.
With that said, you absolutely do need to know css. You don’t have to be an expert, but you should at least have a basic understanding of how stylsheets work.
BROWSER COMPATIBILITY
Pose outputs 100% pure css code, and is compatible with every major browser. This compatibility however, extends only as far as the css you write. So, if you’re styling your site(s) using only the latest CSS3 techniques, you will get spotty browser support. Pose is pretty cool, but one thing it can’t do it force browsers to use styles they are not compatible with. On the flip side, if you are writing standards compliant css rules that are compatible with all browsers, then pose maintain that compatibility. Pose maintains whatever level of browser support you choose to implement. So if you code for minimal support that’s what you’ll get, and if you code to support everything, you’ll get that as well. It’s entirely up to you.
Please note that while you don’t actually need to know php to use pose, you do need to have php installed on your server. You could probably get away with running pose on a php 4 server, but I’m only officially supporting php 5. IIS support is in the works, and I have a basic version nearly finished, but currently pose can only be installed on Apache (or a similar server capable of translating .htaccess files).
A CRAZY SIMPLE EXAMPLE
Here’s a really simple example of how to use pose. It will show you what using pose looks like, but it doesn’t go into very much detail. I won’t really cover any of the syntax, naming rules or do much aside from showing you the raw code. It’s all covered in the documentation, so be sure to visit the docs for a more in depth guide on how to use pose.
Variables
Lets start with variables. For this example, let’s imagine there’s a specific color of blue that we want to use throughout our site. So, let’s create a variable called blue that will have a value of #0085bf:
!blue {#0085bf}
Simple enough, right? Now that the variable has been defined, you can use it anywhere in your stylesheet like this:
.blue_font {color:!blue!;}
.blue_background {background:!blue!;}
#a_blue_div {
background:!blue!;
width:100%;
}
Now, that’s what the code will look like to you, but pose will output it the browser like this:
.blue_font {color:#0085bf;}
.blue_background {background:#0085bf;}
#blue_div {
background:#0085bf;
width:100%;
}
This was a very broad and overly simple example. So if you feel lost, make sure you check out the docs for a proper introduction.
Mixins
Okay, so a mixin is basically variable that can hold more than one value, and that can have values passed to it from elsewhere in the stylesheet. Let’s say you want to utilize the new css3 round corners on your site. The code for this is not only hard to remember, but takes a long time to type out. So let’s try and setup a mixin to handle our corners. The code for mixins look very similar to functions in php or javascript. We’ll get creative and call our new mixin !round(), and include an internal variable called !amount that will determine what size of a radius our corners will have:
!round (!amount) {
border-radius: !amount;
-moz-border-radius: !amount;
}
There. Now our !round() mixin is all set up, let’s say you want all of your buttons to have an 8 pixel round corner, and you have a div with an id of “really_round” that you want to be rounded 40 pixels. Accomplishing this is as simple as:
#really_round { !round(40px) }
button {
padding: 8px;
!round(8px)
}
Again, that’s how the stylesheet looks in your code view, but here’s how it looks to the browser:
#really_round {
border-radius: 40px;
-moz-border-radius: 40px;
}
button {
padding: 8px;
border-radius: 8px;
-moz-border-radius: 8px;
}
And if you have nosy visitors that like to look at your source code, that’s what they’ll see as well. Whatever you code in pose is only seen by you. Everyone else will see only pure css.
CONCLUSION
So that was a crash course in pose css. Don’t forget to head over to posecss.com/docs for the proper documentation. There’s even a printable version (which currently in it’s printed state is 18 pages long).
HELP & TROUBLESHOOTING
While I’ve tried to document pose as much as possible, it can be hard to find the line between too much information and not enough. So, if you find yourself having trouble grasping any of the concepts, or run into any kind of problems using it, please don’t hesitate to contact me. You can reach me via Code Canyon, or by email anytime at support [ at ] posecss.com. I do my best to support my products as thoroughly as possible. So, if you run into trouble, I’ll do whatever I can to help you get out of it. But, please read through the documentation first to make sure your issue hasn’t already been covered. Also, if you have any ideas for improving pose, want to tell me how awesome it is, or how much you hate it, please get in touch as well. Thanks!