Compare commits

...

46 Commits

Author SHA1 Message Date
Gregory Ballantine
bb9759b6ec Updated copyright notice in license 2023-11-24 16:45:44 -05:00
dhg
88f03612b0 fixing all the weird versioning I just had to do 2014-12-29 10:29:28 -08:00
dhg
0d0adf7b44 updating the master branch for the new point release 2014-12-29 10:19:54 -08:00
dhg
6101a6652e think I get how bower works and for now shouldn't have to even add normalize 2014-12-29 09:55:22 -08:00
dhg
6fccc024ba small typo in bower.json 2014-12-29 09:48:28 -08:00
dhg
23d67f119e updating the bower json and going to test it more extensively now 2014-12-29 09:47:15 -08:00
dhg
5648a06d46 updating readme to new 2.0.3 download 2014-12-29 09:44:51 -08:00
dhg
c816059285 updating to 2.0.3 2014-12-29 09:37:33 -08:00
dhg
3b84c54db3 gonna try to add bower stuff 2014-12-29 09:33:17 -08:00
dhg
412758bc64 merging in the removing trailing whitespaces 2014-12-29 08:48:23 -08:00
dhg
c612be03b5 Merge branch 'master' of https://github.com/dhgamache/Skeleton 2014-12-29 08:47:28 -08:00
dhg
08b0f50159 removing all trailing whitespaces 2014-12-29 08:47:24 -08:00
Dave Gamache
7c36c06685 Merge pull request #223 from ndarville/patch-1
Added missing CSS rule for number input
2014-12-29 08:37:38 -08:00
Dave Gamache
f301c21796 Merge pull request #222 from jcgallaher/quotefix
Quotes fix for index.html
2014-12-28 10:29:49 -08:00
Dave Gamache
c393c43bf0 Merge pull request #224 from benhinchley/master
removed duplicate rule
2014-12-27 16:50:17 -08:00
Ben Hinchley
0f7d8cba76 duplicate rule 2014-12-27 23:35:30 +11:00
Niclas Darville
0ed0836045 Added missing CSS rule for input[type="number"] 2014-12-26 22:00:00 +01:00
Jim Gallaher
ef8c1471d9 replace single quotes to double on index.html 2014-12-23 22:13:36 -06:00
Jim Gallaher
ee71477681 remove normlize.min.css 2014-12-22 20:13:59 -06:00
Jim Gallaher
3c3dd7c6e2 add separate minified version of normalize.css 2014-12-22 20:09:28 -06:00
dhg
2a7e6adcbc removing test now that I get what's going on :) 2014-12-22 11:29:31 -08:00
dhg
6ce993fddf adding a test version of bower.json, though I'm sure it's wrong for now 2014-12-22 11:27:56 -08:00
Dave Gamache
446e77c13f Merge pull request #215 from smpaq/master
Removing redundant selector
2014-12-22 11:04:52 -08:00
smpaq
ffebc65ec8 Removing redundant selector 2014-12-21 12:05:58 -05:00
Dave Gamache
5e8ea05587 Merge pull request #209 from syndbg/patch-1
Cherry picked a typo
2014-12-20 13:23:51 -08:00
Dave Gamache
a6e62a1a1d Merge pull request #212 from persand/patch-1
Remove ending / in favicon
2014-12-20 13:22:33 -08:00
Dave Gamache
3c006efd5a Merge pull request #213 from jina/master
Switch SASS to Sass. :)
2014-12-20 10:55:48 -08:00
Jina Bolton
17cf331e89 Switch SASS to Sass. :) 2014-12-17 14:48:52 -08:00
Per Sandström
d8615808cf Remove ending / in favicon
Making things more consistent and the feather even lighter…
2014-12-17 19:58:12 +01:00
Anton Antonov
7ec6fa5a7d Cherry picked a typo 2014-12-16 21:58:03 +02:00
dhg
f307ba424f adding the email addy so others can submit 2014-12-15 19:32:40 -08:00
dhg
8d4dc1cef6 adding the less/sass skeleton links to the readme 2014-12-15 19:23:18 -08:00
dhg
cc531df455 adding the new download link and note about cloning not being latest release) 2014-12-15 17:33:01 -08:00
dhg
4e1b85923a Merge branch 'master' of https://github.com/dhgamache/Skeleton 2014-12-15 17:18:14 -08:00
dhg
328a8be46c cleaning up small indentation and spacing 2014-12-15 17:15:55 -08:00
dhg
0ff548aa2c updating the version/date info in header of file 2014-12-15 17:08:16 -08:00
dhg
3b39c4ae2b fixing the height of inputs 2014-12-15 16:53:01 -08:00
dhg
c34806e863 adding support for input['tel'] and input['url'] and cleaning up a few other form styles 2014-12-15 16:49:25 -08:00
dhg
2144cee05b changing property order to adhere roughly to http://markdotto.com/2011/11/29/css-property-order/ 2014-12-15 16:25:32 -08:00
dhg
3b9f339b2a shrinking the % width of the 400-550px column since it felt a little crowded 2014-12-15 16:16:36 -08:00
dhg
febee0bc9b moving the padding: 0 down to the 400px query 2014-12-15 16:14:27 -08:00
dhg
06b819aeb9 changing the .container to feel appropriately sized on mobile/tablet devices. A very small update to grid that makes it all feel a little less constrained on smaller sizes 2014-12-15 16:10:56 -08:00
dhg
c099903a83 adding the forgotten max-width property to container above 550px 2014-12-15 16:05:08 -08:00
dhg
2992a0be54 decreasing the specificity of all grid items, changing small grid sizes to rely on container padding so it flexes to near full width of viewport sub-550px 2014-12-15 15:59:27 -08:00
Dave Gamache
8cadd4ae92 Merge pull request #203 from JonMidhir/issue#198-add_ds_store_to_gitignore
Add .DS_Store to .gitignore
2014-12-12 16:18:36 -08:00
John Hope
b941bed80f Add .DS_Store to .gitignore 2014-12-12 19:44:21 +00:00
6 changed files with 177 additions and 117 deletions

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
.DS_Store

View File

@ -1,6 +1,7 @@
The MIT License (MIT) The MIT License (MIT)
Copyright (c) 2011-2014 Dave Gamache Copyright (c) 2011-2014 Dave Gamache
Copyright (c) 2023 Bit Goblin
Permission is hereby granted, free of charge, to any person obtaining a copy Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal of this software and associated documentation files (the "Software"), to deal

View File

@ -6,8 +6,8 @@ Check out <http://getskeleton.com> for documentation and details.
## Getting started ## Getting started
There are a couple ways to download Skeleton: There are a couple ways to download Skeleton:
- [Download the zip](https://github.com/dhg/Skeleton/releases/download/v2.0.1/Skeleton-2.0.1.zip) - [Download the zip](https://github.com/dhg/Skeleton/releases/download/2.0.4/Skeleton-2.0.4.zip)
- Clone the repo: `git clone https://github.com/dhg/Skeleton.git` - Clone the repo: `git clone https://github.com/dhg/Skeleton.git` (Note: this is under active development, so if you're looking for stable and safe, use the zipped download)
### What's in the download? ### What's in the download?
@ -15,20 +15,20 @@ There are a couple ways to download Skeleton:
The download includes Skeleton's CSS, Normalize CSS as a reset, a sample favicon, and an index.html as a starting point. The download includes Skeleton's CSS, Normalize CSS as a reset, a sample favicon, and an index.html as a starting point.
``` ```
skeleton/ Skeleton/
├── index.html ├── index.html
├── css/ ├── css/
│ ├── normalize.min.css │ ├── normalize.min.css
│ └── skeleton.css │ └── skeleton.css
── images/ ── images/
└── favicon.ico └── favicon.ico
└── README.md
``` ```
### Why it's awesome ### 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. 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 - Around 400 lines of CSS unminified and with comments
- It's a starting point, not a UI framework - It's a starting point, not a UI framework
- No compiling or installing...just vanilla CSS - No compiling or installing...just vanilla CSS
@ -49,6 +49,15 @@ The above list is non-exhaustive. Skeleton works perfectly with almost all older
All parts of Skeleton are free to use and abuse under the [open-source MIT license](https://github.com/dhg/Skeleton/blob/master/LICENSE.md). All parts of Skeleton are free to use and abuse under the [open-source MIT license](https://github.com/dhg/Skeleton/blob/master/LICENSE.md).
## Extensions
The following are extensions to Skeleton built by the community. They are not officially supported, but all have been tested and are compatible with v2.0 (exact release noted):
- [Skeleton on LESS](https://github.com/whatsnewsaes/Skeleton-less): Skeleton built with LESS for easier replacement of grid, color, and media queries. (Last update was to match v2.0.1)
- [Skeleton on Sass](https://github.com/whatsnewsaes/Skeleton-Sass): Skeleton built with Sass for easier replacement of grid, color, and media queries. (Last update was to match v2.0.1)
Have an extension you want to see here? Just shoot an email to hi@getskeleton.com with your extension!
## Colophon ## 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](http://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. 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](http://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.

21
bower.json Normal file
View File

@ -0,0 +1,21 @@
{
"name": "skeleton",
"version": "2.0.4",
"homepage": "http://getskeleton.com/",
"repository": {
"type": "git",
"url": "https://github.com/dhg/Skeleton"
},
"authors": [
"Dave Gamache <hello@davegamache.com> (http://davegamache.com/)"
],
"description": "Skeleton is a dead-simple, responsive boilerplate to kickstart any responsive project.",
"main": "css/skeleton.css",
"keywords": [
"css",
"skeleton",
"responsive",
"boilerplate"
],
"license": "MIT"
}

190
css/skeleton.css vendored
View File

@ -1,10 +1,10 @@
/* /*
* Skeleton V2.0.1 * Skeleton V2.0.4
* Copyright 2014, Dave Gamache * Copyright 2014, Dave Gamache
* www.getskeleton.com * www.getskeleton.com
* Free to use under the MIT license. * Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php * http://www.opensource.org/licenses/mit-license.php
* 12/11/2014 * 12/29/2014
*/ */
@ -30,64 +30,85 @@
*/ */
.container { .container {
position: relative; position: relative;
width: 80%; width: 100%;
max-width: 960px; max-width: 960px;
margin: 0 auto; margin: 0 auto;
padding: 0; } padding: 0 20px;
.container .column,
.container .columns {
float: left;
width: 100%;
box-sizing: border-box; } box-sizing: border-box; }
.row { .column,
margin-bottom: 2rem; } .columns {
.row .column:first-child, width: 100%;
.row .columns:first-child { float: left;
margin-left: 0; } box-sizing: border-box; }
/* For devices larger than 400px */
@media (min-width: 400px) {
.container {
width: 85%;
padding: 0; }
}
/* For devices larger than 550px */ /* For devices larger than 550px */
@media (min-width: 550px) { @media (min-width: 550px) {
.container {
.container .column, width: 80%; }
.container .columns { .column,
.columns {
margin-left: 4%; } margin-left: 4%; }
.column:first-child,
.columns:first-child {
margin-left: 0; }
.container .one.column, .one.column,
.container .one.columns { width: 4.66666666667%; } .one.columns { width: 4.66666666667%; }
.container .two.columns { width: 13.3333333333%; } .two.columns { width: 13.3333333333%; }
.container .three.columns { width: 22%; } .three.columns { width: 22%; }
.container .four.columns { width: 30.6666666667%; } .four.columns { width: 30.6666666667%; }
.container .five.columns { width: 39.3333333333%; } .five.columns { width: 39.3333333333%; }
.container .six.columns { width: 48%; } .six.columns { width: 48%; }
.container .seven.columns { width: 56.6666666667%; } .seven.columns { width: 56.6666666667%; }
.container .eight.columns { width: 65.3333333333%; } .eight.columns { width: 65.3333333333%; }
.container .nine.columns { width: 74.0%; } .nine.columns { width: 74.0%; }
.container .ten.columns { width: 82.6666666667%; } .ten.columns { width: 82.6666666667%; }
.container .eleven.columns { width: 91.3333333333%; } .eleven.columns { width: 91.3333333333%; }
.container .twelve.columns { width: 100%; margin-left: 0; } .twelve.columns { width: 100%; margin-left: 0; }
.container .one-third.column { width: 30.6666666667%; } .one-third.column { width: 30.6666666667%; }
.container .two-thirds.column { width: 65.3333333333%; } .two-thirds.column { width: 65.3333333333%; }
.container .one-half.column { width: 48%; } .one-half.column { width: 48%; }
/* Offsets */ /* Offsets */
.container .row .offset-by-one { margin-left: 8.66666666667%; } .offset-by-one.column,
.container .row .offset-by-two { margin-left: 17.3333333333%; } .offset-by-one.columns { margin-left: 8.66666666667%; }
.container .row .offset-by-three { margin-left: 26%; } .offset-by-two.column,
.container .row .offset-by-four { margin-left: 34.6666666667%; } .offset-by-two.columns { margin-left: 17.3333333333%; }
.container .row .offset-by-five { margin-left: 43.3333333333%; } .offset-by-three.column,
.container .row .offset-by-six { margin-left: 52%; } .offset-by-three.columns { margin-left: 26%; }
.container .row .offset-by-seven { margin-left: 60.6666666667%; } .offset-by-four.column,
.container .row .offset-by-eight { margin-left: 69.3333333333%; } .offset-by-four.columns { margin-left: 34.6666666667%; }
.container .row .offset-by-nine { margin-left: 78.0%; } .offset-by-five.column,
.container .row .offset-by-ten { margin-left: 86.6666666667%; } .offset-by-five.columns { margin-left: 43.3333333333%; }
.container .row .offset-by-eleven { margin-left: 95.3333333333%; } .offset-by-six.column,
.offset-by-six.columns { margin-left: 52%; }
.offset-by-seven.column,
.offset-by-seven.columns { margin-left: 60.6666666667%; }
.offset-by-eight.column,
.offset-by-eight.columns { margin-left: 69.3333333333%; }
.offset-by-nine.column,
.offset-by-nine.columns { margin-left: 78.0%; }
.offset-by-ten.column,
.offset-by-ten.columns { margin-left: 86.6666666667%; }
.offset-by-eleven.column,
.offset-by-eleven.columns { margin-left: 95.3333333333%; }
.container .row .offset-by-one-third { margin-left: 34.6666666667%; } .offset-by-one-third.column,
.container .row .offset-by-two-thirds { margin-left: 69.3333333333%; } .offset-by-one-third.columns { margin-left: 34.6666666667%; }
.offset-by-two-thirds.column,
.offset-by-two-thirds.columns { margin-left: 69.3333333333%; }
.container .row .offset-by-one-half { margin-left: 52%; } .offset-by-one-half.column,
.offset-by-one-half.columns { margin-left: 52%; }
} }
@ -110,9 +131,9 @@ body {
/* Typography /* Typography
*/ */
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
font-weight: 300;
margin-top: 0; margin-top: 0;
margin-bottom: 2rem; } margin-bottom: 2rem;
font-weight: 300; }
h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;} h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; 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; } h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; }
@ -150,21 +171,21 @@ input[type="submit"],
input[type="reset"], input[type="reset"],
input[type="button"] { input[type="button"] {
display: inline-block; display: inline-block;
background-color: transparent; height: 38px;
border-radius: 4px; padding: 0 30px;
color: #555; color: #555;
text-align: center; text-align: center;
font-size: 11px; font-size: 11px;
font-weight: 600; font-weight: 600;
text-decoration: none;
cursor: pointer;
border: 1px solid #bbb;
height: 38px;
line-height: 38px; line-height: 38px;
padding: 0 30px;
letter-spacing: .1rem; letter-spacing: .1rem;
text-transform: uppercase; text-transform: uppercase;
text-decoration: none;
white-space: nowrap; white-space: nowrap;
background-color: transparent;
border-radius: 4px;
border: 1px solid #bbb;
cursor: pointer;
box-sizing: border-box; } box-sizing: border-box; }
.button:hover, .button:hover,
button:hover, button:hover,
@ -176,8 +197,8 @@ button:focus,
input[type="submit"]:focus, input[type="submit"]:focus,
input[type="reset"]:focus, input[type="reset"]:focus,
input[type="button"]:focus { input[type="button"]:focus {
border-color: #888;
color: #333; color: #333;
border-color: #888;
outline: 0; } outline: 0; }
.button.button-primary, .button.button-primary,
button.button-primary, button.button-primary,
@ -185,8 +206,8 @@ input[type="submit"].button-primary,
input[type="reset"].button-primary, input[type="reset"].button-primary,
input[type="button"].button-primary { input[type="button"].button-primary {
color: #FFF; color: #FFF;
border-color: #33C3F0; background-color: #33C3F0;
background-color: #33C3F0; } border-color: #33C3F0; }
.button.button-primary:hover, .button.button-primary:hover,
button.button-primary:hover, button.button-primary:hover,
input[type="submit"].button-primary:hover, input[type="submit"].button-primary:hover,
@ -197,41 +218,51 @@ button.button-primary:focus,
input[type="submit"].button-primary:focus, input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus, input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus { input[type="button"].button-primary:focus {
color: #FFF;
background-color: #1EAEDB; background-color: #1EAEDB;
border-color: #1EAEDB; border-color: #1EAEDB; }
color: #FFF; }
/* Forms /* Forms
*/ */
input[type="email"], input[type="email"],
input[type="number"],
input[type="search"], input[type="search"],
input[type="text"], input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"], input[type="password"],
textarea, textarea,
select { select {
border: 1px solid #D1D1D1; height: 38px;
height: 36px;
padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
background-color: #fff;
border: 1px solid #D1D1D1;
border-radius: 4px; border-radius: 4px;
box-shadow: none; box-shadow: none;
background: #fff; } box-sizing: border-box; }
/* Removes awkard default styles on some inputs */ /* Removes awkward default styles on some inputs for iOS */
input[type="email"], input[type="email"],
input[type="number"],
input[type="search"], input[type="search"],
input[type="text"], input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea { textarea {
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none; }
}
textarea { textarea {
min-height: 65px; min-height: 65px;
padding-top: 6px; padding-top: 6px;
padding-bottom: 6px; } padding-bottom: 6px; }
input[type="email"]:focus, input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus, input[type="search"]:focus,
input[type="text"]:focus, input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus, input[type="password"]:focus,
textarea:focus, textarea:focus,
select:focus { select:focus {
@ -240,18 +271,18 @@ select:focus {
label, label,
legend { legend {
display: block; display: block;
font-weight: 600; margin-bottom: .5rem;
margin-bottom: .5rem; } font-weight: 600; }
fieldset { fieldset {
border-width: 0; padding: 0;
padding: 0; } border-width: 0; }
input[type="checkbox"], input[type="checkbox"],
input[type="radio"] { input[type="radio"] {
display: inline; } display: inline; }
label > .label-body { label > .label-body {
display: inline-block; display: inline-block;
font-weight: normal; margin-left: .5rem;
margin-left: .5rem; } font-weight: normal; }
/* Lists /* Lists
@ -261,8 +292,8 @@ ul {
ol { ol {
list-style: decimal inside; } list-style: decimal inside; }
ol, ul { ol, ul {
margin-top: 0; padding-left: 0;
padding-left: 0; } margin-top: 0; }
ul ul, ul ul,
ul ol, ul ol,
ol ol, ol ol,
@ -279,10 +310,10 @@ code {
padding: .2rem .5rem; padding: .2rem .5rem;
margin: 0 .2rem; margin: 0 .2rem;
font-size: 90%; font-size: 90%;
white-space: nowrap;
background: #F1F1F1; background: #F1F1F1;
border: 1px solid #E1E1E1; border: 1px solid #E1E1E1;
border-radius: 4px; border-radius: 4px; }
white-space: nowrap; }
pre > code { pre > code {
display: block; display: block;
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
@ -316,7 +347,6 @@ fieldset {
margin-bottom: 1.5rem; } margin-bottom: 1.5rem; }
pre, pre,
blockquote, blockquote,
form,
dl, dl,
figure, figure,
table, table,
@ -325,8 +355,6 @@ ul,
ol, ol,
form { form {
margin-bottom: 2.5rem; } margin-bottom: 2.5rem; }
p {
margin-top: 0; }
/* Utilities /* Utilities
@ -349,8 +377,8 @@ hr {
margin-top: 3rem; margin-top: 3rem;
margin-bottom: 3.5rem; margin-bottom: 3.5rem;
border-width: 0; border-width: 0;
border-top: 1px solid #E1E1E1; border-top: 1px solid #E1E1E1; }
}
/* Clearing /* Clearing
*/ */

View File

@ -15,7 +15,7 @@
<!-- FONT <!-- FONT
--> -->
<link href='//fonts.googleapis.com/css?family=Raleway:400,300,600' rel='stylesheet' type='text/css'> <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<!-- CSS <!-- CSS
--> -->
@ -24,7 +24,7 @@
<!-- Favicon <!-- Favicon
--> -->
<link rel="icon" type="image/png" href="images/favicon.png" /> <link rel="icon" type="image/png" href="images/favicon.png">
</head> </head>
<body> <body>