From baec02aeb57894abffd1045769c4000b1d94e510 Mon Sep 17 00:00:00 2001 From: Dave Gamache Date: Mon, 8 Dec 2014 12:36:15 -0800 Subject: [PATCH] creating the downloadish page --- README.md | 16 +- {stylesheets => css}/normalize.css | 0 {stylesheets => css}/skeleton.css | 0 {stylesheets => docs/css}/custom.css | 0 .../css}/github-prettify-theme.css | 0 {images => docs/images}/feather.svg | 0 {images => docs/images}/pens.svg | 0 {images => docs/images}/watch.svg | 0 docs/index.html | 644 ++++++++++++++++++ {scripts => docs/js}/site.js | 3 + index.html | 610 +---------------- 11 files changed, 663 insertions(+), 610 deletions(-) rename {stylesheets => css}/normalize.css (100%) rename {stylesheets => css}/skeleton.css (100%) rename {stylesheets => docs/css}/custom.css (100%) rename {stylesheets => docs/css}/github-prettify-theme.css (100%) rename {images => docs/images}/feather.svg (100%) rename {images => docs/images}/pens.svg (100%) rename {images => docs/images}/watch.svg (100%) create mode 100644 docs/index.html rename {scripts => docs/js}/site.js (96%) diff --git a/README.md b/README.md index 11ed052..fe0b5b4 100644 --- a/README.md +++ b/README.md @@ -43,11 +43,17 @@ Skeleton is lightweight and simple. It styles only raw HTML elements (with a few The above list is non-exhaustive. Skeleton works perfectly with almost all older versions of the browsers above, though IE certainly has large degradation prior to IE9. -## Acknowledgement - -Skeleton was created by [Dave Gamache](https://twitter.com/dhg) for a better web. - ## License -All parts of Skeleton are free to use and abuse under the [open-source MIT license](http://opensource.org/licenses/mit-license.php). \ No newline at end of file +All parts of Skeleton are free to use and abuse under the [open-source MIT license](http://opensource.org/licenses/mit-license.php). + + +## Colophon + +Skeleton was built using [Sublime Text 3](http://www.sublimetext.com/3) and designed with [Sketch](http://bohemiancoding.com/sketch). The typeface [Raleway](http://www.google.com/fonts/specimen/Raleway) was created by [Matt McInerney](http://matt.cc/) and [Pablo Impallari](http://www.impallari.com/). Code highlighting by Google's [Prettify library](https://code.google.com/p/google-code-prettify/). Icons in the header of the documentation are all derivative work of icons from [The Noun Project](thenounproject.com). [Feather](http://thenounproject.com/term/feather/22073) by Zach VanDeHey, [Pen](http://thenounproject.com/term/pen/21163) (with cap) by Ed Harrison, [Pen](http://thenounproject.com/term/pen/32847) (with clicker) by Matthew Hall, and [Watch](http://thenounproject.com/term/watch/48015) by Julien Deveaux. + + +## Acknowledgement + +Skeleton was created by [Dave Gamache](https://twitter.com/dhg) for a better web. \ No newline at end of file diff --git a/stylesheets/normalize.css b/css/normalize.css similarity index 100% rename from stylesheets/normalize.css rename to css/normalize.css diff --git a/stylesheets/skeleton.css b/css/skeleton.css similarity index 100% rename from stylesheets/skeleton.css rename to css/skeleton.css diff --git a/stylesheets/custom.css b/docs/css/custom.css similarity index 100% rename from stylesheets/custom.css rename to docs/css/custom.css diff --git a/stylesheets/github-prettify-theme.css b/docs/css/github-prettify-theme.css similarity index 100% rename from stylesheets/github-prettify-theme.css rename to docs/css/github-prettify-theme.css diff --git a/images/feather.svg b/docs/images/feather.svg similarity index 100% rename from images/feather.svg rename to docs/images/feather.svg diff --git a/images/pens.svg b/docs/images/pens.svg similarity index 100% rename from images/pens.svg rename to docs/images/pens.svg diff --git a/images/watch.svg b/docs/images/watch.svg similarity index 100% rename from images/watch.svg rename to docs/images/watch.svg diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 0000000..2d90b69 --- /dev/null +++ b/docs/index.html @@ -0,0 +1,644 @@ + + + + + + + Skeleton: Responsive CSS Boilerplate + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+

A dead simple, responsive boilerplate.

+ Download +
+
+ + Light as a feather at less than a kb & built with mobile in mind. +
+
+ + Styles designed to be a starting point, not a UI framework. +
+
+ + Quick to start with zero compiling or installing necessary. +
+
+
+ + + + + +
+
Is Skeleton for you?
+

You should use Skeleton if you're overwhelmed by UI frameworks like Bootstrap and Foundation or if you're embarking on a smaller project. Skeleton only styles a handful of standard HTML elements and includes a grid, but that's often more than enough to get started. In fact, this site is built on Skeleton and has just over 100 lines of custom CSS.

+

Love Skeleton and want to Tweet it, share it, or star it? Well, I appreciate that <3

+ + + + + +
+ + +
+
The grid
+

The grid is a 12-column fluid grid with a max width of 960px, that shrinks with the browser/device at smaller sizes. The max width can be changed with one line of CSS and all columns will resize accordingly. The syntax is simple and it makes coding responsive much easier. Go ahead, resize the browser.

+
+
+
One
+
Eleven
+
+
+
Two
+
Ten
+
+
+
Three
+
Nine
+
+
+
Four
+
Eight
+
+
+
Five
+
Seven
+
+
+
Six
+
Six
+
+
+
Seven
+
Five
+
+
+
Eight
+
Four
+
+
+
Nine
+
Three
+
+
+
Ten
+
Two
+
+
+
Eleven
+
One
+
+
+ + + +
+
+
+ + +
+
One
+
Eleven
+
+ + +
+
Two
+
Ten
+
+ + +
+ +
2/3
+
+
+
1/2
+
1/2
+
+ +
+ + +
+
+ + + +
+ + +
+
Typography
+

Type is all set with the rems, so font-sizes and spacial relationships can be responsively sized based on a single <html> font-size property. Out of the box, Skeleton never changes the <html> font-size, but it's there in case you need it for your project. All measurements are still base 10 though so, an <h1> with 5.0remfont-size just means 50px.

+
+
+
+

The typography base is Raleway served by Google, set at 15rem (15px) over a 1.6 line height (24px). Other type basics like anchors, strong, emphasis, and underline are all obviously included.

+

Headings create a family of distinct sizes each with specific letter-spacing, line-height, and margins.

+
+
+

Heading <h1> 50rem

+

Heading <h2> 42rem

+

Heading <h3> 36rem

+

Heading <h4> 30rem

+
Heading <h5> 24rem
+
Heading <h6> 15rem
+
+
+
+ + + +
+
+

Heading

+

Heading

+

Heading

+

Heading

+
Heading
+
Heading
+ + +

The base type is 15px over 1.6 line height (24px)

+ + +Bolded +Italicized +Colored +Underlined +
+
+ + + +
+ + +
+
Buttons
+

Buttons come in two basic flavors in Skeleton. The standard <button> element is plain, whereas the .button-primary button is vibrant and prominent. Button styles are applied to a number of appropriate form elements, but can also be arbitrarily attached to anchors with a .button class.

+
+
+ Anchor button + + + +
+
+ Anchor button + + + +
+
+ + + +
+
+Anchor button
+
+
+
+
+
+Anchor button
+
+
+
+
+
+ + + +
+ + +
+
Forms
+

Forms are a huge pain, but hopefully these styles make it a bit easier. All inputs, select, and buttons are normalized for a common height cross-browser so inputs can be stacked or placed alongside each other.

+
+
+
+
+ + +
+
+ + +
+
+ + + + +
+
+ + + +
+
+
+
+
+ + +
+
+ + +
+
+ + + + +
+ + + + +
+
+ + + +
+ + +
+
Lists
+
+
+
    +
  • Unordered lists have basic styles
  • +
  • + They use the circle list style +
      +
    • Nested lists styled to feel right
    • +
    • Can nest either type of list into the other
    • +
    +
  • +
  • Just more list items mama san
  • +
+
+
+
    +
  1. Ordered lists also have basic styles
  2. +
  3. + They use the decimal list style +
      +
    • Ordered and unordered can be nested
    • +
    • Can nest either type of list into the other
    • +
    +
  4. +
  5. Last list item just for the fun
  6. +
+
+
+ + + +
+
    +
  • Item 1
  • +
  • + Item 2 +
      +
    • Item 2.1
    • +
    • Item 2.2
    • +
    +
  • +
  • Item 3
  • +
+ + +
+
+ + + +
+ + +
+
Code
+

Code styling is kept basic – just wrap anything in a <code> and it will appear like this. For blocks of code, wrap a <code> with a <pre>.

+
+
.some-class {
+  background-color: red;
+}
+
+ + + +
+
.some-class {
+  background-color: red;
+}
+ + +
+
+ + + +
+ + +
+
Tables
+

Be sure to use properly formed table markup with <thead> and <tbody> when building a table.

+
+ + + + + + + + + + + + + + + + + + + + + + + +
NameAgeSexLocation
Dave Gamache26MaleSan Francisco
Dwayne Johnson42MaleHayward
+
+ + + +
+
+  
+    
+      
+      
+      
+      
+    
+  
+  
+    
+      
+      
+      
+      
+    
+    
+      
+      
+      
+      
+    
+  
+
NameAgeSexLocation
Dave Gamache26MaleSan Francisco
Dwayne Johnson42MaleHayward
+
+
+ + + +
+ + +
+
Media queries
+

Skeleton uses media queries to serve its scalable grid, but also has a list of queries for convenience of styling your site across devices. There are two sets of queries. The first set is mobile-first, meaning it targets min-width. The other set is desktop-first, meaning it targets max-width. Mobile-first queries are how Skeleton's grid is built and is a preferrable method of organizing CSS. The sizes for the queries are:

+
+
+
    +
  • Desktop HD: 1200px
  • +
  • Desktop: 1000px
  • +
  • Tablet: 750px
  • +
+
+
+
    +
  • Phablet: 550px
  • +
  • Mobile: 400px
  • +
+
+
+ + + +
+/* Mobile first queries */
+
+/* Larger than mobile */
+@media (min-width: 400px) {}
+
+/* Larger than phablet */
+@media (min-width: 550px) {}
+
+/* Larger than tablet */
+@media (min-width: 750px) {}
+
+/* Larger than desktop */
+@media (min-width: 1000px) {}
+
+/* Larger than Desktop HD */
+@media (min-width: 1200px) {}
+
+
+/* Desktop first queries */
+
+/* Smaller than Desktop HD */
+@media (max-width: 1199px) {}
+
+/* Smaller than desktop */
+@media (max-width: 999px) {}
+
+/* Smaller than tablet */
+@media (max-width: 749px) {}
+
+/* Smaller than phablet */
+@media (max-width: 549px) {}
+
+/* Smaller than mobile */
+@media (max-width: 399px) {}
+
+/* Note: Values are 1px less on desktop first queries so there's no overriding in case you use both types of queries  */
+
+
+ + + +
+ + + +
+
Utilities
+

Skeleton has a number of small utility classes that act as easy-to-use helpers. Sometimes it's better to use a utility class than create a whole new class just to float an element.

+ + + +
+/* Utility Classes */
+
+/* Make element full width */
+.u-full-width {
+  width: 100%;
+  box-sizing: border-box; }
+
+/* Make sure elements don't run outside containers (great for images in columns) */
+.u-max-full-width {
+  max-width: 100%;
+  box-sizing: border-box; }
+
+/* Float either direction */
+.u-pull-right {
+  float: right; }
+.u-pull-left {
+  float: left; }
+
+/* Clear a float */
+.u-cf { 
+  content: "";
+  display: table;
+  clear: both; }
+
+
+ + + +
+ + +
+
Examples
+
+ +
+ + + + \ No newline at end of file diff --git a/scripts/site.js b/docs/js/site.js similarity index 96% rename from scripts/site.js rename to docs/js/site.js index e22bf43..3cb76e5 100644 --- a/scripts/site.js +++ b/docs/js/site.js @@ -42,6 +42,7 @@ $(document).ready(function() { function openPopover(e) { e.preventDefault() + closePopover(); var popover = $($(this).data('popover')); popover.toggleClass('open') e.stopImmediatePropagation(); @@ -60,7 +61,9 @@ $(document).ready(function() { }); function resize() { + $body.removeClass('has-docked-nav') navOffsetTop = $nav.offset().top + onScroll() } function onScroll() { diff --git a/index.html b/index.html index 2d3176e..6c29fa5 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ - Skeleton: Responsive CSS Boilerplate + Your page title here :) @@ -19,624 +19,24 @@ - - - + + - - - - - +
-
-

A dead simple, responsive boilerplate.

- Download -
-
- - Light as a feather at less than a kb & built with mobile in mind. -
-
- - Styles designed to be a starting point, not a UI framework. -
-
- - Quick to start with zero compiling or installing necessary. -
-
-
- - - - - -
-
Is Skeleton for you?
-

You should use Skeleton if you're overwhelmed by UI frameworks like Bootstrap and Foundation or if you're embarking on a smaller project. Skeleton only styles a handful of standard HTML elements and includes a grid, but that's often more than enough to get started. In fact, this site is built on Skeleton and has just over 100 lines of custom CSS.

-

Love Skeleton and want to Tweet it, share it, or star it? Well, I appreciate that <3

- - - - - -
- - -
-
The grid
-

The grid is a 12-column fluid grid with a max width of 960px, that shrinks with the browser/device at smaller sizes. The max width can be changed with one line of CSS and all columns will resize accordingly. The syntax is simple and it makes coding responsive much easier. Go ahead, resize the browser.

-
-
-
One
-
Eleven
-
-
-
Two
-
Ten
-
-
-
Three
-
Nine
-
-
-
Four
-
Eight
-
-
-
Five
-
Seven
-
-
-
Six
-
Six
-
-
-
Seven
-
Five
-
-
-
Eight
-
Four
-
-
-
Nine
-
Three
-
-
-
Ten
-
Two
-
-
-
Eleven
-
One
-
-
- - - -
-
-
- - -
-
One
-
Eleven
-
- - -
-
Two
-
Ten
-
- - -
- -
2/3
-
-
-
1/2
-
1/2
-
- -
- - -
-
- - - -
- - -
-
Typography
-

Type is all set with the rems, so font-sizes and spacial relationships can be responsively sized based on a single <html> font-size property. Out of the box, Skeleton never changes the <html> font-size, but it's there in case you need it for your project. All measurements are still base 10 though so, an <h1> with 5.0remfont-size just means 50px.

-
-
-
-

The typography base is Raleway served by Google, set at 15rem (15px) over a 1.6 line height (24px). Other type basics like anchors, strong, emphasis, and underline are all obviously included.

-

Headings create a family of distinct sizes each with specific letter-spacing, line-height, and margins.

-
-
-

Heading <h1> 50rem

-

Heading <h2> 42rem

-

Heading <h3> 36rem

-

Heading <h4> 30rem

-
Heading <h5> 24rem
-
Heading <h6> 15rem
-
-
-
- - - -
-
-

Heading

-

Heading

-

Heading

-

Heading

-
Heading
-
Heading
- - -

The base type is 15px over 1.6 line height (24px)

- - -Bolded -Italicized -Colored -Underlined -
-
- - - -
- - -
-
Buttons
-

Buttons come in two basic flavors in Skeleton. The standard <button> element is plain, whereas the .button-primary button is vibrant and prominent. Button styles are applied to a number of appropriate form elements, but can also be arbitrarily attached to anchors with a .button class.

-
-
- Anchor button - - - -
-
- Anchor button - - - -
-
- - - -
-
-Anchor button
-
-
-
-
-
-Anchor button
-
-
-
-
-
- - - -
- - -
-
Forms
-

Forms are a huge pain, but hopefully these styles make it a bit easier. All inputs, select, and buttons are normalized for a common height cross-browser so inputs can be stacked or placed alongside each other.

-
-
-
-
- - -
-
- - -
-
- - - - -
-
- - - -
-
-
-
-
- - -
-
- - -
-
- - - - -
- - - - -
-
- - - -
- - -
-
Lists
-
-
-
    -
  • Unordered lists have basic styles
  • -
  • - They use the circle list style -
      -
    • Nested lists styled to feel right
    • -
    • Can nest either type of list into the other
    • -
    -
  • -
  • Just more list items mama san
  • -
-
-
-
    -
  1. Ordered lists also have basic styles
  2. -
  3. - They use the decimal list style -
      -
    • Ordered and unordered can be nested
    • -
    • Can nest either type of list into the other
    • -
    -
  4. -
  5. Last list item just for the fun
  6. -
-
-
- - - -
-
    -
  • Item 1
  • -
  • - Item 2 -
      -
    • Item 2.1
    • -
    • Item 2.2
    • -
    -
  • -
  • Item 3
  • -
- - -
-
- - - -
- - -
-
Code
-

Code styling is kept basic – just wrap anything in a <code> and it will appear like this. For blocks of code, wrap a <code> with a <pre>.

-
-
.some-class {
-  background-color: red;
-}
-
- - - -
-
.some-class {
-  background-color: red;
-}
- - -
-
- - - -
- - -
-
Tables
-

Be sure to use properly formed table markup with <thead> and <tbody> when building a table.

-
- - - - - - - - - - - - - - - - - - - - - - - -
NameAgeSexLocation
Dave Gamache26MaleSan Francisco
Dwayne Johnson42MaleHayward
-
- - - -
-
-  
-    
-      
-      
-      
-      
-    
-  
-  
-    
-      
-      
-      
-      
-    
-    
-      
-      
-      
-      
-    
-  
-
NameAgeSexLocation
Dave Gamache26MaleSan Francisco
Dwayne Johnson42MaleHayward
-
-
- - - -
- - -
-
Media queries
-

Skeleton uses media queries to serve its scalable grid, but also has a list of queries for convenience of styling your site across devices. There are two sets of queries. The first set is mobile-first, meaning it targets min-width. The other set is desktop-first, meaning it targets max-width. Mobile-first queries are how Skeleton's grid is built and is a preferrable method of organizing CSS. The sizes for the queries are:

-
-
-
    -
  • Desktop HD: 1200px
  • -
  • Desktop: 1000px
  • -
  • Tablet: 750px
  • -
-
-
-
    -
  • Phablet: 550px
  • -
  • Mobile: 400px
  • -
-
-
- - - -
-/* Mobile first queries */
-
-/* Larger than mobile */
-@media (min-width: 400px) {}
-
-/* Larger than phablet */
-@media (min-width: 550px) {}
-
-/* Larger than tablet */
-@media (min-width: 750px) {}
-
-/* Larger than desktop */
-@media (min-width: 1000px) {}
-
-/* Larger than Desktop HD */
-@media (min-width: 1200px) {}
-
-
-/* Desktop first queries */
-
-/* Smaller than Desktop HD */
-@media (max-width: 1199px) {}
-
-/* Smaller than desktop */
-@media (max-width: 999px) {}
-
-/* Smaller than tablet */
-@media (max-width: 749px) {}
-
-/* Smaller than phablet */
-@media (max-width: 549px) {}
-
-/* Smaller than mobile */
-@media (max-width: 399px) {}
-
-/* Note: Values are 1px less on desktop first queries so there's no overriding in case you use both types of queries  */
-
-
- - - -
- - - -
-
Utilities
-

Skeleton has a number of small utility classes that act as easy-to-use helpers. Sometimes it's better to use a utility class than create a whole new class just to float an element.

- - - -
-/* Utility Classes */
-
-/* Make element full width */
-.u-full-width {
-  width: 100%;
-  box-sizing: border-box; }
-
-/* Make sure elements don't run outside containers (great for images in columns) */
-.u-max-full-width {
-  max-width: 100%;
-  box-sizing: border-box; }
-
-/* Float either direction */
-.u-pull-right {
-  float: right; }
-.u-pull-left {
-  float: left; }
-
-/* Clear a float */
-.u-cf { 
-  content: "";
-  display: table;
-  clear: both; }
-
-
- - - -
- - -
-
Examples
-
- - -
-
Support
-

Skeleton supports all latest versions of major browsers (both on desktops and mobile devices). That said, it basically works with any version of Chrome, Firefox, Opera, or Safari and as far back as IE9.

-
- - -
-
License
-

All parts of Skeleton are free to use and abuse under the open-source MIT license. More importantly, if you're into coding head over to the Github page and contribute or fork this bad boy.

-

Skeleton's version history is available on Github.

-
- - -
-
Colophon
-

Skeleton was built using Sublime Text 3 and designed with Sketch. The typeface Raleway was created by Matt McInerney and Pablo Impallari. Code highlighting by Google's Prettify library. Icons in the header are all derivative work of icon from The Noun Project. Feather by Zach VanDeHey, Pen (with cap) by Ed Harrison, Pen (with clicker) by Matthew Hall, and Watch by Julien Deveaux.

-
- +

DOWNLOAD THING