Permalink
Browse files

All that goodness.

  • Loading branch information...
1 parent ff52fdb commit 1e9dc91e0f6091c4c35e0ca3331d5c2268f914ee @helloferdi committed May 8, 2012
Showing with 234 additions and 2 deletions.
  1. +26 −2 README.md
  2. +16 −0 _inc/footer.inc
  3. +24 −0 _inc/head.inc
  4. +5 −0 _inc/navmain.inc
  5. +57 −0 _inc/navsec.inc
  6. +57 −0 _lib/css/main.css
  7. +16 −0 _lib/script/functions.js
  8. +4 −0 _lib/script/jquery-1.7.2.min.js
  9. 0 _lib/script/plugins.js
  10. +29 −0 index.php
View
@@ -1,4 +1,28 @@
-FrontEndBoilerplate
+FrontEnd Boilerplate
===================
-Boilerplate stuff to hit the ground running when creating a new prototype/template.
+Been using this boilerplate setup for a while now and it enables me to hit the ground running when creating a new template. File structure is pretty self-explanatory, which makes it easy to find your sources and keeps things tidy.
+
+The boilerplate includes a stripped down version of the HTML5 boilerplate, a CSS reset and the latest version of jQuery. Header, footer, main navigation and secondary navigation are found in the _inc folder, for your include happiness.
+
+In the header of your page, just declare two variables:
+
+ <?php
+ $ttl = 'Home';
+ $loc = array(0,0,0,0);
+ ?>
+
+The former being the page title and the second being the location of where the current page lives within the site. (0 being the first occurance on that level). So for example if we take this simple sitemap:
+
+* Home (0)
+* Energy Drinks (1)
+ * Monster (0)
+ * Red Bull (1)
+ * Normal (0)
+ * **Light** (1)
+ * Relentless (2)
+* Cigarettes (2)
+ * Chesterfield (0)
+ * PallMall (1)
+
+The page that would live at Red Bull Light would have $loc = array(1,1,1,0);
View
@@ -0,0 +1,16 @@
+<div id="footer">
+ Footer
+</div>
+
+<div id="copyright">
+ Copyright &copy; <?php echo date('Y'); ?>
+</div>
+
+</div> <!-- Container Closure -->
+
+<script type="text/javascript" src="/_lib/script/jquery-1.7.2.min.js"></script>
+<script type="text/javascript" src="/_lib/script/plugins.js"></script>
+<script type="text/javascript" src="/_lib/script/functions.js"></script>
+
+</body>
+</html>
View
@@ -0,0 +1,24 @@
+<!doctype html>
+<!--[if IE 6]> <html lang="en" class="nojs ie6"> <![endif]-->
+<!--[if IE 7]> <html lang="en" class="nojs ie7"> <![endif]-->
+<!--[if IE 8]> <html lang="en" class="nojs ie8"> <![endif]-->
+<!--[if gt IE 8]><!--> <html lang="en" class="nojs"> <!--<![endif]-->
+
+<head>
+ <title><?php echo $ttl; ?></title>
+ <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+
+ <!--[if IE]><![endif]-->
+ <link rel="stylesheet" type="text/css" media="screen" href="/_lib/css/main.css" />
+ <link rel="shortcut icon" href="/_lib/img/design/favicon.png" />
+</head>
+
+<body class="<?php echo 'loc' . $loc[0]; ?>">
+<div id="container">
+
+<div id="header">
+ Header.
+
+ <?php include $_SERVER['DOCUMENT_ROOT'].'/_inc/navmain.inc'; ?>
+
+</div>
View
@@ -0,0 +1,5 @@
+<ul id="navmain">
+ <li <?php if ( $loc[0] == 0 ) echo 'class="current"';?>><a href="#na">Home</a></li>
+ <li <?php if ( $loc[0] == 1 ) echo 'class="current"';?>><a href="#na">Menu item</a></li>
+ <li <?php if ( $loc[0] == 2 ) echo 'class="current"';?>><a href="#na">About</a></li>
+</ul>
View
@@ -0,0 +1,57 @@
+<ul id="navsec">
+
+<?php if ( $loc[0] == 1 ) { ?>
+
+ <li <?php if ( $loc[1] == 1 ) echo 'class="current"';?>><a href="#na">Secondary nav</a></li>
+ <li <?php if ( $loc[1] == 2 ) echo 'class="current"';?>><a href="#na">Another item</a></li>
+ <li <?php if ( $loc[1] == 3 ) echo 'class="current"';?>><a href="#na">Short</a></li>
+ <li <?php if ( $loc[1] == 4 ) echo 'class="current"';?>><a href="#na">Longer navigation</a></li>
+ <li <?php if ( $loc[1] == 5 ) echo 'class="current"';?>><a href="#na">Heres one more</a></li>
+ <li <?php if ( $loc[1] == 6 ) echo 'class="current"';?>><a href="#na">Last one</a></li>
+
+<?php } if ( $loc[0] == 2 ) { ?>
+
+ <li <?php if ( $loc[1] == 1 ) echo 'class="current"';?>><a href="#na">Secondary nav</a></li>
+ <li <?php if ( $loc[1] == 2 ) echo 'class="current"';?>><a href="#na">Another item</a>
+ <ul>
+ <li <?php if ( $loc[2] == 1 ) echo 'class="current"';?>><a href="#na">Tertiary level</a></li>
+ <li <?php if ( $loc[2] == 2 ) echo 'class="current"';?>><a href="#na">Longer navigation</a>
+ <ul>
+ <li <?php if ( $loc[3] == 1 ) echo 'class="current"';?>><a href="#na">Quadrupidoodledoo level</a></li>
+ <li <?php if ( $loc[3] == 2 ) echo 'class="current"';?>><a href="#na">Another item</a></li>
+ <li <?php if ( $loc[3] == 3 ) echo 'class="current"';?>><a href="#na">Short</a></li>
+ <li <?php if ( $loc[3] == 4 ) echo 'class="current"';?>><a href="#na">Longer navigation</a></li>
+ <li <?php if ( $loc[3] == 5 ) echo 'class="current"';?>><a href="#na">Heres one more</a></li>
+ <li <?php if ( $loc[3] == 6 ) echo 'class="current"';?>><a href="#na">Last one</a></li>
+ </ul>
+ </li>
+ <li <?php if ( $loc[2] == 3 ) echo 'class="current"';?>><a href="#na">Heres one more</a>
+ <ul>
+ <li <?php if ( $loc[3] == 1 ) echo 'class="current"';?>><a href="#na">Quadrupidoodledoo level</a></li>
+ <li <?php if ( $loc[3] == 2 ) echo 'class="current"';?>><a href="#na">Another item</a></li>
+ <li <?php if ( $loc[3] == 3 ) echo 'class="current"';?>><a href="#na">Short</a></li>
+ <li <?php if ( $loc[3] == 4 ) echo 'class="current"';?>><a href="#na">Longer navigation</a></li>
+ <li <?php if ( $loc[3] == 5 ) echo 'class="current"';?>><a href="#na">Heres one more</a></li>
+ <li <?php if ( $loc[3] == 6 ) echo 'class="current"';?>><a href="#na">Last one</a></li>
+ </ul>
+ </li>
+ <li <?php if ( $loc[2] == 4 ) echo 'class="current"';?>><a href="#na">Last one</a></li>
+ </ul>
+ </li>
+ <li <?php if ( $loc[1] == 3 ) echo 'class="current"';?>><a href="#na">Short</a></li>
+ <li <?php if ( $loc[1] == 4 ) echo 'class="current"';?>><a href="#na">Longer navigation</a></li>
+ <li <?php if ( $loc[1] == 5 ) echo 'class="current"';?>><a href="#na">Heres one more</a></li>
+ <li <?php if ( $loc[1] == 6 ) echo 'class="current"';?>><a href="#na">Last one</a></li>
+
+<?php } if ( $loc[0] == 3 ) { ?>
+
+ <li <?php if ( $loc[1] == 1 ) echo 'class="current"';?>><a href="#na">Secondary nav</a></li>
+ <li <?php if ( $loc[1] == 2 ) echo 'class="current"';?>><a href="#na">Another item</a></li>
+ <li <?php if ( $loc[1] == 3 ) echo 'class="current"';?>><a href="#na">Short</a></li>
+ <li <?php if ( $loc[1] == 4 ) echo 'class="current"';?>><a href="#na">Longer navigation</a></li>
+ <li <?php if ( $loc[1] == 5 ) echo 'class="current"';?>><a href="#na">Heres one more</a></li>
+ <li <?php if ( $loc[1] == 6 ) echo 'class="current"';?>><a href="#na">Last one</a></li>
+
+<?php } ?>
+
+</ul>
View
@@ -0,0 +1,57 @@
+/* EM Reset Revisited */
+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, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin: 0;padding: 0; border: 0; outline: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
+body {line-height: 1;}
+ol, ul {list-style: none;}
+blockquote, q {quotes: none;}
+blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;}
+ins {text-decoration: none;}
+del {text-decoration: line-through;}
+table {border-collapse: collapse;border-spacing: 0;}
+/* End of Reset */
+
+/* Misc. */
+html {font-size:62.5%; overflow-y:scroll; font-family: Arial, Helvetica, sans-serif;}
+body {font-size:1.2em;}
+::-moz-selection{ background: #5c6366; color:#fff; text-shadow: none; }
+::selection { background:#5c6366; color:#fff; text-shadow: none; }
+a:link { -webkit-tap-highlight-color: #f15c22; }
+button { width: auto; overflow: visible; }
+.ie7 img { -ms-interpolation-mode: bicubic; }
+body, select, input, textarea { color: #444; }
+h1, h2, h3, h4, h5, h6 { font-weight: bold; }
+h1 { font-size: 3em; }
+h2 { font-size: 2em; }
+h3 { font-size: 1.5em; }
+h4 { font-size: 1.2em; }
+a { text-decoration: none; color: #808080 }
+a:hover { color: #000; }
+p, ul {line-height: 1.6em; margin-bottom: 1em;}
+#copyright {font-size: .9em; color: #999; margin: 20px 0;}
+
+/* Form Elements */
+select, input, textarea { color: #999; border: 1px solid #ccc; padding: 2px; font-family: Arial, Helvetica, sans-serif; font-size: 1em; width: 250px;}
+select {width: 258px;}
+select:hover, input:hover, textarea:hover { border: 1px solid #999 }
+select:active, input:active, textarea:active,
+select:focus, input:focus, textarea:focus { color: #333; border: 1px solid #ecad10 }
+button::-moz-focus-inner { padding: 0; border: 0 }
+button { background: none; border: 0;padding: 0; margin: 0; font-family: Arial, Helvetica Neue, sans-serif; font-size: 1em;}
+label { display: block; font-weight: bold;}
+
+/* Menus */
+#navmain { margin: 0; }
+#navsec { margin: 0; }
+
+/* Main Layout */
+#container { width: 960px; margin: 0 auto; background: #eee;}
+#header { background: lightgreen; }
+#maincontent { background: lightyellow; overflow: hidden; }
+#footer { background: lightblue; }
+
+/* IE */
+html.ie {}
+html.ie6 {}
+html.ie7 {}
+html.ie8 {}
+html.ie9 {}
View
@@ -0,0 +1,16 @@
+$('html').removeClass('nojs'); // We got JS.
+
+$(function() { // When the document is ready
+
+ // Search Field Clear
+ $(".clear").focus(function() {
+ if (this.value == this.defaultValue) {
+ this.value = "";
+ }
+ }).blur(function() {
+ if (!this.value.length) {
+ this.value = this.defaultValue;
+ }
+ })
+
+});

Large diffs are not rendered by default.

Oops, something went wrong.
View
No changes.
View
@@ -0,0 +1,29 @@
+<?php
+$ttl = 'Home';
+$loc = array(0,0,0,0);
+include $_SERVER['DOCUMENT_ROOT'].'/_inc/head.inc';?>
+
+<div id="maincontent">
+
+ <h1>H1. Header</h1>
+ <h2>H2. Header</h2>
+ <h3>H3. Header</h3>
+ <h4>H4. Header</h4>
+ <h5>H5. Header</h5>
+
+ <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+ <p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum</p>
+
+ <p><label>Name:</label> <input type="text" value="Summin" class="clear" /></p>
+ <p>
+ <label>Select:</label>
+ <select>
+ <option>Hello</option>
+ </select>
+ </p>
+ <p><label>Textarea</label><textarea class="clear">Hello</textarea></p>
+ <p><button><span>Submit</span></button></p>
+
+</div>
+
+<?php include $_SERVER['DOCUMENT_ROOT'].'/_inc/footer.inc'; ?>

0 comments on commit 1e9dc91

Please sign in to comment.