The foundational CSS Browser Reset file removes and neutralizes the inconsistent default styling of HTML elements, creating a level playing field across A-grade browsers and providing a sound foundation upon which you can explicitly declare your intentions.
Click here to grab a copy of the file to use and tweak as fits you best , or simply copy the CSS code below.
Show Code
/*
* CSS Browser Reset (CM)
*
* @author CrystalMinds <info@crystalminds.nl>
* @version 1.1
* @copyright 2012
* @license http://creativecommons.org/licenses/by-sa/3.0/
*/
*
{
margin : 0px;
padding : 0px;
border : 0px;
font-size : 100%;
font-weight : normal;
font : inherit;
text-align : left;
vertical-align : baseline;
background-color : transparent;
-o-appearance : none;
-o-text-size-adjust : none;
-o-touch-callout : none;
-o-user-select : none;
-o-tap-highlight-color : rgba(0,0,0,0);
-ms-appearance : none;
-ms-text-size-adjust : none;
-ms-touch-callout : none;
-ms-user-select : none;
-ms-tap-highlight-color : rgba(0,0,0,0);
-moz-appearance : none;
-moz-text-size-adjust : none;
-moz-touch-callout : none;
-moz-user-select : none;
-moz-tap-highlight-color : rgba(0,0,0,0);
-webkit-appearance : none;
-webkit-text-size-adjust : none;
-webkit-touch-callout : none;
-webkit-user-select : none;
-webkit-tap-highlight-color : rgba(0,0,0,0);
appearance : none;
text-size-adjust : none;
touch-callout : none;
user-select : none;
tap-highlight-color : rgba(0,0,0,0);
}
ol, ul
{
list-style : none;
}
blockquote, q
{
quotes : none;
}
blockquote:before, blockquote:after, q:before, q:after
{
content : '';
content : none;
}
table
{
border-collapse : collapse;
border-spacing : 0;
}
html, body
{
width : 100%;
height : 100%;
}
body
{
font-family : Helvetica, Arial, Sans-Serif;
font-size : 14px;
}
article, aside, details, figure, figcaption, footer, header, hgroup, nav, progress, section, audio, video, source, embed, track, canvas
{
display : block;
}
strong, b
{
font-weight : bold;
}
em, i
{
font-style : italic;
}
br.clear
{
clear : both;
}
The foundational HTML5 Base file helps you get a good foundation for your HTML5 website that also supports A-grade browsers. Click here to grab a copy of the file to use and tweak as fits you best , or simply copy the HTML code below.
Show Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
HTML5 Base (CM)
@author CrystalMinds <info@crystalminds.nl>
@version 1.0
@copyright 2012
@license http://creativecommons.org/licenses/by-sa/3.0/
-->
<html lang="YOUR_LANG" prefix="og: http://ogp.me/ns#">
<head>
<title>YOUR_TITLE</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta property="og:type" content="website" />
<meta property="og:url" content="YOUR_OPEN_GRAPH_URL" />
<meta property="og:title" content="YOUR_OPEN_GRAPH_TITLE" />
<meta property="og:description" content="YOUR_OPEN_GRAPH_DESCRIPTION" />
<meta property="og:image" content="YOUR_OPEN_GRAPH_LOGO" />
<meta name="description" content="YOUR_SEO_DESCRIPTION" />
<meta name="keywords" content="YOUR_SEO_KEYWORDS" />
<meta name="author" content="YOUR_SEO_AUTHOR_INFORMATION" />
<meta name="copyright" content="YOUR_SEO_COPYRIGHT" />
<meta name="expires" content="now" />
<meta name="robots" content="index all,follow all" />
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link rel="image_src" href="YOUR_LOGO" />
<link rel="shortcut icon" type="image/x-icon" href="YOUR_ICON" />
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="YOUR_MAIN_STYLESHEET" />
<script type="text/javascript" src="YOUR_MAIN_JAVASCRIPT"></script>
</head>
<body>
<header id="header" role="banner"></header>
<nav id="navigation" role="navigation"></nav>
<section id="main" role="main">
<article>
<header>
<time datetime="YYYY-MM-DD"></time>
<h1></h1>
</header>
<footer></footer>
</article>
</section>
<aside role="complementary"></aside>
<footer id="footer" role="contentinfo">
<small></small>
</footer>
</body>
</html>
Mobile Base Extension 1.0
The HTML5 Mobile Base Extension file extends the HTML5 Base file with mobile related meta data. Click here to grab a copy of the file to use and tweak as fits you best , or simply copy the HTML code below.
Show Code
<!--
HTML5 Mobile Base Extension (CM)
@author CrystalMinds <info@crystalminds.nl>
@version 1.0
@copyright 2012
@license http://creativecommons.org/licenses/by-sa/3.0/
-->
<html manifest="offline.appcache">
<head>
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="apple-touch-icon" href="YOUR_APP_IPHONE_ICON_57" />
<link rel="apple-touch-icon" href="YOUR_APP_IPAD_ICON_72" sizes="72x72" />
<link rel="apple-touch-icon" href="YOUR_APP_IPHONE_RETINA_114" sizes="114x114" />
<link rel="apple-touch-icon" href="YOUR_APP_IPAD_RETINA_144" sizes="144x144" />
<link rel="apple-touch-startup-image" href="YOUR_APP_LAUNCH_IMAGE_320x460" />
<link rel="apple-touch-startup-image" href="YOUR_APP_LAUNCH_IMAGE_640x920" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" />
</head>
<body>
<div id="viewport">
</div>
</body>
</html>
Outdated Browser Extension 1.0
I know that web developers are spending too much time supporting Internet Explorer 6. I understand, and I am here to help. Join me and others at ie6countdown.com in moving Internet Explorer ( less then 9 ) users to a modern browser. Click here to grab a copy of the file to use and tweak as fits you best , or simply copy the HTML code below.
Show Code
[CSS DOCUMENT]
#outdated-browser
{
background : #f7bc18; /* Old browsers */
background : url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iI2Y3YmMxOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMDQ5MjkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background : -moz-linear-gradient(top, #f7bc18 1%, #f04929 100%); /* FF3.6+ */
background : -webkit-gradient(linear, left top, left bottom, color-stop(1%,#f7bc18), color-stop(100%,#f04929)); /* Chrome,Safari4+ */
background : -webkit-linear-gradient(top, #f7bc18 1%,#f04929 100%); /* Chrome10+,Safari5.1+ */
background : -o-linear-gradient(top, #f7bc18 1%,#f04929 100%); /* Opera 11.10+ */
background : -ms-linear-gradient(top, #f7bc18 1%,#f04929 100%); /* IE10+ */
background : linear-gradient(top, #f7bc18 1%,#f04929 100%); /* W3C */
filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7bc18', endColorstr='#f04929',GradientType=0 ); /* IE6-8 */
}
#outdated-browser a
{
display : block;
margin : 0px auto;
width : 820px;
height : 42px;
overflow : hidden;
}
[HTML DOCUMENT]
<html>
<body>
<!--[if lt IE 9]>
<aside id="outdated-browser">
<a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
<img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0005_dutch.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
</a>
</aside>
<![endif]-->
</body>
</html>