From 670341983c6bbbbbd563408d5c7ded8d827ef628 Mon Sep 17 00:00:00 2001 From: dhg Date: Tue, 9 Dec 2014 12:35:57 -0800 Subject: [PATCH] merging v2.0 --- README.md | 59 +++ css/normalize.css | 427 ++++++++++++++++++ css/skeleton.css | 392 +++++++++++++++++ images/favicon.png | Bin 0 -> 1156 bytes index.html | 1043 +++++++++++++++++++++++++++----------------- 5 files changed, 1514 insertions(+), 407 deletions(-) create mode 100644 README.md create mode 100644 css/normalize.css create mode 100644 css/skeleton.css create mode 100644 images/favicon.png diff --git a/README.md b/README.md new file mode 100644 index 0000000..e49c9d6 --- /dev/null +++ b/README.md @@ -0,0 +1,59 @@ +# [Skeleton](http://getskeleton.com) +Skeleton is a simple, responsive boilerplate to kickstart any responsive project. + +Check out for documentation and details. + +## Getting started + +There are a couple ways to download Skeleton: +- [Download the zip](https://github.com/dhg/Skeleton/releases/download/v2.0/Skeleton.2.0.zip) +- Clone the repo: `git clone https://github.com/dhg/Skeleton.git` + + +### What's in the download? + +The download includes Skeleton's CSS, Normalize CSS as a reset, a sample favicon, and an index.html as a starting point. + +``` +skeleton/ +├── index.html +├── css/ +│ ├── normalize.min.css +│ └── skeleton.css +├── images/ +│ └── favicon.ico +└── README.md +``` + +### Why it's awesome + +Skeleton is lightweight and simple. It styles only raw HTML elements (with a few exceptions) and provides a responsive grid. Nothing more. +- Minified, it's less than a kb +- It's a starting point, not a UI framework +- No compiling or installing...just vanilla CSS + + +## Browser support + +- Chrome latest +- Firefox latest +- Opera latest +- Safari latest +- IE latest + +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. + + +## License + +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/css/normalize.css b/css/normalize.css new file mode 100644 index 0000000..81c6f31 --- /dev/null +++ b/css/normalize.css @@ -0,0 +1,427 @@ +/*! normalize.css v3.0.2 | MIT License | git.io/normalize */ + +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/** + * Remove default margin. + */ + +body { + margin: 0; +} + +/* HTML5 display definitions + ========================================================================== */ + +/** + * Correct `block` display not defined for any HTML5 element in IE 8/9. + * Correct `block` display not defined for `details` or `summary` in IE 10/11 + * and Firefox. + * Correct `block` display not defined for `main` in IE 11. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +menu, +nav, +section, +summary { + display: block; +} + +/** + * 1. Correct `inline-block` display not defined in IE 8/9. + * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + */ + +audio, +canvas, +progress, +video { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Address `[hidden]` styling not present in IE 8/9/10. + * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. + */ + +[hidden], +template { + display: none; +} + +/* Links + ========================================================================== */ + +/** + * Remove the gray background color from active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/** + * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +/** + * Address styling not present in Safari and Chrome. + */ + +dfn { + font-style: italic; +} + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari, and Chrome. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/** + * Address styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/** + * Address inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove border when inside `a` element in IE 8/9/10. + */ + +img { + border: 0; +} + +/** + * Correct overflow not hidden in IE 9/10/11. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Grouping content + ========================================================================== */ + +/** + * Address margin not present in IE 8/9 and Safari. + */ + +figure { + margin: 1em 40px; +} + +/** + * Address differences between Firefox and other browsers. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +/** + * Contain overflow in all browsers. + */ + +pre { + overflow: auto; +} + +/** + * Address odd `em`-unit font size rendering in all browsers. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +/* Forms + ========================================================================== */ + +/** + * Known limitation: by default, Chrome and Safari on OS X allow very limited + * styling of `select`, unless a `border` property is set. + */ + +/** + * 1. Correct color not being inherited. + * Known issue: affects color of disabled elements. + * 2. Correct font properties not being inherited. + * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. + */ + +button, +input, +optgroup, +select, +textarea { + color: inherit; /* 1 */ + font: inherit; /* 2 */ + margin: 0; /* 3 */ +} + +/** + * Address `overflow` set to `hidden` in IE 8/9/10/11. + */ + +button { + overflow: visible; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. + * Correct `select` style inheritance in Firefox. + */ + +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * Remove inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +input { + line-height: normal; +} + +/** + * It's recommended that you don't attempt to style these elements. + * Firefox's implementation doesn't respect box-sizing, padding, or width. + * + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Fix the cursor style for Chrome's increment/decrement buttons. For certain + * `font-size` values of the `input`, it causes the cursor style of the + * decrement button to change from `default` to `text`. + */ + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/** + * Remove inner padding and search cancel button in Safari and Chrome on OS X. + * Safari (but not Chrome) clips the cancel button when the search input has + * padding (and `textfield` appearance). + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct `color` not being inherited in IE 8/9/10/11. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Remove default vertical scrollbar in IE 8/9/10/11. + */ + +textarea { + overflow: auto; +} + +/** + * Don't inherit the `font-weight` (applied by a rule above). + * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + */ + +optgroup { + font-weight: bold; +} + +/* Tables + ========================================================================== */ + +/** + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; +} \ No newline at end of file diff --git a/css/skeleton.css b/css/skeleton.css new file mode 100644 index 0000000..e7b7d1a --- /dev/null +++ b/css/skeleton.css @@ -0,0 +1,392 @@ +/* +* Skeleton V2.0 +* Copyright 2014, Dave Gamache +* www.getskeleton.com +* Free to use under the MIT license. +* http://www.opensource.org/licenses/mit-license.php +* 12/9/2014 +*/ + + +/* Table of contents +–––––––––––––––––––––––––––––––––––––––––––––––––– +- Grid +- Base Styles +- Typography +- Links +- Buttons +- Forms +- Lists +- Code +- Tables +- Spacing +- Utilities +- Clearing +- Media Queries +*/ + + +/* Grid +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +.container { + position: relative; + width: 80%; + max-width: 960px; + margin: 0 auto; + padding: 0; } +.container .column, +.container .columns { + float: left; + width: 100%; + box-sizing: border-box; } +.row { + margin-bottom: 2rem; } +.row .column:first-child, +.row .columns:first-child { + margin-left: 0; } + +/* For devices larger than 550px */ +@media (min-width: 550px) { + + .container .column, + .container .columns { + margin-left: 4%; } + + .container .one.column, + .container .one.columns { width: 4.66666666667%; } + .container .two.columns { width: 13.3333333333%; } + .container .three.columns { width: 22%; } + .container .four.columns { width: 30.6666666667%; } + .container .five.columns { width: 39.3333333333%; } + .container .six.columns { width: 48%; } + .container .seven.columns { width: 56.6666666667%; } + .container .eight.columns { width: 65.3333333333%; } + .container .nine.columns { width: 74.0%; } + .container .ten.columns { width: 82.6666666667%; } + .container .eleven.columns { width: 91.3333333333%; } + .container .twelve.columns { width: 100%; margin-left: 0; } + + .container .one-third.column { width: 30.6666666667%; } + .container .two-thirds.column { width: 65.3333333333%; } + + .container .one-half.column { width: 48%; } + + /* Offsets */ + .container .offset-by-one.column, + .container .offset-by-one.columns { margin-left: 8.66666666667%; } + .container .offset-by-two.column { margin-left: 17.3333333333%; } + .container .offset-by-three.column { margin-left: 26%; } + .container .offset-by-four.column { margin-left: 34.6666666667%; } + .container .offset-by-five.column { margin-left: 43.3333333333%; } + .container .offset-by-six.column { margin-left: 52%; } + .container .offset-by-seven.column { margin-left: 60.6666666667%; } + .container .offset-by-eight.column { margin-left: 69.3333333333%; } + .container .offset-by-nine.column { margin-left: 78.0%; } + .container .offset-by-ten.column { margin-left: 86.6666666667%; } + .container .offset-by-eleven.column { margin-left: 95.3333333333%; } + + .container .offset-by-one-third.column { margin-left: 34.6666666667%; } + .container .offset-by-two-thirds.column { margin-left: 69.3333333333%; } + + .container .offset-by-one-half.column { margin-left: 52%; } + +} + + +/* Base Styles +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +/* NOTE +html is set to 62.5% so that all the REM measurements throughout Skeleton +are based on 10px sizing. So basically 1.5rem = 15px :) */ +html { + font-size: 62.5%; } +body { + font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */ + line-height: 1.6; + font-weight: 400; + font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #222; } + + +/* Typography +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +h1, h2, h3, h4, h5, h6 { + font-weight: 300; + margin-top: 0; + margin-bottom: 2rem; } +h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;} +h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; } +h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; } +h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; } +h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; } +h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; } + +/* Larger than phablet */ +@media (min-width: 550px) { + h1 { font-size: 5.0rem; } + h2 { font-size: 4.2rem; } + h3 { font-size: 3.6rem; } + h4 { font-size: 3.0rem; } + h5 { font-size: 2.4rem; } + h6 { font-size: 1.5rem; } +} + +p { + margin-top: 0; } + + +/* Links +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +a { + color: #1EAEDB; } +a:hover { + color: #0FA0CE; } + + +/* Buttons +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +.button, +button, +input[type="submit"], +input[type="reset"], +input[type="button"] { + display: inline-block; + background-color: transparent; + border-radius: 4px; + color: #555; + text-align: center; + font-size: 11px; + font-weight: 600; + text-decoration: none; + cursor: pointer; + border: 1px solid #bbb; + height: 38px; + line-height: 38px; + padding: 0 30px; + letter-spacing: .1rem; + text-transform: uppercase; + white-space: nowrap; + box-sizing: border-box; } +.button:hover, +button:hover, +input[type="submit"]:hover, +input[type="reset"]:hover, +input[type="button"]:hover, +.button:focus, +button:focus, +input[type="submit"]:focus, +input[type="reset"]:focus, +input[type="button"]:focus { + border-color: #888; + color: #333; + outline: 0; } +.button.button-primary, +button.button-primary, +input[type="submit"].button-primary, +input[type="reset"].button-primary, +input[type="button"].button-primary { + color: #FFF; + border-color: #33C3F0; + background-color: #33C3F0; } +.button.button-primary:hover, +button.button-primary:hover, +input[type="submit"].button-primary:hover, +input[type="reset"].button-primary:hover, +input[type="button"].button-primary:hover, +.button.button-primary:focus, +button.button-primary:focus, +input[type="submit"].button-primary:focus, +input[type="reset"].button-primary:focus, +input[type="button"].button-primary:focus { + background-color: #1EAEDB; + border-color: #1EAEDB; + color: #FFF; } + + +/* Forms +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +input[type="email"], +input[type="search"], +input[type="text"], +input[type="password"], +textarea, +select { + border: 1px solid #D1D1D1; + height: 36px; + padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ + border-radius: 4px; + box-shadow: none; + background: #fff; } +/* Removes awkard default styles on some inputs */ +input[type="email"], +input[type="search"], +input[type="text"], +textarea { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} +textarea { + min-height: 65px; + padding-top: 6px; + padding-bottom: 6px; } +input[type="email"]:focus, +input[type="search"]:focus, +input[type="text"]:focus, +input[type="password"]:focus, +textarea:focus, +select:focus { + border: 1px solid #33C3F0; + outline: 0; } +label, +legend { + display: block; + font-weight: 600; + margin-bottom: .5rem; } +fieldset { + border-width: 0; + padding: 0; } +input[type="checkbox"], +input[type="radio"] { + display: inline; } +label > .label-body { + display: inline-block; + font-weight: normal; + margin-left: .5rem; } + + +/* Lists +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +ul { + list-style: circle inside; } +ol { + list-style: decimal inside; } +ol, ul { + margin-top: 0; + padding-left: 0; } +ul ul, +ul ol, +ol ol, +ol ul { + margin: 1.5rem 0 1.5rem 3rem; + font-size: 90%; } +li { + margin-bottom: 1rem; } + + +/* Code +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +code { + padding: .2rem .5rem; + margin: 0 .2rem; + font-size: 90%; + background: #F1F1F1; + border: 1px solid #E1E1E1; + border-radius: 4px; + white-space: nowrap; } +pre > code { + display: block; + padding: 1rem 1.5rem; + white-space: pre; } + + +/* Tables +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +th, +td { + padding: 12px 15px; + text-align: left; + border-bottom: 1px solid #E1E1E1; } +th:first-child, +td:first-child { + padding-left: 0; } +th:last-child, +td:last-child { + padding-right: 0; } + + +/* Spacing +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +button, +.button { + margin-bottom: 1rem; } +input, +textarea, +select, +fieldset { + margin-bottom: 1.5rem; } +pre, +blockquote, +form, +dl, +figure, +table, +p, +ul, +ol, +form { + margin-bottom: 2.5rem; } +p { + margin-top: 0; } + + + +/* Utilities +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +.u-full-width { + width: 100%; + box-sizing: border-box; } +.u-max-full-width { + max-width: 100%; + box-sizing: border-box; } +.u-pull-right { + float: right; } +.u-pull-left { + float: left; } + + +/* Misc +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +hr { + margin-top: 3rem; + margin-bottom: 3.5rem; + border-width: 0; + border-top: 1px solid #E1E1E1; +} + +/* Clearing +–––––––––––––––––––––––––––––––––––––––––––––––––– */ + +/* Self Clearing Goodness */ +.container:after, +.row:after, +.u-cf { + content: ""; + display: table; + clear: both; } + + +/* Media Queries +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +/* +Note: The best way to structure the use of media queries is to create the queries +near the relevant code. For example, if you wanted to change the styles for buttons +on small devices, paste the mobile query code up in the buttons secion and style it +there. +*/ + + +/* Larger than mobile */ +@media (min-width: 400px) {} + +/* Larger than phablet (also point when grid becomes active) */ +@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) {} \ No newline at end of file diff --git a/images/favicon.png b/images/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..7a3c81c1e32b4e4224452cf8261a585480caa0ea GIT binary patch literal 1156 zcmV-~1bh35P)Px(K1oDDR9FeUS6ygSR}lVo-6obMX;utd(pYw*xM;*axQ4d&FA%IGA~hPSg!&Re z%!{H3LD7)Nf>mf~DXa7+587b*Vq0rT+y^!IQ_&TXVq{}Xg2tsmWK$E{Rg$dV+}vF6 z#`_m=J8(F2&&-)`&YW}R%yq#z<@o*n3YW{ZhEo=^6_YQP>FIPj!A@E?`I7?!182!U zWwRxhod!YQaJ$|6s8`2UV5hIjAF*$nn3!mxGk;snv2q|c5D4ty$oVx(v2fUKIJzp%YyG-;+|bmTJITBB&Z-~d;>l)!%wq-3T*Hu{5vvj{FwB`QX)d;Q(oi9$K)StVkW z6c!eyhlhvdszTWU_0aWF=-{;b&=3w|^@mIFWhm}D9??d2iK8!I63Xsg){iGSF*2TdhFu$i_?LHwo`odIDct3 zl;>}naw>Tj*DjvJug8wyM9k^>l~=UK#Tzg}dsgRKg9|nMfVQ0#T)#Obt{lbsjm=KC zVN{<9&8@1ESY$JTRl9KNN*u|Qv3ha&CbWO;=u(M+wDT=6zzcm;gX)@ER92Rw`1u6^ zQrGcW*?Pnb=IDo*jCv#jQpq@?hQmh@t_x|pv91$n-nJ1Rl)Z;jcTGZ~X&W*LaiH5! zG<`7Cge@yqU_;B#h((X1slEn5pQ_|r0k7m_jb4F+oG#kkE+&IdSaNl0b4{3V^d>gw z648{}SSkh2Y<>K>1Mzm0RqdHlG41&@uX6K2kXK1+I7_;Js~2Mi8q>jn2l#QHJvdE0 z5^Q;n$C-@YV!zzLzBY8VvmM`_z722DTolcD9r>@y6QZXvB;s8-v}p~#%cyzuIvIRx zGMPN7yoNJ-j#VQ*A42oyVT4&EKYs-GVsWQ;U&{E*=U7ZKBepOj?#=KqOCNM#KPzP^ z^(PAw6-UbOb9CaRRKjMy6Z|s4Kc-wM)AgC~359DZkm@yCG^k=|{|I^qASDtNs)?Qr zC&XrzVCYw;976qo@am!bUw%xqs#xy?E7noApQL)_c!=j>`km9OoAQjN6bD~$&+BRL zA0tIW2UNvzDV^y=D; - - - - + - - - Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly Development - - - - - + + + Skeleton: Responsive CSS Boilerplate + + - - + + - - - - - + + - - - - - + + + + + + + + + + + + + - + -
-
- -   -
-
-
-

A Beautiful Boilerplate for Responsive, Mobile-Friendly Development

- - -
-
-
-

What Is It?

-

Skeleton is a small collection of CSS 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 principles:

-
-
- responsive -
-
-
Responsive Grid Down To Mobile
-

Skeleton has a familiar, lightweight 960 grid as its base, but elegantly scales down to downsized browser windows, tablets, mobile phones (in landscape and portrait). Go ahead, resize this page!

-
-
-
-
- responsive -
-
-
Fast to Start
-

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.

-
-
-
-
- responsive -
-
-
Style Agnostic
-

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.

-
-
-
-
-
-

The Grid

-

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. Go ahead, resize the browser and watch as the layout reacts!

-
-
One
-
Eleven
-
Two
-
Ten
-
Three
-
Nine
-
Four
-
Eight
-
Five
-
Seven
-
Six
-
Six
-
Seven
-
Five
-
Eight
-
Four
-
Nine
-
Three
-
Ten
-
Two
-
Eleven
-
One
-
-
- Code Example - -
-
-
-
-

Typography

-

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 changed with just a couple adjustments. Regular paragraphs are set at a 14px base with 21px line height.

-
-
-

Heading <h1>

-

Heading <h2>

-

Heading <h3>

-

Heading <h4>

-
Heading <h5>
-
Heading <h6>
-
-
-
-

This is a blockquote style example. It stands out, but is awesome

- Dave Gamache, Skeleton Creator -
-
-
-
- Code Example - -
-
-
-
-

Buttons

-

Buttons are intended for action and thus should have appropriate weight. The standard button is given that weight with a little bit of depth and a strong hover.

- Click Me For Action -
- Code Example - -
-
-
-
-

Forms

-

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.

-
-
- - - - - - -
- Checkboxes - - -
-
- Radio Buttons - - -
- -
-
-
-
- Code Example - -
-
-
-
-

Media Queries

-

Skeleton uses a lot of media queries to serve the scalable grid, but also for the convenience of styling your site on different size screens. Skeleton's media queries are almost exclusively targeted at max and min widths rather than device sizes or orientations. The advantage of this is browsers and future mobile devices that don't map to exact set dimensions will still benefit from the styles. That being said, all of the queries were written to be optimal on Apple iOS devices. The built in media queries include:

-
    -
  • Smaller than 960: Smaller than the standard base grid
    • -
  • Tablet Portrait: Between 768px and 959px
    • -
  • All Mobile Sizes: Less than 767px
    • -
  • Just Mobile Landscape: Between 480px and 767px
    • -
  • Just Mobile Portrait: Less than 479px
    • -
-
- Code Example - -
-
-
-
-

Support for Skeleton

-

Skeleton has been tested across as many devices and browsers as I could get my hands on:

-
    -
  • Latest Chrome (Mac/PC)
    • -
  • Firefox 4.0, 3.6, 3.5, 3.0 (Mac/PC)
    • -
  • Latest Safari
    • -
  • IE9, IE8, IE7
    • -
  • iPhone (Retina)
    • -
  • Droid (Charge/Original)
    • -
  • iPad
    • -
-

There is a small hiccup though - older non-CSS3 browsers aren't going to respond to the media-queries and thus will be served the standard 960 grid even if they are resized. In the spirit of graceful degradation though, I'm going to let this be instead of trying to implement a JS solution. If you are interested in one though, try the respond.js polyfill.

-

Notes on IE: We all know sometimes IE doesn't behave, so through the genius of conditional CSS I've added a class of "ie" to all versions of the browser, as well as specific targets for each (i.e. "ie6", "ie7", "ie8"). It's not a perfect world, but hopefully this will help make naughty IE behave.

-
-
-
-

Examples & Extensions

-

Skeleton has been in the wild for quite a few months now and reception has been pretty awesome so far. Nothing pleases me more than receiving emails about projects using Skeleton or constructive feedback (this is really the reason Skeleton gets better). Here is a quick list of some of the most awesome sites using Skeleton:

-
-
- - eleventh edition -
The Eleventh Edition
- -
-
- - blink 182 neighborhoods -
Blink 182 Neighborhoods
- -
-
- - artisticly -
Artistic.ly
- -
-
-
-
- - Our Hivemind -
Hivemind
- -
-
- - Super Skeleton Wordpress Theme -
Super Skeleton WP Theme
- -
-
- - Jim Nielson -
Jim Nielson
- -
-
-

Skeleton also has been extended in a number of ways! These are the extensions I've heard of so far!

- -
-
-
-

Downloads

-

The Skeleton download is a zip file (~25kb) containing all the CSS groundwork to get started on any web project.

- Download Skeleton 1.2 from Github -
or View Source on Github
- Download Skeleton PSD Template -
(A la 960.gs PSD template)
-

The file structure for Skeleton is:

-
    -
  • index.html: The base html page that includes the necessary initial markup
    • -
  • - stylesheets (folder) -
      -
    • base.css: Basic styles of Skeleton
      • -
    • skeleton.css: The glorious Skeleton grid
      • -
    • layout.css: File with no specific styles, but a variety of useful media queries
      • -
    -
    • -
  • - images (folder): -
      -
    • favicon.ico: Standard 16x16 favicon
      • -
    • apple-touch-icon (x3): All three sizes of Apple touch icons for iPhone 3, iPad and iPhone 4 with retina.
      • -
    -
    • -
-
-
-
-

License & Log

-

All parts of Skeleton are free to use and abuse under the open-source MIT license. The full licensing language can be found here: http://www.opensource.org/licenses/mit-license.php. More importantly, I would love to have a small community of contributors to Skeleton, so please feel free to jump over the Skeleton Github page and contribute to make Skeleton a better boilerplate for everyone!

-

A brief log of the history of Skeleton

-
    -
  • - V1.0.0 (5/15/2011): Initial release of Skeleton. -
    • -
  • - V1.0.1 (5/19/2011): Made some quick changes based on input from Github and fellow designers. -
      -
    • Refined the app.js to make faster and cleaner
      • -
    • Added Apple touch icons
      • -
    • Removed some bloated CSS lines from the base.css
      • -
    • Added an :active button class
      • -
    • Changed Skeleton favicon
      • -
    • Added MIT licensing
      • -
    -
    • -
  • - V1.0.2 (5/20/2011): Added more input declarations to the .button styles and included legend in CSS -
    • -
  • - V1.0.3 (7/17/2011): Fixed the issue of failed "zooming" on browsers. -
    • -
  • - V1.1 (8/17/2011): A lot of cleanup changes. I finally feel comfortable throwing a 1.1 on this bad boy. -
      -
    • App.js is now just tabs.js
      • -
    • Tab CSS now works perfectly on IE7+
      • -
    • Rewrote layout.css media-query spaces to be easier to understand
      • -
    • Stripping some rogue whitespace and reformatting a bit
      • -
    • Fixing broken doctype declaration
      • -
    -
    • -
  • - V1.2 (6/20/2012): Pruning Skeleton down to some more bare bones :) -
      -
    • Remove tabs and all JS
      • -
    -
    • -
-
-
-
+ +
+
+

A dead simple, responsive boilerplate.

+ Download +
+
+ + Light as a feather at ~400 lines & 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 ~200 lines of custom CSS (half of which is the docking navigation).

+

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

+  

+
+  
+  

+    
1/3

+    
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 + + + + + + - - - + +
+
+

+  

+    

+      
+      
+    

+    

+      
+      
+    

+  

+  
+  
+  
+  
+

 
-	
+
+
+
+
+
+ + + +
+ + +
+
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. +
  2. + They use the decimal list style +
      +
    • Ordered and unordered can be nested
      • +
    • Can nest either type of list into the other
      • +
    +
    3. +
  3. Last list item just for the fun
    4. +
+
+
+ + + +
+
    
+  
  • 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. The queries are mobile-first, meaning they target min-width. Mobile-first queries are how Skeleton's grid is built and is the preferrable method of organizing CSS. It means all styles outside of a query apply to all devices, then larger devices are targeted for enhancement. This prevents small devices from having to parse tons of unused 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) {}
+
+
+
+
+ + + +
+ + + +
+
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
+
+ + + +
+
Demo Landing Page
+

This template is an example of how easy it can be to create a landing page with just the Skeleton grid and a few custom styles. The entire demo is ~150 lines of CSS including comments (most of which is positioning the phones at the top).

+ Demo + Source +
+
+
+
+
+
+
+
More Coming Soon!
+

More examples will be added to help anyone get started or more familiar with how Skeleton works. The goal is education. If you're more interested in real, live examples of Skeleton sites, check out the Built on Skeleton tumblr.

+
+
+
+ +
+ + + + + + + \ No newline at end of file