finished the grid and added a lot more documentation on the skeleton project, including some code snippets and other pieces
This commit is contained in:
Dave Gamache
116
index.php
116
index.php
@ -22,7 +22,6 @@
|
||||
================================================== -->
|
||||
<link rel="stylesheet" href="src/stylesheets/base.css">
|
||||
<link rel="stylesheet" href="src/stylesheets/skeleton.css">
|
||||
<link rel="stylesheet" href="src/stylesheets/ui.css">
|
||||
<link rel="stylesheet" href="src/stylesheets/layout.css">
|
||||
<link rel="stylesheet" href="documentation-assets/docs.css">
|
||||
<!--[if lt IE9]><link rel="stylesheet" href="css/ie.css"><![endif]-->
|
||||
@ -42,12 +41,12 @@
|
||||
|
||||
|
||||
|
||||
<div class="container fluid">
|
||||
<div class="container">
|
||||
<div class="four columns sidebar">
|
||||
<nav>
|
||||
<img src="documentation-assets/images/logo.png" id="logo"></img>
|
||||
<ul>
|
||||
<li><a class="active" href="#whatAndWhy">What & Why</a></li>
|
||||
<li><a href="#whatAndWhy">What & Why</a></li>
|
||||
<li><a href="#basics">Basics</a></li>
|
||||
<li><a href="#typography">Typography</a></li>
|
||||
<li><a href="#grid">Grid</a></li>
|
||||
@ -65,7 +64,7 @@
|
||||
<p>Skeleton is a lightweight framework for HTML, CSS & jQuery that makes building websites easier.</p>
|
||||
</header>
|
||||
<hr class="large" />
|
||||
<div class="doc-section" id="whyAndWhat">
|
||||
<div class="doc-section" id="whatAndWhy">
|
||||
<h3>What & Why</h3>
|
||||
<p>Here is where I need to chat about what Skeleton is, why it's awesome and how what the file structure is. Focus on: 1) Speed, 2) Best Practices , 3) Across devices</p>
|
||||
</div>
|
||||
@ -75,15 +74,23 @@
|
||||
<p>Here is where I need to chat about what Skeleton is, why it's awesome and how what the file structure is. Focus on: 1) Speed, 2) Best Practices , 3) Across devices</p>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="doc-section" id="typography">
|
||||
<div class="doc-section clearfix" id="typography">
|
||||
<h3>Typography</h3>
|
||||
<p>The typography of Skeleton is designed to create a strong hierarchy with basic styles. The primary font is the classic Helvetica Neue, but the font stack can be easily changes with just a couple adjustments.</p>
|
||||
<h1>Heading <h1></h1>
|
||||
<h2>Heading <h2></h2>
|
||||
<h3>Heading <h3></h3>
|
||||
<h4>Heading <h4></h4>
|
||||
<h5>Heading <h5></h5>
|
||||
<h6>Heading <h6></h6>
|
||||
<p>The typography of Skeleton is designed to create a strong hierarchy with basic styles. The primary font is the classic Helvetica Neue, but the font stack can be easily changes with just a couple adjustments. Regular paragraphs are set at a 14px base with 21px line height.</p>
|
||||
<div class="seven columns alpha headings">
|
||||
<h1>Heading <h1></h1>
|
||||
<h2>Heading <h2></h2>
|
||||
<h3>Heading <h3></h3>
|
||||
<h4>Heading <h4></h4>
|
||||
<h5>Heading <h5></h5>
|
||||
<h6>Heading <h6></h6>
|
||||
</div>
|
||||
<div class="five columns omega">
|
||||
<blockquote>
|
||||
<p>This is a blockquote style example. It stands out, but is awesome</p>
|
||||
<cite>Dave Gamache, Skeleton Creator</cite>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="doc-section clearfix" id="grid">
|
||||
@ -113,31 +120,95 @@
|
||||
<div class="eleven columns alpha">Eleven</div>
|
||||
<div class="one column omega">One</div>
|
||||
</div>
|
||||
<div class="hidden-code">
|
||||
<a href="">Code Example</a>
|
||||
<script type="text/javascript" src="http://snipt.net/embed/44d7e5e7fece4e269ef873fc448804bb"></script>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="doc-section" id="buttons">
|
||||
<h3>Buttons</h3>
|
||||
<p>Button are intended for action and thus should have appropriate weight. The standard buttons are given that weight by being strong and dark, but they could just as easily be colorful.</p>
|
||||
<a href="#" class="button">Save Now</a>
|
||||
<a href="#" class="secondary button">Dismiss Changes</a>
|
||||
<div class="hidden-code">
|
||||
<a href="">Code Example</a>
|
||||
<script type="text/javascript" src="http://snipt.net/embed/c9ba7e6bef73adc206a1f2f156336b1f"></script>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="doc-section" id="tabs">
|
||||
<h3>Tabs</h3>
|
||||
<p>Here is where I need to chat about what Skeleton is, why it's awesome and how what the file structure is. Focus on: 1) Speed, 2) Best Practices , 3) Across devices</p>
|
||||
<p>Some very simple tabs that have dead simple jQuery that hook them up to their corresponding content.</p>
|
||||
<ul class="tabs">
|
||||
<li><a class="active" href="#simple">Simple</a></li>
|
||||
<li><a href="#lightweight">Lightweight</a></li>
|
||||
<li><a href="#mobileFriendly">Mobile</a></li>
|
||||
</ul>
|
||||
<ul class="tabs-content">
|
||||
<li class="active" id="simpleTab">This is content about how these tabs are simple</li>
|
||||
<li id="lightweightTab">This is content about how these tabs are lightweight</li>
|
||||
<li id="mobileFriendlyTab">This is content about how these tabs are mobile friendly</li>
|
||||
<li class="active" id="simpleTab">The tabs are clean and simple unordered-list markup and basic CSS.</li>
|
||||
<li id="lightweightTab">The tabs are cross-browser, but don't need a ton of hacky CSS or markup.</li>
|
||||
<li id="mobileFriendlyTab">The tabs work like a charm even on mobile devices.</li>
|
||||
</ul>
|
||||
<div class="hidden-code">
|
||||
<a href="">Code Example</a>
|
||||
<script type="text/javascript" src="http://snipt.net/embed/4b46e3f57681fb03107aee169cd7e252"></script>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="doc-section" id="forms">
|
||||
<div class="doc-section clearfix" id="forms">
|
||||
<h3>Forms</h3>
|
||||
<p>Here is where I need to chat about what Skeleton is, why it's awesome and how what the file structure is. Focus on: 1) Speed, 2) Best Practices , 3) Across devices</p>
|
||||
<p>Forms can be one of the biggest pains for web developers, but just use these dead simple styles and you should be good to go. </p>
|
||||
<div class="four columns alpha" style="overflow: hidden">
|
||||
<form action="">
|
||||
<label for="regularInput">Regular Input</label>
|
||||
<input type="text" id="regularInput" />
|
||||
<label for="regularTextarea">Regular Textarea</label>
|
||||
<textarea id="regularTextarea"></textarea>
|
||||
<label for="selectList">Select List</label>
|
||||
<select id="selectList">
|
||||
<option value="Option 1">Option 1</option>
|
||||
<option value="Option 2">Option 2</option>
|
||||
<option value="Option 3">Option 3</option>
|
||||
<option value="Option 4">Option 4</option>
|
||||
</select>
|
||||
<fieldset>
|
||||
<label for="">Checkboxes</label>
|
||||
<label for="regularCheckbox">
|
||||
<input type="checkbox" id="regularCheckbox" value="checkbox 1" />
|
||||
<span>Regular Checkbox</span>
|
||||
</label>
|
||||
<label for="secondRegularCheckbox">
|
||||
<input type="checkbox" id="secondRegularCheckbox" value="checkbox 2" />
|
||||
<span>Regular Checkbox</span>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label for="">Radio Buttons</label>
|
||||
<label for="regularRadio">
|
||||
<input type="radio" name="radios" id="regularRadio" value="radio 1" />
|
||||
<span>Regular Radio</span>
|
||||
</label>
|
||||
<label for="secondRegularRadio">
|
||||
<input type="radio" name="radios" id="secondRegularRadio" value="radio 2" />
|
||||
<span>Regular Radio</span>
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<!-- <input type="text" id="placeholderInput" placeholder="Placeholder Input" /> -->
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="doc-section" id="mediaQueries">
|
||||
<h3>Media Queries</h3>
|
||||
<p>Here is where I need to chat about what Skeleton is, why it's awesome and how what the file structure is. Focus on: 1) Speed, 2) Best Practices , 3) Across devices</p>
|
||||
<p>Skeleton uses a <strong>lot</strong> of media queries to serve the scalable grid, but also for the convenience of styling your site on different size screens. Skeleton's media queries are almost exclusively targeted at max and min widths rather than device sizes or orientations. The advantage of this is browsers and future mobile devices that don't map to exact set dimensions will still benefit from the styles. That being said, all of the queries were written to be optimal on Apple iOS devices. The built in media queries include:</p>
|
||||
<ul class="square">
|
||||
<li><strong>iPad Portrait</strong> or any other tablet device </li>
|
||||
<li><strong>iPhone</strong> or mobile styles in general for small screens</li>
|
||||
<li><strong>iPhone Landscape</strong> or other mobile devices with a large screen size (cascades over standard mobile styles)</li>
|
||||
<li><strong>Less than 960</strong> to style anything across browsers and devices that is smaller than the base grid</li>
|
||||
</ul>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="doc-section" id="theFuture">
|
||||
@ -158,5 +229,12 @@
|
||||
<script>window.jQuery || document.write("<script src='src/javascripts/jquery-1.5.1.min.js'>\x3C/script>")</script>
|
||||
<script src="src/javascripts/modernizr-1.7.min.js"></script>
|
||||
<script src="src/javascripts/app.js"></script>
|
||||
|
||||
<script>
|
||||
$('.hidden-code').click(function(e) {
|
||||
e.preventDefault();
|
||||
$(this).children('div').slideDown();
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user