Dies ist eine alte Version des Dokuments!
Web Development Toolbox
Code Snippet collection
Javascript
http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Namespacing
http://stackoverflow.com/a/2421949
(function() { var user = 'foo', variables = 'bar' savely; function private() { return true; } })();
jQuery Start Template
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/jquery-1.9.0.min.js"><\/script>')</script> <script> $(document).ready(function(){ $.post('backend.php', { action: 'value' }, function (data) { return data }); $.getJSON('backend.php?callback=?', { action: 'value' }, function(data) { console.log(data); return data.foo; }); // END: getJSON }); </script>
HTML
HTML5 Template
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8" /> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> <link href="style.css" type="text/css" rel="stylesheet" /> </head> <body> <div class="page" id="wrapper"> <header role="header" id="header"> <h1>Page Title</h1> </header> <div id="content"> <p>Foo Bar Content</p> </div> <footer role="footer" id="footer"> <p>© 2013</p> </footer> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script> $(document).ready(function(){ // jQuery Stuff }); // END jQuery.ready </script> </body> </html>
CSS
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) { }