Skip to content

Instantly share code, notes, and snippets.

@Teino1978-Corp

Teino1978-Corp/all-in-one.html

Forked from arpanpal010/all-in-one.html
Created October 28, 2015 05:48
Show Gist options
  • Save Teino1978-Corp/efd9919434849a8f53a0 to your computer and use it in GitHub Desktop.
Save Teino1978-Corp/efd9919434849a8f53a0 to your computer and use it in GitHub Desktop.
Download ZIP
HTML/CSS/JS Minimal Template
Raw
all-in-one.html
<!doctype html>
<html>
<!--
TODO:
----
write things to do here
-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!--link href="./images/favicon.svg" rel="icon" type="image/x-icon" /-->
<!--[IF lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>
HTML5 Template
</title>
<!-- ######################################################## -->
<!-- CSS #################################################### -->
<!-- ######################################################## -->
<!--link rel="stylesheet" type="text/css" href="./stylesheets/styles.css"-->
<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
/* Basic element styles */
* {}
html {}
body {
background: #FBFBFB;
margin: 0;
height: 100%;
font-family: "Open Sans", sans;
font-size: 20px;
font-weight: 300;
color: #000;
overflow: hidden;
}
p {}
a { color: #39C;}
hr {
border:none;
background-color: #D6D6D6;
}
h1, h2, h3, h4, h5, h6 {}
h1 { font-size: 2.0em;}
h2 { font-size: 1.7em;}
h3 { font-size: 1.4em;}
h4 { font-size: 1.1em;}
h5 { font-size: 0.8em;}
h6 { font-size: 0.5em;}
strong, em {}
table{}
tr, th {}
td{}
pre, code, blockquote {}
ul, ol { margin: 0;}
ul li {}
img {}
span{}
form {}
input {}
/*-- ######################################################## -- */
/* Page layout styles */
header {}
nav {}
aside {
padding-top: 0.5em;
padding-bottom: 0.5em;
}
main {}
section {
padding-top: 0.5em;
padding-bottom: 0.5em;
}
article {}
footer { /*add footer height as padding-bottom in #contents-wrapper */
position: absolute;
bottom: 0;
min-height: 2em;
padding-top: 0.5em;
}
/*-- ######################################################## -- */
/* Classes */
.clear { clear: both;}
.full-width { width: 100%;}
.no-margin { margin: 0;}
.no-padding { padding: 0;}
.left {
float: left;
text-align: left;
}
.center {
float: none;
text-align: center;
}
.right {
float: right;
text-align: right;
}
/*-- ######################################################## -- */
/* Elements */
#contents-wrapper {
width: 100%;
min-height: 100%;
position: absolute;
padding-bottom: 4em; /* height of footer */
}
/*-- ######################################################## -- */
/* Responsive properties */
@media screen and (max-width: 960px) {}
@media screen and (max-width: 720px) {}
@media screen and (max-width: 640px) {}
@media screen and (max-width: 480px), handheld and (orientation: portrait) {}
@media screen and (max-width: 320px) {}
@media print {}
</style>
<!-- ######################################################## -->
<!-- JS ##################################################### -->
<!-- ######################################################## -->
<!--script type="text/javascript" src="./js/common.js"></script-->
<script>
//common js here, rest of them inside page elements
</script>
</head>
<body>
<div id="contents-wrapper">
<!-- ######################################################## -->
<!-- Header ################################################# -->
<!-- ######################################################## -->
<header>
<!-- header stuff like logo, nav here. -->
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
</header>
<!-- ######################################################## -->
<!-- Aside ################################################## -->
<!-- ######################################################## -->
<aside>
<!--sidebar stuff goes here -->
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
</aside>
<!-- ######################################################## -->
<!-- Section################################################# -->
<!-- ######################################################## -->
<section>
<!--main content goes here -->
<p>This is some normal text in a paragraph.</p>
<a href="">This is a link</a>
<hr/>
<table>
<tr>
<th>
Table head1
</th>
<th>
Table head2
</th>
<th>
Table head3
</th>
</tr>
<tr>
<td> Table data1.1</td>
<td> Table data1.2</td>
<td> Table data1.3</td>
</tr>
<tr>
<td> Table data2.1</td>
<td> Table data2.2</td>
<td> Table data2.3</td>
</tr>
<tr>
<td> Table data3.1</td>
<td> Table data3.2</td>
<td> Table data3.3</td>
</tr>
</table>
</section>
<!-- ######################################################## -->
<!-- Footer ################################################# -->
<!-- ######################################################## -->
<footer class="clear full-width center">
<!--credits, copyright, and contact goes here -->
<p>&copy; Arpan Pal 2014</p>
</footer>
</div>
</body>
</html>
Raw
common.js
<!-- ######################################################## -->
<!-- JS ##################################################### -->
<!-- ######################################################## -->
<!--script type="text/javascript" src="./js/common.js"></script-->
<script>
//common js here, rest of them inside page elements
</script>
Raw
index.html
<!doctype html>
<html>
<!--
TODO:
----
write things to do here
-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!--link href="./images/favicon.svg" rel="icon" type="image/x-icon" /-->
<!--[IF lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>
HTML5 Template
</title>
<!-- ######################################################## -->
<!-- CSS #################################################### -->
<!-- ######################################################## -->
<!--link rel="stylesheet" type="text/css" href="./stylesheets/styles.css"-->
<style>
<!--this-page-only styles here, rest in styles.css-->
</style>
<!-- ######################################################## -->
<!-- JS ##################################################### -->
<!-- ######################################################## -->
<!--script type="text/javascript" src="./js/common.js"></script-->
<script>
//common js here, rest of them inside page elements
</script>
</head>
<body>
<div id="contents-wrapper">
<!-- ######################################################## -->
<!-- Header ################################################# -->
<!-- ######################################################## -->
<header>
<!-- header stuff like logo, nav here. -->
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
</header>
<!-- ######################################################## -->
<!-- Aside ################################################## -->
<!-- ######################################################## -->
<aside>
<!--sidebar stuff goes here -->
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
</aside>
<!-- ######################################################## -->
<!-- Section################################################# -->
<!-- ######################################################## -->
<section>
<!--main content goes here -->
<p>This is some normal text in a paragraph.</p>
<a href="">This is a link</a>
<hr/>
<table>
<tr>
<th>
Table head1
</th>
<th>
Table head2
</th>
<th>
Table head3
</th>
</tr>
<tr>
<td> Table data1.1</td>
<td> Table data1.2</td>
<td> Table data1.3</td>
</tr>
<tr>
<td> Table data2.1</td>
<td> Table data2.2</td>
<td> Table data2.3</td>
</tr>
<tr>
<td> Table data3.1</td>
<td> Table data3.2</td>
<td> Table data3.3</td>
</tr>
</table>
</section>
<!-- ######################################################## -->
<!-- Footer ################################################# -->
<!-- ######################################################## -->
<footer class="clear full-width center">
<!--credits, copyright, and contact goes here -->
<p>&copy; Arpan Pal 2014</p>
</footer>
</div>
</body>
</html>
Raw
style.css
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
/* Basic element styles */
* {}
html {}
body {
background: #FBFBFB;
margin: 0;
height: 100%;
font-family: "Open Sans", sans;
font-size: 20px;
font-weight: 300;
color: #000;
overflow: hidden;
}
p {}
a { color: #39C;}
hr {
border:none;
background-color: #D6D6D6;
}
h1, h2, h3, h4, h5, h6 {}
h1 { font-size: 2.0em;}
h2 { font-size: 1.7em;}
h3 { font-size: 1.4em;}
h4 { font-size: 1.1em;}
h5 { font-size: 0.8em;}
h6 { font-size: 0.5em;}
strong, em {}
table{}
tr, th {}
td{}
pre, code, blockquote {}
ul, ol { margin: 0;}
ul li {}
img {}
span{}
form {}
input {}
/*-- ######################################################## -- */
/* Page layout styles */
header {}
nav {}
aside {
padding-top: 0.5em;
padding-bottom: 0.5em;
}
main {}
section {
padding-top: 0.5em;
padding-bottom: 0.5em;
}
article {}
footer { /*add footer height as padding-bottom in #contents-wrapper */
position: absolute;
bottom: 0;
min-height: 2em;
padding-top: 0.5em;
}
/*-- ######################################################## -- */
/* Classes */
.clear { clear: both;}
.full-width { width: 100%;}
.no-margin { margin: 0;}
.no-padding { padding: 0;}
.left {
float: left;
text-align: left;
}
.center {
float: none;
text-align: center;
}
.right {
float: right;
text-align: right;
}
/*-- ######################################################## -- */
/* Elements */
#contents-wrapper {
width: 100%;
min-height: 100%;
position: absolute;
padding-bottom: 4em; /* height of footer */
}
/*-- ######################################################## -- */
/* Responsive properties */
@media screen and (max-width: 960px) {}
@media screen and (max-width: 720px) {}
@media screen and (max-width: 640px) {}
@media screen and (max-width: 480px), handheld and (orientation: portrait) {}
@media screen and (max-width: 320px) {}
@media print {}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment