Dies ist eine alte Version des Dokuments!
Web Development Toolbox
Rule the InterWebz
Javascript
http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Librarys
Funktion | Link |
---|---|
Markdown | https://github.com/chjj/marked |
Lightbox | https://github.com/dimsemenov/Magnific-Popup |
Templates | https://github.com/blueimp/JavaScript-Templates |
Templates | https://github.com/archan937/templayed.js |
Password Fields | https://github.com/antelle/passfield |
Form validation | https://github.com/guillaumepotier/Parsley.js |
Grid | https://github.com/suprb/Grid-A-Licious |
Datepicker | https://github.com/dbushell/Pikaday |
Extract Values | https://github.com/laktek/extract-values |
Number Format | https://github.com/adamwdraper/Numeral-js |
Instrumente Cancas | https://github.com/toorshia/justgage |
Pie Chart Favicon | https://github.com/lipka/piecon |
Keyboard Shortcuts | https://github.com/ccampbell/mousetrap |
QRcode | https://github.com/lrsjng/jQuery.qrcode |
Multitouch | https://github.com/EightMedia/hammer.js |
TOC Inhalt | https://github.com/jgallen23/toc |
Fullscreen | https://github.com/sindresorhus/screenfull.js |
Tabs | https://github.com/aarondo/tabulous.js |
School
Namespacing
HTML
HTML5 Template
CSS
Librarys
Funktion | Link |
---|---|
Grid | https://github.com/grahammiller/ResponsiveGridSystem |
Normalize | https://github.com/necolas/normalize.css |
Buttons | https://github.com/necolas/css3-github-buttons |
Webkit font rendering
html { -webkit-font-smoothing: antialiased; }
Nicer Headlines
http://aestheticallyloyal.com/public/optimize-legibility/
h1, h2 { text-rendering: optimizeLegibility; }
CSS Animation
a { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
The new Box Model
http://paulirish.com/2012/box-sizing-border-box-ftw/
* { -moz-box-sizing: border-box; box-sizing: border-box; }
Media Queries
/*-----------------------------------------------------------------------------------*/ /* CSS3 Media Queries for Responsiveness (mobile-first, from small to big) /*-----------------------------------------------------------------------------------*/ /* --- smartphones in landscape mode --- */ @media screen and (min-width: 480px) { } /* --- tablets in portrait mode --- */ @media screen and (min-width: 768px) { } /* tablets in landscape mode */ @media screen and (min-width: 1024px) { } /* standard laptop + desktop screens */ @media screen and (min-width: 1192px) { }