Code Monkey home page Code Monkey logo

csdefault's Introduction

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.

csdefault's People

Contributors

pkoretic avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.