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
Name | Funktion |
---|---|
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 | https://github.com/antelle/passfield |
formvalid | 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 | https://github.com/toorshia/justgage |
PieChartsFavicon | https://github.com/lipka/piecon |
keyboardShortcuts | https://github.com/ccampbell/mousetrap |
QRcode | https://github.com/lrsjng/jQuery.qrcode |
multitouch | https://github.com/EightMedia/hammer.js |
TOC | https://github.com/jgallen23/toc |
fullscreen | https://github.com/sindresorhus/screenfull.js |
School
Namespacing
http://stackoverflow.com/a/2421949 – http://jsfiddle.net/xub6u/
HTML
HTML5 Template
CSS
Librarys
Grid https://github.com/grahammiller/ResponsiveGridSystem
noramlize https://github.com/necolas/normalize.css
buttons https://github.com/necolas/css3-github-buttons
http://necolas.github.com/normalize.css/
Siehe auch normalize_css_additional_style
Webkit font rendering
html { -webkit-font-smoothing: antialiased; }
Nicer Headlines http://aestheticallyloyal.com/public/optimize-legibility/
h1, h2 { text-rendering: optimizeLegibility; }
CSS Link Fade 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; }
/*-----------------------------------------------------------------------------------*/ /* 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) { }