1. Basic HTML5 Page Template
To get us started I have included my very basic HTML5 webpage
template. This code snippet has the obvious doctype tag along with some
additional header scripts. The template makes reference to an external
page
styles.css for your stylesheet designs, which can be updated to anything.
Also I have included references to 2 Google-hosted scripts. The first
is jQuery 1.8.2 which is the most recent version as of this
publication. Then second I’m including the HTML5shiv document so that older versions of Internet Explorer can recognize newer HTML5 elements.
<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Default Page Title</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
</body>
</html>
2. Clearfix for CSS Floats
I learned about the CSS clearfix
method years ago when just first getting into coding. Most web
developers understand how floats work, but clearing floats brings in
some additional rules.
You should copy my code below into any CSS document you’re using with floats in a layout. Then you should append the
.clearfix
class onto any container elements with internal floats. This is useful,
for example, if you have 1 or 2 sidebars floating alongside your main
content and need to clear the lower footer content down to the bottom of
the page.
.clearfix:before, .container:after { content: ""; display: table; }
.clearfix:after { clear: both; }
/* IE 6/7 */
.clearfix { zoom: 1; }
3. CSS Browser Resets
Each web browser comes packaged with its own set of standard rules
for styling documents. By default if you include no other CSS rules
you’ll be given a set of standard fonts, margins, and padding for your
website.
Typically web developers want to remove these preset values so that
each browser will render the webpage exactly the same. Margins and
padding is one big area, but there are other topics as well. I’ve worked
out this snippet through Eric Meyer’s CSS resets while adding a few additional lines of, in my opinion, important code.
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
}
html { height: 101%; } /* always display scrollbars */
body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, Verdana, sans-serif; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; }
input { outline: none; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
4. Full CSS3 Gradients
The code below should create CSS3 gradients for nearly all web
browsers on the current market. It can be tough when you are working
with these new properties since there are so many rules to keep in mind.
Also you have to conform to CSS prefixes for alternate rendering
engines, and they’re tough to memorize!
background-color: #000;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#000');
background-image: -webkit-gradient(linear, left top, left bottom, from(#bbb), to(#000));
background-image: -webkit-linear-gradient(top, #bbb, #000);
background-image: -moz-linear-gradient(top, #bbb, #000);
background-image: -ms-linear-gradient(top, #bbb, #000);
background-image: -o-linear-gradient(top, #bbb, #000);
background-image: linear-gradient(top, #bbb, #000);
Just copy and paste these properties into any CSS selector which
needs a gradient background. Then you can modify the color values to
anything you like, including
rgba() syntax for
transparency. Internet Explorer has a lot of proprietary settings for
generating gradients inside the browser. But since many of these are
unsupported elsewhere you may choose to remove them from production
code.
5. CSS3 Transforms
This is a lesser-used property by developers because of the lack in
support from older browsers. But CSS transforms have changed the way
developers create user interfaces on websites. Thanks to browser
transforms you can generate custom tooltips and custom shapes with just a few lines of code.
-webkit-transform: perspective(250) rotateX(45deg);
-moz-transform: perspective(250) rotateX(45deg);
-ms-transform: perspective(250) rotateX(45deg);
-o-transform: perspective(250) rotateX(45deg);
transform: perspective(250) rotateX(45deg);
You will have to be careful about using the transform properties on
too many elements. These may sometimes cause ugly bugs with Internet
Explorer and some older versions of Firefox. Your designs will look best
if you can tack on other properties as well, such as box shadows or
rounded borders. Or alternatively offer a background image as a fallback
method.
6. Custom @font-face Typography
There have been plenty of tutorials explaining how to include your
own custom fonts using CSS3. The process isn’t as easy as designing text
in Photoshop, but you do get some neat effects in the browser. Use this
code snippet if you want to include copies of your own fonts and load a
unique
font-family value into your CSS.
@font-face{
font-family: 'MyFont';
src: url('myfont.eot');
src: url('myfont.eot?#iefix') format('embedded-opentype'),
url('myfont.woff') format('woff'),
url('myfont.ttf') format('truetype'),
url('myfont.svg#webfont') format('svg');
}
h1 { font-family: 'MyFont', sans-serif; }
Note that you will still need to setup the font-family property on
any elements you need using this font. Also you’ll want to provide at
least a
.woff file which is heavily supported by all
CSS3-based browsers. Ideally you should include copies of the fonts
which are OTF, TTF, EOT, WOFF, and SVG.
There is a fantastic tool online named Font2Web
which can actually do this conversion for you. They are limited to a
select number of requests per day, but it is one of the best free
solutions to generate copies of your fonts.
7. HTML Meta Tags for Responsive Layouts
Mobile responsive web designs have become extremely popular in the
past few years. As such it’s common to see more code snippets thrown
around and used for this purpose. To make things a bit simpler I have
included just a few meta tags which you can add into your document
<head> section.
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
The meta viewport tag is the only one which should be required for
responsive layouts. This will set the view on all screens at a 1×1
aspect ratio. This will remove the default functionality from smartphone
browsers which render websites at full-view and allow users to zoom
into the layout by pinching. The other two tags are supported in Mobile
IE and older smartphone browsers, but aren’t necessary for mobile
effects in your layout.
8. HTML5 Embedded Media
The new
<video> and
<audio>
tags are such a relief to developers who frequently work with digital
media. Images have always been supported on the web, but audio and
especially video files have been struggling for decent support going on a
long time now. Up until recently there were very few file types which
could stream video on all major Operating Systems.
<video poster="images/preview.png" width="1280" height="720" controls="controls" preload="none">
<source src="media/video.mp4" type="video/mp4"></source>
<source src="media/video.webm" type="video/webm"></source>
<source src="media/video.ogg" type="video/ogg"></source>
</video>
<audio controls="controls" preload="none">
<source src="music.ogg" type="audio/ogg">
<source src="music.mp3" type="audio/mpeg">
</audio>
Thankfully the audio and video tags share a similar syntax. We can use the
preload
attribute to start downloading data before the user even clicks play. I
tend to veer away from this method since we don’t always know if the
user is going to stream, and thus could be wasting bandwidth. But you
can feel free to customize these options as they best suit your needs.
Conclusion
I am sure there are some other awesome code snippets which have not
been covered in this article. I want to present this collection as a
very basic starter kit for web developers to build off. These are some
amazing solutions for creating killer HTML5/CSS3 websites.
Feel free to copy and share this article anywhere on the web.
Additionally you may back up these code snippets to a local file or
template on your computer. If there are any related codes or questions
you can think of, feel free to share with us in the discussion area
below.
source:
http://webdesignledger.com/tips/8-code-snippets-templates-for-new-website-projects
