With features like on-the-fly processing, minification and more, it's built for PHP.
Need on the fly CSS preprocessing and minification or a PHP compiler? Don't have the time to learn a lot of new things? Welcome to Estilo.
Look at how a page looks in Estilo:
[[include: buttons.elcss]]
body{
background-color: [[var: body-background]];
color: [[var: text-color]];
}
a:link{
text-decoration: [[var: text-decoration-on-links]];
}
And this is the CSS Estilo generates:
.btn{border-radius:3px;background-color:rgba(255,255,255,.5);color:#fff;}.btn:hover{background-color:#rgba(255,255,255,.8);}body{background:color:#e5e5e5;color:#000;}a:link{text-decoration:none;}
It takes just a few minutes to learn Estilo.
Estilo has three PHP files - estilo.php, which is the Estilo engine, generate.php which is the script that generates CSS (you can link to that if you're using it on the fly) or cron it to compile the CSS. Estilo also has a file called constants.php and that's the file where you can change preferences. We'll talk about this a bit more in Constants
Okay, let's create a file and name it main.elcss. Now, you can write normal CSS as you would usually. If you need to include another file, just use this: [[include: filename.css]] or [[include: filename.elcss]]. Basically, if your file looks like this:
.btn{border-radius:3px;background-color:rgba(255,255,255,.5);color:#fff;}.btn:hover{background-color:#rgba(255,255,255,.8);}body{background:color:#e5e5e5;color:#000;}a:link{text-decoration:none;}[[include: buttons.elcss]]
body{background:color:#e5e5e5;color:#000;}
a:link{text-decoration:none;}
If you need to reuse a value, it's good practice to put in a variable. All variables in Estilo are stored in variables.elcss. For instance, you may reuse that font color. Use this to set it in variables.elcss.
text-color: #000;
[[include: buttons.elcss]]
body{background:color:#e5e5e5;color:[[var: text-color]];}
a:link{text-decoration:none;}
Let's compile it. Open up generate.php (by default, it also works on-the-fly, so you can link to it from HTML and it will work) and you'll get the compiled CSS, which will also be stored in the estilo-generated-css.css file. (You can change this location by changing a constant, we'll talk about that more later.) Estilo automatically generated CSS from your .elcss files and serves them minified.
A few tips: Spaces in [[include: derp.elcss]], [[var: derp]], and varname: value; are important syntactically and your code won't work without them. — Estilo only looks for variables in variables.elcss, so make sure you save them there.
Estilo has trouble with commenting out [[commands]], so you need to comment them out like this:
[[//include: derp.css]]
[[//var: some-ignored-command]]
Estilo is configured in constants.php, using - you've guessed it - PHP constants.
Basically, Estilo has these constants: default_file, show_results_on_generator, store_generated_css_in, minify_generated_css and on_the_fly.
Sets the default Estilo file, the file that Estilo starts looking and compiling from, must be an .elcss file. In our examples, it's main.elcss.
Should Estilo show the CSS it generates on generate.php? true or false, case sensitive. Must be true if on_the_fly is set to true.
Where should Estilo store the generated CSS? If you don't want Estilo to save the compiled CSS, use /dev/null as the value if you're on Linux.
Should Estilo minify the CSS it generates when compiling for faster load times? The compiled CSS will not contain spaces, whitespace and comments. true or false, case sensitive.
Should Estilo set the mimetype to text/css and allow generate.php to behave like a CSS file so you can use it as a link to a stylesheet in HTML and compile on-the-fly? true or false, case sensitive. If set to true, show_results_on_generator must be set to true as well for this to work
Want to contribute to Estilo? Great.
First of all, fork it on GitHub. Then, create your feature branch (git checkout -b my-really-epic-awesome-amazing-feature), commit your changes (git commit -am "Added something really awesome"), push to the branch (git push origin my-really-epic-awesome-amazing-feature). Then, create new pull request on GitHub. For more information on how to do this, read this GitHub Help article.
When contributing to Estilo, you irrevocably give the right to Estilo to use your code, modify it, relicense it, develop it further and transfer ownership of the code and all rights on it to the Estilo project. Your code will be available to the public under the :) Licence.
Estilo is licenced under the :) licence, the amazing licence by @idiot, like other Pulsir projects.