Skip to content

Commit

Permalink
First release ready.
Browse files Browse the repository at this point in the history
  • Loading branch information
Morgan Feeney committed Oct 25, 2015
1 parent 365c32d commit bc9477b
Show file tree
Hide file tree
Showing 16 changed files with 1,687 additions and 237 deletions.
15 changes: 15 additions & 0 deletions demo/css/style.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion demo/css/style.css.map
View file

Large diffs are not rendered by default.

68 changes: 68 additions & 0 deletions demo/examples/flipped-2-column-layout.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Interior | Flipped 2 column layout</title>
<link rel="stylesheet" href="../css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
(function(d) {
var config = {
kitId: 'bnr7syi',
scriptTimeout: 3000,
async: true
},
h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
})(document);
</script>
</head> <body class="eg eg1">
<header class="container-outer">
<div class="container-width">
<div class="container-inner">
<div class="i-col-12 i-col-sm-12">
<h1>Example <small><span>#</span>2</small> <span>Flipped 2 column layout</span></h1>
</div>
</div>
</div>
</header>
<main class="container-outer">
<div class="container-width">
<div class="container-inner">
<div class="i-outer">
<div class="i-row">
<aside class="i-col-12 i-col-sm-4 i-md-fl-8 eg-bg-1">
<div class="i-outer">
<div class="i-inner">
<h3>This is an aside</h3>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</div>
</aside>
<div class="i-col-12 i-col-sm-8 i-md-fl-4">
<div class="i-inner">
<h2>The standard Lorem Ipsum passage, used since the 1500s</h2>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<h3>The standard Lorem Ipsum passage, used since the 1500s</h3>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="container-outer theme-1">
<div class="container-width">
<div class="container-inner">
<div class="i-col-12 i-col-xs-12 i-col-sm-12">
<div class="sig">
<p><span class="name">Interior</span> © 2015 by <cite><a href="http://www.morganfeeney.com">Morgan Feeney</a></cite></p>
</div>
</div>
</div>
</div>
</footer>
<script src="http://localhost:35729/livereload.js"></script>
</body>
</html> </body>
76 changes: 76 additions & 0 deletions demo/examples/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Interior | Layout example 1</title>
<link rel="stylesheet" href="../css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
(function(d) {
var config = {
kitId: 'bnr7syi',
scriptTimeout: 3000,
async: true
},
h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
})(document);
</script>
</head><body class="eg eg1">
<header class="container-outer">
<div class="container-width">
<div class="container-inner">
<div class="i-col-12 i-col-sm-12">
<h1>Examples <span>Blah de blah</span></h1>
</div>
</div>
</div>
</header>
<main class="container-outer">
<div class="container-width">
<div class="container-inner">
<div class="i-outer">
<div class="i-row">
<div class="i-col-12 i-col-sm-8">
<div class="i-inner">
<dl>
<dt>
<a href="simple-2-column-layout.html">Simple 2 column layout</a>
</dt>
<dd>
A main content area with an aside.
</dd>
<dt>
<a href="flipped-2-column-layout.html">Flipped 2 column layout</a>
</dt>
<dd>
A main content area with an aside, with visual source order flipped.
</dd>
<dt>
<a href="product-lister.html">Product lister page layout</a>
</dt>
<dd>
A BLAH content area with an aside.
</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="container-outer theme-1">
<div class="container-width">
<div class="container-inner">
<div class="i-col-12 i-col-xs-12 i-col-sm-12">
<div class="sig">
<p><span class="name">Interior</span> © 2015 by <cite><a href="http://www.morganfeeney.com">Morgan Feeney</a></cite></p>
</div>
</div>
</div>
</div>
</footer>
<script src="http://localhost:35729/livereload.js"></script>
</body>
</html></body>
4 changes: 2 additions & 2 deletions demo/examples/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<header class="container-outer">
<div class="container-width">
<div class="container-inner">
<div class="i-col-12 i-sm-12">
<div class="i-col-12 i-col-sm-12">
<h1>Examples <span>Blah de blah</span></h1>
</div>
</div>
Expand All @@ -18,7 +18,7 @@
<div class="container-inner">
<div class="i-outer">
<div class="i-row">
<div class="i-col-12 i-sm-8">
<div class="i-col-12 i-col-sm-8">
<div class="i-inner">
<dl>
<dt>
Expand Down
166 changes: 166 additions & 0 deletions demo/examples/product-lister.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,166 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Interior | Product lister page layout</title>
<link rel="stylesheet" href="../css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
(function(d) {
var config = {
kitId: 'bnr7syi',
scriptTimeout: 3000,
async: true
},
h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
})(document);
</script>
</head><body class="eg eg2">
<header class="container-outer">
<div class="container-width">
<div class="container-inner">
<div class="i-col-12 i-col-xs-12 i-col-sm-12">
<h1>Example <small><span>#</span>3</small> <span>Product lister page layout</span></h1>
</div>
</div>
</div>
</header>
<main class="container-outer">
<div class="container-width">
<div class="container-inner">
<div class="i-outer">
<div class="i-row">
<div class="i-col-12 i-col-sm-8 i-g i-gup product-lister">
<div class="i-col-6 i-col-xs-4 i-col-sm-4 i-col-md-4 i-col-lg-3">
<div class="i-inner">
<h4 class="product-title">This is a product title</h4>
<img class="img-r" src="http://placehold.it/200/FFF1F1/FF7070?text=<IMG>">
<p class="price">£100.00</p>
<button>Buy now</button>
</div>
</div>
<div class="i-col-6 i-col-xs-4 i-col-sm-4 i-col-md-4 i-col-lg-3">
<div class="i-inner">
<h4 class="product-title">This is a product title</h4>
<img class="img-r" src="http://placehold.it/200/FFF1F1/FF7070?text=<IMG>">
<p class="price">£100.00</p>
<button>Buy now</button>
</div>
</div>
<div class="i-col-6 i-col-xs-4 i-col-sm-4 i-col-md-4 i-col-lg-3">
<div class="i-inner">
<h4 class="product-title">This is a really long product title which goes onto several lines</h4>
<img class="img-r" src="http://placehold.it/200/FFF1F1/FF7070?text=<IMG>">
<p class="price">£100.00</p>
<button>Buy now</button>
</div>
</div>
<div class="i-col-6 i-col-xs-4 i-col-sm-4 i-col-md-4 i-col-lg-3">
<div class="i-inner">
<h4 class="product-title">This is a product title</h4>
<img class="img-r" src="http://placehold.it/200/FFF1F1/FF7070?text=<IMG>">
<p class="price">£100.00</p>
<button>Buy now</button>
</div>
</div>
<div class="i-col-6 i-col-xs-4 i-col-sm-4 i-col-md-4 i-col-lg-3">
<div class="i-inner">
<h4 class="product-title">This is a product title</h4>
<img class="img-r" src="http://placehold.it/200/FFF1F1/FF7070?text=<IMG>">
<p class="price">£100.00</p>
<button>Buy now</button>
</div>
</div>
<div class="i-col-6 i-col-xs-4 i-col-sm-4 i-col-md-4 i-col-lg-3">
<div class="i-inner">
<h4 class="product-title">This is a really long product title which goes onto several lines</h4>
<img class="img-r" src="http://placehold.it/200/FFF1F1/FF7070?text=<IMG>">
<p class="price">£100.00</p>
<button>Buy now</button>
</div>
</div>
<div class="i-col-6 i-col-xs-4 i-col-sm-4 i-col-md-4 i-col-lg-3">
<div class="i-inner">
<h4 class="product-title">This is a product title</h4>
<img class="img-r" src="http://placehold.it/200/FFF1F1/FF7070?text=<IMG>">
<p class="price">£100.00</p>
<button>Buy now</button>
</div>
</div>
<div class="i-col-6 i-col-xs-4 i-col-sm-4 i-col-md-4 i-col-lg-3">
<div class="i-inner">
<h4 class="product-title">This is a product title</h4>
<img class="img-r" src="http://placehold.it/200/FFF1F1/FF7070?text=<IMG>">
<p class="price">£100.00</p>
<button>Buy now</button>
</div>
</div>
<div class="i-col-6 i-col-xs-4 i-col-sm-4 i-col-md-4 i-col-lg-3">
<div class="i-inner">
<h4 class="product-title">This is a product title</h4>
<img class="img-r" src="http://placehold.it/200/FFF1F1/FF7070?text=<IMG>">
<p class="price">£100.00</p>
<button>Buy now</button>
</div>
</div>
<div class="i-col-6 i-col-xs-4 i-col-sm-4 i-col-md-4 i-col-lg-3">
<div class="i-inner">
<h4 class="product-title">This is a product title</h4>
<img class="img-r" src="http://placehold.it/200/FFF1F1/FF7070?text=<IMG>">
<p class="price">£100.00</p>
<button>Buy now</button>
</div>
</div>
<div class="i-col-6 i-col-xs-4 i-col-sm-4 i-col-md-4 i-col-lg-3">
<div class="i-inner">
<h4 class="product-title">This is a product title</h4>
<img class="img-r" src="http://placehold.it/200/FFF1F1/FF7070?text=<IMG>">
<p class="price">£100.00</p>
<button>Buy now</button>
</div>
</div>
<div class="i-col-6 i-col-xs-4 i-col-sm-4 i-col-md-4 i-col-lg-3">
<div class="i-inner">
<h4 class="product-title">This is a product title</h4>
<img class="img-r" src="http://placehold.it/200/FFF1F1/FF7070?text=<IMG>">
<p class="price">£100.00</p>
<button>Buy now</button>
</div>
</div>
</div>
<aside class="i-col-12 i-col-xs-12 i-col-sm-4 i-col-md-4">
<div class="i-outer">
<div class="i-inner">
<h3>This is an aside</h3>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</div>
</aside>
<div class="i-row">
<div class="i-col-12 i-col-xs-12 i-col-sm-8">
<div class="i-inner">
<h2>The standard Lorem Ipsum passage, used since the 1500s</h2>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="container-outer theme-1">
<div class="container-width">
<div class="container-inner">
<div class="i-col-12 i-col-xs-12 i-col-sm-12">
<div class="sig">
<p><span class="name">Interior</span> © 2015 by <cite><a href="http://www.morganfeeney.com">Morgan Feeney</a></cite></p>
</div>
</div>
</div>
</div>
</footer>
<script src="http://localhost:35729/livereload.js"></script>
</body>
</html></body>
Loading

0 comments on commit bc9477b

Please sign in to comment.