html5_layout 0.0.3
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/.gitignore +4 -0
- data/Gemfile +4 -0
- data/Gemfile.lock +107 -0
- data/README.markdown +29 -0
- data/Rakefile +2 -0
- data/features/html5_layout.feature +43 -0
- data/features/step_definitions/common_steps.rb +37 -0
- data/features/step_definitions/rails_setup_steps.rb +6 -0
- data/features/support/env.rb +6 -0
- data/features/support/matchers.rb +7 -0
- data/html5_layout.gemspec +26 -0
- data/lib/generators/html5_layout/USAGE +22 -0
- data/lib/generators/html5_layout/html5_layout_generator.rb +40 -0
- data/lib/generators/html5_layout/templates/app/stylesheets/_html5_reset.sass +333 -0
- data/lib/generators/html5_layout/templates/app/stylesheets/_text.sass +49 -0
- data/lib/generators/html5_layout/templates/app/stylesheets/application.sass +63 -0
- data/lib/generators/html5_layout/templates/app/stylesheets/grid.sass +20 -0
- data/lib/generators/html5_layout/templates/app/stylesheets/handheld.sass +5 -0
- data/lib/generators/html5_layout/templates/config/compass.rb +17 -0
- data/lib/generators/html5_layout/templates/config/initializers/compass.rb +3 -0
- data/lib/generators/html5_layout/templates/dd_belatedpng.js +328 -0
- data/lib/generators/html5_layout/templates/handheld.css +7 -0
- data/lib/generators/html5_layout/templates/jquery-1.4.2.min.js +154 -0
- data/lib/generators/html5_layout/templates/layout.html.erb +58 -0
- data/lib/generators/html5_layout/templates/layout_helper.rb +22 -0
- data/lib/generators/html5_layout/templates/modernizr-1.5.min.js +28 -0
- data/lib/generators/html5_layout/templates/stylesheet.css +170 -0
- data/lib/html5_layout.rb +3 -0
- data/lib/html5_layout/version.rb +3 -0
- metadata +163 -0
data/.gitignore
ADDED
data/Gemfile
ADDED
data/Gemfile.lock
ADDED
@@ -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)
|
data/README.markdown
ADDED
@@ -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.
|
data/Rakefile
ADDED
@@ -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,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
|