Skip to content

Instantly share code, notes, and snippets.

@FalkoJoseph

FalkoJoseph/HTML Structure

Last active August 29, 2015 14:04
Show Gist options
  • Save FalkoJoseph/a3b34a99d55642c641dc to your computer and use it in GitHub Desktop.
Save FalkoJoseph/a3b34a99d55642c641dc to your computer and use it in GitHub Desktop.
Download ZIP
Minimal site structure. Not sure if "grid-cell" and "grid" objects are meant to have any other classes beside their own main purpose. I also tried to use heading tags efficiently as well toning down the total number of classes.
Raw
HTML Structure
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{ page.title }}</title>
<meta name="author" content="http://nielsenramon.be/">
<meta name="description" content="{{ page.description }}">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:image" content="">
<meta property="og:title" content="{{ page.title }}">
<meta property="og:url" content="">
<meta property="og:site_name" content="">
<meta property="og:description" content="{{ page.description }}">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,700,900' rel='stylesheet' type='text/css'>
<!--[if (gt IE 8) | (IEMobile)]><!-->
<link rel="stylesheet" href="/assets/css/application.css">
<!--<![endif]-->
<!--[if (lt IE 9) & (!IEMobile)]>
<link rel="stylesheet" href="/assets/css/application-ie.css">
<![endif]-->
</head>
<body>
<!--[if lt IE 8]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<nav class="navigation navigation-left nav-mobile">
<ul>
<li><a href="#">{item}</a></li>
<li><a href="#">{item}</a></li>
<li><a href="#">{item}</a></li>
</ul>
</nav>
<div class="site-overlay">
</div>
<div id="container">
<header class="main">
<nav class="top">
<div class="grid grid-centered">
<div class="grid-cell">
<ul>
<li><a href="#">{item}</a></li>
<li><a href="#">{item}</a></li>
</ul>
</div>
</div>
</nav>
<nav class="main">
<div class="grid grid-centered">
<div class="grid-cell">
<figure class="logo">
<a href="#">greenpan</a>
</figure>
<ul>
<li><a href="#" class="is-active">{item}</a></li>
<li><a href="#">{item}</a></li>
<li><a href="#">{item}</a></li>
</ul>
<div class="cart">
<div class="icon">icon</div>
<div class="total">
<p>3 items</p>
<h6>£ 6.00</h6>
</div>
</div>
</div>
</div>
</nav>
</header>
<main role="main">
<div class="grid grid-centered">
<div class="grid-cell">
<div class="pagetop">
<div class="breadcrumb">
<p><a href="#">Home</a> <span class="icon">&raquo;</span> Cookware</p>
</div>
<div class="sort">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
</div>
</div>
<div class="grid-cell">
<div class="filter">
<div class="filter-heading">
<h3>Filter</h3>
<img class="reset" src="#" alt="Reset">
</div>
<div class="filter-group">
<h5>Different Cookware</h5>
<ul>
<li>
<input type="checkbox" name="" value="" id="">
<label title="" for="">Frypan</label>
</li>
</ul>
</div>
</div>
</div>
<div class="grid-cell">
<div class="product-list">
<div class="product-item">
<img src="#" alt="Product">
<h4>Lima 3D | I Love Eggs &amp; Pancakes 8" Open Frypan</h4>
<p>£ 5.30</p>
</div>
</div>
</div>
</div>
</main>
<footer class="footer">
<div class="grid grid-centered">
<div class="grid-cell">
<div class="links">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Cookware</a></li>
<li><a href="#">Bakeware</a></li>
<li><a href="#">Sets</a></li>
<li><a href="#">About</a></li>
<li><a href="#">GreenPan Support</a></li>
</ul>
<p>
&copy; Copyright 2014 GreenPan
</p>
</div>
</div>
<div class="grid-cell">
<div class="subscribe">
<form>
<input type="text" class="input-dark is-cutoff">
<input type="submit" class="button button-dark is-cutoff">
</form>
<h6>
Sign up with your email address to receive news and updates.
</h6>
</div>
</div>
</div>
</footer>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/assets/js/application.js"></script>
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X');ga('send','pageview');
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment