Permalink
Browse files

Updated to Skeleton 1.2

- No longer requires javascript
  - Updated README.md to reflect this
- added gitignore rules
  • Loading branch information...
1 parent ff31897 commit 5bf3db9733f22e98bc737efa54048c7b63756a56 @weierophinney committed Oct 8, 2012
Showing with 44 additions and 205 deletions.
  1. +2 −0 .gitignore
  2. +4 −8 README.md
  3. +0 −47 public/404.html
  4. +14 −80 public/css/base.css
  5. +2 −2 public/css/layout.css
  6. +16 −10 public/css/skeleton.css
  7. +6 −11 public/index.html
  8. +0 −42 public/js/tabs.js
  9. +0 −5 public/robots.txt
View
@@ -0,0 +1,2 @@
+.*.sw*
+.*.un~
View
@@ -3,7 +3,7 @@ Skeleton CSS ZF2 Module
From http://getskeleton.com:
-> Skeleton is a small collection of CSS & JS files that can help you rapidly
+> Skeleton is a small collection of well-organized CSS that can help you rapidly
> develop sites that look beautiful at any size, be it a 17" laptop screen or
> an iPhone.
@@ -13,15 +13,14 @@ dropped into a Zend Framework 2 application as a module.
Installation
------------
-Simply drop this into your "module/" directory. To expose the CSS, images, and
-JS under your document root, you have several options:
+Simply drop this into your "module/" directory. To expose the CSS and images
+under your document root, you have several options:
### 1 - Copy them
Probably the easiest way is to simply copy them:
cp -a module/SkeletonModuleCss/public/css public/css/SkeletonCssModule
- cp -a module/SkeletonModuleCss/public/js public/js/SkeletonCssModule
cp -a module/SkeletonModuleCss/public/images public/images/SkeletonCssModule
### 2- Symlink them
@@ -30,8 +29,6 @@ If you are on a \*nix-based system, you can symlink.
cd public/css/
ln -s ../../../module/SkeletonCssModule/public/css SkeletonCssModule
- cd ../js
- ln -s ../../../module/SkeletonCssModule/public/js SkeletonCssModule
cd ../images
ln -s ../../../module/SkeletonCssModule/public/images SkeletonCssModule
@@ -44,13 +41,12 @@ On Apache, you can use mod_alias to accomplish this. The most direct way is to
specify aliases for each module:
Alias /css/SkeletonCssModule/ /path/to/site/module/SkeletonCssModule/public/css/
- Alias /js/SkeletonCssModule/ /path/to/site/module/SkeletonCssModule/public/js/
Alias /images/SkeletonCssModule/ /path/to/site/module/SkeletonCssModule/public/images/
Alternately, you could use AliasMatch to condense this and serve many modules,
assuming they follow the same directory layout:
- AliasMatch /(css|js|images)/([^/]+)/(.*) /path/to/site/module/$2/public/$1/$3
+ AliasMatch /(css|images)/([^/]+)/(.*) /path/to/site/module/$2/public/$1/$3
I personally like this approach as it makes it trivial for me to keep my assets
module-specific, and thus managed as separate submodule projects.
View
@@ -1,47 +0,0 @@
-<!DOCTYPE html>
-<!--[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]-->
-<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
-<head>
-
- <!-- Basic Page Needs
- ================================================== -->
- <meta charset="utf-8">
- <title>Your Page Title Here :)</title>
- <meta name="description" content="">
- <meta name="author" content="">
- <!--[if lt IE 9]>
- <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
- <![endif]-->
-
- <!-- Mobile Specific Metas
- ================================================== -->
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-
- <!-- CSS
- ================================================== -->
- <link rel="stylesheet" href="stylesheets/base.css">
- <link rel="stylesheet" href="stylesheets/skeleton.css">
- <link rel="stylesheet" href="stylesheets/layout.css">
-
- <!-- Favicons
- ================================================== -->
- <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">
-
-</head>
-<body>
-
- <!-- Primary Page Layout
- ================================================== -->
- <div class="container">
- <h1 style="margin-top: 100px; text-align:center">Sorry. Couldn't Find That Page!</h1>
- </div>
-
-<!-- End Document
-================================================== -->
-</body>
-</html>
View
@@ -1,10 +1,10 @@
/*
-* Skeleton V1.1
+* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
-* 8/17/2011
+* 6/20/2012
*/
@@ -18,7 +18,6 @@
#Lists
#Images
#Buttons
- #Tabs
#Forms
#Misc */
@@ -64,7 +63,7 @@
================================================== */
h1, h2, h3, h4, h5, h6 {
color: #181818;
- font-family: "Georgia", "Times New Roman", Helvetica, Arial, sans-serif;
+ font-family: "Georgia", "Times New Roman", serif;
font-weight: normal; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
h1 { font-size: 46px; line-height: 50px; margin-bottom: 14px;}
@@ -128,7 +127,7 @@
/* #Buttons
================================================== */
- a.button,
+ .button,
button,
input[type="submit"],
input[type="reset"],
@@ -143,7 +142,6 @@
border: 1px solid #aaa;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
- padding: 4px 12px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
@@ -155,10 +153,11 @@
text-shadow: 0 1px rgba(255, 255, 255, .75);
cursor: pointer;
margin-bottom: 20px;
- line-height: 21px;
+ line-height: normal;
+ padding: 8px 10px;
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; }
- a.button:hover,
+ .button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
@@ -175,7 +174,7 @@
border-top: 1px solid #aaa;
border-left: 1px solid #aaa; }
- a.button:active,
+ .button:active,
button:active,
input[type="submit"]:active,
input[type="reset"]:active,
@@ -199,77 +198,12 @@
padding-right: 0 !important;
text-align: center; }
-
-/* #Tabs (activate in tabs.js)
-================================================== */
- ul.tabs {
- display: block;
- margin: 0 0 20px 0;
- padding: 0;
- border-bottom: solid 1px #ddd; }
- ul.tabs li {
- display: block;
- width: auto;
- height: 30px;
- padding: 0;
- float: left;
- margin-bottom: 0; }
- ul.tabs li a {
- display: block;
- text-decoration: none;
- width: auto;
- height: 29px;
- padding: 0px 20px;
- line-height: 30px;
- border: solid 1px #ddd;
- border-width: 1px 1px 0 0;
- margin: 0;
- background: #f5f5f5;
- font-size: 13px; }
- ul.tabs li a.active {
- background: #fff;
- height: 30px;
- position: relative;
- top: -4px;
- padding-top: 4px;
- border-left-width: 1px;
- margin: 0 0 0 -1px;
- color: #111;
- -moz-border-radius-topleft: 2px;
- -webkit-border-top-left-radius: 2px;
- border-top-left-radius: 2px;
- -moz-border-radius-topright: 2px;
- -webkit-border-top-right-radius: 2px;
- border-top-right-radius: 2px; }
- ul.tabs li:first-child a.active {
- margin-left: 0; }
- ul.tabs li:first-child a {
- border-width: 1px 1px 0 1px;
- -moz-border-radius-topleft: 2px;
- -webkit-border-top-left-radius: 2px;
- border-top-left-radius: 2px; }
- ul.tabs li:last-child a {
- -moz-border-radius-topright: 2px;
- -webkit-border-top-right-radius: 2px;
- border-top-right-radius: 2px; }
-
- ul.tabs-content { margin: 0; display: block; }
- ul.tabs-content > li { display:none; }
- ul.tabs-content > li.active { display: block; }
-
- /* Clearfixing tabs for beautiful stacking */
- ul.tabs:before,
- ul.tabs:after {
- content: '\0020';
- display: block;
- overflow: hidden;
- visibility: hidden;
- width: 0;
- height: 0; }
- ul.tabs:after {
- clear: both; }
- ul.tabs {
- zoom: 1; }
+ /* Fix for odd Mozilla border & padding issues */
+ button::-moz-focus-inner,
+ input::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+ }
/* #Forms
View
@@ -1,10 +1,10 @@
/*
-* Skeleton V1.1
+* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
-* 8/17/2011
+* 6/20/2012
*/
/* Table of Content
View
@@ -1,10 +1,10 @@
/*
-* Skeleton V1.1
+* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
-* 8/17/2011
+* 6/20/2012
*/
@@ -22,15 +22,17 @@
================================================== */
.container { position: relative; width: 960px; margin: 0 auto; padding: 0; }
- .column, .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
+ .container .column,
+ .container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
.row { margin-bottom: 20px; }
/* Nested Column Classes */
.column.alpha, .columns.alpha { margin-left: 0; }
.column.omega, .columns.omega { margin-right: 0; }
/* Base Grid */
- .container .one.column { width: 40px; }
+ .container .one.column,
+ .container .one.columns { width: 40px; }
.container .two.columns { width: 100px; }
.container .three.columns { width: 160px; }
.container .four.columns { width: 220px; }
@@ -80,8 +82,10 @@
.container .columns { margin-left: 10px; margin-right: 10px; }
.column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; }
.column.omega, .columns.omega { margin-right: 0; margin-left: 10px; }
+ .alpha.omega { margin-left: 0; margin-right: 0; }
- .container .one.column { width: 28px; }
+ .container .one.column,
+ .container .one.columns { width: 28px; }
.container .two.columns { width: 76px; }
.container .three.columns { width: 124px; }
.container .four.columns { width: 172px; }
@@ -109,7 +113,7 @@
.container .offset-by-five { padding-left: 240px; }
.container .offset-by-six { padding-left: 288px; }
.container .offset-by-seven { padding-left: 336px; }
- .container .offset-by-eight { padding-left: 348px; }
+ .container .offset-by-eight { padding-left: 384px; }
.container .offset-by-nine { padding-left: 432px; }
.container .offset-by-ten { padding-left: 480px; }
.container .offset-by-eleven { padding-left: 528px; }
@@ -127,9 +131,11 @@
@media only screen and (max-width: 767px) {
.container { width: 300px; }
- .columns, .column { margin: 0; }
+ .container .columns,
+ .container .column { margin: 0; }
.container .one.column,
+ .container .one.columns,
.container .two.columns,
.container .three.columns,
.container .four.columns,
@@ -175,9 +181,11 @@
@media only screen and (min-width: 480px) and (max-width: 767px) {
.container { width: 420px; }
- .columns, .column { margin: 0; }
+ .container .columns,
+ .container .column { margin: 0; }
.container .one.column,
+ .container .one.columns,
.container .two.columns,
.container .three.columns,
.container .four.columns,
@@ -232,5 +240,3 @@
width: 0;
height: 0;
}
-
-
Oops, something went wrong.

0 comments on commit 5bf3db9

Please sign in to comment.