skeleton_rails 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/Gemfile +2 -0
- data/Gemfile.lock +86 -0
- data/README.md +30 -0
- data/Rakefile +10 -0
- data/lib/generators/skeleton_layout/3 +6 -0
- data/lib/generators/skeleton_layout/USAGE +22 -0
- data/lib/generators/skeleton_layout/skeleton_layout_generator.rb +61 -0
- data/lib/generators/skeleton_layout/templates/404.html +47 -0
- data/lib/generators/skeleton_layout/templates/images/apple-touch-icon-114x114.png +0 -0
- data/lib/generators/skeleton_layout/templates/images/apple-touch-icon-72x72.png +0 -0
- data/lib/generators/skeleton_layout/templates/images/apple-touch-icon.png +0 -0
- data/lib/generators/skeleton_layout/templates/images/favicon.ico +0 -0
- data/lib/generators/skeleton_layout/templates/index.html +82 -0
- data/lib/generators/skeleton_layout/templates/index.html.erb +87 -0
- data/lib/generators/skeleton_layout/templates/index.html.haml +61 -0
- data/lib/generators/skeleton_layout/templates/javascripts/tabs.js +42 -0
- data/lib/generators/skeleton_layout/templates/robots.txt +5 -0
- data/lib/generators/skeleton_layout/templates/stylesheets/base.css +335 -0
- data/lib/generators/skeleton_layout/templates/stylesheets/layout.css +58 -0
- data/lib/generators/skeleton_layout/templates/stylesheets/skeleton.css +236 -0
- metadata +86 -0
data/Gemfile
ADDED
data/Gemfile.lock
ADDED
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
PATH
|
|
2
|
+
remote: .
|
|
3
|
+
specs:
|
|
4
|
+
skeleton_rails (0.1.1)
|
|
5
|
+
|
|
6
|
+
GEM
|
|
7
|
+
remote: http://rubygems.org/
|
|
8
|
+
specs:
|
|
9
|
+
abstract (1.0.0)
|
|
10
|
+
actionmailer (3.0.10)
|
|
11
|
+
actionpack (= 3.0.10)
|
|
12
|
+
mail (~> 2.2.19)
|
|
13
|
+
actionpack (3.0.10)
|
|
14
|
+
activemodel (= 3.0.10)
|
|
15
|
+
activesupport (= 3.0.10)
|
|
16
|
+
builder (~> 2.1.2)
|
|
17
|
+
erubis (~> 2.6.6)
|
|
18
|
+
i18n (~> 0.5.0)
|
|
19
|
+
rack (~> 1.2.1)
|
|
20
|
+
rack-mount (~> 0.6.14)
|
|
21
|
+
rack-test (~> 0.5.7)
|
|
22
|
+
tzinfo (~> 0.3.23)
|
|
23
|
+
activemodel (3.0.10)
|
|
24
|
+
activesupport (= 3.0.10)
|
|
25
|
+
builder (~> 2.1.2)
|
|
26
|
+
i18n (~> 0.5.0)
|
|
27
|
+
activerecord (3.0.10)
|
|
28
|
+
activemodel (= 3.0.10)
|
|
29
|
+
activesupport (= 3.0.10)
|
|
30
|
+
arel (~> 2.0.10)
|
|
31
|
+
tzinfo (~> 0.3.23)
|
|
32
|
+
activeresource (3.0.10)
|
|
33
|
+
activemodel (= 3.0.10)
|
|
34
|
+
activesupport (= 3.0.10)
|
|
35
|
+
activesupport (3.0.10)
|
|
36
|
+
arel (2.0.10)
|
|
37
|
+
builder (2.1.2)
|
|
38
|
+
erubis (2.6.6)
|
|
39
|
+
abstract (>= 1.0.0)
|
|
40
|
+
i18n (0.5.0)
|
|
41
|
+
json (1.6.1)
|
|
42
|
+
mail (2.2.19)
|
|
43
|
+
activesupport (>= 2.3.6)
|
|
44
|
+
i18n (>= 0.4.0)
|
|
45
|
+
mime-types (~> 1.16)
|
|
46
|
+
treetop (~> 1.4.8)
|
|
47
|
+
metaclass (0.0.1)
|
|
48
|
+
mime-types (1.17.2)
|
|
49
|
+
mocha (0.10.0)
|
|
50
|
+
metaclass (~> 0.0.1)
|
|
51
|
+
polyglot (0.3.3)
|
|
52
|
+
rack (1.2.4)
|
|
53
|
+
rack-mount (0.6.14)
|
|
54
|
+
rack (>= 1.0.0)
|
|
55
|
+
rack-test (0.5.7)
|
|
56
|
+
rack (>= 1.0)
|
|
57
|
+
rails (3.0.10)
|
|
58
|
+
actionmailer (= 3.0.10)
|
|
59
|
+
actionpack (= 3.0.10)
|
|
60
|
+
activerecord (= 3.0.10)
|
|
61
|
+
activeresource (= 3.0.10)
|
|
62
|
+
activesupport (= 3.0.10)
|
|
63
|
+
bundler (~> 1.0)
|
|
64
|
+
railties (= 3.0.10)
|
|
65
|
+
railties (3.0.10)
|
|
66
|
+
actionpack (= 3.0.10)
|
|
67
|
+
activesupport (= 3.0.10)
|
|
68
|
+
rake (>= 0.8.7)
|
|
69
|
+
rdoc (~> 3.4)
|
|
70
|
+
thor (~> 0.14.4)
|
|
71
|
+
rake (0.9.2.2)
|
|
72
|
+
rdoc (3.11)
|
|
73
|
+
json (~> 1.4)
|
|
74
|
+
thor (0.14.6)
|
|
75
|
+
treetop (1.4.10)
|
|
76
|
+
polyglot
|
|
77
|
+
polyglot (>= 0.3.1)
|
|
78
|
+
tzinfo (0.3.31)
|
|
79
|
+
|
|
80
|
+
PLATFORMS
|
|
81
|
+
ruby
|
|
82
|
+
|
|
83
|
+
DEPENDENCIES
|
|
84
|
+
mocha (~> 0.10.0)
|
|
85
|
+
rails (~> 3.0.0)
|
|
86
|
+
skeleton_rails!
|
data/README.md
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
# Skeleton Rails
|
|
2
|
+
skeleton\_rails is a simple gem that allows you to generate a layout file based on the awesome [Skeleton](http://getskeleton.com) in your rails application. It currently works with Rails 3.0.0 and later.
|
|
3
|
+
|
|
4
|
+
# Installation
|
|
5
|
+
|
|
6
|
+
gem install skeleton_rails
|
|
7
|
+
|
|
8
|
+
or in your Gemfile
|
|
9
|
+
|
|
10
|
+
gem 'skeleton_rails'
|
|
11
|
+
|
|
12
|
+
Then, to create the layout:
|
|
13
|
+
|
|
14
|
+
rails g skeleton_layout [NAME] [--haml]
|
|
15
|
+
|
|
16
|
+
`NAME` is optional and defaults to `application`. The generator will copy a layout file to the app/views/layouts directory, as well as copying the stylesheets, javascript, and image files to their respective locations. Skeleton also includes a 404.html and a robots.txt file.
|
|
17
|
+
|
|
18
|
+
If the `--haml` option is specified, a haml template will be created instead of ERB.
|
|
19
|
+
|
|
20
|
+
# Future
|
|
21
|
+
* Maybe add sass?
|
|
22
|
+
|
|
23
|
+
# Issues/Suggestions
|
|
24
|
+
If you find anything amiss with this gem, please feel free to add a [ github issue ](https://github.com/ruprict/skeleton_rails/issues).
|
|
25
|
+
|
|
26
|
+
If you have a suggestion, please feel free to fork, make the change, and submit a pull request.
|
|
27
|
+
|
|
28
|
+
# Credit
|
|
29
|
+
Thanks to Dave Gamache for making Skeleton, and thanks to Ryan Bates for making Nifty Generators, which I basically just copied to make the structure for this gem.
|
|
30
|
+
|
data/Rakefile
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
Description:
|
|
2
|
+
The skeleton_layout generator creates a layout based on the Skeleton responsive design framwork created by Dave Gamache. (see http://getskeleton.com)
|
|
3
|
+
|
|
4
|
+
The optional [NAME] attribute (defaults to 'application') will we used to name the layout file. By default, the layout with be ERB, but if the --haml option is specified, a haml template is created.
|
|
5
|
+
|
|
6
|
+
Example:
|
|
7
|
+
rails generate skeleton_layout [NAME] [--haml]
|
|
8
|
+
|
|
9
|
+
This will create:
|
|
10
|
+
|
|
11
|
+
app/views/layout/application.html.[erb|haml]
|
|
12
|
+
app/assets/stylesheets/base.css
|
|
13
|
+
app/assets/stylesheets/layout.css
|
|
14
|
+
app/assets/stylesheets/skeleton.css
|
|
15
|
+
app/assets/javascripts/tabs.js
|
|
16
|
+
public/404.html
|
|
17
|
+
public/robots.txt
|
|
18
|
+
public/favicon.ico
|
|
19
|
+
public/images/apple-touch-icon-114x114.png
|
|
20
|
+
public/images/apple-touch-icon-72x72.png
|
|
21
|
+
public/images/apple-touch-icon.png
|
|
22
|
+
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
class SkeletonLayoutGenerator < Rails::Generators::Base
|
|
2
|
+
source_root File.expand_path('../templates', __FILE__)
|
|
3
|
+
argument :layout_name, :type => :string, :default => 'application'
|
|
4
|
+
class_option :haml, :desc => "Generate HAML for layout view", :type => :boolean
|
|
5
|
+
|
|
6
|
+
# TODO: Option for haml?
|
|
7
|
+
|
|
8
|
+
# Copies the Skeleton files to their respecitve locations
|
|
9
|
+
def create_layout
|
|
10
|
+
determine_style_path()
|
|
11
|
+
copy_layout_template()
|
|
12
|
+
copy_files_to_public()
|
|
13
|
+
copy_stylesheets_to_asset_path()
|
|
14
|
+
copy_images()
|
|
15
|
+
copy_javascript_to_asset_path()
|
|
16
|
+
end
|
|
17
|
+
|
|
18
|
+
private
|
|
19
|
+
def file_name
|
|
20
|
+
layout_name.underscore
|
|
21
|
+
end
|
|
22
|
+
|
|
23
|
+
def determine_style_path
|
|
24
|
+
@style_path = 'public'
|
|
25
|
+
if (Rails.version =~ /^3\.1/) != nil
|
|
26
|
+
# For Rails 3.1 and its assets pipeline we don't want to overwrite application.css
|
|
27
|
+
@style_path = 'app/assets'
|
|
28
|
+
end
|
|
29
|
+
|
|
30
|
+
end
|
|
31
|
+
|
|
32
|
+
def copy_layout_template
|
|
33
|
+
if options.haml?
|
|
34
|
+
template "index.html.haml", "app/views/layouts/#{file_name}.html.haml"
|
|
35
|
+
else
|
|
36
|
+
template "index.html.erb", "app/views/layouts/#{file_name}.html.erb"
|
|
37
|
+
end
|
|
38
|
+
end
|
|
39
|
+
|
|
40
|
+
def copy_files_to_public
|
|
41
|
+
copy_file '404.html', 'public/404.html'
|
|
42
|
+
copy_file 'robots.txt', 'public/robots.txt'
|
|
43
|
+
end
|
|
44
|
+
|
|
45
|
+
def copy_stylesheets_to_asset_path
|
|
46
|
+
# Do these need to go in vendor/assets?
|
|
47
|
+
directory 'stylesheets/', "#{@style_path}/stylesheets/"
|
|
48
|
+
end
|
|
49
|
+
|
|
50
|
+
def copy_javascript_to_asset_path
|
|
51
|
+
copy_file 'javascripts/tabs.js', "#{@style_path}/javascripts/tabs.js"
|
|
52
|
+
end
|
|
53
|
+
|
|
54
|
+
def copy_images
|
|
55
|
+
# Do these need to go in vendor/assets?
|
|
56
|
+
copy_file 'images/apple-touch-icon-114x114.png', 'public/images/apple-touch-icon-114x114.png'
|
|
57
|
+
copy_file 'images/apple-touch-icon-72x72.png', 'public/images/apple-touch-icon-72x72.png'
|
|
58
|
+
copy_file 'images/apple-touch-icon.png', 'public/images/apple-touch-icon.png'
|
|
59
|
+
copy_file 'images/favicon.ico', 'public/favicon.ico'
|
|
60
|
+
end
|
|
61
|
+
end
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
|
|
3
|
+
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
|
|
4
|
+
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
|
|
5
|
+
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
|
|
6
|
+
<head>
|
|
7
|
+
|
|
8
|
+
<!-- Basic Page Needs
|
|
9
|
+
================================================== -->
|
|
10
|
+
<meta charset="utf-8">
|
|
11
|
+
<title>Your Page Title Here :)</title>
|
|
12
|
+
<meta name="description" content="">
|
|
13
|
+
<meta name="author" content="">
|
|
14
|
+
<!--[if lt IE 9]>
|
|
15
|
+
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
|
16
|
+
<![endif]-->
|
|
17
|
+
|
|
18
|
+
<!-- Mobile Specific Metas
|
|
19
|
+
================================================== -->
|
|
20
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
21
|
+
|
|
22
|
+
<!-- CSS
|
|
23
|
+
================================================== -->
|
|
24
|
+
<link rel="stylesheet" href="stylesheets/base.css">
|
|
25
|
+
<link rel="stylesheet" href="stylesheets/skeleton.css">
|
|
26
|
+
<link rel="stylesheet" href="stylesheets/layout.css">
|
|
27
|
+
|
|
28
|
+
<!-- Favicons
|
|
29
|
+
================================================== -->
|
|
30
|
+
<link rel="shortcut icon" href="images/favicon.ico">
|
|
31
|
+
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
|
|
32
|
+
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
|
|
33
|
+
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
|
|
34
|
+
|
|
35
|
+
</head>
|
|
36
|
+
<body>
|
|
37
|
+
|
|
38
|
+
<!-- Primary Page Layout
|
|
39
|
+
================================================== -->
|
|
40
|
+
<div class="container">
|
|
41
|
+
<h1 style="margin-top: 100px; text-align:center">Sorry. Couldn't Find That Page!</h1>
|
|
42
|
+
</div>
|
|
43
|
+
|
|
44
|
+
<!-- End Document
|
|
45
|
+
================================================== -->
|
|
46
|
+
</body>
|
|
47
|
+
</html>
|
|
Binary file
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
!!!
|
|
2
|
+
/[if lt IE 7 ] <html class="ie ie6" lang="en">
|
|
3
|
+
/[if IE 7 ] <html class="ie ie7" lang="en">
|
|
4
|
+
/[if IE 8 ] <html class="ie ie8" lang="en">
|
|
5
|
+
/[if (gte IE 9)|!(IE)] <html lang="en">
|
|
6
|
+
%head
|
|
7
|
+
%meta{:charset => "utf-8"}
|
|
8
|
+
%title Your Page Title Here :)
|
|
9
|
+
%meta{:name => "description", :content => ""}
|
|
10
|
+
%meta{:name => "author", :content =>""}
|
|
11
|
+
/[if lt IE 9]
|
|
12
|
+
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
|
13
|
+
/
|
|
14
|
+
Favicons
|
|
15
|
+
\==================================================
|
|
16
|
+
%link{:href => "images/favicon.ico", :rel => "shortcut icon"}
|
|
17
|
+
%link{:href => "images/apple-touch-icon.png", :rel => "apple-touch-icon"}
|
|
18
|
+
%link{:href => "images/apple-touch-icon-72x72.png", :rel => "apple-touch-icon", :sizes => "72x72"}
|
|
19
|
+
%link{:href => "images/apple-touch-icon-114x114.png", :rel => "apple-touch-icon", :sizes => "114x114"}
|
|
20
|
+
|
|
21
|
+
%meta{ :name => "viewport", :content => "width=device-width, initial-scale=1, maximum-scale=1"}
|
|
22
|
+
|
|
23
|
+
<!-- CSS
|
|
24
|
+
================================================== -->
|
|
25
|
+
<link rel="stylesheet" href="stylesheets/base.css">
|
|
26
|
+
<link rel="stylesheet" href="stylesheets/skeleton.css">
|
|
27
|
+
<link rel="stylesheet" href="stylesheets/layout.css">
|
|
28
|
+
|
|
29
|
+
<!-- Favicons
|
|
30
|
+
================================================== -->
|
|
31
|
+
<link rel="shortcut icon" href="images/favicon.ico">
|
|
32
|
+
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
|
|
33
|
+
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
|
|
34
|
+
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
|
|
35
|
+
|
|
36
|
+
</head>
|
|
37
|
+
<body>
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
<!-- Primary Page Layout
|
|
42
|
+
================================================== -->
|
|
43
|
+
|
|
44
|
+
<!-- Delete everything in this .container and get started on your own site! -->
|
|
45
|
+
|
|
46
|
+
<div class="container">
|
|
47
|
+
<div class="sixteen columns">
|
|
48
|
+
<h1 class="remove-bottom" style="margin-top: 40px">Skeleton</h1>
|
|
49
|
+
<h5>Version 1.1</h5>
|
|
50
|
+
<hr />
|
|
51
|
+
</div>
|
|
52
|
+
<div class="one-third column">
|
|
53
|
+
<h3>About Skeleton?</h3>
|
|
54
|
+
<p>Skeleton is a small collection of well-organized CSS & 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>
|
|
55
|
+
</div>
|
|
56
|
+
<div class="one-third column">
|
|
57
|
+
<h3>Three Core Principles</h3>
|
|
58
|
+
<p>Skeleton is built on three core principles:</p>
|
|
59
|
+
<ul class="square">
|
|
60
|
+
<li><strong>A Responsive Grid Down To Mobile</strong>: Elegant scaling from a browser to tablets to mobile.</li>
|
|
61
|
+
<li><strong>Fast to Start</strong>: It's a tool for rapid development with best practices</li>
|
|
62
|
+
<li><strong>Style Agnostic</strong>: It provides the most basic, beautiful styles, but is meant to be overwritten.</li>
|
|
63
|
+
</ul>
|
|
64
|
+
</div>
|
|
65
|
+
<div class="one-third column">
|
|
66
|
+
<h3>Docs & Support</h3>
|
|
67
|
+
<p>The easiest way to really get started with Skeleton is to check out the full docs and info at <a href="http://www.getskeleton.com">www.getskeleton.com.</a>. Skeleton is also open-source and has a <a href="https://github.com/dhgamache/skeleton">project on git</a>, so check that out if you want to report bugs or create a pull request. If you have any questions, thoughts, concerns or feedback, please don't hesitate to email me at <a href="mailto:hi@getskeleton.com">hi@getskeleton.com</a>.</p>
|
|
68
|
+
</div>
|
|
69
|
+
|
|
70
|
+
</div><!-- container -->
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
<!-- JS
|
|
75
|
+
================================================== -->
|
|
76
|
+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
|
|
77
|
+
<script src="javascripts/tabs.js"></script>
|
|
78
|
+
|
|
79
|
+
<!-- End Document
|
|
80
|
+
================================================== -->
|
|
81
|
+
</body>
|
|
82
|
+
</html>
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
|
|
3
|
+
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
|
|
4
|
+
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
|
|
5
|
+
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
|
|
6
|
+
<head>
|
|
7
|
+
|
|
8
|
+
<!-- Basic Page Needs
|
|
9
|
+
================================================== -->
|
|
10
|
+
<meta charset="utf-8">
|
|
11
|
+
<title>Your Page Title Here :)</title>
|
|
12
|
+
<meta name="description" content="">
|
|
13
|
+
<meta name="author" content="">
|
|
14
|
+
<!--[if lt IE 9]>
|
|
15
|
+
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
|
16
|
+
<![endif]-->
|
|
17
|
+
|
|
18
|
+
<!-- Mobile Specific Metas
|
|
19
|
+
================================================== -->
|
|
20
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
21
|
+
|
|
22
|
+
<!-- CSS
|
|
23
|
+
================================================== -->
|
|
24
|
+
<link rel="stylesheet" href="stylesheets/base.css">
|
|
25
|
+
<link rel="stylesheet" href="stylesheets/skeleton.css">
|
|
26
|
+
<link rel="stylesheet" href="stylesheets/layout.css">
|
|
27
|
+
|
|
28
|
+
<!-- Favicons
|
|
29
|
+
================================================== -->
|
|
30
|
+
<link rel="shortcut icon" href="images/favicon.ico">
|
|
31
|
+
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
|
|
32
|
+
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
|
|
33
|
+
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
|
|
34
|
+
<%%= stylesheet_link_tag "<%= file_name %>" %>
|
|
35
|
+
<%%= javascript_include_tag "<%= file_name %>" %>
|
|
36
|
+
<%%= csrf_meta_tag %>
|
|
37
|
+
</head>
|
|
38
|
+
<body>
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
<!-- Primary Page Layout
|
|
43
|
+
================================================== -->
|
|
44
|
+
|
|
45
|
+
<!-- Delete everything in this .container and get started on your own site! -->
|
|
46
|
+
|
|
47
|
+
<div class="container">
|
|
48
|
+
<div class="sixteen columns">
|
|
49
|
+
<h1 class="remove-bottom" style="margin-top: 40px">Skeleton</h1>
|
|
50
|
+
<h5>Version 1.1</h5>
|
|
51
|
+
<hr />
|
|
52
|
+
</div>
|
|
53
|
+
<div class="sixteen columns">
|
|
54
|
+
<%%= yield %>
|
|
55
|
+
</div>
|
|
56
|
+
<div class="one-third column">
|
|
57
|
+
<h3>About Skeleton?</h3>
|
|
58
|
+
<p>Skeleton is a small collection of well-organized CSS & 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>
|
|
59
|
+
</div>
|
|
60
|
+
|
|
61
|
+
<div class="one-third column">
|
|
62
|
+
<h3>Three Core Principles</h3>
|
|
63
|
+
<p>Skeleton is built on three core principles:</p>
|
|
64
|
+
<ul class="square">
|
|
65
|
+
<li><strong>A Responsive Grid Down To Mobile</strong>: Elegant scaling from a browser to tablets to mobile.</li>
|
|
66
|
+
<li><strong>Fast to Start</strong>: It's a tool for rapid development with best practices</li>
|
|
67
|
+
<li><strong>Style Agnostic</strong>: It provides the most basic, beautiful styles, but is meant to be overwritten.</li>
|
|
68
|
+
</ul>
|
|
69
|
+
</div>
|
|
70
|
+
<div class="one-third column">
|
|
71
|
+
<h3>Docs & Support</h3>
|
|
72
|
+
<p>The easiest way to really get started with Skeleton is to check out the full docs and info at <a href="http://www.getskeleton.com">www.getskeleton.com.</a>. Skeleton is also open-source and has a <a href="https://github.com/dhgamache/skeleton">project on git</a>, so check that out if you want to report bugs or create a pull request. If you have any questions, thoughts, concerns or feedback, please don't hesitate to email me at <a href="mailto:hi@getskeleton.com">hi@getskeleton.com</a>.</p>
|
|
73
|
+
</div>
|
|
74
|
+
|
|
75
|
+
</div><!-- container -->
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
<!-- JS
|
|
80
|
+
================================================== -->
|
|
81
|
+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
|
|
82
|
+
<script src="javascripts/tabs.js"></script>
|
|
83
|
+
|
|
84
|
+
<!-- End Document
|
|
85
|
+
================================================== -->
|
|
86
|
+
</body>
|
|
87
|
+
</html>
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
!!!
|
|
2
|
+
/[if lt IE 7 ] <html class="ie ie6" lang="en">
|
|
3
|
+
/[if IE 7 ] <html class="ie ie7" lang="en">
|
|
4
|
+
/[if IE 8 ] <html class="ie ie8" lang="en">
|
|
5
|
+
/[if (gte IE 9)|!(IE)] <html lang="en">
|
|
6
|
+
%head
|
|
7
|
+
%meta{:charset => "utf-8"}
|
|
8
|
+
%title Your Page Title Here :)
|
|
9
|
+
%meta{ :name => "description", :content => ""}
|
|
10
|
+
%meta{ :name => "author", :content => ""}
|
|
11
|
+
/[if lt IE 9]
|
|
12
|
+
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
|
13
|
+
|
|
14
|
+
%meta{:name => "viewport", :content => "width=device-width, initial-scale=1, maximum-scale=1"}
|
|
15
|
+
|
|
16
|
+
/
|
|
17
|
+
/ Favicons
|
|
18
|
+
/==================================================
|
|
19
|
+
%link{:href => "images/favicon.ico", :rel => "shortcut icon"}
|
|
20
|
+
%link{:href => "images/apple-touch-icon.png", :rel => "apple-touch-icon"}
|
|
21
|
+
%link{:href => "images/apple-touch-icon-72x72.png", :rel => "apple-touch-icon", :sizes => "72x72"}
|
|
22
|
+
%link{:href => "images/apple-touch-icon-114x114.png", :rel => "apple-touch-icon", :sizes => "114x114"}
|
|
23
|
+
= stylesheet_link_tag "<%= file_name %>"
|
|
24
|
+
= javascript_include_tag "<%= file_name %>"
|
|
25
|
+
= csrf_meta_tag
|
|
26
|
+
%body
|
|
27
|
+
/ Primary Page Layout
|
|
28
|
+
/ Delete everything in this .container and get started on your own site!
|
|
29
|
+
%div.container
|
|
30
|
+
%div.sixteen.columns
|
|
31
|
+
%h1.remove-bottom{:style => "margin-top: 40px"} Skeleton
|
|
32
|
+
%h5 Version 1.1
|
|
33
|
+
%hr
|
|
34
|
+
%div.sixteen.columns
|
|
35
|
+
= yield
|
|
36
|
+
%div.one-third.column
|
|
37
|
+
%h3 About Skeleton?
|
|
38
|
+
%p Skeleton is a small collection of well-organized CSS & 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.
|
|
39
|
+
|
|
40
|
+
%div.one-third.column
|
|
41
|
+
%h3 Three Core Principles
|
|
42
|
+
%p Skeleton is built on three core principles:
|
|
43
|
+
%ul.square
|
|
44
|
+
%li
|
|
45
|
+
%strong A Responsive Grid Down To Mobile
|
|
46
|
+
%span : Elegant scaling from a browser to tablets to mobile.
|
|
47
|
+
%li
|
|
48
|
+
%strong Fast to Start
|
|
49
|
+
%span :It's a tool for rapid development with best practices.
|
|
50
|
+
%li
|
|
51
|
+
%strong Style Agnostic
|
|
52
|
+
%span : It provides the most basic, beautiful styles, but is meant to be overwritten.
|
|
53
|
+
%div.one-third.column
|
|
54
|
+
%h3 Docs & Support
|
|
55
|
+
%p The easiest way to really get started with Skeleton is to check out the full docs and info at <a href="http://www.getskeleton.com">www.getskeleton.com.</a>. Skeleton is also open-source and has a <a href="https://github.com/dhgamache/skeleton">project on git</a>, so check that out if you want to report bugs or create a pull request. If you have any questions, thoughts, concerns or feedback, please don't hesitate to email me at <a href="mailto:hi@getskeleton.com">hi@getskeleton.com</a>.
|
|
56
|
+
|
|
57
|
+
/ JS
|
|
58
|
+
/ ==================================================
|
|
59
|
+
%script{ :src => "//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"}
|
|
60
|
+
%script{ :src => "javascripts/tabs.js"}
|
|
61
|
+
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Skeleton V1.1
|
|
3
|
+
* Copyright 2011, Dave Gamache
|
|
4
|
+
* www.getskeleton.com
|
|
5
|
+
* Free to use under the MIT license.
|
|
6
|
+
* http://www.opensource.org/licenses/mit-license.php
|
|
7
|
+
* 8/17/2011
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
$(document).ready(function() {
|
|
12
|
+
|
|
13
|
+
/* Tabs Activiation
|
|
14
|
+
================================================== */
|
|
15
|
+
|
|
16
|
+
var tabs = $('ul.tabs');
|
|
17
|
+
|
|
18
|
+
tabs.each(function(i) {
|
|
19
|
+
|
|
20
|
+
//Get all tabs
|
|
21
|
+
var tab = $(this).find('> li > a');
|
|
22
|
+
tab.click(function(e) {
|
|
23
|
+
|
|
24
|
+
//Get Location of tab's content
|
|
25
|
+
var contentLocation = $(this).attr('href');
|
|
26
|
+
|
|
27
|
+
//Let go if not a hashed one
|
|
28
|
+
if(contentLocation.charAt(0)=="#") {
|
|
29
|
+
|
|
30
|
+
e.preventDefault();
|
|
31
|
+
|
|
32
|
+
//Make Tab Active
|
|
33
|
+
tab.removeClass('active');
|
|
34
|
+
$(this).addClass('active');
|
|
35
|
+
|
|
36
|
+
//Show Tab Content & add active class
|
|
37
|
+
$(contentLocation).show().addClass('active').siblings().hide().removeClass('active');
|
|
38
|
+
|
|
39
|
+
}
|
|
40
|
+
});
|
|
41
|
+
});
|
|
42
|
+
});
|
|
@@ -0,0 +1,335 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Skeleton V1.1
|
|
3
|
+
* Copyright 2011, Dave Gamache
|
|
4
|
+
* www.getskeleton.com
|
|
5
|
+
* Free to use under the MIT license.
|
|
6
|
+
* http://www.opensource.org/licenses/mit-license.php
|
|
7
|
+
* 8/17/2011
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
/* Table of Content
|
|
12
|
+
==================================================
|
|
13
|
+
#Reset & Basics
|
|
14
|
+
#Basic Styles
|
|
15
|
+
#Site Styles
|
|
16
|
+
#Typography
|
|
17
|
+
#Links
|
|
18
|
+
#Lists
|
|
19
|
+
#Images
|
|
20
|
+
#Buttons
|
|
21
|
+
#Tabs
|
|
22
|
+
#Forms
|
|
23
|
+
#Misc */
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
/* #Reset & Basics (Inspired by E. Meyers)
|
|
27
|
+
================================================== */
|
|
28
|
+
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
|
|
29
|
+
margin: 0;
|
|
30
|
+
padding: 0;
|
|
31
|
+
border: 0;
|
|
32
|
+
font-size: 100%;
|
|
33
|
+
font: inherit;
|
|
34
|
+
vertical-align: baseline; }
|
|
35
|
+
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
|
|
36
|
+
display: block; }
|
|
37
|
+
body {
|
|
38
|
+
line-height: 1; }
|
|
39
|
+
ol, ul {
|
|
40
|
+
list-style: none; }
|
|
41
|
+
blockquote, q {
|
|
42
|
+
quotes: none; }
|
|
43
|
+
blockquote:before, blockquote:after,
|
|
44
|
+
q:before, q:after {
|
|
45
|
+
content: '';
|
|
46
|
+
content: none; }
|
|
47
|
+
table {
|
|
48
|
+
border-collapse: collapse;
|
|
49
|
+
border-spacing: 0; }
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
/* #Basic Styles
|
|
53
|
+
================================================== */
|
|
54
|
+
body {
|
|
55
|
+
background: #fff;
|
|
56
|
+
font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
57
|
+
color: #444;
|
|
58
|
+
-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
|
|
59
|
+
-webkit-text-size-adjust: 100%;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
/* #Typography
|
|
64
|
+
================================================== */
|
|
65
|
+
h1, h2, h3, h4, h5, h6 {
|
|
66
|
+
color: #181818;
|
|
67
|
+
font-family: "Georgia", "Times New Roman", Helvetica, Arial, sans-serif;
|
|
68
|
+
font-weight: normal; }
|
|
69
|
+
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
|
|
70
|
+
h1 { font-size: 46px; line-height: 50px; margin-bottom: 14px;}
|
|
71
|
+
h2 { font-size: 35px; line-height: 40px; margin-bottom: 10px; }
|
|
72
|
+
h3 { font-size: 28px; line-height: 34px; margin-bottom: 8px; }
|
|
73
|
+
h4 { font-size: 21px; line-height: 30px; margin-bottom: 4px; }
|
|
74
|
+
h5 { font-size: 17px; line-height: 24px; }
|
|
75
|
+
h6 { font-size: 14px; line-height: 21px; }
|
|
76
|
+
.subheader { color: #777; }
|
|
77
|
+
|
|
78
|
+
p { margin: 0 0 20px 0; }
|
|
79
|
+
p img { margin: 0; }
|
|
80
|
+
p.lead { font-size: 21px; line-height: 27px; color: #777; }
|
|
81
|
+
|
|
82
|
+
em { font-style: italic; }
|
|
83
|
+
strong { font-weight: bold; color: #333; }
|
|
84
|
+
small { font-size: 80%; }
|
|
85
|
+
|
|
86
|
+
/* Blockquotes */
|
|
87
|
+
blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; font-style: italic; }
|
|
88
|
+
blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; }
|
|
89
|
+
blockquote cite { display: block; font-size: 12px; color: #555; }
|
|
90
|
+
blockquote cite:before { content: "\2014 \0020"; }
|
|
91
|
+
blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; }
|
|
92
|
+
|
|
93
|
+
hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; }
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
/* #Links
|
|
97
|
+
================================================== */
|
|
98
|
+
a, a:visited { color: #333; text-decoration: underline; outline: 0; }
|
|
99
|
+
a:hover, a:focus { color: #000; }
|
|
100
|
+
p a, p a:visited { line-height: inherit; }
|
|
101
|
+
|
|
102
|
+
|
|
103
|
+
/* #Lists
|
|
104
|
+
================================================== */
|
|
105
|
+
ul, ol { margin-bottom: 20px; }
|
|
106
|
+
ul { list-style: none outside; }
|
|
107
|
+
ol { list-style: decimal; }
|
|
108
|
+
ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
|
|
109
|
+
ul.square { list-style: square outside; }
|
|
110
|
+
ul.circle { list-style: circle outside; }
|
|
111
|
+
ul.disc { list-style: disc outside; }
|
|
112
|
+
ul ul, ul ol,
|
|
113
|
+
ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 90%; }
|
|
114
|
+
ul ul li, ul ol li,
|
|
115
|
+
ol ol li, ol ul li { margin-bottom: 6px; }
|
|
116
|
+
li { line-height: 18px; margin-bottom: 12px; }
|
|
117
|
+
ul.large li { line-height: 21px; }
|
|
118
|
+
li p { line-height: 21px; }
|
|
119
|
+
|
|
120
|
+
/* #Images
|
|
121
|
+
================================================== */
|
|
122
|
+
|
|
123
|
+
img.scale-with-grid {
|
|
124
|
+
max-width: 100%;
|
|
125
|
+
height: auto; }
|
|
126
|
+
|
|
127
|
+
|
|
128
|
+
/* #Buttons
|
|
129
|
+
================================================== */
|
|
130
|
+
|
|
131
|
+
a.button,
|
|
132
|
+
button,
|
|
133
|
+
input[type="submit"],
|
|
134
|
+
input[type="reset"],
|
|
135
|
+
input[type="button"] {
|
|
136
|
+
background: #eee; /* Old browsers */
|
|
137
|
+
background: -moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.2) 100%); /* FF3.6+ */
|
|
138
|
+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2))); /* Chrome,Safari4+ */
|
|
139
|
+
background: -webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Chrome10+,Safari5.1+ */
|
|
140
|
+
background: -o-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Opera11.10+ */
|
|
141
|
+
background: -ms-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* IE10+ */
|
|
142
|
+
background: linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* W3C */
|
|
143
|
+
border: 1px solid #aaa;
|
|
144
|
+
border-top: 1px solid #ccc;
|
|
145
|
+
border-left: 1px solid #ccc;
|
|
146
|
+
padding: 4px 12px;
|
|
147
|
+
-moz-border-radius: 3px;
|
|
148
|
+
-webkit-border-radius: 3px;
|
|
149
|
+
border-radius: 3px;
|
|
150
|
+
color: #444;
|
|
151
|
+
display: inline-block;
|
|
152
|
+
font-size: 11px;
|
|
153
|
+
font-weight: bold;
|
|
154
|
+
text-decoration: none;
|
|
155
|
+
text-shadow: 0 1px rgba(255, 255, 255, .75);
|
|
156
|
+
cursor: pointer;
|
|
157
|
+
margin-bottom: 20px;
|
|
158
|
+
line-height: 21px;
|
|
159
|
+
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; }
|
|
160
|
+
|
|
161
|
+
a.button:hover,
|
|
162
|
+
button:hover,
|
|
163
|
+
input[type="submit"]:hover,
|
|
164
|
+
input[type="reset"]:hover,
|
|
165
|
+
input[type="button"]:hover {
|
|
166
|
+
color: #222;
|
|
167
|
+
background: #ddd; /* Old browsers */
|
|
168
|
+
background: -moz-linear-gradient(top, rgba(255,255,255,.3) 0%, rgba(0,0,0,.3) 100%); /* FF3.6+ */
|
|
169
|
+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.3)), color-stop(100%,rgba(0,0,0,.3))); /* Chrome,Safari4+ */
|
|
170
|
+
background: -webkit-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Chrome10+,Safari5.1+ */
|
|
171
|
+
background: -o-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Opera11.10+ */
|
|
172
|
+
background: -ms-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* IE10+ */
|
|
173
|
+
background: linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* W3C */
|
|
174
|
+
border: 1px solid #888;
|
|
175
|
+
border-top: 1px solid #aaa;
|
|
176
|
+
border-left: 1px solid #aaa; }
|
|
177
|
+
|
|
178
|
+
a.button:active,
|
|
179
|
+
button:active,
|
|
180
|
+
input[type="submit"]:active,
|
|
181
|
+
input[type="reset"]:active,
|
|
182
|
+
input[type="button"]:active {
|
|
183
|
+
border: 1px solid #666;
|
|
184
|
+
background: #ccc; /* Old browsers */
|
|
185
|
+
background: -moz-linear-gradient(top, rgba(255,255,255,.35) 0%, rgba(10,10,10,.4) 100%); /* FF3.6+ */
|
|
186
|
+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.35)), color-stop(100%,rgba(10,10,10,.4))); /* Chrome,Safari4+ */
|
|
187
|
+
background: -webkit-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Chrome10+,Safari5.1+ */
|
|
188
|
+
background: -o-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Opera11.10+ */
|
|
189
|
+
background: -ms-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* IE10+ */
|
|
190
|
+
background: linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* W3C */ }
|
|
191
|
+
|
|
192
|
+
.button.full-width,
|
|
193
|
+
button.full-width,
|
|
194
|
+
input[type="submit"].full-width,
|
|
195
|
+
input[type="reset"].full-width,
|
|
196
|
+
input[type="button"].full-width {
|
|
197
|
+
width: 100%;
|
|
198
|
+
padding-left: 0 !important;
|
|
199
|
+
padding-right: 0 !important;
|
|
200
|
+
text-align: center; }
|
|
201
|
+
|
|
202
|
+
|
|
203
|
+
/* #Tabs (activate in tabs.js)
|
|
204
|
+
================================================== */
|
|
205
|
+
ul.tabs {
|
|
206
|
+
display: block;
|
|
207
|
+
margin: 0 0 20px 0;
|
|
208
|
+
padding: 0;
|
|
209
|
+
border-bottom: solid 1px #ddd; }
|
|
210
|
+
ul.tabs li {
|
|
211
|
+
display: block;
|
|
212
|
+
width: auto;
|
|
213
|
+
height: 30px;
|
|
214
|
+
padding: 0;
|
|
215
|
+
float: left;
|
|
216
|
+
margin-bottom: 0; }
|
|
217
|
+
ul.tabs li a {
|
|
218
|
+
display: block;
|
|
219
|
+
text-decoration: none;
|
|
220
|
+
width: auto;
|
|
221
|
+
height: 29px;
|
|
222
|
+
padding: 0px 20px;
|
|
223
|
+
line-height: 30px;
|
|
224
|
+
border: solid 1px #ddd;
|
|
225
|
+
border-width: 1px 1px 0 0;
|
|
226
|
+
margin: 0;
|
|
227
|
+
background: #f5f5f5;
|
|
228
|
+
font-size: 13px; }
|
|
229
|
+
ul.tabs li a.active {
|
|
230
|
+
background: #fff;
|
|
231
|
+
height: 30px;
|
|
232
|
+
position: relative;
|
|
233
|
+
top: -4px;
|
|
234
|
+
padding-top: 4px;
|
|
235
|
+
border-left-width: 1px;
|
|
236
|
+
margin: 0 0 0 -1px;
|
|
237
|
+
color: #111;
|
|
238
|
+
-moz-border-radius-topleft: 2px;
|
|
239
|
+
-webkit-border-top-left-radius: 2px;
|
|
240
|
+
border-top-left-radius: 2px;
|
|
241
|
+
-moz-border-radius-topright: 2px;
|
|
242
|
+
-webkit-border-top-right-radius: 2px;
|
|
243
|
+
border-top-right-radius: 2px; }
|
|
244
|
+
ul.tabs li:first-child a.active {
|
|
245
|
+
margin-left: 0; }
|
|
246
|
+
ul.tabs li:first-child a {
|
|
247
|
+
border-width: 1px 1px 0 1px;
|
|
248
|
+
-moz-border-radius-topleft: 2px;
|
|
249
|
+
-webkit-border-top-left-radius: 2px;
|
|
250
|
+
border-top-left-radius: 2px; }
|
|
251
|
+
ul.tabs li:last-child a {
|
|
252
|
+
-moz-border-radius-topright: 2px;
|
|
253
|
+
-webkit-border-top-right-radius: 2px;
|
|
254
|
+
border-top-right-radius: 2px; }
|
|
255
|
+
|
|
256
|
+
ul.tabs-content { margin: 0; display: block; }
|
|
257
|
+
ul.tabs-content > li { display:none; }
|
|
258
|
+
ul.tabs-content > li.active { display: block; }
|
|
259
|
+
|
|
260
|
+
/* Clearfixing tabs for beautiful stacking */
|
|
261
|
+
ul.tabs:before,
|
|
262
|
+
ul.tabs:after {
|
|
263
|
+
content: '\0020';
|
|
264
|
+
display: block;
|
|
265
|
+
overflow: hidden;
|
|
266
|
+
visibility: hidden;
|
|
267
|
+
width: 0;
|
|
268
|
+
height: 0; }
|
|
269
|
+
ul.tabs:after {
|
|
270
|
+
clear: both; }
|
|
271
|
+
ul.tabs {
|
|
272
|
+
zoom: 1; }
|
|
273
|
+
|
|
274
|
+
|
|
275
|
+
/* #Forms
|
|
276
|
+
================================================== */
|
|
277
|
+
|
|
278
|
+
form {
|
|
279
|
+
margin-bottom: 20px; }
|
|
280
|
+
fieldset {
|
|
281
|
+
margin-bottom: 20px; }
|
|
282
|
+
input[type="text"],
|
|
283
|
+
input[type="password"],
|
|
284
|
+
input[type="email"],
|
|
285
|
+
textarea,
|
|
286
|
+
select {
|
|
287
|
+
border: 1px solid #ccc;
|
|
288
|
+
padding: 6px 4px;
|
|
289
|
+
outline: none;
|
|
290
|
+
-moz-border-radius: 2px;
|
|
291
|
+
-webkit-border-radius: 2px;
|
|
292
|
+
border-radius: 2px;
|
|
293
|
+
font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
294
|
+
color: #777;
|
|
295
|
+
margin: 0;
|
|
296
|
+
width: 210px;
|
|
297
|
+
max-width: 100%;
|
|
298
|
+
display: block;
|
|
299
|
+
margin-bottom: 20px;
|
|
300
|
+
background: #fff; }
|
|
301
|
+
select {
|
|
302
|
+
padding: 0; }
|
|
303
|
+
input[type="text"]:focus,
|
|
304
|
+
input[type="password"]:focus,
|
|
305
|
+
input[type="email"]:focus,
|
|
306
|
+
textarea:focus {
|
|
307
|
+
border: 1px solid #aaa;
|
|
308
|
+
color: #444;
|
|
309
|
+
-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
|
|
310
|
+
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
|
|
311
|
+
box-shadow: 0 0 3px rgba(0,0,0,.2); }
|
|
312
|
+
textarea {
|
|
313
|
+
min-height: 60px; }
|
|
314
|
+
label,
|
|
315
|
+
legend {
|
|
316
|
+
display: block;
|
|
317
|
+
font-weight: bold;
|
|
318
|
+
font-size: 13px; }
|
|
319
|
+
select {
|
|
320
|
+
width: 220px; }
|
|
321
|
+
input[type="checkbox"] {
|
|
322
|
+
display: inline; }
|
|
323
|
+
label span,
|
|
324
|
+
legend span {
|
|
325
|
+
font-weight: normal;
|
|
326
|
+
font-size: 13px;
|
|
327
|
+
color: #444; }
|
|
328
|
+
|
|
329
|
+
/* #Misc
|
|
330
|
+
================================================== */
|
|
331
|
+
.remove-bottom { margin-bottom: 0 !important; }
|
|
332
|
+
.half-bottom { margin-bottom: 10px !important; }
|
|
333
|
+
.add-bottom { margin-bottom: 20px !important; }
|
|
334
|
+
|
|
335
|
+
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Skeleton V1.1
|
|
3
|
+
* Copyright 2011, Dave Gamache
|
|
4
|
+
* www.getskeleton.com
|
|
5
|
+
* Free to use under the MIT license.
|
|
6
|
+
* http://www.opensource.org/licenses/mit-license.php
|
|
7
|
+
* 8/17/2011
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
/* Table of Content
|
|
11
|
+
==================================================
|
|
12
|
+
#Site Styles
|
|
13
|
+
#Page Styles
|
|
14
|
+
#Media Queries
|
|
15
|
+
#Font-Face */
|
|
16
|
+
|
|
17
|
+
/* #Site Styles
|
|
18
|
+
================================================== */
|
|
19
|
+
|
|
20
|
+
/* #Page Styles
|
|
21
|
+
================================================== */
|
|
22
|
+
|
|
23
|
+
/* #Media Queries
|
|
24
|
+
================================================== */
|
|
25
|
+
|
|
26
|
+
/* Smaller than standard 960 (devices and browsers) */
|
|
27
|
+
@media only screen and (max-width: 959px) {}
|
|
28
|
+
|
|
29
|
+
/* Tablet Portrait size to standard 960 (devices and browsers) */
|
|
30
|
+
@media only screen and (min-width: 768px) and (max-width: 959px) {}
|
|
31
|
+
|
|
32
|
+
/* All Mobile Sizes (devices and browser) */
|
|
33
|
+
@media only screen and (max-width: 767px) {}
|
|
34
|
+
|
|
35
|
+
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
|
|
36
|
+
@media only screen and (min-width: 480px) and (max-width: 767px) {}
|
|
37
|
+
|
|
38
|
+
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
|
|
39
|
+
@media only screen and (max-width: 479px) {}
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
/* #Font-Face
|
|
43
|
+
================================================== */
|
|
44
|
+
/* This is the proper syntax for an @font-face file
|
|
45
|
+
Just create a "fonts" folder at the root,
|
|
46
|
+
copy your FontName into code below and remove
|
|
47
|
+
comment brackets */
|
|
48
|
+
|
|
49
|
+
/* @font-face {
|
|
50
|
+
font-family: 'FontName';
|
|
51
|
+
src: url('../fonts/FontName.eot');
|
|
52
|
+
src: url('../fonts/FontName.eot?iefix') format('eot'),
|
|
53
|
+
url('../fonts/FontName.woff') format('woff'),
|
|
54
|
+
url('../fonts/FontName.ttf') format('truetype'),
|
|
55
|
+
url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
|
|
56
|
+
font-weight: normal;
|
|
57
|
+
font-style: normal; }
|
|
58
|
+
*/
|
|
@@ -0,0 +1,236 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Skeleton V1.1
|
|
3
|
+
* Copyright 2011, Dave Gamache
|
|
4
|
+
* www.getskeleton.com
|
|
5
|
+
* Free to use under the MIT license.
|
|
6
|
+
* http://www.opensource.org/licenses/mit-license.php
|
|
7
|
+
* 8/17/2011
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
/* Table of Contents
|
|
12
|
+
==================================================
|
|
13
|
+
#Base 960 Grid
|
|
14
|
+
#Tablet (Portrait)
|
|
15
|
+
#Mobile (Portrait)
|
|
16
|
+
#Mobile (Landscape)
|
|
17
|
+
#Clearing */
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
/* #Base 960 Grid
|
|
22
|
+
================================================== */
|
|
23
|
+
|
|
24
|
+
.container { position: relative; width: 960px; margin: 0 auto; padding: 0; }
|
|
25
|
+
.column, .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
|
|
26
|
+
.row { margin-bottom: 20px; }
|
|
27
|
+
|
|
28
|
+
/* Nested Column Classes */
|
|
29
|
+
.column.alpha, .columns.alpha { margin-left: 0; }
|
|
30
|
+
.column.omega, .columns.omega { margin-right: 0; }
|
|
31
|
+
|
|
32
|
+
/* Base Grid */
|
|
33
|
+
.container .one.column { width: 40px; }
|
|
34
|
+
.container .two.columns { width: 100px; }
|
|
35
|
+
.container .three.columns { width: 160px; }
|
|
36
|
+
.container .four.columns { width: 220px; }
|
|
37
|
+
.container .five.columns { width: 280px; }
|
|
38
|
+
.container .six.columns { width: 340px; }
|
|
39
|
+
.container .seven.columns { width: 400px; }
|
|
40
|
+
.container .eight.columns { width: 460px; }
|
|
41
|
+
.container .nine.columns { width: 520px; }
|
|
42
|
+
.container .ten.columns { width: 580px; }
|
|
43
|
+
.container .eleven.columns { width: 640px; }
|
|
44
|
+
.container .twelve.columns { width: 700px; }
|
|
45
|
+
.container .thirteen.columns { width: 760px; }
|
|
46
|
+
.container .fourteen.columns { width: 820px; }
|
|
47
|
+
.container .fifteen.columns { width: 880px; }
|
|
48
|
+
.container .sixteen.columns { width: 940px; }
|
|
49
|
+
|
|
50
|
+
.container .one-third.column { width: 300px; }
|
|
51
|
+
.container .two-thirds.column { width: 620px; }
|
|
52
|
+
|
|
53
|
+
/* Offsets */
|
|
54
|
+
.container .offset-by-one { padding-left: 60px; }
|
|
55
|
+
.container .offset-by-two { padding-left: 120px; }
|
|
56
|
+
.container .offset-by-three { padding-left: 180px; }
|
|
57
|
+
.container .offset-by-four { padding-left: 240px; }
|
|
58
|
+
.container .offset-by-five { padding-left: 300px; }
|
|
59
|
+
.container .offset-by-six { padding-left: 360px; }
|
|
60
|
+
.container .offset-by-seven { padding-left: 420px; }
|
|
61
|
+
.container .offset-by-eight { padding-left: 480px; }
|
|
62
|
+
.container .offset-by-nine { padding-left: 540px; }
|
|
63
|
+
.container .offset-by-ten { padding-left: 600px; }
|
|
64
|
+
.container .offset-by-eleven { padding-left: 660px; }
|
|
65
|
+
.container .offset-by-twelve { padding-left: 720px; }
|
|
66
|
+
.container .offset-by-thirteen { padding-left: 780px; }
|
|
67
|
+
.container .offset-by-fourteen { padding-left: 840px; }
|
|
68
|
+
.container .offset-by-fifteen { padding-left: 900px; }
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
/* #Tablet (Portrait)
|
|
73
|
+
================================================== */
|
|
74
|
+
|
|
75
|
+
/* Note: Design for a width of 768px */
|
|
76
|
+
|
|
77
|
+
@media only screen and (min-width: 768px) and (max-width: 959px) {
|
|
78
|
+
.container { width: 768px; }
|
|
79
|
+
.container .column,
|
|
80
|
+
.container .columns { margin-left: 10px; margin-right: 10px; }
|
|
81
|
+
.column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; }
|
|
82
|
+
.column.omega, .columns.omega { margin-right: 0; margin-left: 10px; }
|
|
83
|
+
|
|
84
|
+
.container .one.column { width: 28px; }
|
|
85
|
+
.container .two.columns { width: 76px; }
|
|
86
|
+
.container .three.columns { width: 124px; }
|
|
87
|
+
.container .four.columns { width: 172px; }
|
|
88
|
+
.container .five.columns { width: 220px; }
|
|
89
|
+
.container .six.columns { width: 268px; }
|
|
90
|
+
.container .seven.columns { width: 316px; }
|
|
91
|
+
.container .eight.columns { width: 364px; }
|
|
92
|
+
.container .nine.columns { width: 412px; }
|
|
93
|
+
.container .ten.columns { width: 460px; }
|
|
94
|
+
.container .eleven.columns { width: 508px; }
|
|
95
|
+
.container .twelve.columns { width: 556px; }
|
|
96
|
+
.container .thirteen.columns { width: 604px; }
|
|
97
|
+
.container .fourteen.columns { width: 652px; }
|
|
98
|
+
.container .fifteen.columns { width: 700px; }
|
|
99
|
+
.container .sixteen.columns { width: 748px; }
|
|
100
|
+
|
|
101
|
+
.container .one-third.column { width: 236px; }
|
|
102
|
+
.container .two-thirds.column { width: 492px; }
|
|
103
|
+
|
|
104
|
+
/* Offsets */
|
|
105
|
+
.container .offset-by-one { padding-left: 48px; }
|
|
106
|
+
.container .offset-by-two { padding-left: 96px; }
|
|
107
|
+
.container .offset-by-three { padding-left: 144px; }
|
|
108
|
+
.container .offset-by-four { padding-left: 192px; }
|
|
109
|
+
.container .offset-by-five { padding-left: 240px; }
|
|
110
|
+
.container .offset-by-six { padding-left: 288px; }
|
|
111
|
+
.container .offset-by-seven { padding-left: 336px; }
|
|
112
|
+
.container .offset-by-eight { padding-left: 348px; }
|
|
113
|
+
.container .offset-by-nine { padding-left: 432px; }
|
|
114
|
+
.container .offset-by-ten { padding-left: 480px; }
|
|
115
|
+
.container .offset-by-eleven { padding-left: 528px; }
|
|
116
|
+
.container .offset-by-twelve { padding-left: 576px; }
|
|
117
|
+
.container .offset-by-thirteen { padding-left: 624px; }
|
|
118
|
+
.container .offset-by-fourteen { padding-left: 672px; }
|
|
119
|
+
.container .offset-by-fifteen { padding-left: 720px; }
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
/* #Mobile (Portrait)
|
|
124
|
+
================================================== */
|
|
125
|
+
|
|
126
|
+
/* Note: Design for a width of 320px */
|
|
127
|
+
|
|
128
|
+
@media only screen and (max-width: 767px) {
|
|
129
|
+
.container { width: 300px; }
|
|
130
|
+
.columns, .column { margin: 0; }
|
|
131
|
+
|
|
132
|
+
.container .one.column,
|
|
133
|
+
.container .two.columns,
|
|
134
|
+
.container .three.columns,
|
|
135
|
+
.container .four.columns,
|
|
136
|
+
.container .five.columns,
|
|
137
|
+
.container .six.columns,
|
|
138
|
+
.container .seven.columns,
|
|
139
|
+
.container .eight.columns,
|
|
140
|
+
.container .nine.columns,
|
|
141
|
+
.container .ten.columns,
|
|
142
|
+
.container .eleven.columns,
|
|
143
|
+
.container .twelve.columns,
|
|
144
|
+
.container .thirteen.columns,
|
|
145
|
+
.container .fourteen.columns,
|
|
146
|
+
.container .fifteen.columns,
|
|
147
|
+
.container .sixteen.columns,
|
|
148
|
+
.container .one-third.column,
|
|
149
|
+
.container .two-thirds.column { width: 300px; }
|
|
150
|
+
|
|
151
|
+
/* Offsets */
|
|
152
|
+
.container .offset-by-one,
|
|
153
|
+
.container .offset-by-two,
|
|
154
|
+
.container .offset-by-three,
|
|
155
|
+
.container .offset-by-four,
|
|
156
|
+
.container .offset-by-five,
|
|
157
|
+
.container .offset-by-six,
|
|
158
|
+
.container .offset-by-seven,
|
|
159
|
+
.container .offset-by-eight,
|
|
160
|
+
.container .offset-by-nine,
|
|
161
|
+
.container .offset-by-ten,
|
|
162
|
+
.container .offset-by-eleven,
|
|
163
|
+
.container .offset-by-twelve,
|
|
164
|
+
.container .offset-by-thirteen,
|
|
165
|
+
.container .offset-by-fourteen,
|
|
166
|
+
.container .offset-by-fifteen { padding-left: 0; }
|
|
167
|
+
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
|
|
171
|
+
/* #Mobile (Landscape)
|
|
172
|
+
================================================== */
|
|
173
|
+
|
|
174
|
+
/* Note: Design for a width of 480px */
|
|
175
|
+
|
|
176
|
+
@media only screen and (min-width: 480px) and (max-width: 767px) {
|
|
177
|
+
.container { width: 420px; }
|
|
178
|
+
.columns, .column { margin: 0; }
|
|
179
|
+
|
|
180
|
+
.container .one.column,
|
|
181
|
+
.container .two.columns,
|
|
182
|
+
.container .three.columns,
|
|
183
|
+
.container .four.columns,
|
|
184
|
+
.container .five.columns,
|
|
185
|
+
.container .six.columns,
|
|
186
|
+
.container .seven.columns,
|
|
187
|
+
.container .eight.columns,
|
|
188
|
+
.container .nine.columns,
|
|
189
|
+
.container .ten.columns,
|
|
190
|
+
.container .eleven.columns,
|
|
191
|
+
.container .twelve.columns,
|
|
192
|
+
.container .thirteen.columns,
|
|
193
|
+
.container .fourteen.columns,
|
|
194
|
+
.container .fifteen.columns,
|
|
195
|
+
.container .sixteen.columns,
|
|
196
|
+
.container .one-third.column,
|
|
197
|
+
.container .two-thirds.column { width: 420px; }
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
|
|
201
|
+
/* #Clearing
|
|
202
|
+
================================================== */
|
|
203
|
+
|
|
204
|
+
/* Self Clearing Goodness */
|
|
205
|
+
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
|
|
206
|
+
|
|
207
|
+
/* Use clearfix class on parent to clear nested columns,
|
|
208
|
+
or wrap each row of columns in a <div class="row"> */
|
|
209
|
+
.clearfix:before,
|
|
210
|
+
.clearfix:after,
|
|
211
|
+
.row:before,
|
|
212
|
+
.row:after {
|
|
213
|
+
content: '\0020';
|
|
214
|
+
display: block;
|
|
215
|
+
overflow: hidden;
|
|
216
|
+
visibility: hidden;
|
|
217
|
+
width: 0;
|
|
218
|
+
height: 0; }
|
|
219
|
+
.row:after,
|
|
220
|
+
.clearfix:after {
|
|
221
|
+
clear: both; }
|
|
222
|
+
.row,
|
|
223
|
+
.clearfix {
|
|
224
|
+
zoom: 1; }
|
|
225
|
+
|
|
226
|
+
/* You can also use a <br class="clear" /> to clear columns */
|
|
227
|
+
.clear {
|
|
228
|
+
clear: both;
|
|
229
|
+
display: block;
|
|
230
|
+
overflow: hidden;
|
|
231
|
+
visibility: hidden;
|
|
232
|
+
width: 0;
|
|
233
|
+
height: 0;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
|
metadata
ADDED
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
|
2
|
+
name: skeleton_rails
|
|
3
|
+
version: !ruby/object:Gem::Version
|
|
4
|
+
version: 0.1.1
|
|
5
|
+
prerelease:
|
|
6
|
+
platform: ruby
|
|
7
|
+
authors:
|
|
8
|
+
- Glenn Goodrich
|
|
9
|
+
autorequire:
|
|
10
|
+
bindir: bin
|
|
11
|
+
cert_chain: []
|
|
12
|
+
date: 2011-11-13 00:00:00.000000000 Z
|
|
13
|
+
dependencies:
|
|
14
|
+
- !ruby/object:Gem::Dependency
|
|
15
|
+
name: rails
|
|
16
|
+
requirement: &2164740160 !ruby/object:Gem::Requirement
|
|
17
|
+
none: false
|
|
18
|
+
requirements:
|
|
19
|
+
- - ~>
|
|
20
|
+
- !ruby/object:Gem::Version
|
|
21
|
+
version: 3.0.0
|
|
22
|
+
type: :development
|
|
23
|
+
prerelease: false
|
|
24
|
+
version_requirements: *2164740160
|
|
25
|
+
- !ruby/object:Gem::Dependency
|
|
26
|
+
name: mocha
|
|
27
|
+
requirement: &2164738360 !ruby/object:Gem::Requirement
|
|
28
|
+
none: false
|
|
29
|
+
requirements:
|
|
30
|
+
- - ~>
|
|
31
|
+
- !ruby/object:Gem::Version
|
|
32
|
+
version: 0.10.0
|
|
33
|
+
type: :development
|
|
34
|
+
prerelease: false
|
|
35
|
+
version_requirements: *2164738360
|
|
36
|
+
description: Generates a layout based on http://getskeleton.com
|
|
37
|
+
email: glenn.goodrich@gmail.com
|
|
38
|
+
executables: []
|
|
39
|
+
extensions: []
|
|
40
|
+
extra_rdoc_files: []
|
|
41
|
+
files:
|
|
42
|
+
- lib/generators/skeleton_layout/3
|
|
43
|
+
- lib/generators/skeleton_layout/skeleton_layout_generator.rb
|
|
44
|
+
- lib/generators/skeleton_layout/templates/404.html
|
|
45
|
+
- lib/generators/skeleton_layout/templates/images/apple-touch-icon-114x114.png
|
|
46
|
+
- lib/generators/skeleton_layout/templates/images/apple-touch-icon-72x72.png
|
|
47
|
+
- lib/generators/skeleton_layout/templates/images/apple-touch-icon.png
|
|
48
|
+
- lib/generators/skeleton_layout/templates/images/favicon.ico
|
|
49
|
+
- lib/generators/skeleton_layout/templates/index.html
|
|
50
|
+
- lib/generators/skeleton_layout/templates/index.html.erb
|
|
51
|
+
- lib/generators/skeleton_layout/templates/index.html.haml
|
|
52
|
+
- lib/generators/skeleton_layout/templates/javascripts/tabs.js
|
|
53
|
+
- lib/generators/skeleton_layout/templates/robots.txt
|
|
54
|
+
- lib/generators/skeleton_layout/templates/stylesheets/base.css
|
|
55
|
+
- lib/generators/skeleton_layout/templates/stylesheets/layout.css
|
|
56
|
+
- lib/generators/skeleton_layout/templates/stylesheets/skeleton.css
|
|
57
|
+
- lib/generators/skeleton_layout/USAGE
|
|
58
|
+
- Gemfile
|
|
59
|
+
- Gemfile.lock
|
|
60
|
+
- Rakefile
|
|
61
|
+
- README.md
|
|
62
|
+
homepage: http://github.com/ruprict/skeleton_rails
|
|
63
|
+
licenses: []
|
|
64
|
+
post_install_message:
|
|
65
|
+
rdoc_options: []
|
|
66
|
+
require_paths:
|
|
67
|
+
- lib
|
|
68
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
|
69
|
+
none: false
|
|
70
|
+
requirements:
|
|
71
|
+
- - ! '>='
|
|
72
|
+
- !ruby/object:Gem::Version
|
|
73
|
+
version: '0'
|
|
74
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
75
|
+
none: false
|
|
76
|
+
requirements:
|
|
77
|
+
- - ! '>='
|
|
78
|
+
- !ruby/object:Gem::Version
|
|
79
|
+
version: '0'
|
|
80
|
+
requirements: []
|
|
81
|
+
rubyforge_project:
|
|
82
|
+
rubygems_version: 1.8.10
|
|
83
|
+
signing_key:
|
|
84
|
+
specification_version: 3
|
|
85
|
+
summary: Generates a layout based on http://getskeleton.com
|
|
86
|
+
test_files: []
|