shahidnajam / csDefault

universal cross browser library to style elements - started as jqtransform replacement based only on CSS(3) and jquery

Home Page:www.pkoretic.net

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

csDefault

Official site and demo: http://www.pkoretic.net/csDefault
30.01.2012 - started
05.08.2012 - renamed to csDefault (since CSS3PIE is not used anymore no point to have it called csTransPie - and it's shorter!)

Development
It is and it will always be under active development.
New page and domain are still in progress.
Library is considered stable.

It's designed as a very lightweight cross-browser CSS(3) library which would give all elements styling they need
It's less than 14kb minified - 3kb gzipped

(note: jquery 1.7 is needed - http://api.jquery.com/on/)

All elelemts are regular html elements with style applied - no html breaking!
elements are only styled and 'fixed' to be cross browser compatible

All elements are created with CSS(3) without images (still, I like radio and checkboxes more with background images so they are using it - 673 bytes in size)

Cross-browser

**try it in IE**! Notice how everything looks the same as in other browsers - using CSS! (Note that css3PIE is not used anymore, see the CSS file for details) Tested in Chrome, Firefox 5+, Opera, IE 7+, Android 2.3, Opera Mobile, Firefox Mobile, Safari 5 - **please test** more and **report back**! Note: Opera mini has opacity problems which makes 'select element' having two text options (I've opted to using less javascript which makes library faster and cleaner so this is the side effect of CSS solution - bug has been reported to opera mini devs)

All suggestions are welcome.

Download and usage

Download it here from git and add

  <link rel="stylesheet" type="text/css" href="csDefault-min.css" />  
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>  
  <script type="text/javascript" src="csDefault-min.js"></script>  

And that's it! All element's will get styled as soon as the DOM is ready

csDefault has all the comments for easier development
csDefault-min is obviously minified version

Dynamic elements
If you have elements created dynamically call csUpdate function on (parent) element which was created dynamically

recommended way

  $("body").append('<input type="checkbox"/>').csUpdate();

or

  $("body").append('<div id="dynamic"><input type="checkbox"/></div>');  
  $("#dynamic").csUpdate();

Note: Calling .csUpdate function on any sort of text fields or buttons is not needed for the sake of element styling but there are titles and labels for that element that won't get styled unless you do call it.

TODO

New page and demos

LICENCING

The code is released under public domain.
Anyone is free to copy, modify, publish, use, sell, or distribute the original code, for any purpose, commercial or non-commercial, and by any means.

About

universal cross browser library to style elements - started as jqtransform replacement based only on CSS(3) and jquery

www.pkoretic.net