html5_layout 0.0.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (30) hide show
  1. data/.gitignore +4 -0
  2. data/Gemfile +4 -0
  3. data/Gemfile.lock +107 -0
  4. data/README.markdown +29 -0
  5. data/Rakefile +2 -0
  6. data/features/html5_layout.feature +43 -0
  7. data/features/step_definitions/common_steps.rb +37 -0
  8. data/features/step_definitions/rails_setup_steps.rb +6 -0
  9. data/features/support/env.rb +6 -0
  10. data/features/support/matchers.rb +7 -0
  11. data/html5_layout.gemspec +26 -0
  12. data/lib/generators/html5_layout/USAGE +22 -0
  13. data/lib/generators/html5_layout/html5_layout_generator.rb +40 -0
  14. data/lib/generators/html5_layout/templates/app/stylesheets/_html5_reset.sass +333 -0
  15. data/lib/generators/html5_layout/templates/app/stylesheets/_text.sass +49 -0
  16. data/lib/generators/html5_layout/templates/app/stylesheets/application.sass +63 -0
  17. data/lib/generators/html5_layout/templates/app/stylesheets/grid.sass +20 -0
  18. data/lib/generators/html5_layout/templates/app/stylesheets/handheld.sass +5 -0
  19. data/lib/generators/html5_layout/templates/config/compass.rb +17 -0
  20. data/lib/generators/html5_layout/templates/config/initializers/compass.rb +3 -0
  21. data/lib/generators/html5_layout/templates/dd_belatedpng.js +328 -0
  22. data/lib/generators/html5_layout/templates/handheld.css +7 -0
  23. data/lib/generators/html5_layout/templates/jquery-1.4.2.min.js +154 -0
  24. data/lib/generators/html5_layout/templates/layout.html.erb +58 -0
  25. data/lib/generators/html5_layout/templates/layout_helper.rb +22 -0
  26. data/lib/generators/html5_layout/templates/modernizr-1.5.min.js +28 -0
  27. data/lib/generators/html5_layout/templates/stylesheet.css +170 -0
  28. data/lib/html5_layout.rb +3 -0
  29. data/lib/html5_layout/version.rb +3 -0
  30. metadata +163 -0
@@ -0,0 +1,4 @@
1
+ pkg/*
2
+ *.gem
3
+ .bundle
4
+ tmp/
data/Gemfile ADDED
@@ -0,0 +1,4 @@
1
+ source "http://rubygems.org"
2
+
3
+ # Specify your gem's dependencies in html5_layout.gemspec
4
+ gemspec
@@ -0,0 +1,107 @@
1
+ PATH
2
+ remote: .
3
+ specs:
4
+ html5_layout (0.0.1)
5
+ bundler (~> 1.0.2)
6
+ cucumber (~> 0.9.4)
7
+ rails (~> 3.0.1)
8
+ rspec (~> 2.0.1)
9
+
10
+ GEM
11
+ remote: http://rubygems.org/
12
+ specs:
13
+ abstract (1.0.0)
14
+ actionmailer (3.0.1)
15
+ actionpack (= 3.0.1)
16
+ mail (~> 2.2.5)
17
+ actionpack (3.0.1)
18
+ activemodel (= 3.0.1)
19
+ activesupport (= 3.0.1)
20
+ builder (~> 2.1.2)
21
+ erubis (~> 2.6.6)
22
+ i18n (~> 0.4.1)
23
+ rack (~> 1.2.1)
24
+ rack-mount (~> 0.6.12)
25
+ rack-test (~> 0.5.4)
26
+ tzinfo (~> 0.3.23)
27
+ activemodel (3.0.1)
28
+ activesupport (= 3.0.1)
29
+ builder (~> 2.1.2)
30
+ i18n (~> 0.4.1)
31
+ activerecord (3.0.1)
32
+ activemodel (= 3.0.1)
33
+ activesupport (= 3.0.1)
34
+ arel (~> 1.0.0)
35
+ tzinfo (~> 0.3.23)
36
+ activeresource (3.0.1)
37
+ activemodel (= 3.0.1)
38
+ activesupport (= 3.0.1)
39
+ activesupport (3.0.1)
40
+ arel (1.0.1)
41
+ activesupport (~> 3.0.0)
42
+ builder (2.1.2)
43
+ cucumber (0.9.4)
44
+ builder (~> 2.1.2)
45
+ diff-lcs (~> 1.1.2)
46
+ gherkin (~> 2.2.9)
47
+ json (~> 1.4.6)
48
+ term-ansicolor (~> 1.0.5)
49
+ diff-lcs (1.1.2)
50
+ erubis (2.6.6)
51
+ abstract (>= 1.0.0)
52
+ gherkin (2.2.9)
53
+ json (~> 1.4.6)
54
+ term-ansicolor (~> 1.0.5)
55
+ i18n (0.4.2)
56
+ json (1.4.6)
57
+ mail (2.2.9)
58
+ activesupport (>= 2.3.6)
59
+ i18n (~> 0.4.1)
60
+ mime-types (~> 1.16)
61
+ treetop (~> 1.4.8)
62
+ mime-types (1.16)
63
+ polyglot (0.3.1)
64
+ rack (1.2.1)
65
+ rack-mount (0.6.13)
66
+ rack (>= 1.0.0)
67
+ rack-test (0.5.6)
68
+ rack (>= 1.0)
69
+ rails (3.0.1)
70
+ actionmailer (= 3.0.1)
71
+ actionpack (= 3.0.1)
72
+ activerecord (= 3.0.1)
73
+ activeresource (= 3.0.1)
74
+ activesupport (= 3.0.1)
75
+ bundler (~> 1.0.0)
76
+ railties (= 3.0.1)
77
+ railties (3.0.1)
78
+ actionpack (= 3.0.1)
79
+ activesupport (= 3.0.1)
80
+ rake (>= 0.8.4)
81
+ thor (~> 0.14.0)
82
+ rake (0.8.7)
83
+ rspec (2.0.1)
84
+ rspec-core (~> 2.0.1)
85
+ rspec-expectations (~> 2.0.1)
86
+ rspec-mocks (~> 2.0.1)
87
+ rspec-core (2.0.1)
88
+ rspec-expectations (2.0.1)
89
+ diff-lcs (>= 1.1.2)
90
+ rspec-mocks (2.0.1)
91
+ rspec-core (~> 2.0.1)
92
+ rspec-expectations (~> 2.0.1)
93
+ term-ansicolor (1.0.5)
94
+ thor (0.14.4)
95
+ treetop (1.4.8)
96
+ polyglot (>= 0.3.1)
97
+ tzinfo (0.3.23)
98
+
99
+ PLATFORMS
100
+ ruby
101
+
102
+ DEPENDENCIES
103
+ bundler (~> 1.0.2)
104
+ cucumber (~> 0.9.4)
105
+ html5_layout!
106
+ rails (~> 3.0.1)
107
+ rspec (~> 2.0.1)
@@ -0,0 +1,29 @@
1
+ # HTML5 Layout Generator for Rails 3
2
+
3
+ It is a HTML5 layuout generator that generates the layout file based upon the HTML5 Boilerplate (http://github.com/paulirish/html5-boilerplate) code.
4
+
5
+ The generator takes one argument which will be the name of the layout and stylesheet files. If no argument is passed then it defaults to "application".
6
+
7
+ ### Usage info:
8
+ rails g html5_layout -h
9
+
10
+ ### Example:
11
+ rails generate html5_layout admin
12
+
13
+ This will create:
14
+ create public/stylesheets/admin.css
15
+ create public/stylesheets/handheld.css
16
+ create public/javascripts/modernizr-1.5.min.js
17
+ create public/javascripts/jquery-1.4.2.min.js
18
+ create public/javascripts/dd_belatedpng.js
19
+ create app/views/layouts/admin.html.erb
20
+
21
+ rails g html5_layout --sass
22
+
23
+ This will add two gems, compass and compass-960-plugin, in the Gemfile. So, you need to run `bundle install`.
24
+ The generator will also add 3 layout helpers to use in the views.
25
+ * To set the title of the page, you can call `<%= title "The page title" %>`
26
+ * To add js files in the layout, use `<% javascript "foo, bar" %>`
27
+ * To add stylesheet files, use `<% stylesheet "foo, bar" %>`
28
+
29
+ This generator is heavily based upon the Ryan Bates's NiftyGenerators.
@@ -0,0 +1,2 @@
1
+ require 'bundler'
2
+ Bundler::GemHelper.install_tasks
@@ -0,0 +1,43 @@
1
+ Feature: HTML5 Boilerplate Layout Generator
2
+ In order to have a layout
3
+ As a rails developer
4
+ I want to generate a simple html5 layout
5
+
6
+ Scenario: Generate normal application layout
7
+ Given a new Rails app
8
+ When I run "rails g html5_layout -f"
9
+ Then I should see "stylesheet_link_tag "application"" in file "app/views/layouts/application.html.erb"
10
+ And I should see "stylesheet_link_tag "handheld"" in file "app/views/layouts/application.html.erb"
11
+ # And I should see file "app/helpers/layout_helper.rb"
12
+ # And I should see file "app/helpers/error_messages_helper.rb"
13
+ And I should see file "public/stylesheets/application.css"
14
+ And I should see file "public/stylesheets/handheld.css"
15
+ And I should see file "public/javascripts/dd_belatedpng.js"
16
+ And I should see file "public/javascripts/jquery-1.4.2.min.js"
17
+ And I should see file "public/javascripts/modernizr-1.5.min.js"
18
+ And I should see file "app/helpers/layout_helper.rb"
19
+
20
+ Scenario: Generate named layout
21
+ Given a new Rails app
22
+ When I run "rails g html5_layout foo -f"
23
+ Then I should see "stylesheet_link_tag "foo"" in file "app/views/layouts/foo.html.erb"
24
+ And I should see "stylesheet_link_tag "handheld"" in file "app/views/layouts/foo.html.erb"
25
+ And I should see file "public/stylesheets/foo.css"
26
+ And I should see file "app/helpers/layout_helper.rb"
27
+ And I should see "foo" in file "app/views/layouts/foo.html.erb"
28
+
29
+ Scenario: Generate normal application layout with the sass option
30
+ Given a new Rails app
31
+ When I run "rails g html5_layout -f --sass"
32
+ Then I should see "stylesheet_link_tag "application"" in file "app/views/layouts/application.html.erb"
33
+ And I should see "stylesheet_link_tag "handheld"" in file "app/views/layouts/application.html.erb"
34
+ And I should see file "app/stylesheets/application.sass"
35
+ And I should see file "app/stylesheets/handheld.sass"
36
+ And I should see file "config/compass.rb"
37
+ And I should see file "config/initializers/compass.rb"
38
+ And I should see "gem "compass", ">=0.10.5"" in file "Gemfile"
39
+ And I should see "gem "compass-960-plugin", ">=0.10.0"" in file "Gemfile"
40
+ And I should see file "public/javascripts/dd_belatedpng.js"
41
+ And I should see file "public/javascripts/jquery-1.4.2.min.js"
42
+ And I should see file "public/javascripts/modernizr-1.5.min.js"
43
+ And I should see file "app/helpers/layout_helper.rb"
@@ -0,0 +1,37 @@
1
+ When /^I run "([^\"]*)"$/ do |command|
2
+ system("cd #{@current_directory} && #{command}").should be_true
3
+ end
4
+
5
+ When /^I add "([^\"]*)" to file "([^\"]*)"$/ do |content, short_path|
6
+ path = File.join(@current_directory, short_path)
7
+ File.should exist(path)
8
+ File.open(path, 'a') { |f| f.write(content + "\n") }
9
+ end
10
+
11
+ Then /^I should see file "([^\"]*)"$/ do |path|
12
+ File.should exist(File.join(@current_directory, path))
13
+ end
14
+
15
+ Then /^I should see "(.*)" in file "([^\"]*)"$/ do |content, short_path|
16
+ path = File.join(@current_directory, short_path)
17
+ File.should exist(path)
18
+ File.readlines(path).join.should include(content)
19
+ end
20
+
21
+ Then /^I should see the following files$/ do |table|
22
+ table.raw.flatten.each do |path|
23
+ File.should exist(File.join(@current_directory, path))
24
+ end
25
+ end
26
+
27
+ Then /^I should see the following in file "([^\"]*)"$/ do |short_path, table|
28
+ path = File.join(@current_directory, short_path)
29
+ File.should exist(path)
30
+ table.raw.flatten.each do |content|
31
+ File.readlines(path).join.should include(content)
32
+ end
33
+ end
34
+
35
+ Then /^I should successfully run "([^\"]*)"$/ do |command|
36
+ system("cd #{@current_directory} && #{command}").should be_true
37
+ end
@@ -0,0 +1,6 @@
1
+ Given /^a new Rails app$/ do
2
+ FileUtils.mkdir_p("tmp")
3
+ system("rails new tmp/rails_app").should be_true
4
+ system("ln -s ../../../lib/generators tmp/rails_app/lib/generators").should be_true
5
+ @current_directory = File.expand_path("tmp/rails_app")
6
+ end
@@ -0,0 +1,6 @@
1
+ require 'cucumber'
2
+ require 'rspec'
3
+
4
+ Before do
5
+ FileUtils.rm_rf "tmp/rails_app"
6
+ end
@@ -0,0 +1,7 @@
1
+ RSpec::Matchers.define :exist do |path|
2
+ match do
3
+ File.exist?(path)
4
+ end
5
+ failure_message_for_should { "Expected #{path} to exist but no file found" }
6
+ failure_message_for_should_not { "Expected #{path} to not exist but file was found" }
7
+ end
@@ -0,0 +1,26 @@
1
+ # -*- encoding: utf-8 -*-
2
+ $:.push File.expand_path("../lib", __FILE__)
3
+ require "html5_layout/version"
4
+
5
+ Gem::Specification.new do |s|
6
+ s.name = "html5_layout"
7
+ s.version = Html5Layout::VERSION
8
+ s.platform = Gem::Platform::RUBY
9
+ s.authors = ["Millisami"]
10
+ s.email = ["millisami@gmail.com"]
11
+ s.homepage = "http://rubygems.org/gems/html5_layout_generator"
12
+ s.summary = %q{Rails layout generator based upon the HTML5 Boilerplate Layout}
13
+ s.description = %q{Generates HTML5 Boilerplate layout for Rails 3 app}
14
+
15
+ s.rubyforge_project = "html5_layout"
16
+
17
+ s.files = `git ls-files`.split("\n")
18
+ s.test_files = `git ls-files -- {test,spec,features}/*`.split("\n")
19
+ s.executables = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
20
+ s.require_paths = ["lib"]
21
+
22
+ s.add_dependency('rails', '~> 3.0.1')
23
+ s.add_dependency('cucumber', '~> 0.9.4')
24
+ s.add_dependency('rspec', '~> 2.0.1')
25
+ s.add_dependency('bundler', '~> 1.0.2')
26
+ end
@@ -0,0 +1,22 @@
1
+ Description:
2
+ This generates the layout file based upon the HTML5 Boilerplate (http://github.com/paulirish/html5-boilerplate) code.
3
+ The generator takes one argument which will be the name of the layout and stylesheet files. If no argument is passed then it defaults to "application".
4
+
5
+ Help:
6
+ rails g html5_layout -h
7
+
8
+ Example:
9
+ rails generate html5_layout admin
10
+
11
+ This will create:
12
+ create public/stylesheets/admin.css
13
+ create public/stylesheets/handheld.css
14
+ create public/javascripts/modernizr-1.5.min.js
15
+ create public/javascripts/jquery-1.4.2.min.js
16
+ create public/javascripts/dd_belatedpng.js
17
+ create app/views/layouts/admin.html.erb
18
+
19
+ rails g html5_layout --sass
20
+
21
+ This will add two gems, compass and compass-960-plugin, in the Gemfile. So, you need to run `bundle install`.
22
+ The generator will also add layout helpers to use.
@@ -0,0 +1,40 @@
1
+ require 'rails/generators/base'
2
+ class Html5LayoutGenerator < Rails::Generators::Base
3
+
4
+ def self.source_root
5
+ @source_root ||= File.join(File.dirname(__FILE__), 'templates')
6
+ end
7
+
8
+ argument :layout_name, :type => :string, :default => "application"
9
+ class_option :stylesheet, :type => :boolean, :default => true, :desc => "Include stylesheet file"
10
+ class_option :sass, :type => :boolean, :desc => "Include the SASS version for CSS"
11
+ # class_option :haml, :type => :boolean, :desc => "Include the SASS version for CSS"
12
+
13
+ def generate_layout
14
+ if options.sass?
15
+ directory 'app'
16
+ gem 'compass', '>=0.10.5'
17
+ gem 'compass-960-plugin', '>=0.10.0'
18
+ directory 'config'
19
+ else
20
+ copy_file "stylesheet.css", "public/stylesheets/#{file_name}.css" if options.stylesheet?
21
+ copy_file "handheld.css", "public/stylesheets/handheld.css" if options.stylesheet?
22
+ end
23
+ copy_file "modernizr-1.5.min.js", "public/javascripts/modernizr-1.5.min.js"
24
+ copy_file "jquery-1.4.2.min.js", "public/javascripts/jquery-1.4.2.min.js"
25
+ copy_file "dd_belatedpng.js", "public/javascripts/dd_belatedpng.js"
26
+
27
+ template "layout.html.erb", "app/views/layouts/#{file_name}.html.erb"
28
+ copy_file 'layout_helper.rb', 'app/helpers/layout_helper.rb'
29
+ end
30
+
31
+ private
32
+
33
+ def file_name
34
+ layout_name.underscore
35
+ end
36
+
37
+ def app_name
38
+ Rails.application.class.name
39
+ end
40
+ end
@@ -0,0 +1,333 @@
1
+ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video
2
+ margin: 0
3
+ padding: 0
4
+ border: 0
5
+ outline: 0
6
+ font-size: 100%
7
+ vertical-align: baseline
8
+ background: transparent
9
+
10
+ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
11
+ display: block
12
+
13
+ nav ul
14
+ list-style: none
15
+
16
+ blockquote, q
17
+ quotes: none
18
+
19
+ blockquote
20
+ &:before, &:after
21
+ content: ''
22
+ content: none
23
+
24
+ q
25
+ &:before, &:after
26
+ content: ''
27
+ content: none
28
+
29
+ a
30
+ margin: 0
31
+ padding: 0
32
+ font-size: 100%
33
+ vertical-align: baseline
34
+ background: transparent
35
+
36
+ ins
37
+ background-color: #ff9
38
+ color: #000
39
+ text-decoration: none
40
+
41
+ mark
42
+ background-color: #ff9
43
+ color: #000
44
+ font-style: italic
45
+ font-weight: bold
46
+
47
+ del
48
+ text-decoration: line-through
49
+
50
+ abbr[title], dfn[title]
51
+ border-bottom: 1px dotted
52
+ cursor: help
53
+
54
+ // tables still need cellspacing="0" in the markup
55
+
56
+ table
57
+ border-collapse: collapse
58
+ border-spacing: 0
59
+
60
+ hr
61
+ display: block
62
+ height: 1px
63
+ border: 0
64
+ border-top: 1px solid #ccc
65
+ margin: 1em 0
66
+ padding: 0
67
+
68
+ input, select
69
+ vertical-align: middle
70
+
71
+ // END RESET CSS
72
+
73
+ body
74
+ font: 13px/1.231 sans-serif
75
+ *font-size: small
76
+
77
+ // hack retained to preserve specificity
78
+
79
+ select, input, textarea, button
80
+ font: 99% sans-serif
81
+
82
+ // normalize monospace sizing
83
+ // en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome
84
+
85
+ pre, code, kbd, samp
86
+ font-family: monospace, sans-serif
87
+
88
+ // minimal base styles
89
+
90
+ body, select, input, textarea
91
+ // #444 looks better than black: twitter.com/H_FJ/statuses/11800719859
92
+ color: #444
93
+ // Headers (h1,h2,etc) have no default font-size or margin,
94
+ // you'll want to define those yourself.
95
+
96
+ h1, h2, h3, h4, h5, h6
97
+ font-weight: bold
98
+
99
+ // always force a scrollbar in non-IE
100
+
101
+ html
102
+ overflow-y: scroll
103
+
104
+ // Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test
105
+
106
+ a
107
+ &:hover
108
+ outline: none
109
+ &:active
110
+ outline: none
111
+ color: #607890
112
+ color: #607890
113
+ &:visited
114
+ color: #607890
115
+ &:hover
116
+ color: #036
117
+
118
+ ul
119
+ margin-left: 1.8em
120
+
121
+ ol
122
+ margin-left: 1.8em
123
+ list-style-type: decimal
124
+
125
+ small
126
+ font-size: 85%
127
+
128
+ strong, th
129
+ font-weight: bold
130
+
131
+ td
132
+ vertical-align: top
133
+ img
134
+ vertical-align: top
135
+
136
+ sub
137
+ vertical-align: sub
138
+ font-size: smaller
139
+
140
+ sup
141
+ vertical-align: super
142
+ font-size: smaller
143
+
144
+ pre
145
+ padding: 15px
146
+ // www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/
147
+ white-space: pre
148
+ // CSS2
149
+ white-space: pre-wrap
150
+ // CSS 2.1
151
+ white-space: pre-line
152
+ // CSS 3 (and 2.1 as well, actually)
153
+ word-wrap: break-word
154
+ // IE
155
+
156
+ textarea
157
+ overflow: auto
158
+
159
+ // thnx ivannikolic! www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/
160
+
161
+ .ie6 legend, .ie7 legend
162
+ margin-left: -7px
163
+
164
+ // thnx ivannikolic!
165
+
166
+ // align checkboxes, radios, text inputs with their label
167
+ // by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css
168
+
169
+ input
170
+ &[type="radio"]
171
+ vertical-align: text-bottom
172
+ &[type="checkbox"]
173
+ vertical-align: bottom
174
+
175
+ .ie7 input[type="checkbox"]
176
+ vertical-align: baseline
177
+
178
+ .ie6 input
179
+ vertical-align: text-bottom
180
+
181
+ // hand cursor on clickable input elements
182
+
183
+ label
184
+ cursor: pointer
185
+
186
+ input
187
+ &[type=button], &[type=submit]
188
+ cursor: pointer
189
+
190
+ button
191
+ cursor: pointer
192
+ margin: 0
193
+
194
+ // webkit browsers add a 2px margin outside the chrome of form elements
195
+
196
+ input, select, textarea
197
+ margin: 0
198
+
199
+ // colors for form validity
200
+
201
+ input:valid, textarea:valid
202
+
203
+ input:invalid, textarea:invalid
204
+ border-radius: 1px
205
+ -moz-box-shadow: 0px 0px 5px red
206
+ -webkit-box-shadow: 0px 0px 5px red
207
+ box-shadow: 0px 0px 5px red
208
+
209
+ .no-boxshadow
210
+ input:invalid, textarea:invalid
211
+ background-color: #f0dddd
212
+
213
+ // These selection declarations have to be separate.
214
+ * No text-shadow: twitter.com/miketaylr/status/12228805301
215
+ * Also: hot pink.
216
+
217
+
218
+ ::-moz-selection, ::selection
219
+ background: #FF5E99
220
+ color: #fff
221
+ text-shadow: none
222
+
223
+ // j.mp/webkit-tap-highlight-color
224
+
225
+ a:link
226
+ -webkit-tap-highlight-color: #FF5E99
227
+
228
+ // make buttons play nice in IE:
229
+ * www.viget.com/inspire/styling-the-button-element-in-internet-explorer/
230
+
231
+ button
232
+ width: auto
233
+ overflow: visible
234
+
235
+ // bicubic resizing for non-native sized IMG:
236
+ * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
237
+
238
+ .ie7 img
239
+ -ms-interpolation-mode: bicubic
240
+
241
+ //
242
+ * Non-semantic helper classes
243
+
244
+ // for image replacement
245
+
246
+ .ir
247
+ display: block
248
+ text-indent: -999em
249
+ overflow: hidden
250
+ background-repeat: no-repeat
251
+ text-align: left
252
+ direction: ltr
253
+
254
+ // Hide for both screenreaders and browsers
255
+ * css-discuss.incutio.com/wiki/Screenreader_Visibility
256
+
257
+ .hidden
258
+ display: none
259
+ visibility: hidden
260
+
261
+ // Hide only visually, but have it available for screenreaders
262
+ * www.webaim.org/techniques/css/invisiblecontent/
263
+ * Solution from: j.mp/visuallyhidden - Thanks Jonathan Neal!
264
+
265
+ .visuallyhidden
266
+ position: absolute !important
267
+ clip: rect(1px 1px 1px 1px)
268
+ // IE6, IE7
269
+ clip: rect(1px, 1px, 1px, 1px)
270
+
271
+ // Hide visually and from screenreaders, but maintain layout
272
+
273
+ .invisible
274
+ visibility: hidden
275
+
276
+ // >> The Magnificent CLEARFIX << j.mp/phayesclearfix
277
+
278
+ .clearfix
279
+ &:after
280
+ content: "\0020"
281
+ display: block
282
+ height: 0
283
+ clear: both
284
+ visibility: hidden
285
+ zoom: 1
286
+
287
+ // Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page
288
+
289
+ // print styles
290
+ @media print
291
+ *
292
+ background: transparent !important
293
+ color: #444 !important
294
+ text-shadow: none
295
+ a
296
+ color: #444 !important
297
+ text-decoration: underline
298
+ &:visited
299
+ color: #444 !important
300
+ text-decoration: underline
301
+ &:after
302
+ content: " (" attr(href) ")"
303
+ abbr:after
304
+ content: " (" attr(title) ")"
305
+ .ir a:after
306
+ content: ""
307
+ // Don't show links for images
308
+ pre, blockquote
309
+ border: 1px solid #999
310
+ page-break-inside: avoid
311
+ img
312
+ page-break-inside: avoid
313
+ @page
314
+ margin: 0.5cm
315
+
316
+ p, h2, h3
317
+ orphans: 3
318
+ widows: 3
319
+ h2, h3
320
+ page-break-after: avoid
321
+
322
+
323
+ @media all and (orientation:portrait)
324
+
325
+
326
+ @media all and (orientation:landscape)
327
+
328
+
329
+ // Grade-A Mobile Browsers
330
+ @media screen and (max-device-width: 480px)
331
+ html
332
+ -webkit-text-size-adjust: none
333
+ -ms-text-size-adjust: none