removing red lines :/

experimenting with the possibility of a padding based grid with negative margin rows instead of margin always
2014-12-15 14:40:38 -08:00 · 2014-12-15 14:39:33 -08:00
6 changed files with 114 additions and 176 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1 +0,0 @@
-.DS_Store
--- a/LICENSE.md
+++ b/LICENSE.md
@ -1,7 +1,6 @@
 The MIT License (MIT)

 Copyright (c) 2011-2014 Dave Gamache
-Copyright (c) 2023 Bit Goblin

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
--- a/README.md
+++ b/README.md
@ -6,8 +6,8 @@ Check out <http://getskeleton.com> for documentation and details.
 ## Getting started

 There are a couple ways to download Skeleton:
- [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` (Note: this is under active development, so if you're looking for stable and safe, use the zipped download)
+- [Download the zip](https://github.com/dhg/Skeleton/releases/download/v2.0.1/Skeleton-2.0.1.zip)
+- Clone the repo: `git clone https://github.com/dhg/Skeleton.git`


 ### 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.

 ```
-Skeleton/
+skeleton/
 ├── index.html
 ├── css/
 │   ├── normalize.min.css
 │   └── skeleton.css
-└── images/
-    └── favicon.ico
-
+├── 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. 
- Around 400 lines of CSS unminified and with comments
+- Minified, it's less than a kb
 - It's a starting point, not a UI framework 
 - No compiling or installing...just vanilla CSS

@ -49,15 +49,6 @@ 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).


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

 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.
--- a/bower.json
+++ b/bower.json
@ -1,21 +0,0 @@
-{
-  "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"
-}
--- a/css/skeleton.css
+++ b/css/skeleton.css
@ -1,10 +1,10 @@
 /*
-* Skeleton V2.0.4
+* Skeleton V2.0.1
 * Copyright 2014, Dave Gamache
 * www.getskeleton.com
 * Free to use under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
-* 12/29/2014
+* 12/11/2014
 */


@ -33,82 +33,59 @@
  width: 100%;
  max-width: 960px; 
  margin: 0 auto; 
-  padding: 0 20px;
+  padding: 0 15px; 
  box-sizing: border-box; }
-.column,
-.columns {
-  width: 100%;
+.row { 
+  margin: 0 -15px 2rem; }
+.row .column,        
+.row .columns { 
  float: left; 
+  width: 100%; 
+  padding-right: 15px;
+  padding-left: 15px;
  box-sizing: border-box; }

-/* For devices larger than 400px */
-@media (min-width: 400px) {
-  .container {
-    width: 85%;
-    padding: 0; }
-}
-
 /* For devices larger than 550px */
@media (min-width: 550px) {
-  .container {
-    width: 80%; }
-  .column,
-  .columns {
-    margin-left: 4%; }
-  .column:first-child,
-  .columns:first-child {
-    margin-left: 0; }

-  .one.column,
-  .one.columns                    { width: 4.66666666667%; }
-  .two.columns                    { width: 13.3333333333%; }
-  .three.columns                  { width: 22%;            }
-  .four.columns                   { width: 30.6666666667%; }
-  .five.columns                   { width: 39.3333333333%; }
-  .six.columns                    { width: 48%;            }
-  .seven.columns                  { width: 56.6666666667%; }
-  .eight.columns                  { width: 65.3333333333%; }
-  .nine.columns                   { width: 74.0%;          }
-  .ten.columns                    { width: 82.6666666667%; }
-  .eleven.columns                 { width: 91.3333333333%; }
-  .twelve.columns                 { width: 100%; margin-left: 0; }
+  .container { width: 90%; }
  
-  .one-third.column               { width: 30.6666666667%; }
-  .two-thirds.column              { width: 65.3333333333%; }
+  .row .one.column,
+  .row .one.columns          { width: 8.33333333334%; }
+  .row .two.columns          { width: 16.6666666667%; }
+  .row .three.columns        { width: 25%;            }
+  .row .four.columns         { width: 33.3333333334%; }
+  .row .five.columns         { width: 41.6666666667%; }
+  .row .six.columns          { width: 50%;            }
+  .row .seven.columns        { width: 58.3333333334%; }
+  .row .eight.columns        { width: 66.6666666667%; }
+  .row .nine.columns         { width: 75.0%;          }
+  .row .ten.columns          { width: 83.3333333334%; }
+  .row .eleven.columns       { width: 91.6666666667%; }
+  .row .twelve.columns       { width: 100%; margin-left: 0; }

-  .one-half.column                { width: 48%; }
+  .row .one-third.column     { width: 33.3333333334%; }
+  .row .two-thirds.column    { width: 66.6666666667%; }
+
+  .row .one-half.column      { width: 50%; }

  /* Offsets */
-  .offset-by-one.column,
-  .offset-by-one.columns          { margin-left: 8.66666666667%; }
-  .offset-by-two.column,
-  .offset-by-two.columns          { margin-left: 17.3333333333%; }
-  .offset-by-three.column,
-  .offset-by-three.columns        { margin-left: 26%;            }
-  .offset-by-four.column,
-  .offset-by-four.columns         { margin-left: 34.6666666667%; }
-  .offset-by-five.column,
-  .offset-by-five.columns         { margin-left: 43.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%; }
+  .row .offset-by-one        { margin-left: 8.33333333334%; }
+  .row .offset-by-two        { margin-left: 16.6666666667%; }
+  .row .offset-by-three      { margin-left: 25%;            }
+  .row .offset-by-four       { margin-left: 33.3333333334%; }
+  .row .offset-by-five       { margin-left: 41.6666666667%; }
+  .row .offset-by-six        { margin-left: 50%;            }
+  .row .offset-by-seven      { margin-left: 58.3333333334%; }
+  .row .offset-by-eight      { margin-left: 66.6666666667%; }
+  .row .offset-by-nine       { margin-left: 75.0%;          }
+  .row .offset-by-ten        { margin-left: 83.3333333334%; }
+  .row .offset-by-eleven     { margin-left: 91.6666666667%; }

-  .offset-by-one-third.column,
-  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
-  .offset-by-two-thirds.column,
-  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }
+  .row .offset-by-one-third  { margin-left: 33.3333333334%; }
+  .row .offset-by-two-thirds { margin-left: 66.6666666667%; }

-  .offset-by-one-half.column,
-  .offset-by-one-half.columns     { margin-left: 52%; }
+  .row .offset-by-one-half   { margin-left: 50%; }

 }

@ -131,9 +108,9 @@ body {
 /* Typography
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 h1, h2, h3, h4, h5, h6 { 
+  font-weight: 300;
  margin-top: 0;
-  margin-bottom: 2rem;
-  font-weight: 300; }
+  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; }
@ -171,21 +148,21 @@ input[type="submit"],
 input[type="reset"],
 input[type="button"] {
  display: inline-block;
-  height: 38px;
-  padding: 0 30px;
+  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; 
-  text-decoration: none;
  white-space: nowrap;
-  background-color: transparent;
-  border-radius: 4px;
-  border: 1px solid #bbb;
-  cursor: pointer;
  box-sizing: border-box; }
 .button:hover,
 button:hover,
@ -197,8 +174,8 @@ button:focus,
 input[type="submit"]:focus,
 input[type="reset"]:focus,
 input[type="button"]:focus {
-  color: #333;
  border-color: #888;
+  color: #333;
  outline: 0; }
 .button.button-primary,
 button.button-primary,
@ -206,8 +183,8 @@ input[type="submit"].button-primary,
 input[type="reset"].button-primary,
 input[type="button"].button-primary {
  color: #FFF;
-  background-color: #33C3F0;
-  border-color: #33C3F0; }
+  border-color: #33C3F0;
+  background-color: #33C3F0; }
 .button.button-primary:hover,
 button.button-primary:hover,
 input[type="submit"].button-primary:hover,
@ -218,51 +195,41 @@ button.button-primary:focus,
 input[type="submit"].button-primary:focus,
 input[type="reset"].button-primary:focus,
 input[type="button"].button-primary:focus {
-  color: #FFF;
  background-color: #1EAEDB;
-  border-color: #1EAEDB; }
+  border-color: #1EAEDB;
+  color: #FFF; }


 /* Forms
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 input[type="email"],
-input[type="number"],
 input[type="search"],
 input[type="text"],
-input[type="tel"],
-input[type="url"],
 input[type="password"],
 textarea,
 select {
-  height: 38px;
-  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
-  background-color: #fff;
  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;
-  box-sizing: border-box; }
-/* Removes awkward default styles on some inputs for iOS */
+  background: #fff; }
+/* Removes awkard default styles on some inputs */
 input[type="email"],
-input[type="number"],
 input[type="search"],
 input[type="text"],
-input[type="tel"],
-input[type="url"],
-input[type="password"],
 textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
-          appearance: none; }
+          appearance: none;
+}
 textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; }
 input[type="email"]:focus,
-input[type="number"]:focus,
 input[type="search"]:focus,
 input[type="text"]:focus,
-input[type="tel"]:focus,
-input[type="url"]:focus,
 input[type="password"]:focus,
 textarea:focus,
 select:focus {
@ -271,18 +238,18 @@ select:focus {
 label,
 legend {
  display: block;
-  margin-bottom: .5rem;
-  font-weight: 600; }
+  font-weight: 600;
+  margin-bottom: .5rem; }
 fieldset {
-  padding: 0;
-  border-width: 0; }
+  border-width: 0;
+  padding: 0; }
 input[type="checkbox"],
 input[type="radio"] {
  display: inline; }
 label > .label-body {
  display: inline-block;
-  margin-left: .5rem;
-  font-weight: normal; }
+  font-weight: normal;
+  margin-left: .5rem; }


 /* Lists
@ -292,8 +259,8 @@ ul {
 ol { 
  list-style: decimal inside; }
 ol, ul {
-  padding-left: 0;
-  margin-top: 0; }
+  margin-top: 0;
+  padding-left: 0; }
 ul ul, 
 ul ol,
 ol ol, 
@ -310,10 +277,10 @@ code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
-  white-space: nowrap;
  background: #F1F1F1;
  border: 1px solid #E1E1E1;
-  border-radius: 4px; }
+  border-radius: 4px;
+  white-space: nowrap; }
 pre > code {
  display: block;
  padding: 1rem 1.5rem;
@ -347,6 +314,7 @@ fieldset {
  margin-bottom: 1.5rem; }
 pre,
 blockquote,
+form,
 dl,
 figure,
 table,
@ -355,6 +323,8 @@ ul,
 ol,
 form {
  margin-bottom: 2.5rem; }
+p {
+  margin-top: 0; }


 /* Utilities
@ -377,8 +347,8 @@ hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
-  border-top: 1px solid #E1E1E1; }
-
+  border-top: 1px solid #E1E1E1;
+}

 /* Clearing
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
--- a/index.html
+++ b/index.html
@ -15,7 +15,7 @@

  <!-- 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
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
@ -24,7 +24,7 @@

  <!-- Favicon
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-  <link rel="icon" type="image/png" href="images/favicon.png">
+  <link rel="icon" type="image/png" href="images/favicon.png" />

 </head>
 <body>
Author	SHA1	Message	Date
dhg	c9965ba512	removing red lines :/	2014-12-15 14:40:38 -08:00
dhg	0421885726	experimenting with the possibility of a padding based grid with negative margin rows instead of margin always	2014-12-15 14:39:33 -08:00