2011-08-17 21:37:22 -04:00
<!DOCTYPE html>
2011-05-03 10:36:26 -04:00
<!-- [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] -->
2011-05-29 12:46:46 -04:00
<!-- [if (gte IE 9)|!(IE)]><! --> < html lang = "en" > <!-- <![endif] -->
2011-05-03 10:36:26 -04:00
< head >
<!-- Basic Page Needs
2014-11-20 19:38:45 -05:00
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
2011-08-18 00:05:28 -04:00
< meta charset = "utf-8" >
2011-05-16 19:06:10 -04:00
< title > Your Page Title Here :)< / title >
2011-05-03 10:36:26 -04:00
< meta name = "description" content = "" >
< meta name = "author" content = "" >
2011-08-17 21:37:22 -04:00
2011-05-03 10:36:26 -04:00
<!-- Mobile Specific Metas
2014-11-20 19:38:45 -05:00
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
2011-08-18 00:05:28 -04:00
< meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1" >
2011-08-17 21:37:22 -04:00
2014-11-20 19:38:45 -05:00
<!-- FONT
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
< link href = 'http://fonts.googleapis.com/css?family=Raleway:400,300,600' rel = 'stylesheet' type = 'text/css' >
2011-05-03 10:36:26 -04:00
<!-- CSS
2014-11-20 19:38:45 -05:00
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
< link rel = "stylesheet" href = "stylesheets/normalize.css" >
2011-08-18 00:05:28 -04:00
< link rel = "stylesheet" href = "stylesheets/base.css" >
< link rel = "stylesheet" href = "stylesheets/skeleton.css" >
< link rel = "stylesheet" href = "stylesheets/layout.css" >
2014-11-20 19:38:45 -05:00
< link rel = "stylesheet" href = "stylesheets/custom.css" >
2011-08-17 21:37:22 -04:00
2012-01-26 00:38:24 -05:00
<!-- [if lt IE 9]>
< script src = "http://html5shim.googlecode.com/svn/trunk/html5.js" > < / script >
<![endif]-->
2011-05-17 20:54:18 -04:00
<!-- Favicons
2014-11-20 19:38:45 -05:00
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
2011-08-18 00:05:28 -04:00
< 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" >
2011-08-17 21:37:22 -04:00
2011-05-03 10:36:26 -04:00
< / head >
< body >
2014-11-20 19:38:45 -05:00
<!-- Primary Page Layout
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
< div class = "container" >
< section class = "header" >
< h3 class = "title" > A responsive boilerplate just for the basics.< / h3 >
< a class = "button" > Download< / a >
< div class = "value-props row" >
< div class = "four columns offset-by-two" >
< img class = "value-img" src = "images/frame.svg" >
Mobile first and weighing in at measly .5kb
< / div >
< div class = "four columns" >
< img class = "value-img" src = "images/frame.svg" >
Only styles basic HTML elements
< / div >
< div class = "four columns" >
< img class = "value-img" src = "images/frame.svg" >
Not a framework, but a jumping off point for devs
< / div >
< / div >
< / section >
2011-05-03 10:36:26 -04:00
2014-11-20 19:38:45 -05:00
<!-- Why use Skeleton -->
< div class = "row" >
< div class = "twelve columns offset-by-two docs-section" >
< h6 class = "docs-header" > Why use Skeleton< / h6 >
< p > You should use Skeleton if you're feeling like whole UI frameworks like Bootstrap, Foundation, and Pure are overkill for your projects and you just want the basics. Just styling the 80+ standard HTML elements (< button> , < p> , < nav> , … ) can get you really far. For what it's worth, < u > this site is built on Skeleton and only requires ~100 lines of additional CSS.< / u > < / p >
< / div >
< / div >
2011-05-15 19:50:51 -04:00
2014-11-20 19:38:45 -05:00
<!-- Grid -->
< div class = "row" >
< div class = "twelve columns offset-by-two docs-section" >
< h6 class = "docs-header" > The grid< / h6 >
< p > The grid is just a < u > 12-column fluid grid with a max width of 960px< / u > (but this can be changed with one line of CSS). The syntax is simple and it makes responsive implementation much, much easier. Go ahead, resize the browser. < / p >
< div class = "example-grid docs-example" >
< div class = "one column alpha" > One< / div >
< div class = "eleven columns omega" > Eleven< / div >
< div class = "two columns alpha" > Two< / div >
< div class = "ten columns omega" > Ten< / div >
< div class = "three columns alpha" > Three< / div >
< div class = "nine columns omega" > Nine< / div >
< div class = "four columns alpha" > Four< / div >
< div class = "eight columns omega" > Eight< / div >
< div class = "five columns alpha" > Five< / div >
< div class = "seven columns omega" > Seven< / div >
< div class = "six columns alpha" > Six< / div >
< div class = "six columns omega" > Six< / div >
< div class = "seven columns alpha" > Seven< / div >
< div class = "five columns omega" > Five< / div >
< div class = "eight columns alpha" > Eight< / div >
< div class = "four columns omega" > Four< / div >
< div class = "nine columns alpha" > Nine< / div >
< div class = "three columns omega" > Three< / div >
< div class = "ten columns alpha" > Ten< / div >
< div class = "two columns omega" > Two< / div >
< div class = "eleven columns alpha" > Eleven< / div >
< div class = "one column omega" > One< / div >
< / div >
< / div >
< / div >
2011-08-17 21:37:22 -04:00
2014-11-20 19:38:45 -05:00
<!-- Typography -->
< div class = "row" >
< div class = "twelve columns offset-by-two docs-section" >
< h6 class = "docs-header" > Typography< / h6 >
< p > Type is all set with the < code > rems< / code > , so font-sizes and spacial relationships are responsively sized based on a single < code > < html> < / code > font-size property. Everything is still base 10 though so, an < code > < h1> < / code > is < code > 5.0rem< / code > , which just means < code > 50px< / code > .< / p >
< div class = "docs-example" >
< div class = "row" >
< div class = "six columns alpha" >
< p > < strong > The typography base< / strong > is 15rem (15px) over a 1.6 line height (24px). Other type basics like < a href = "#" > anchors< / a > , < strong > strong< / strong > , < em > emphasis< / em > , and < u > underline< / u > are all obviously included.< / p >
< p > < strong > Headings< / strong > create a family of distinct sizes each with specific < code > letter-spacing< / code > , < code > line-height< / code > , and < code > margins< / code > .< / p >
< / div >
< div class = "six columns omega" >
< h1 > Heading< span class = "heading-font-size" > < code > < h1> < / code > 50rem< / span > < / h1 >
< h2 > Heading< span class = "heading-font-size" > < code > < h2> < / code > 42rem< / span > < / h2 >
< h3 > Heading< span class = "heading-font-size" > < code > < h3> < / code > 36rem< / span > < / h3 >
< h4 > Heading< span class = "heading-font-size" > < code > < h4> < / code > 30rem< / span > < / h4 >
< h5 > Heading< span class = "heading-font-size" > < code > < h5> < / code > 24rem< / span > < / h5 >
< h6 > Heading< span class = "heading-font-size" > < code > < h6> < / code > 15rem< / span > < / h6 >
< / div >
< / div >
< / div >
< / div >
< / div >
2011-05-03 10:36:26 -04:00
2014-11-20 19:38:45 -05:00
<!-- Buttons -->
< div class = "row" >
< div class = "twelve columns offset-by-two docs-section" >
< h6 class = "docs-header" > Buttons< / h6 >
< p > Buttons come in two basic flavors in Skeleton. The standard < code > < button> < / code > element is vibrant, whereas the < code > .secondary< / code > button takes a monotone backseat.< / p >
< div class = "docs-example" >
< a class = "button" > Anchor button< / a >
< button > Button element< / button >
< a class = "button secondary" > Anchor button< / a >
< button class = "secondary" > Button element< / button >
< / div >
< / div >
< / div >
<!-- Forms -->
< div class = "row" >
< div class = "twelve columns offset-by-two docs-section" >
< h6 class = "docs-header" > Forms< / h6 >
< / div >
2011-05-16 19:06:10 -04:00
< / div >
2014-11-20 19:38:45 -05:00
<!-- Lists -->
< div class = "row" >
< div class = "twelve columns offset-by-two docs-section" >
< h6 class = "docs-header" > Lists< / h6 >
< div class = "row docs-example" >
< div class = "six columns alpha" >
< ul >
< li > Unordered lists have basic styles< / li >
< li >
They use the circle list style
< ul >
< li > Nested lists styled to feel right< / li >
< li > Can nest either type of list into the other< / li >
< / ul >
< / li >
< li > Just more list items mama san< / li >
< / ul >
< / div >
< div class = "six columns omega" >
< ol >
< li > Ordered lists also have basic styles< / li >
< li >
They use the decimal list style
< ul >
< li > Ordered and unordered can be nested< / li >
< li > Can nest either type of list into the other< / li >
< / ul >
< / li >
< li > Last list item just for the fun< / li >
< / ol >
< / div >
< / div >
< / div >
2011-05-16 19:06:10 -04:00
< / div >
2014-11-20 19:38:45 -05:00
<!-- Code -->
< div class = "row" >
< div class = "twelve columns offset-by-two docs-section" >
< h6 class = "docs-header" > Code< / h6 >
< p > Code styling was kept super basic – < code > < code> < / code > tag and it will look just like that code tag just did. For blocks of code just use a < code > < pre> < / code > tag.< / p >
< div class = "docs-example" >
< pre > .some-class {< br > background-color: red< br > }< / pre >
< / div >
< / div >
2011-05-15 19:13:52 -04:00
< / div >
2014-11-20 19:38:45 -05:00
<!-- Tables -->
< div class = "row" >
< div class = "twelve columns offset-by-two docs-section" >
< h6 class = "docs-header" > Tables< / h6 >
< / div >
2011-05-16 19:06:10 -04:00
< / div >
2014-11-20 19:38:45 -05:00
<!-- Queries -->
< div class = "row" >
< div class = "twelve columns offset-by-two docs-section" >
< h6 class = "docs-header" > Media queries< / h6 >
< / div >
< / div >
<!-- Other -->
< div class = "row" >
< div class = "twelve columns offset-by-two docs-section" >
< h6 class = "docs-header" > Miscellaneous< / h6 >
< p > hrs, images< / p >
< / div >
< / div >
<!-- ONES I SHOULD MAYBE DO? -->
<!-- nav -->
<!-- header -->
<!-- footer -->
<!-- iframe -->
<!-- video/object -->
<!-- audio? -->
< / div >
2011-05-03 10:36:26 -04:00
2011-08-17 21:37:22 -04:00
2011-05-15 19:13:52 -04:00
<!-- End Document
2014-11-20 19:38:45 -05:00
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
2011-05-15 19:13:52 -04:00
< / body >
2011-05-03 10:36:26 -04:00
< / html >
