Skip to content

Instantly share code, notes, and snippets.

@ruckserve

ruckserve/shoestring-style-guide.html

Forked from clamstew/shoestring-style-guide.html
Created June 4, 2014 23:29
Show Gist options
  • Save ruckserve/93240b6735d1e4175658 to your computer and use it in GitHub Desktop.
Save ruckserve/93240b6735d1e4175658 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
shoestring-style-guide.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Shoestring.css Style Guide</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./css/shoestring/0.0.1/shoestring-dev.css">
<style type="text/css">
* {
/* -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid red;*/
}
</style>
<!--[if lt IE 9]>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.1/modernizr.min.js"></script>
<![endif]-->
</head>
<body>
<header>
<div class="container">
<div class="column fourth">
<span class="logo">Shoestring.CSS</span>
</div>
<div class="column third flow-opposite">
<nav>
<span>
<a href="#">Home</a>
</span>
<span>
<a href="#">About</a>
</span>
<span>
<a href="#">Contact</a>
</span>
</nav>
</div>
</div>
</header>
<div class="container">
<h1>Shoestring Styleguide</h1>
</div>
<hr />
<div class="container demo">
<!-- GRID UNITS -->
<h2>Layout/Grid Units</h2>
<!-- description -->
<p>To divide content, we use Nicole Sullivan's <a href="http://oocss.org/grids_docs.html" target="_blank">OOCSS</a>. The markeup below shows a few possible configurations for laying out horizontally divided content.</p>
</div>
<!-- testing a full width row -->
<div class="container demo">
<div class="column demo full">Full width row</div>
</div>
<!-- testing 2 halves of a rows -->
<div class="container demo">
<div class="column demo half">1st half of the row</div>
<div class="column demo half flow-opposite">2nd half of the row</div>
</div>
<!-- testing 3 column -->
<div class="container demo">
<div class="column demo third">1st third of the row</div>
<div class="column demo third">2nd third of the row</div>
<div class="column demo third flow-opposite">3rd third of the row</div>
</div>
<!-- testing 4 column -->
<div class="container demo">
<div class="column demo fourth">1st fourth of the row</div>
<div class="column demo fourth">2nd fourth of the row</div>
<div class="column demo fourth">3rd fourth of the row</div>
<div class="column demo fourth flow-opposite">4th fourth of the row</div>
</div>
<hr />
<h2>Testing full width row with thirds</h2>
<div class="full-width-container">
<div class="column demo third">1st third of the row</div>
<div class="column demo third">2nd third of the row</div>
<div class="column demo third flow-opposite">3rd third of the row</div>
</div>
<hr />
<div class="container">
<h2>Testing Sidebar with Main Content Area</h2>
</div>
<div class="container">
<div class="column third">
<h2>(Third Column)</h2>
<h3>Sample Sidebar Content</h3>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>
<div class="column two-thirds">
<h2>(Two-Thirds Column)</h2>
<h3>Sample Main Column Content</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
</div>
</div>
<hr />
<div class="container">
<h2>
Testing four containers for holding a feature area
</h2>
</div>
<div class="container">
<div class="column fourth-padded">
<img src="http://placekitten.com/g/200/160" />
</div>
<div class="column fourth-padded">
<img src="http://placekitten.com/g/200/160" />
</div>
<div class="column fourth-padded">
<img src="http://placekitten.com/g/200/160" />
</div>
<div class="column fourth flow-opposite">
<img src="http://placekitten.com/g/200/160" />
</div>
</div>
<hr />
<div class="container">
<!-- GRID UNITS -->
<h2>Buttons</h2>
<!-- description -->
<p>The button, button-small and button huge class can be applied to <code>link, button, input type="button"</code> We will also test that it can be applied to <code>input type="submit"</code> and <code>&lt;button&gt;</code>. By default, all of these buttons get the <code>$button-default</code> color from the <code>vars.sass</code> file. As you can see, the button-huge class fills it's container while the others are display inline-block.</p>
<h4>Normal Buttons with colors</h4>
<input type="button" value=".button" class="button" />
<input type="button" value=".button.default" class="button default" />
<input type="button" value=".button.primary" class="button primary" />
<input type="button" value=".button.success" class="button success" />
<input type="button" value=".button.info" class="button info" />
<input type="button" value=".button.warning" class="button warning" />
<input type="button" value=".button.danger" class="button danger" />
<h4>Links as buttons with colors</h4>
<a href="#" class="button">a.button</a>
<a href="#" class="button default">a.button.default</a>
<a href="#" class="button primary">a.button.primary</a>
<a href="#" class="button success">a.button.success</a>
<a href="#" class="button info">a.button.info</a>
<a href="#" class="button warning">a.button.warning</a>
<a href="#" class="button danger">a.button.danger</a>
<h4>Testing Submit and Button Tag for Consistancy</h4>
<input type="submit" value="input[type=submit].button" class="button" />
<button class="button">button.button</button>
</div>
<hr />
<div class="container">
<h2>Links</h2>
</div>
<div class="container">
<a href="#">Test Link</a>
</div>
<br />
<br />
<br />
<br />
<!-- include jquery to turn off a tag defaults -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$('a').on('click', function(event) {
event.preventDefault();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment