html5-boilerplate 0.1.0

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.
Files changed (40) hide show
  1. data/README.md +81 -0
  2. data/lib/html5-boilerplate.rb +1 -0
  3. data/stylesheets/_html5-boilerplate.scss +13 -0
  4. data/stylesheets/html5-boilerplate/_base.scss +144 -0
  5. data/stylesheets/html5-boilerplate/_fonts.scss +38 -0
  6. data/stylesheets/html5-boilerplate/_handheld.scss +10 -0
  7. data/stylesheets/html5-boilerplate/_helpers.scss +48 -0
  8. data/stylesheets/html5-boilerplate/_media.scss +63 -0
  9. data/stylesheets/html5-boilerplate/_reset.scss +64 -0
  10. data/templates/project/404.html +19 -0
  11. data/templates/project/_flashes.html.haml +5 -0
  12. data/templates/project/_footer.html.haml +2 -0
  13. data/templates/project/_head.html.haml +33 -0
  14. data/templates/project/_header.html.haml +1 -0
  15. data/templates/project/_javascripts.html.haml +35 -0
  16. data/templates/project/_stylesheets.html.haml +6 -0
  17. data/templates/project/application.html.haml +21 -0
  18. data/templates/project/crossdomain.xml +14 -0
  19. data/templates/project/handheld.scss +7 -0
  20. data/templates/project/htaccess.conf +186 -0
  21. data/templates/project/html5/_base.scss +36 -0
  22. data/templates/project/html5/_defaults.scss +21 -0
  23. data/templates/project/html5/_fonts.scss +7 -0
  24. data/templates/project/html5/_helpers.scss +7 -0
  25. data/templates/project/html5/_media.scss +15 -0
  26. data/templates/project/index.html.haml +79 -0
  27. data/templates/project/javascripts/dd_belatedpng.js +328 -0
  28. data/templates/project/javascripts/jquery-1.4.2.min.js +154 -0
  29. data/templates/project/javascripts/modernizr-1.5.min.js +28 -0
  30. data/templates/project/javascripts/plugins.js +40 -0
  31. data/templates/project/javascripts/profiling/charts.swf +0 -0
  32. data/templates/project/javascripts/profiling/config.js +59 -0
  33. data/templates/project/javascripts/profiling/yahoo-profiling.css +7 -0
  34. data/templates/project/javascripts/profiling/yahoo-profiling.min.js +39 -0
  35. data/templates/project/javascripts/rails.js +132 -0
  36. data/templates/project/manifest.rb +66 -0
  37. data/templates/project/nginx.conf +68 -0
  38. data/templates/project/robots.txt +5 -0
  39. data/templates/project/style.scss +19 -0
  40. metadata +116 -0
@@ -0,0 +1,19 @@
1
+ <!doctype html>
2
+ <title>not found</title>
3
+
4
+ <style>
5
+ body { text-align: center;}
6
+ h1 { font-size: 50px; }
7
+ body { font: 20px Constantia, 'Hoefler Text', "Adobe Caslon Pro", Baskerville, Georgia, Times, serif; color: #999; text-shadow: 2px 2px 2px rgba(200, 200, 200, 0.5); }
8
+ a { color: rgb(36, 109, 56); text-decoration:none; }
9
+ a:hover { color: rgb(96, 73, 141) ; text-shadow: 2px 2px 2px rgba(36, 109, 56, 0.5); }
10
+ span[frown] { transform: rotate(90deg); display:inline-block; color: #bbb; }
11
+ </style>
12
+
13
+
14
+
15
+
16
+ <details>
17
+ <summary><h1>Not found</h1></summary>
18
+ <p><span frown>:(</span></p>
19
+ </details>
@@ -0,0 +1,5 @@
1
+ #flash
2
+ - flash.each do |key, value|
3
+ %div{ :title => key.to_s.humanize, :class => key }
4
+ %p
5
+ = h value
@@ -0,0 +1,2 @@
1
+ .copyright
2
+ Copyright &copy; #{Date.today.year}, All rights reserved.
@@ -0,0 +1,33 @@
1
+ %head
2
+ %meta{:charset => "utf-8"}/
3
+
4
+ -# www.phpied.com/conditional-comments-block-downloads/
5
+ /[if IE]
6
+
7
+ -#
8
+ Always force latest IE rendering engine (even in intranet) &amp; Chrome Frame
9
+ Remove this if you use the .htaccess
10
+ %meta{:content => "IE=edge,chrome=1", "http-equiv" => "X-UA-Compatible"}/
11
+
12
+ %title
13
+ %meta{:content => "", :name => "description"}/
14
+ %meta{:content => "", :name => "author"}/
15
+
16
+ -#
17
+ Mobile Viewport Fix
18
+ j.mp/mobileviewport &amp; davidbcalhoun.com/2010/viewport-metatag
19
+ device-width : Occupy full width of the screen in its current orientation
20
+ initial-scale = 1.0 retains dimensions instead of zooming out if page height > device height
21
+ maximum-scale = 1.0 retains dimensions instead of zooming in if page width < device width
22
+ %meta{:content => "width=device-width; initial-scale=1.0; maximum-scale=1.0;", :name => "viewport"}/
23
+
24
+ -# Place favicon.ico and apple-touch-icon.png in the root of your domain and delete these references
25
+ -# %link{:href => "/favicon.ico", :rel => "shortcut icon"}/
26
+ -# %link{:href => "/apple-touch-icon.png", :rel => "apple-touch-icon"}/
27
+
28
+ = render :partial => 'layouts/stylesheets'
29
+
30
+ -# All JavaScript at the bottom, except for Modernizr which enables HTML5 elements &amp; feature detects
31
+ = javascript_include_tag 'modernizr-1.5.min'
32
+
33
+ = csrf_meta_tag
@@ -0,0 +1,35 @@
1
+ -# Grab Google CDN's jQuery
2
+ - if defined?(google_api_key) && !google_api_key.blank?
3
+ = javascript_include_tag "http://www.google.com/jsapi?key=#{google_api_key}"
4
+ :javascript
5
+ google.load("jquery", "1.4.2");
6
+ - else
7
+ = javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
8
+
9
+ -# fall back to local jQuery if necessary
10
+ :javascript
11
+ !window.jQuery && document.write('#{ escape_javascript(javascript_include_tag "jquery-1.4.2.min") }')
12
+
13
+ = javascript_include_tag 'rails', 'plugins', 'application'
14
+
15
+ /[if lt IE 7 ]
16
+ = javascript_include_tag 'dd_belatedpng'
17
+
18
+ -# Append your own using content_for :javascripts
19
+ = yield :javascripts
20
+
21
+ -# yui profiler and profileviewer
22
+ - if RAILS_ENV == 'development'
23
+ = javascript_include_tag 'profiling/yahoo-profiling.min.js', 'profiling/config.js'
24
+
25
+ -# asynchronous google analytics: mathiasbynens.be/notes/async-analytics-snippet
26
+ -# change the UA-XXXXX-X to be your site's ID
27
+ :javascript
28
+ var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview']];
29
+ (function(d, t) {
30
+ var g = d.createElement(t),
31
+ s = d.getElementsByTagName(t)[0];
32
+ g.async = true;
33
+ g.src = '//www.google-analytics.com/ga.js';
34
+ s.parentNode.insertBefore(g, s);
35
+ })(document, 'script');
@@ -0,0 +1,6 @@
1
+ -# CSS : implied media="all"
2
+ = stylesheet_link_tag 'style'
3
+ -# For the less-enabled mobile browsers like Opera Mini
4
+ = stylesheet_link_tag 'handheld', :media => 'handheld'
5
+ -# Append your own using content_for :stylesheets
6
+ = yield :stylesheets
@@ -0,0 +1,21 @@
1
+ !!!
2
+ %html.no-js{:lang => "en"}
3
+ = render :partial => 'layouts/head'
4
+
5
+ -# paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
6
+ <!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
7
+ <!--[if IE 7 ]> <body class="ie7"> <![endif]-->
8
+ <!--[if IE 8 ]> <body class="ie8"> <![endif]-->
9
+ <!--[if IE 9 ]> <body class="ie9"> <![endif]-->
10
+ <!--[if (gt IE 9)|!(IE)]><!-->
11
+ %body
12
+ <!--<![endif]-->
13
+ #container
14
+ %header#header
15
+ #main
16
+ = render :partial => 'layouts/flashes'
17
+ = yield
18
+ %footer#footer
19
+
20
+ -# Javascript at the bottom for fast page loading
21
+ = render :partial => 'layouts/javascripts'
@@ -0,0 +1,14 @@
1
+ <?xml version="1.0"?>
2
+ <!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
3
+ <cross-domain-policy>
4
+ <!--
5
+ If you host a crossdomain.xml file with allow-access-from domain=“*”
6
+ and don’t understand all of the points described here, you probably
7
+ have a nasty security vulnerability. ~ simon willison
8
+
9
+ Please read: www.adobe.com/devnet/flashplayer/articles/cross_domain_policy.html
10
+
11
+ <allow-access-from domain="*" to-ports="*" />
12
+
13
+ -->
14
+ </cross-domain-policy>
@@ -0,0 +1,7 @@
1
+ @import "html5-boilerplate/handheld";
2
+
3
+ // Use this partial for more customization
4
+ //@import "html5-boilerplate/handheld";
5
+
6
+ // Otherwise just include everything
7
+ @include html5-boilerplate-handheld;
@@ -0,0 +1,186 @@
1
+ # Apache configuration file
2
+ # httpd.apache.org/docs/2.2/mod/quickreference.html
3
+
4
+ # Techniques in here adapted from all over,
5
+ # including Kroc Camen: camendesign.com/.htaccess
6
+
7
+
8
+ # Force the latest IE version, in various cases when it may fall back to IE7 mode
9
+ # github.com/rails/rails/commit/123eb25#commitcomment-118920
10
+ # Use ChromeFrame if it's installed for a better experience for the poor IE folk
11
+ <IfModule mod_setenvif.c>
12
+ <IfModule mod_headers.c>
13
+ BrowserMatch MSIE ie
14
+ Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
15
+ </IfModule>
16
+ </IfModule>
17
+
18
+
19
+ # hacks.mozilla.org/2009/07/cross-site-xmlhttprequest-with-cors/
20
+ # Disabled. Uncomment to serve cross-domain ajax requests
21
+ #<IfModule mod_headers.c>
22
+ # Header set Access-Control-Allow-Origin "*"
23
+ #</IfModule>
24
+
25
+
26
+
27
+
28
+ # allow access from all domains for webfonts
29
+ # alternatively you could only whitelist
30
+ # your subdomains like "sub.domain.com"
31
+
32
+ <FilesMatch "\.(ttf|otf|eot|woff|font.css)$">
33
+ <IfModule mod_headers.c>
34
+ Header set Access-Control-Allow-Origin "*"
35
+ </IfModule>
36
+ </FilesMatch>
37
+
38
+
39
+ # video
40
+ AddType video/ogg ogg ogv
41
+ AddType video/mp4 mp4
42
+ AddType video/webm webm
43
+
44
+ # Proper svg serving. Required for svg webfonts on iPad
45
+ # twitter.com/FontSquirrel/status/14855840545
46
+ AddType image/svg+xml svg svgz
47
+
48
+ # webfonts
49
+ AddType application/vnd.ms-fontobject eot
50
+ AddType font/ttf ttf
51
+ AddType font/otf otf
52
+ AddType font/x-woff woff
53
+
54
+ AddType text/cache-manifest manifest
55
+
56
+ # allow concatenation from within specific js and css files
57
+
58
+ # e.g. Inside of script.combined.js you could have
59
+ # <!--#include file="jquery-1.4.2.js" -->
60
+ # <!--#include file="jquery.idletimer.js" -->
61
+ # and they would be included into this single file
62
+
63
+ # this is not in use in the boilerplate as it stands. you may
64
+ # choose to name your files in this way for this advantage
65
+ # or concatenate and minify them manually.
66
+ # Disabled by default.
67
+
68
+ # <FilesMatch "\.combined\.(js|css)$">
69
+ # Options +IncludesNOEXEC
70
+ # SetOutputFilter INCLUDES
71
+ # </FilesMatch>
72
+
73
+
74
+
75
+
76
+
77
+ # gzip compression.
78
+ <IfModule mod_deflate.c>
79
+
80
+ # html, xml, css, and js:
81
+ AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/x-javascript text/javascript application/javascript application/json
82
+
83
+ # webfonts and svg:
84
+ <FilesMatch "\.(ttf|otf|eot|svg)$" >
85
+ SetOutputFilter DEFLATE
86
+ </FilesMatch>
87
+ </IfModule>
88
+
89
+
90
+
91
+
92
+ # these are pretty far-future expires headers
93
+ # they assume you control versioning with cachebusting query params like
94
+ # <script src="application.js?20100608">
95
+ # additionally, consider that outdated proxies may miscache
96
+ # www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/
97
+
98
+ # if you don't use filenames to version, lower the css and js to something like
99
+ # "access plus 1 week" or so
100
+
101
+ <IfModule mod_expires.c>
102
+ Header set cache-control: public
103
+ ExpiresActive on
104
+
105
+ # Perhaps better to whitelist expires rules? Perhaps.
106
+ ExpiresDefault "access plus 1 month"
107
+
108
+ # cache.manifest needs re-reqeusts in FF 3.6 (thx Remy ~Introducing HTML5)
109
+ ExpiresByType text/cache-manifest "access plus 0 seconds"
110
+
111
+ # your document html
112
+ ExpiresByType text/html "access"
113
+
114
+ # rss feed
115
+ ExpiresByType application/rss+xml "access plus 1 hour"
116
+
117
+ # favicon (cannot be renamed)
118
+ ExpiresByType image/vnd.microsoft.icon "access plus 1 week"
119
+
120
+ # media: images, video, audio
121
+ ExpiresByType image/png "access plus 1 month"
122
+ ExpiresByType image/jpg "access plus 1 month"
123
+ ExpiresByType image/jpeg "access plus 1 month"
124
+ ExpiresByType video/ogg "access plus 1 month"
125
+ ExpiresByType audio/ogg "access plus 1 month"
126
+ ExpiresByType video/mp4 "access plus 1 month"
127
+
128
+ # webfonts
129
+ ExpiresByType font/ttf "access plus 1 month"
130
+ ExpiresByType font/woff "access plus 1 month"
131
+ ExpiresByType image/svg+xml "access plus 1 month"
132
+
133
+ # css and javascript
134
+ ExpiresByType text/css "access plus 1 month"
135
+ ExpiresByType application/javascript "access plus 1 month"
136
+ ExpiresByType text/javascript "access plus 1 month"
137
+ </IfModule>
138
+
139
+
140
+
141
+
142
+ # Since we're sending far-future expires, we don't need ETags for
143
+ # static content.
144
+ # developer.yahoo.com/performance/rules.html#etags
145
+ FileETag None
146
+
147
+
148
+
149
+
150
+ # Allow cookies to be set from iframes (for IE only)
151
+ # If needed, uncomment and specify a path or regex in the Location directive
152
+
153
+ # <IfModule mod_headers.c>
154
+ # <Location />
155
+ # Header set P3P "policyref=\"/w3c/p3p.xml\", CP=\"IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT\""
156
+ # </Location>
157
+ # </IfModule>
158
+
159
+
160
+ # you probably want www.example.com to forward to example.com -- shorter URLs are sexier.
161
+ # no-www.org/faq.php?q=class_b
162
+ RewriteEngine On
163
+ RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
164
+ RewriteRule ^(.*)$ http://%1/$1 [R=301,L]
165
+
166
+
167
+ # without -MultiViews, Apache will give a 404 for a rewrite if a folder of the same name does not exist (e.g. “/blog/hello”)
168
+ # webmasterworld.com/apache/3808792.htm
169
+ Options -MultiViews
170
+ # -Indexes will have Apache block users from browsing folders without a default document
171
+ # Options -Indexes
172
+
173
+
174
+
175
+ # custom 404 page
176
+ ErrorDocument 404 /404.html
177
+
178
+
179
+
180
+ # use utf-8 encoding for anything served text/plain or text/html
181
+ AddDefaultCharset utf-8
182
+ # force utf-8 for a number of file formats
183
+ AddCharset utf-8 .html .css .js .xml .json .rss
184
+
185
+
186
+
@@ -0,0 +1,36 @@
1
+ body, select, input, textarea { color: $html5-boilerplate-font-color; }
2
+
3
+ h1,h2,h3,h4,h5,h6 { @include optimize-legibility; }
4
+
5
+ html {
6
+ @include font-smoothing;
7
+ @include force-scrollbar;
8
+ }
9
+
10
+ @include accessible-focus;
11
+
12
+ a, a:active, a:visited { color: $html5-boilerplate-link-color; }
13
+ a:hover { color: $html5-boilerplate-link-hover-color; }
14
+
15
+ ul { margin-left:30px; }
16
+ ol { margin-left:30px; list-style-type: decimal; }
17
+
18
+ small { @include small; }
19
+ strong, th { @include strong; }
20
+
21
+ td, td img { vertical-align: top; }
22
+
23
+ sub { vertical-align: sub; font-size: smaller; }
24
+ sup { vertical-align: super; font-size: smaller; }
25
+
26
+ @include quoted-pre;
27
+
28
+ @include align-input-labels;
29
+
30
+ @include hand-cursor-inputs;
31
+
32
+ @include selected-text;
33
+
34
+ @include webkit-tap-highlight;
35
+
36
+ @include ie-hacks;
@@ -0,0 +1,21 @@
1
+ $html5-boilerplate-font-family: sans-serif;
2
+
3
+ $html5-boilerplate-fixed-font-family: "Courier New", monospace, serif;
4
+
5
+ $html5-boilerplate-font-size: 13px !default;
6
+
7
+ $html5-boilerplate-font-color: #444; //looks better than black: twitter.com/H_FJ/statuses/11800719859
8
+
9
+ $html5-boilerplate-link-color: #607890;
10
+
11
+ $html5-boilerplate-link-hover-color: #036;
12
+
13
+ $html5-boilerplate-link-active-color: #607890;
14
+
15
+ $html5-boilerplate-link-visited-color: #607890;
16
+
17
+ $html5-boilerplate-selected-font-color: #fff;
18
+
19
+ $html5-boilerplate-selected-color: #FF5E99;
20
+
21
+ $html5-boilerplate-selected-font-color: #fff;
@@ -0,0 +1,7 @@
1
+ body { @include body-font; }
2
+
3
+ table { @include table-font; }
4
+
5
+ select, input, textarea { @include input-font; }
6
+
7
+ pre, code, kbd, samp { @include monospace-font; }
@@ -0,0 +1,7 @@
1
+ .ir { @include image-replacement; }
2
+
3
+ .hidden { @include hidden; }
4
+
5
+ .visuallyhidden { @include visually-hidden; }
6
+
7
+ @include magnificent-clearfix;
@@ -0,0 +1,15 @@
1
+ @media print {
2
+ @include media-print;
3
+ }
4
+
5
+ @media all and (orientation:portrait) {
6
+ @include media-orientation-portrait;
7
+ }
8
+
9
+ @media all and (orientation:landscape) {
10
+ @include media-orientation-landscape;
11
+ }
12
+
13
+ @media screen and (max-device-width: 480px) {
14
+ @include media-mobile;
15
+ }
@@ -0,0 +1,79 @@
1
+ !!!
2
+ %html.no-js{:lang => "en"}
3
+ %head
4
+ %meta{:charset => "utf-8"}/
5
+ -# www.phpied.com/conditional-comments-block-downloads/
6
+ /[if IE]
7
+
8
+ -#
9
+ Always force latest IE rendering engine (even in intranet) &amp; Chrome Frame
10
+ Remove this if you use the .htaccess
11
+ %meta{:content => "IE=edge,chrome=1", "http-equiv" => "X-UA-Compatible"}/
12
+
13
+ %title
14
+ %meta{:content => "", :name => "description"}/
15
+ %meta{:content => "", :name => "author"}/
16
+
17
+ -#
18
+ Mobile Viewport Fix
19
+ j.mp/mobileviewport &amp; davidbcalhoun.com/2010/viewport-metatag
20
+ device-width : Occupy full width of the screen in its current orientation
21
+ initial-scale = 1.0 retains dimensions instead of zooming out if page height > device height
22
+ maximum-scale = 1.0 retains dimensions instead of zooming in if page width < device width
23
+ %meta{:content => "width=device-width; initial-scale=1.0; maximum-scale=1.0;", :name => "viewport"}/
24
+
25
+ -# Place favicon.ico and apple-touch-icon.png in the root of your domain and delete these references
26
+ %link{:href => "/favicon.ico", :rel => "shortcut icon"}/
27
+ %link{:href => "/apple-touch-icon.png", :rel => "apple-touch-icon"}/
28
+
29
+ -# CSS : implied media="all"
30
+ %link{:href => "css/style.css?v=1", :rel => "stylesheet"}/
31
+
32
+ -# For the less-enabled mobile browsers like Opera Mini
33
+ %link{:href => "css/handheld.css?v=1", :media => "handheld", :rel => "stylesheet"}/
34
+
35
+ -# All JavaScript at the bottom, except for Modernizr which enables HTML5 elements &amp; feature detects
36
+ %script{:src => "js/modernizr-1.5.min.js"}
37
+
38
+ -# paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
39
+ <!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
40
+ <!--[if IE 7 ]> <body class="ie7"> <![endif]-->
41
+ <!--[if IE 8 ]> <body class="ie8"> <![endif]-->
42
+ <!--[if IE 9 ]> <body class="ie9"> <![endif]-->
43
+ <!--[if (gt IE 9)|!(IE)]><!-->
44
+ %body
45
+ <!--<![endif]-->
46
+ #container
47
+ %header
48
+ #main
49
+ %footer
50
+
51
+ -#
52
+ Javascript at the bottom for fast page loading
53
+ Grab Google CDN's jQuery. fall back to local if necessary
54
+ %script{:src => "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"}
55
+ :javascript
56
+ !window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')
57
+
58
+ %script{:src => "js/plugins.js?v=1"}
59
+ %script{:src => "js/script.js?v=1"}
60
+
61
+ /[if lt IE 7 ]
62
+ <script src="js/dd_belatedpng.js?v=1"></script>
63
+
64
+ -# yui profiler and profileviewer - remove for production
65
+ %script{:src => "js/profiling/yahoo-profiling.min.js?v=1"}
66
+ %script{:src => "js/profiling/config.js?v=1"}
67
+
68
+ -# asynchronous google analytics: mathiasbynens.be/notes/async-analytics-snippet
69
+ -# change the UA-XXXXX-X to be your site's ID
70
+ :javascript
71
+ var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview']];
72
+ (function(d, t) {
73
+ var g = d.createElement(t),
74
+ s = d.getElementsByTagName(t)[0];
75
+ g.async = true;
76
+ g.src = '//www.google-analytics.com/ga.js';
77
+ s.parentNode.insertBefore(g, s);
78
+ })(document, 'script');
79
+