Bones/index.html
WhatsNewSaes 43c19e5d00 Adds LESS Version of Skeleton
GRID:
- Added LESS logic so that grid columns are calculated from the total
width of the container

VARIABLES:
Hooked up color variables to fonts, buttons, border, backgrounds

BREAKPOINTS:
defined breakpoints by variables.

GRUNT:
Grunt will watch the less file and any time there is a change saved it
will compile to the css/skeleton.css file.
2014-12-10 23:08:55 -05:00

144 lines
4.6 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
-->
<meta charset="utf-8">
<title>Your page title here :)</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- FONT
-->
<link href='http://fonts.googleapis.com/css?family=Raleway:400,300,600' rel='stylesheet' type='text/css'>
<!-- CSS
-->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<!-- Favicon
-->
<link rel="icon" type="image/png" href="images/favicon.png" />
</head>
<body>
<!-- Primary Page Layout
-->
<div class="container">
<!-- all columns must be wrapped in a .row -->
<div class="row">
<div class="one column">One</div>
<div class="eleven columns">Eleven</div>
</div>
<div class="row">
<div class="two columns">Two</div>
<div class="ten columns">Ten</div>
</div>
<div class="row">
<div class="three columns">Three</div>
<div class="nine columns">Nine</div>
</div>
<div class="row">
<div class="four columns">Four</div>
<div class="eight columns">Eight</div>
</div>
<div class="row">
<div class="five columns">Five</div>
<div class="seven columns">Seven</div>
</div>
<div class="row">
<div class="six columns">Six</div>
<div class="six columns">Six</div>
</div>
<div class="row">
<div class="seven columns">Seven</div>
<div class="five columns">Five</div>
</div>
<div class="row">
<div class="eight columns">Eight</div>
<div class="four columns">Four</div>
</div>
<div class="row">
<div class="nine columns">Nine</div>
<div class="three columns">Three</div>
</div>
<div class="row">
<div class="ten columns">Ten</div>
<div class="two columns">Two</div>
</div>
<div class="row">
<div class="eleven columns">Eleven</div>
<div class="one column">One</div>
</div>
<div class="row">
<table>
<tr>
<td>helllo</td>
<td>helllo</td>
<td>helllo</td>
<td>helllo</td>
</tr>
<tr>
<td>goodbye sire</td>
<td>goodbye sire</td>
<td>goodbye sire</td>
<td>goodbye sire</td>
</tr>
<tr>
<td>maybe</td>
<td>maybe</td>
<td>maybe</td>
<td>maybe</td>
</tr>
</table>
</div>
<div class="row">
<h1>Hello Fellas</h1>
<h2>Hello Fellas</h2>
<h3>Hello Fellas</h3>
<h4>Hello Fellas</h4>
<h5>Hello Fellas</h5>
<h6>Hello Fellas</h6>
</div>
<div class="row">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, quam, id, fugiat nisi commodi a voluptate beatae unde minus voluptatibus pariatur officia vitae. Sunt, optio, est esse earum natus qui?</p>
<a href="#">this is a link</a>
<hr>
</div>
<div class="row">
<label>Email Address</label>
<input type="email" placeholder="anakin@darthvadar.com">
<label>Name</label>
<input type="text" placeholder="anakin">
<label>Search</label>
<input type="search" placeholder="Search Here">
<label>Password</label>
<input type="password" placeholder="******">
</div>
<div class="row">
<div class="button">hello</div>
<div class="button button-primary">hello</div>
</div>
</div>
<!-- End Document
-->
</body>
</html>