100 lines
4.3 KiB
HTML
100 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
|
|
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
|
|
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
|
|
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
|
|
<head>
|
|
|
|
<!-- Basic Page Needs
|
|
================================================== -->
|
|
<meta charset="utf-8">
|
|
<title>Your Page Title Here :)</title>
|
|
<meta name="description" content="">
|
|
<meta name="author" content="">
|
|
<!--[if lt IE 9]>
|
|
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
|
<![endif]-->
|
|
|
|
<!-- Mobile Specific Metas
|
|
================================================== -->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
|
|
<!-- CSS
|
|
================================================== -->
|
|
<link rel="stylesheet" href="stylesheets/base.css">
|
|
<link rel="stylesheet" href="stylesheets/skeleton.css">
|
|
<link rel="stylesheet" href="stylesheets/layout.css">
|
|
|
|
<!-- Favicons
|
|
================================================== -->
|
|
<link rel="shortcut icon" href="images/favicon.ico">
|
|
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
|
|
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
|
|
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
|
|
|
|
</head>
|
|
<body>
|
|
|
|
|
|
|
|
<!-- Primary Page Layout
|
|
================================================== -->
|
|
|
|
<!-- Delete everything in this .container and get started on your own site! -->
|
|
|
|
<div class="container">
|
|
<div class="sixteen columns">
|
|
<h1 class="remove-bottom" style="margin-top: 40px">Skeleton</h1>
|
|
<h5>Version 1.1</h5>
|
|
<hr />
|
|
</div>
|
|
<div class="one-third column">
|
|
<h3>About Skeleton?</h3>
|
|
<p>Skeleton is a small collection of well-organized CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. It's based on a responsive grid, but also provides very basic CSS for typography, buttons, tabs, forms and media queries. Go ahead, resize this super basic page to see the grid in action.</p>
|
|
</div>
|
|
<div class="one-third column">
|
|
<h3>Three Core Principles</h3>
|
|
<p>Skeleton is built on three core principles:</p>
|
|
<ul class="square">
|
|
<li><strong>A Responsive Grid Down To Mobile</strong>: Elegant scaling from a browser to tablets to mobile.</li>
|
|
<li><strong>Fast to Start</strong>: It's a tool for rapid development with best practices</li>
|
|
<li><strong>Style Agnostic</strong>: It provides the most basic, beautiful styles, but is meant to be overwritten.</li>
|
|
</ul>
|
|
</div>
|
|
<div class="one-third column">
|
|
<h3>Docs & Support</h3>
|
|
<p>The easiest way to really get started with Skeleton is to check out the full docs and info at <a href="http://www.getskeleton.com">www.getskeleton.com.</a>. Skeleton is also open-source and has a <a href="https://github.com/dhgamache/skeleton">project on git</a>, so check that out if you want to report bugs or create a pull request. If you have any questions, thoughts, concerns or feedback, please don't hesitate to email me at <a href="mailto:hi@getskeleton.com">hi@getskeleton.com</a>.</p>
|
|
</div>
|
|
|
|
<div class="sixteen columns">
|
|
<h3>Support for simple tabs</h3>
|
|
<!-- Standard <ul> with class of "tabs" -->
|
|
<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>
|
|
<li><a href="#accessible">Accessible</a></li>
|
|
</ul>
|
|
|
|
<ul class="tabs-content">
|
|
<!-- Give ID that matches HREF of above anchors -->
|
|
<li class="active" id="simple">The tabs are clean and simple unordered-list markup and basic CSS</li>
|
|
<li id="lightweight">The tabs are cross-browser, but don't need a ton of hacky CSS or markup.</li>
|
|
<li id="mobileFriendly">The tabs work like a charm even on mobile devices.</li>
|
|
<li id="accessible">The content of the tabs is still visible even when JavaScript is disabbled.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div><!-- container -->
|
|
|
|
|
|
|
|
<!-- JS
|
|
================================================== -->
|
|
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
|
|
<script src="javascripts/tabs.js"></script>
|
|
|
|
<!-- End Document
|
|
================================================== -->
|
|
</body>
|
|
</html> |