Skip to content

Instantly share code, notes, and snippets.

@AmeliaBriscoe

AmeliaBriscoe/custom.js

Created August 21, 2012 17:33
Show Gist options
  • Save AmeliaBriscoe/3417602 to your computer and use it in GitHub Desktop.
Save AmeliaBriscoe/3417602 to your computer and use it in GitHub Desktop.
Download ZIP
HTML5 Basic Template with style sheet, javascript/jQuery file and responsive stylesheet
Raw
custom.js
$(document).ready(function() {
$("body").css("display", "none");
$("body").fadeIn(1000);
});
Raw
index.php
<?php
/*
* This is a HTML5 template to use for projects
*/
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Design Track</title>
<meta name="author" content="Amelia Smith">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="style.css" type="text/css" rel="stylesheet">
<link href="responsive.css" type="text/css" rel="stylesheet">
<script src="custom.js" type="text/javascript"></script>
<!--[if lt IE9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<!-- start of header -->
<header role="banner">
<!-- heading group -->
<hgroup role="heading">
<h1>Title</h1>
<h2>Subtitle</h2>
</hgroup>
<!-- end of heading group -->
<p></p>
<p></p>
<p></p>
<!-- site level navigation -->
<nav role="navigation">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
<!-- secondary navigation -->
<nav role="navigation">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
</header><!-- end of header -->
<!-- start of content-->
<div id="main-content">
<!-- start of section -->
<section class="track" role="main">
<h2></h2>
<p></p>
<article role="article">
<header>
<hgroup>
<h3></h3>
</hgroup>
<figure>
<img>
<figcaption></figcaption>
</figure>
</header>
<p></p>
</article><!-- end of atricle -->
<article role="article">
<header>
<hgroup>
<h3></h3>
</hgroup>
<figure>
<img>
<figcaption></figcaption>
</figure>
</header>
<p></p>
</article><!-- end of atricle -->
<article role="article">
<header>
<hgroup>
<h3></h3>
</hgroup>
<figure>
<img>
<figcaption></figcaption>
</figure>
</header>
<p></p>
</article><!-- end of atricle -->
</section><!-- end of section -->
<!-- start of aside Sidebar -->
<aside id="sidebar" role="complementary">
<form role="search">
SEARCH
</form>
<section>
<h3></h3>
<p></p>
</section><!-- end of section -->
<section>
<h3></h3>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</section><!-- end of section -->
<section>
<h3></h3>
<p></p>
</section><!-- end of section -->
</aside><!-- end of the aside sidebar -->
</div><!-- end of content -->
<footer>
<h3></h3>
<p></p>
<h3>SIGNUP TO THE NEWSLETTER</h3>
<p>Drop in your email address and stay up to date with the latest.</p>
<form>
<label>Name:</label>
<label>Email:</label>
<input value="SUBSCRIBE" type="button">
</form>
<p role="contentinfo"></p>
</footer><!-- end of footer -->
</div>
</body>
</html>
Raw
responsive.css
/**
* Defines media queries for web/ mobile/ tv
*
*/
/**
* For HD Devices
* 1921px and above
*
*/
@media screen and (max-width: 3840px) and (max-height: 3840px){}
@media screen and (max-width: 2400px) and (max-height: 2400px){}
/**
* For Web Devices
* 1024px and above
*
*/
@media screen and (max-width: 2399px) {}
@media screen and (max-width: 1919px) {}
/**
* For iPad Devices (portrait)
*
*/
@media only screen and (max-width: 1024px) {}
/**
* For Tablet Devices
* 601px and above
* iPad (landscape)
*/
@media screen and (max-width: 1023px) {}
/**
* For Mobile Devices
* 320px and above
*
*/
@media screen and (max-width: 799px){}
@media screen and (max-width: 499px){}
@media screen and (max-width: 419px){}
/**************** Height ******************/
@media screen and (max-height: 2399px){}
@media screen and (max-height: 799px){}
@media screen and (max-height: 499px){}
@media screen and (max-height: 419px){}
Raw
style.css
/* Table of Contents
*
* Fonts
* Defaults
* Hyperlinks
* Body
* Container
* Header
* Main Content
* Sections
* Articles
* Footer
*/
/* Define embedded fonts
------------------------------------------------------------ */
/* Defaults
------------------------------------------------------------ */
li,
ol,
ul {
margin: 0;
padding: 0;
}
.clr{
clear: both;
padding: 0;
height: 0;
margin: 0;
}
* {
margin: 0;
padding: 0;
}
/* Hyperlinks
------------------------------------------------------------ */
a, a:visited, a:hover {
text-decoration: none;
color: #73B7C5;
}
a:hover {
text-decoration: underline;
}
/* Body
------------------------------------------------------------ */
/* Container
------------------------------------------------------------ */
.container{
width: 100%;
position: relative;
}
/* Header
------------------------------------------------------------ */
.container > header{
margin: 10px;
padding: 20px 10px 10px 10px;
position: relative;
display: block;
}
/* Main Content
------------------------------------------------------------ */
#main-content{
width: 90%;
margin: 0 auto;
position: relative;
}
#main-content {
background-color: #F7F7F7;
box-shadow: 0 1px 3px #999999;
margin: 0 auto 20px;
padding: 25px 25px 20px;
overflow: hidden;
width: 910px;
}
/* Sections
------------------------------------------------------------ */
/* Articles
------------------------------------------------------------ */
/* Footer
------------------------------------------------------------ */
.container > footer{
margin: 10px;
padding: 20px 10px 10px 10px;
position: relative;
display: block;
/* text-shadow: 1px 1px 1px rgba(0,0,0,0.2); */
text-align: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment