{Carrer web log} ←

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;");

or

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

or

p.select("#main").att("class","bumm");

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:

Zepto.js
Ender.js
jQuery Mobile

All comments and suggestions are appreciated!

15 Responses to “picoCSS - really small JavaScript Framework”

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

   The Example links arent' working.  

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

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

3. //  Unknown // 5/04/2015

   Hi Vladmir,
   
   The example links are not working again, Could you check please?
   
   REgards
   ARshdeep  

4. //  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. //  Vladimir // 5/04/2015

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

6. //  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. //  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. //  Vladimir // 3/01/2016

   @tordenalf Thanks for the comments!  

9. //  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.select('.widget');
   p.att('class', 'big');
   p.css('background-color:green');
   
   Regards,
   Bjørn
   
   
   
   
   
   
   
   
   
   
    

10. //  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];
    p.css('background-color:green');
    });
     

11. //  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. //  tordenalf // 3/02/2016

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

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

    @Bjørn Thanks!  

14. //  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. //  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