GrownCSS - Part I |
| Tuesday, 07 June 2011 |
|
This is the first part of a much bigger project which aims to give web designers a lot more control over their CSS, from putting the styles together to overriding existing styles or handling compatibility issues, to only mention a few. Behooooold GrownCSS! In this first part, please let me introduce you to the GrownCSS component and plugin for Joomla! 1.5 and 1.6. The general purpose of these two is to grab all the stylesheets on the page (<link>), crunch them, optimise them a little and output them as one stylesheet (compressed in GZIP if supported by the browser). The most obvious advantage of that being that you limit the number of requests when loading the page and speed up the loading time by also reducing file size. GrownCSS also caches the generated CSS, although I will be working on optimising that a lot more in the near future. You will need both the component and the plugin in order for it to work:
For information regarding the setup and configuration, or for a quick preview of what is to come, please read on. If you'd like to provide any feedback or suggest anything, do leave a comment.
Install both the component and the plugin in the usual Joomla way, then head to GrownCSS in your components' menu. Open the parameters (top right-hand corner), make sure 'dev mode' is set to 'yes', and save. Now go to the plugins manager and turn on the GrownCSS plugin (plg_growncss). Now if you refresh the frontend of your site, you should see that all your stylesheets have disappeared and have been replaced by one stylesheet (pointing to the GrownCSS component). In dev mode, the CSS code will be easy to read and separated by stylesheet, on the other hand no (blank space) 'compression' or caching happens. If you're happy with the result, just head back to the components' parameters and set 'dev mode' to 'no', and that's it! GrownCSS will also parse conditional comments for you and take them into account (e.g. [if IE lte 7]), by detecting the client's browser and only loading the relevant stylesheets. Any further modifications at this point require access to, and a bit of knowledge working with, the database. If you need to clear the cache (e.g. if you've made modifications to your CSS), simply empty the #__growncss_cache_css and #_growncss_cache_urls tables, I'll add a button to do that soon. One thing that might happen in certain cases, is that the stylesheets are getting loaded in the wrong order. If that ever happens, head to your favourite MySQL interface and go to the #__growncss_stylesheets table, there you'll see that there's an 'order' field, just update it on all the relevant rows (zero being the first to be loaded). I'm currently working on making a very simple interface for that, please stay tuned. As a 'side-effect' of taking conditional comments into account, you can actually target nearly any browsers and versions of browsers you want. Stylesheets conditions are held in the 'browsers' field of the #__growncss_stylesheets table as a serialized PHP array. You can either put conditional comments in your template which will get picked up automatically, or you can update the database yourself. The general idea being that you can use an IE-like conditional statement for any browser (e.g. [if FIREFOX lt 3.6]), have a look at the list of all the browsers you can target at the end of this article. On the longer term, the main purpose of GrownCSS is to provide a tool to help web designers have full and easy control over the CSS, this is where the module comes into play. At this stage I'm still working on the module, if you'd like to have an idea of what it will do, you're more than welcome to download it and try it out for yourself, although I have to warn you it only works properly with Firefox at the moment and the changes don't get saved. What this means however, is that overriding styles is already possible! Look at the #__growncss_stylesheets table, and take a note of the ID of the stylesheet in which the rule you want to override is. Now go to the #__growncss_rules table, put that ID in the 'stylesheet_id' field and specify your target in the 'name' field (e.g. #my_id .my_class), the 'enabled' field should automatically set itself to 1. Keep a note of the new ID and now go to #__growncss_values. For all the styles you want to add or override, just specify that last ID in the 'rule_id' field, populate the 'name' field with the property you want to target (e.g. font-size) and set the value (e.g. 12pt). The newly generated CSS (after making sure the cache has been cleared) should now take your new rules into account. It's not that complicated, but you'll be surprised to see how much easier the module will make all of this.
List of browsers you can target (conditional statement name: full name):
|
Comments
Regards!
Hi Leandro,
Thank you very much for trying the extension out and for your feedback!
I'm aware of the issue with media types and am currently looking into a proper solution to fix it.
Could you clarify what you mean in your second point regarding non-CSS files?
The ordering interface and other additional features are currently being implemented and I should have an update on this very soon! I've made this my priority as I understand this is not currently particularly user-friendly :)
I found some issues (Joomla 1.6):
- The plugin doesn't discriminate between diferents media types (screen vs print, etc);
- In my case, there is a problem with that do not contain CSS files (for example, humans.txt)
On the other hand, i would like view some features, for example, some interface which allows manage the order of the files.
¿Why not host the source code in GitHub?
Regards