Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Updated to Skeleton 1.2

- No longer requires javascript
  - Updated README.md to reflect this
- added gitignore rules
  • Loading branch information...
commit 5bf3db9733f22e98bc737efa54048c7b63756a56 1 parent ff31897
@weierophinney authored
View
2  .gitignore
@@ -0,0 +1,2 @@
+.*.sw*
+.*.un~
View
12 README.md
@@ -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
47 public/404.html
@@ -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
94 public/css/base.css
@@ -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
4 public/css/layout.css
@@ -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
26 public/css/skeleton.css
@@ -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,7 +22,8 @@
================================================== */
.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 */
@@ -30,7 +31,8 @@
.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;
}
-
-
View
17 public/index.html
@@ -11,9 +11,6 @@
<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
================================================== -->
@@ -25,6 +22,10 @@
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/layout.css">
+ <!--[if lt IE 9]>
+ <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="images/favicon.ico">
@@ -45,12 +46,12 @@
<div class="container">
<div class="sixteen columns">
<h1 class="remove-bottom" style="margin-top: 40px">Skeleton</h1>
- <h5>Version 1.1</h5>
+ <h5>Version 1.2</h5>
<hr />
</div>
<div class="one-third column">
<h3>About Skeleton?</h3>
- <p>Skeleton is a small collection of well-organized CSS &amp; JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. It's based on a responsive grid, but also provides very basic CSS for typography, buttons, tabs, forms and media queries. Go ahead, resize this super basic page to see the grid in action.</p>
+ <p>Skeleton is a small collection of well-organized CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. It's based on a responsive grid, but also provides very basic CSS for typography, buttons, forms and media queries. Go ahead, resize this super basic page to see the grid in action.</p>
</div>
<div class="one-third column">
<h3>Three Core Principles</h3>
@@ -69,12 +70,6 @@ <h1 class="remove-bottom" style="margin-top: 40px">Skeleton</h1>
</div><!-- container -->
-
- <!-- JS
- ================================================== -->
- <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
- <script src="js/tabs.js"></script>
-
<!-- End Document
================================================== -->
</body>
View
42 public/js/tabs.js
@@ -1,42 +0,0 @@
-/*
-* Skeleton V1.1
-* 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
-*/
-
-
-$(document).ready(function() {
-
- /* Tabs Activiation
- ================================================== */
-
- var tabs = $('ul.tabs');
-
- tabs.each(function(i) {
-
- //Get all tabs
- var tab = $(this).find('> li > a');
- tab.click(function(e) {
-
- //Get Location of tab's content
- var contentLocation = $(this).attr('href');
-
- //Let go if not a hashed one
- if(contentLocation.charAt(0)=="#") {
-
- e.preventDefault();
-
- //Make Tab Active
- tab.removeClass('active');
- $(this).addClass('active');
-
- //Show Tab Content & add active class
- $(contentLocation).show().addClass('active').siblings().hide().removeClass('active');
-
- }
- });
- });
-});
View
5 public/robots.txt
@@ -1,5 +0,0 @@
-# www.robotstxt.org/
-# www.google.com/support/webmasters/bin/answer.py?hl=en&answer=156449
-
-User-agent: *
-
Please sign in to comment.
Something went wrong with that request. Please try again.