added more documentation, refined some of the styles and kept pushing on the organization. Still need to work on testing the hell out of it and then cleaning and deploying
This commit is contained in:
Dave Gamache
parent
48aa42b216
commit
7d12d78eed
BIN
Skeleton-1.0.zip
Normal file
BIN
Skeleton-1.0.zip
Normal file
Binary file not shown.
@ -1,5 +1,5 @@
|
||||
/*
|
||||
* Skeleton V0.1
|
||||
* Skeleton V1.0
|
||||
* Created by Dave Gamache
|
||||
* www.skeleton.gs
|
||||
* 4/30/2011
|
||||
@ -9,32 +9,46 @@
|
||||
/* Documentation Styles
|
||||
================================================== */
|
||||
div.container {
|
||||
padding-top: 40px; }
|
||||
padding-top: 60px; }
|
||||
|
||||
/* Doc nav */
|
||||
nav {
|
||||
margin-left: 10px;
|
||||
position: fixed; }
|
||||
position: fixed;
|
||||
width: inherit; }
|
||||
#logo {
|
||||
margin-bottom: 30px; }
|
||||
margin-bottom: 30px;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
letter-spacing: -1px;
|
||||
font-weight: bold;
|
||||
text-align: right; }
|
||||
nav ul {
|
||||
margin-left: 40px;
|
||||
overflow: hidden; }
|
||||
float: right; }
|
||||
nav ul li {
|
||||
text-align: right;
|
||||
display: block;
|
||||
margin-bottom: 10px; }
|
||||
nav ul li a {
|
||||
font-size: 15px;
|
||||
color:#5f5f5f;
|
||||
font-size: 14px;
|
||||
color: #555;
|
||||
text-decoration: none;
|
||||
font-weight: normal; }
|
||||
nav ul li a.active {
|
||||
font-weight: bold;
|
||||
color: #000; }
|
||||
header p {
|
||||
font-size: 40px;
|
||||
line-height: 45px;
|
||||
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
color: #8d8d8d; }
|
||||
padding: 3px 8px;
|
||||
position: relative;
|
||||
right: -8px;
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
border-radius: 2px; }
|
||||
nav ul li a:hover {
|
||||
color: #fff;
|
||||
background: #222; }
|
||||
nav .button {
|
||||
float: right; }
|
||||
header h1 {
|
||||
font-size: 52px;
|
||||
line-height: 61px;
|
||||
letter-spacing: -1px;
|
||||
font-weight: normal;
|
||||
font-family: "Georgia", "Times New Roman", Helvetica, Arial, sans-serif; }
|
||||
hr.large {
|
||||
border: none;
|
||||
height: 8px;
|
||||
@ -43,6 +57,9 @@
|
||||
div.doc-section {
|
||||
margin: 30px 0; }
|
||||
|
||||
#whatAndWhy .row {
|
||||
padding: 30px 0 0; }
|
||||
|
||||
#typography blockquote {
|
||||
margin-top: 20px; }
|
||||
|
||||
@ -52,33 +69,71 @@
|
||||
.hidden-code>div {
|
||||
display: none; }
|
||||
|
||||
figure {
|
||||
float: left;
|
||||
height: 220px;
|
||||
margin: 10px 24px 20px 0;
|
||||
position: relative; }
|
||||
figure:last-child {
|
||||
margin-right: 0; }
|
||||
figure img {
|
||||
position: absolute;
|
||||
bottom: 26px; }
|
||||
figure figcaption {
|
||||
margin: 0 auto;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
font-size: 13px;
|
||||
line-height: 30px;
|
||||
font-weight: bold;}
|
||||
figure.iphone {
|
||||
width: 119px; }
|
||||
figure.ipad {
|
||||
width: 232px; }
|
||||
figure.laptop {
|
||||
width: 301px; }
|
||||
|
||||
/* Grid */
|
||||
#grid .column,
|
||||
#grid .columns {
|
||||
background: #222;
|
||||
background: #ddd;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
color: #fff;
|
||||
color: #555;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
border-radius: 2px; }
|
||||
#grid .column:hover,
|
||||
#grid .columns:hover {
|
||||
background: #bbb;
|
||||
color: #333; }
|
||||
#grid .example-grid { overflow: hidden; }
|
||||
|
||||
|
||||
.resize {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
background: url(images/resize.png); }
|
||||
|
||||
.gist-meta { display: none !important;}
|
||||
|
||||
|
||||
/* Mobile */
|
||||
@media only screen and (max-width: 767px) {
|
||||
header p { font-size: 25px; line-height: 30px;}
|
||||
header h1 { font-size: 34px; line-height: 37px; }
|
||||
nav { position: relative; }
|
||||
nav ul { display: none; }
|
||||
#logo {
|
||||
width: 100px;
|
||||
display: block;
|
||||
margin: 0 auto; }
|
||||
#logo { text-align: left; }
|
||||
/* #whatAndWhy img { display: none; } */
|
||||
nav .button { display: none; }
|
||||
}
|
||||
|
||||
/* Mobile Landscape */
|
||||
@ -89,8 +144,10 @@
|
||||
/* Non 960 */
|
||||
@media only screen and (max-width: 969px) {
|
||||
#logo {
|
||||
max-width: 130px; }
|
||||
nav ul { margin-left: 10px; }
|
||||
font-size: 21px;
|
||||
margin-bottom: 15px; }
|
||||
nav .button {
|
||||
padding: 9px 20px 11px; }
|
||||
}
|
||||
|
||||
|
||||
@ -106,6 +163,7 @@
|
||||
/* Anything smaller than standard 960 */
|
||||
@media only screen and (max-width: 959px) {}
|
||||
|
||||
|
||||
/* iPad Portrait Only */
|
||||
@media only screen and (min-width: 768px) and (max-width: 991px) and (max-device-width: 1000px) {}
|
||||
|
||||
@ -113,10 +171,11 @@
|
||||
@media only screen and (max-width: 767px) and (max-device-width: 1000px) {}
|
||||
|
||||
/* Mobile Landscape Only */
|
||||
@media only screen and (min-width: 480px) and (max-width: 767px) and (max-device-width: 1000px) {
|
||||
header p {
|
||||
font-size: 25px;
|
||||
line-height: 30px; }
|
||||
@media only screen and (min-width: 480px) and (max-width: 767px) and (max-device-width: 1000px) {}
|
||||
|
||||
/* Anything smaller than standard 960 on a device */
|
||||
@media only screen and (max-width: 959px) and (max-device-width: 1000px) {
|
||||
.resize { display: none; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
BIN
documentation-assets/images/fast.jpg
Normal file
BIN
documentation-assets/images/fast.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
documentation-assets/images/foundation.jpg
Normal file
BIN
documentation-assets/images/foundation.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
BIN
documentation-assets/images/ipad.jpg
Normal file
BIN
documentation-assets/images/ipad.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
BIN
documentation-assets/images/iphone.jpg
Normal file
BIN
documentation-assets/images/iphone.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 37 KiB |
BIN
documentation-assets/images/macbook.jpg
Normal file
BIN
documentation-assets/images/macbook.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
BIN
documentation-assets/images/resize.png
Normal file
BIN
documentation-assets/images/resize.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
documentation-assets/images/responsive.jpg
Normal file
BIN
documentation-assets/images/responsive.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
177
index.php
177
index.php
@ -26,10 +26,6 @@
|
||||
<link rel="stylesheet" href="documentation-assets/docs.css">
|
||||
<!--[if lt IE9]><link rel="stylesheet" href="css/ie.css"><![endif]-->
|
||||
|
||||
<!-- JS (see footer for rest)
|
||||
================================================== -->
|
||||
<script src="src/javascripts/modernizr-1.7.min.js"></script>
|
||||
|
||||
<!-- Favicons
|
||||
================================================== -->
|
||||
<link rel="shortcut icon" href="/favicon.ico">
|
||||
@ -40,14 +36,12 @@
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="container">
|
||||
<div class="four columns sidebar">
|
||||
<div class="three columns sidebar">
|
||||
<nav>
|
||||
<img src="documentation-assets/images/logo.png" id="logo"></img>
|
||||
<h3 id="logo">Skeleton.gs</h3>
|
||||
<ul>
|
||||
<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>
|
||||
<li><a href="#buttons">Buttons</a></li>
|
||||
@ -55,47 +49,83 @@
|
||||
<li><a href="#forms">Forms</a></li>
|
||||
<li><a href="#mediaQueries">Media Queries</a></li>
|
||||
<li><a href="#theFuture">The Future</a></li>
|
||||
<li class="download"><a href="#download">Download</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
<div class="twelve columns content">
|
||||
<div class="twelve columns content offset-by-one">
|
||||
<header>
|
||||
<p>Skeleton is a lightweight framework for HTML, CSS & jQuery that makes building websites easier.</p>
|
||||
<h1>A Beautiful Boilerplate for Responsive, Mobile-Friendly Development</h1>
|
||||
</header>
|
||||
<hr class="large" />
|
||||
<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>
|
||||
<hr />
|
||||
<div class="doc-section" id="basics">
|
||||
<h3>Basics</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>
|
||||
<hr />
|
||||
<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. 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>
|
||||
<h3>What Is It?</h3>
|
||||
<p>Skeleton is a small collection of 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. Skeleton is built on three core pieces:</p>
|
||||
<div class="row clearfix">
|
||||
<div class="four columns alpha">
|
||||
<img src="documentation-assets/images/responsive.jpg" alt="responsive" width="220" height="113" />
|
||||
</div>
|
||||
<div class="eight columns omega">
|
||||
<h5>Responsive Grid Down To Mobile</h5>
|
||||
<p>Skeleton has a familiar, lightweight 960 grid as it's base, but elegantly scales down to downsized browser windows, tablets, mobile phones (in landscape and portrait). <strong>Go ahead, resize this page!</strong></p>
|
||||
</div>
|
||||
</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 class="row clearfix">
|
||||
<div class="four columns alpha">
|
||||
<img src="documentation-assets/images/fast.jpg" alt="responsive" width="220" height="113" />
|
||||
</div>
|
||||
<div class="eight columns omega">
|
||||
<h5>Fast to Start</h5>
|
||||
<p>Skeleton is a tool for rapid development. Get started fast with CSS best practices, a well-structured grid that makes mobile consideration easy, an organized file structure and super basic UI elements like lightly styled forms, buttons, tabs and more.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row clearfix">
|
||||
<div class="four columns alpha">
|
||||
<img src="documentation-assets/images/foundation.jpg" alt="responsive" width="220" height="113" />
|
||||
</div>
|
||||
<div class="eight columns omega">
|
||||
<h5>Style Agnostic</h5>
|
||||
<p>Skeleton is not a UI framework. It's a development kit that provides the most basic styles as a foundation, but is ready to adopt whatever your design or style is.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
<ul class="square">
|
||||
<li><strong>Responsive</strong>: Skeleton was designed to work beautifully across modern browsers at any size, but more important across all of your devices.</li>
|
||||
<li><strong>Style Agnostic</strong>: Very basic styles have been applied to make Skeleton awesome out of the box, but more importantly it's ready for <em>your </em>style.</li>
|
||||
<li><strong>Fast</strong>: alksdfj alkds;fj alksdfj</li>
|
||||
</ul>
|
||||
-->
|
||||
<!--
|
||||
<figure class="iphone">
|
||||
<img src="documentation-assets/images/iphone.jpg" alt="iphone" />
|
||||
<figcaption>Mobile</figcaption>
|
||||
</figure>
|
||||
<figure class="ipad">
|
||||
<img src="documentation-assets/images/ipad.jpg" alt="ipad" />
|
||||
<figcaption>Tablet</figcaption>
|
||||
</figure>
|
||||
<figure class="laptop">
|
||||
<img src="documentation-assets/images/macbook.jpg" alt="macbook" />
|
||||
<figcaption>Laptop/Desktop</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
-->
|
||||
<hr />
|
||||
<!--
|
||||
<div class="doc-section" id="downloads">
|
||||
<h3>Downloads</h3>
|
||||
<p>Getting the ball rolling with Skeleton is dead simple. You can download the entire boilerplate zip, just the skeleton.gs grid system by itself, or the PSDs for designing on the skeleton grid.</p>
|
||||
<a class="button" href="">Download Full Zip</a>
|
||||
<a class="secondary button" href="">Only Grid CSS</a>
|
||||
<a class="secondary button" href="">Only Grid PSDs</a>
|
||||
</div>
|
||||
<hr />
|
||||
-->
|
||||
<div class="doc-section clearfix" id="grid">
|
||||
<h3>Grid</h3>
|
||||
<p>Skeleton's base grid is a simpler variation of the 960 grid system. The syntax is simpler and is just as effective cross browser and across devices, but the awesome part is that it also has the flexibility to go mobile like a champ. The option is yours to have the site scale fluidly or to have a scaled fixed grid.</p>
|
||||
<h3>The Grid</h3>
|
||||
<p>Skeleton's base grid is a variation of the 960 grid system. The syntax is simple and it's effective cross browser, but the awesome part is that it also has the flexibility to go mobile like a champ. <strong>Go ahead, resize the browser and watch as the layout reacts!</strong></p>
|
||||
<div class="example-grid">
|
||||
<div class="one column alpha">One</div>
|
||||
<div class="eleven columns omega">Eleven</div>
|
||||
@ -122,7 +152,26 @@
|
||||
</div>
|
||||
<div class="hidden-code">
|
||||
<a href="">Code Example</a>
|
||||
<script type="text/javascript" src="http://snipt.net/embed/44d7e5e7fece4e269ef873fc448804bb"></script>
|
||||
<script src="https://gist.github.com/959632.js?file=Skeleton%20Grid"></script>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<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. 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 />
|
||||
@ -133,7 +182,7 @@
|
||||
<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>
|
||||
<!-- <script type="text/javascript" src="http://snipt.net/embed/c9ba7e6bef73adc206a1f2f156336b1f"></script> -->
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
@ -152,14 +201,14 @@
|
||||
</ul>
|
||||
<div class="hidden-code">
|
||||
<a href="">Code Example</a>
|
||||
<script type="text/javascript" src="http://snipt.net/embed/4b46e3f57681fb03107aee169cd7e252"></script>
|
||||
<!-- <script type="text/javascript" src="http://snipt.net/embed/4b46e3f57681fb03107aee169cd7e252"></script> -->
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="doc-section clearfix" id="forms">
|
||||
<h3>Forms</h3>
|
||||
<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">
|
||||
<div class="four columns alpha">
|
||||
<form action="">
|
||||
<label for="regularInput">Regular Input</label>
|
||||
<input type="text" id="regularInput" />
|
||||
@ -213,11 +262,44 @@
|
||||
<hr />
|
||||
<div class="doc-section" id="theFuture">
|
||||
<h3>The Future</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>As I write this, Skeleton is unreleased and I have just started using it in personal projects. In the future, I hope to build a small community around Skeleton - I want to get feedback, make it better and find the holes. </p>
|
||||
<p><strong>The ultimate goal is to build the best starting point for front-end development with an emphasis on simple, device-agnostic design.</strong> Help me get there - check out the project on Github or just email me (dhgamache [at] gmail.com) with questions/suggestions.</p>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="doc-section" id="download">
|
||||
<h3>Download</h3>
|
||||
<p>The Skeleton download is a zip file (~50kb) containing all the CSS groundwork and JS goodies to get started on any web project. </p>
|
||||
<a href="files/" class="button">Download Skeleton 1.0</a>
|
||||
<p>The file structure for Skeleton is:</p>
|
||||
<ul class="square">
|
||||
<li><strong>index.html</strong>: The base html page that includes the necessary initial markup</li>
|
||||
<li>
|
||||
<strong>stylesheets</strong> <em>(folder)</em>
|
||||
<ul class="circle">
|
||||
<li><strong>base.css</strong>: Basic styles of Skeleton</li>
|
||||
<li><strong>skeleton.css</strong>: The glorious Skeleton grid</li>
|
||||
<li><strong>layout.css</strong>: Empty file made for your site specific styles</li>
|
||||
<li><strong>ie.css</strong>: Empty CSS file for IE specific needs</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>javascripts</strong> <em>(folder)</em>
|
||||
<ul class="circle">
|
||||
<li><strong>jquery-1.5.1.min.js</strong>: jQuery is served the Google CDN, but I've provided a local fallback</li>
|
||||
<li><strong>app.css</strong>: Contains code for activating tabs and should house all of your sites JS</li>
|
||||
<li><strong>Plugins</strong> <em>(folder)</em>: An empty directory for your jQuery plugins</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>images</strong> <em>(folder)</em>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- container -->
|
||||
|
||||
<div class="resize"></div>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -231,10 +313,21 @@
|
||||
<script src="src/javascripts/app.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
$('.hidden-code').click(function(e) {
|
||||
e.preventDefault();
|
||||
$(this).children('div').slideDown();
|
||||
$(this).children('.gist').slideToggle();
|
||||
})
|
||||
|
||||
var originalText;
|
||||
$('.example-grid').children().hover(
|
||||
function() {
|
||||
originalText = $(this).text();
|
||||
$(this).html($(this).width()+'px');
|
||||
},
|
||||
function() {
|
||||
$(this).html(originalText);
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,5 +1,5 @@
|
||||
/*
|
||||
* Skeleton V0.1
|
||||
* Skeleton V1.0
|
||||
* Created by Dave Gamache
|
||||
* www.skeleton.gs
|
||||
* 4/30/2011
|
||||
@ -9,9 +9,11 @@
|
||||
$(document).ready(function() {
|
||||
|
||||
/* iPhone fix to scroll away iPhone browser chrome */
|
||||
if(window.width < '800px') {
|
||||
/*
|
||||
if(window.width < '500px') {
|
||||
setTimeout(function(){window.scrollTo(0, 1);}, 100);
|
||||
}
|
||||
*/
|
||||
|
||||
/* Tabs Activiation
|
||||
================================================== */
|
||||
|
||||
2
src/javascripts/modernizr-1.7.min.js
vendored
2
src/javascripts/modernizr-1.7.min.js
vendored
File diff suppressed because one or more lines are too long
@ -1,5 +1,5 @@
|
||||
/*
|
||||
* Skeleton V0.1
|
||||
* Skeleton V1.0
|
||||
* Created by Dave Gamache
|
||||
* www.skeleton.gs
|
||||
* 4/30/2011
|
||||
@ -14,6 +14,7 @@
|
||||
#Typography
|
||||
#Links
|
||||
#Lists
|
||||
#Images
|
||||
#Buttons
|
||||
#Tabs
|
||||
#Forms */
|
||||
@ -61,15 +62,15 @@
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: #181818;
|
||||
font-weight: normal;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-weight: 300; }
|
||||
font-family: "Georgia", "Times New Roman", Helvetica, Arial, sans-serif;
|
||||
font-weight: normal; }
|
||||
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
|
||||
h1 { font-size: 46px; line-height: 50px; margin-bottom: 14px;}
|
||||
h2 { font-size: 35px; line-height: 40px; margin-bottom: 10px; }
|
||||
h3 { font-size: 28px; line-height: 34px; margin-bottom: 8px; }
|
||||
h4 { font-size: 21px; line-height: 30px; margin-bottom: 4px; }
|
||||
h5 { font-size: 17px; line-height: 30px; font-weight: normal; }
|
||||
h6 { font-size: 14px; line-height: 30px; font-weight: bold; }
|
||||
h6 { font-size: 14px; line-height: 30px; }
|
||||
.subheader { color: #777; }
|
||||
|
||||
p { margin: 0 0 20px; }
|
||||
@ -81,7 +82,7 @@
|
||||
small { font-size: 80%; line-height: inherit; }
|
||||
|
||||
/* Blockquotes */
|
||||
blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; }
|
||||
blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; font-style: italic; }
|
||||
blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; }
|
||||
blockquote cite { display: block; font-size: 12px; color: #555; }
|
||||
blockquote cite:before { content: "\2014 \0020"; }
|
||||
@ -107,11 +108,19 @@
|
||||
ul.circle { list-style: circle outside; }
|
||||
ul.disc { list-style: disc outside; }
|
||||
ul ul, ul ol
|
||||
ol ol, ol ul { margin: 4px 0 5px 30px; }
|
||||
ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 90%; }
|
||||
ul ul li, ul ol li
|
||||
ol ol li, ol ul li { margin-bottom: 6px; }
|
||||
li { line-height: 18px; margin-bottom: 12px; }
|
||||
ul.large li { line-height: 21px; }
|
||||
li p { line-height: 21px; }
|
||||
|
||||
/* #Images
|
||||
================================================== */
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto; }
|
||||
|
||||
|
||||
/* #Buttons
|
||||
================================================== */
|
||||
@ -153,7 +162,7 @@
|
||||
.large.button { font-size: 18px; padding: 11px 48px 13px; }
|
||||
|
||||
/* Types ---------- */
|
||||
.secondary.button { background-color: #666; font-size: 11px; }
|
||||
.secondary.button { background-color: #aaa; font-size: 11px; }
|
||||
|
||||
/* Hovers ---------- */
|
||||
.button:hover { background-color: #000; }
|
||||
@ -184,7 +193,6 @@
|
||||
line-height: 30px;
|
||||
border: solid 1px #ddd;
|
||||
border-width: 1px 0 0 1px;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
background: #eee;
|
||||
font-size: 13px; }
|
||||
@ -230,6 +238,7 @@
|
||||
color: #777;
|
||||
margin: 0;
|
||||
width: 210px;
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin-bottom: 20px;
|
||||
background: #fff; }
|
||||
|
||||
@ -1,86 +0,0 @@
|
||||
/* Artfully masterminded by ZURB
|
||||
|
||||
Make sure to include the app.js if you are going to use inline label inputs
|
||||
*/
|
||||
|
||||
|
||||
/* -----------------------------------------
|
||||
Standard Forms
|
||||
----------------------------------------- */
|
||||
|
||||
form { margin: 0 0 18px; }
|
||||
form label { display: block; font-size: 13px; line-height: 18px; cursor: pointer; margin-bottom: 9px; }
|
||||
|
||||
input.input-text, textarea { border-right: 1px solid #bbb; border-bottom: 1px solid #bbb; }
|
||||
input.input-text, textarea, select { display: block; margin-bottom: 9px; }
|
||||
label + input.input-text, label + textarea, label + select, label + div.dropdown, select + div.dropdown { margin-top: -9px; }
|
||||
|
||||
/* Text input and textarea font and padding */
|
||||
input.input-text, textarea { font-size: 13px; padding: 4px 3px 2px; outline: none !important; background: #fff; }
|
||||
input.input-text.oversize, textarea.oversize { font-size: 18px !important; padding: 4px 5px !important; }
|
||||
input.input-text:focus, textarea:focus { background: #f9f9f9; }
|
||||
|
||||
/* Inlined Label Style */
|
||||
input.placeholder, textarea.placeholder { color: #888; }
|
||||
|
||||
/* Text input and textarea sizes */
|
||||
input.input-text, textarea { width: 254px; }
|
||||
input.small, textarea.small { width: 134px; }
|
||||
input.medium, textarea.medium { width: 254px; }
|
||||
input.large, textarea.large { width: 434px; }
|
||||
|
||||
/* Fieldsets */
|
||||
form fieldset { padding: 9px 9px 2px 9px; border: solid 1px #ddd; margin: 18px 0; }
|
||||
|
||||
/* Errors */
|
||||
input.input-text.red { border-color: red; background-color: rgba(255,0,0,0.15); }
|
||||
label.red { color: red; }
|
||||
small.error { margin-top: -6px; display: block; margin-bottom: 9px; font-size: 11px; color: red; width: 260px; }
|
||||
|
||||
.small + .error { width: 140px; }
|
||||
.medium + .error { width: 260px; }
|
||||
.large + .error { width: 440px; }
|
||||
|
||||
/* -----------------------------------------
|
||||
Nicer Forms
|
||||
----------------------------------------- */
|
||||
form.nice input.input-text, form.nice textarea { border: solid 1px #bbb; -webkit-border-radius: 3px; -moz-border-radius: 3px; }
|
||||
form.nice input.input-text, form.nice textarea { font-size: 13px; padding: 6px 3px 4px; outline: none !important; background: url(../images/misc/input-bg.png) #fff; }
|
||||
form.nice input.input-text:focus, form.nice textarea:focus { background-color: #f9f9f9; }
|
||||
|
||||
form.nice fieldset { -webkit-border-radius: 5px; -moz-border-radius: 5px; }
|
||||
|
||||
form.nice small.error { padding: 6px 4px; border: solid 0px red; border-width: 0px 1px 1px 1px; margin-top: -10px; background: red; color: #fff; font-size: 12px; font-weight: bold; -webkit-border-bottom-left-radius: 3px; -webkit-border-bottom-right-radius: 3px; -moz-border-radius-bottomleft: 3px; -moz-border-radius-bottomright: 3px; }
|
||||
|
||||
form.nice .small + .error { width: 132px; }
|
||||
form.nice .medium + .error { width: 252px; }
|
||||
form.nice .large + .error { width: 432px; }
|
||||
|
||||
/* -----------------------------------------
|
||||
Custom Forms
|
||||
----------------------------------------- */
|
||||
|
||||
form.custom span.custom { display: inline-block; width: 14px; height: 14px; position: relative; top: 2px; border: solid 1px #ccc; background: url(../images/misc/custom-form-sprites.png) 0 0 no-repeat; }
|
||||
form.custom span.custom.radio { border-radius: 7px; -webkit-border-radius: 7px; -moz-border-radius: 7px; }
|
||||
form.custom span.custom.radio.checked { background-position: 0px -14px; }
|
||||
form.custom span.custom.checkbox.checked { background-position: 0px -28px; }
|
||||
|
||||
form.custom div.custom.dropdown { position: relative; display: inline-block; width: auto; height: 28px; margin-bottom: 9px; }
|
||||
form.custom div.custom.dropdown a.current { display: block; width: auto; line-height: 26px; padding: 0 38px 0 6px; border: solid 1px #ddd; color: #141414; }
|
||||
form.custom div.custom.dropdown a.selector { position: absolute; width: 26px; height: 26px; display: block; background: url(../images/misc/custom-form-sprites.png) -14px 0 no-repeat; right: 0px; top: 0px; border: solid 1px #ddd; }
|
||||
form.custom div.custom.dropdown:hover a.selector,
|
||||
form.custom div.custom.dropdown.open a.selector { background-position: -14px -26px; }
|
||||
|
||||
form.custom div.custom.dropdown ul { position: absolute; width: auto; display: none; margin: 0; left: 0px; top: 27px; margin: 0; padding: 0; background: rgba(255,255,255,0.9); border: solid 1px #ddd; z-index: 10; }
|
||||
form.custom div.custom.dropdown ul li { cursor: pointer; padding: 3px 38px 3px 6px; margin: 0; }
|
||||
form.custom div.custom.dropdown ul li.selected { background: url(../images/misc/custom-form-sprites.png) right -52px no-repeat; }
|
||||
form.custom div.custom.dropdown ul li:hover { background-color: #2a85e8; color: #fff; }
|
||||
form.custom div.custom.dropdown ul li.selected:hover { background: url(../images/misc/custom-form-sprites.png) #2a85e8 right -78px no-repeat; }
|
||||
form.custom div.custom.dropdown ul.show { display: block; }
|
||||
|
||||
form.custom div.custom.dropdown.open ul { display: block; }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/*
|
||||
* Skeleton V0.1
|
||||
* Skeleton V1.0
|
||||
* Created by Dave Gamache
|
||||
* www.skeleton.gs
|
||||
* 4/30/2011
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/*
|
||||
* Skeleton V0.1
|
||||
* Skeleton V1.0
|
||||
* Created by Dave Gamache
|
||||
* www.skeleton.gs
|
||||
* 4/30/2011
|
||||
|
||||
44
src/stylesheets/skeleton.css
vendored
44
src/stylesheets/skeleton.css
vendored
@ -1,5 +1,5 @@
|
||||
/*
|
||||
* Skeleton V0.1
|
||||
* Skeleton V1.0
|
||||
* Created by Dave Gamache
|
||||
* www.skeleton.gs
|
||||
* 4/30/2011
|
||||
@ -28,6 +28,7 @@ which applies to mobile as well.*/
|
||||
|
||||
.container { position: relative; width: 960px; margin: 0 auto; padding: 0; }
|
||||
.column, .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
|
||||
.row { margin-bottom: 20px; }
|
||||
|
||||
/* Nested Column Classes */
|
||||
.column.alpha, .columns.alpha { margin-left: 0; }
|
||||
@ -172,6 +173,23 @@ which applies to mobile as well.*/
|
||||
.container .fourteen.columns { width: 652px; }
|
||||
.container .fifteen.columns { width: 700px; }
|
||||
.container .sixteen.columns { width: 748px; }
|
||||
|
||||
/* Offsets */
|
||||
.container .offset-by-one { padding-left: 48px; }
|
||||
.container .offset-by-two { padding-left: 96px; }
|
||||
.container .offset-by-three { padding-left: 144px; }
|
||||
.container .offset-by-four { padding-left: 192px; }
|
||||
.container .offset-by-five { padding-left: 288px; }
|
||||
.container .offset-by-six { padding-left: 336px; }
|
||||
.container .offset-by-seven { padding-left: 348px; }
|
||||
.container .offset-by-eight { padding-left: 432px; }
|
||||
.container .offset-by-nine { padding-left: 480px; }
|
||||
.container .offset-by-ten { padding-left: 528px; }
|
||||
.container .offset-by-eleven { padding-left: 576px; }
|
||||
.container .offset-by-twelve { padding-left: 624px; }
|
||||
.container .offset-by-thirteen { padding-left: 672px; }
|
||||
.container .offset-by-fourteen { padding-left: 720px; }
|
||||
.container .offset-by-fifteen { padding-left: 900px; }
|
||||
}
|
||||
|
||||
|
||||
@ -200,6 +218,24 @@ which applies to mobile as well.*/
|
||||
.container .fourteen.columns,
|
||||
.container .fifteen.columns,
|
||||
.container .sixteen.columns { width: 300px; }
|
||||
|
||||
/* Offsets */
|
||||
.container .offset-by-one,
|
||||
.container .offset-by-two,
|
||||
.container .offset-by-three,
|
||||
.container .offset-by-four,
|
||||
.container .offset-by-five,
|
||||
.container .offset-by-six,
|
||||
.container .offset-by-seven,
|
||||
.container .offset-by-eight,
|
||||
.container .offset-by-nine,
|
||||
.container .offset-by-ten,
|
||||
.container .offset-by-eleven,
|
||||
.container .offset-by-twelve,
|
||||
.container .offset-by-thirteen,
|
||||
.container .offset-by-fourteen,
|
||||
.container .offset-by-fifteen { padding-left: 0; }
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -239,15 +275,19 @@ which applies to mobile as well.*/
|
||||
|
||||
/* Use clearfix class on parent to clear nested columns*/
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
.clearfix:after,
|
||||
.row:before,
|
||||
.row:after {
|
||||
content: '\0020';
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
height: 0; }
|
||||
.row:after,
|
||||
.clearfix:after {
|
||||
clear: both; }
|
||||
.row,
|
||||
.clearfix {
|
||||
zoom: 1; }
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user