{Carrer web log}

Blog about web design & development

picoCSS - really small JavaScript Framework

Thursday, April 28, 2011 { 15 Comments }

I've had some extra time during the Easter holidays and I did some JavaScript experiments. The result of that experiment is super small JavaScript library for basic CSS manipulation mainly for building iPhone, iPad and Android web apps.

This project has one objective DOM CSS manipulation with JavaScript that is optimized for webkit browsers(Safari, Chrome) and it will work in (Firefox, Opera) without the part of animation.

With this library you can do just three things insert inline CSS or manipulate CSS with changing the id and the class name of the HTML element. Also webkit CSS3 animation are supported. I've used Svetlo like selector engine.

The coding syntax looks like this:

p.select("#a").css("background-color : green; color: #fff;");


p.select("#b").animate('0.5', '1','360','1','1','1','1', '0','0');



And here are some examples (Safari/Chrome):

Example 1
Example 2
Example 3
Example 4

>> Download & Watch the library on GitHub

This Framework is not meant to be complete JS Framework like jQuery. It is just CSS helper library.

If you need small but complete framework for mobile development I suggest you check:

jQuery Mobile

All comments and suggestions are appreciated!

15 Responses to “picoCSS - really small JavaScript Framework”

  1. // Anonymous Anonymous // 4/29/2011

    The Example links arent' working.  

  2. // Blogger Vladimir // 4/29/2011

    @Anonymous: Sorry about that the hosting provider was experiencing some problems, but now is OK.  

  3. // Blogger arsh makker // 5/04/2015

    Hi Vladmir,

    The example links are not working again, Could you check please?


  4. // Blogger Vladimir // 5/04/2015

    @arsh makker: Sorry about that, the old links doesn't work anymore. All demos are also inside the files from GitHub.  

  5. // Blogger Vladimir // 5/04/2015

    @arsh makker: I updated the links :) Now it should work.  

  6. // Blogger tordenalf // 3/01/2016

    This is a great alternative to jquery, because of similar syntax and the ultra-lightweight of pico. I'm currently rewriting some jquery-code to use pico instead, but I'm having trouble figuring out how to implement an "each" loop with custom function (without adding the function to pico itself). It would be nice if you could provide a demo for doing that.


  7. // Blogger tordenalf // 3/01/2016

    Found a way to do something similar to a jquery each:

    var elements = p.select(selector).value;
    for (var i=0; i<elements.length; i++) {
    p.value = [elements[i]];
    p.css("background-color : green");

  8. // Blogger Vladimir // 3/01/2016

    @tordenalf Thanks for the comments!  

  9. // Blogger tordenalf // 3/02/2016

    In the methods for working with the elements, you have this code:

    this.value = this.each.call(this.value, function (i) {...

    As foreach always returns undefined, this.value will be set to undefined.

    I suggest you change the line so you do not set this.value:

    this.each.call(this.value, function (i) {...

    This will allow a select to be used more than once.

    It will allow chaining:
    p.select('.widget').att('class', 'big').css('background-color:green');

    And it will also allow this kind of usage:
    p.att('class', 'big');



  10. // Blogger tordenalf // 3/02/2016

    I use the jQuery "each" function a lot.
    In order to facilitate something similar, I changed my local picoCSS.js this way:
    - I removed the existing "each" function
    - I replaced all "this.each" with "[].forEach" in the javascript
    - I added this each function:

    each: function (fn) {
    [].forEach.call(this.value, fn);
    return this;

    Now, I can do a custom "each" the following way:

    p.select('div').each(function(elm) {
    p.value = [elm];

  11. // Blogger tordenalf // 3/02/2016

    Actually, when implementing the "each" function as suggested above, picoCSS can become even smaller, by utilizing the function in the methods. Ie the "css" method becomes:

    css: function (v) {
    return this.each(function (i) {
    i.style.cssText = v;

  12. // Blogger tordenalf // 3/02/2016

    The above suggestions are now implemented as a fork on github: https://github.com/rosell-dk/picoCSS  

  13. // Blogger Vladimir // 3/02/2016

    @Bjørn Thanks!  

  14. // Blogger tordenalf // 3/03/2016

    I went further, and have created a new library "picoQuery". It is based on picoCSS, but has the same syntax as jQuery, facilitating an easier shift away from jQuery. Its here: https://github.com/rosell-dk/picoQuery. Again, thanks for your great little piece of work, and thanks for encouraging using it freely  

  15. // Blogger Vladimir // 3/03/2016

    @Bjørn I've made few JQuery like alternatives, unfortunately I didn't find any time to publish them on github. Maybe one day :)  

Post a Comment

<< Home

RSS IconTwitter icon Twitter icon Twitter icon

About Me <<<

Name: Vladimir Carrer
vladocar [at] gmail.com
Location: Verona, Italy
I'm a web designer, developer, teacher, speaker, generally web addicted ...

My projects <<<

§§Previous Posts <<<

Hand Drawn Icons
Photoshop Wireframing Kit Ad

Other Profiles <<<

View Vladimir Carrer's profile on LinkedIn

Content is licensed under a Creative Commons Public Domain License