html5_layout 0.0.3
Sign up to get free protection for your applications and to get access to all the features.
- 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
|