skeletor_backbone 0.0.3
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/.gitignore +17 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +22 -0
- data/README.md +43 -0
- data/Rakefile +1 -0
- data/app/assets/stylesheets/skeletor.sass +21 -0
- data/app/assets/stylesheets/skeletor/_all.sass +5 -0
- data/app/assets/stylesheets/skeletor/_css3.sass +26 -0
- data/app/assets/stylesheets/skeletor/_functions.sass +13 -0
- data/app/assets/stylesheets/skeletor/_mixins.sass +23 -0
- data/app/assets/stylesheets/skeletor/_settings.sass +153 -0
- data/app/assets/stylesheets/skeletor/base/debug.sass +132 -0
- data/app/assets/stylesheets/skeletor/base/foundation.sass +537 -0
- data/app/assets/stylesheets/skeletor/base/helpers.sass +203 -0
- data/app/assets/stylesheets/skeletor/base/print.sass +46 -0
- data/app/assets/stylesheets/skeletor/base/reset.sass +125 -0
- data/app/assets/stylesheets/skeletor/globals/css3/_animation.sass +34 -0
- data/app/assets/stylesheets/skeletor/globals/css3/_appearance.sass +39 -0
- data/app/assets/stylesheets/skeletor/globals/css3/_backface_visibility.sass +36 -0
- data/app/assets/stylesheets/skeletor/globals/css3/_border_radius.sass +75 -0
- data/app/assets/stylesheets/skeletor/globals/css3/_box_shadow.sass +38 -0
- data/app/assets/stylesheets/skeletor/globals/css3/_box_sizing.sass +40 -0
- data/app/assets/stylesheets/skeletor/globals/css3/_flexbox.sass +179 -0
- data/app/assets/stylesheets/skeletor/globals/css3/_gradients.sass +54 -0
- data/app/assets/stylesheets/skeletor/globals/css3/_hyphens.sass +38 -0
- data/app/assets/stylesheets/skeletor/globals/css3/_perspective.sass +50 -0
- data/app/assets/stylesheets/skeletor/globals/css3/_prefixer.sass +76 -0
- data/app/assets/stylesheets/skeletor/globals/css3/_tab_size.sass +39 -0
- data/app/assets/stylesheets/skeletor/globals/css3/_text_shadow.sass +38 -0
- data/app/assets/stylesheets/skeletor/globals/css3/_transform.sass +112 -0
- data/app/assets/stylesheets/skeletor/globals/css3/_transition.sass +35 -0
- data/app/assets/stylesheets/skeletor/globals/css3/_user_select.sass +39 -0
- data/app/assets/stylesheets/skeletor/globals/functions/_calculate_em.sass +43 -0
- data/app/assets/stylesheets/skeletor/globals/functions/_calculate_modular_scale.sass +85 -0
- data/app/assets/stylesheets/skeletor/globals/functions/_calculate_percent.sass +42 -0
- data/app/assets/stylesheets/skeletor/globals/functions/_calculate_rem.sass +42 -0
- data/app/assets/stylesheets/skeletor/globals/functions/_strip_units.sass +38 -0
- data/app/assets/stylesheets/skeletor/globals/mixins/_accessibility.sass +49 -0
- data/app/assets/stylesheets/skeletor/globals/mixins/_grid_pull.sass +311 -0
- data/app/assets/stylesheets/skeletor/globals/mixins/_grid_push.sass +313 -0
- data/app/assets/stylesheets/skeletor/globals/mixins/_grid_widths.sass +275 -0
- data/app/assets/stylesheets/skeletor/globals/mixins/_hidpi.sass +38 -0
- data/app/assets/stylesheets/skeletor/globals/mixins/_media_query.sass +71 -0
- data/app/assets/stylesheets/skeletor/globals/mixins/_opacity.sass +36 -0
- data/app/assets/stylesheets/skeletor/globals/mixins/_position.sass +65 -0
- data/app/assets/stylesheets/skeletor/globals/mixins/_rem.sass +102 -0
- data/app/assets/stylesheets/skeletor/globals/mixins/_retina_image.sass +53 -0
- data/app/assets/stylesheets/skeletor/globals/mixins/_rgba.sass +37 -0
- data/app/assets/stylesheets/skeletor/globals/mixins/_silent_relative.sass +41 -0
- data/app/assets/stylesheets/skeletor/globals/mixins/_size.sass +71 -0
- data/app/assets/stylesheets/skeletor/globals/mixins/_triangle.sass +69 -0
- data/app/assets/stylesheets/skeletor/globals/mixins/_truncate_text.sass +41 -0
- data/app/assets/stylesheets/skeletor/globals/settings/_easing.sass +47 -0
- data/app/assets/stylesheets/skeletor/globals/settings/_font_stacks.sass +65 -0
- data/app/assets/stylesheets/skeletor/globals/settings/_html5_input_types.sass +51 -0
- data/app/assets/stylesheets/skeletor/layout/_grid.sass +147 -0
- data/app/assets/stylesheets/skeletor/layout/skeleton.sass +58 -0
- data/lib/generators/skeletor/install_generator.rb +26 -0
- data/lib/sass/sass_extend.rb +107 -0
- data/lib/skeletor_backbone.rb +23 -0
- data/lib/skeletor_backbone/version.rb +3 -0
- data/skeletor_backbone.gemspec +26 -0
- data/vendor/assets/stylesheets/normalize.css +406 -0
- metadata +163 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: b2c2f93a6aa37c885350f30bb263f347415361f8
|
4
|
+
data.tar.gz: d5355975ce8559810869fb97167b17b67a5eee8f
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 5d3d9dc5a827a1c13924f7cf4c60cb555b463325f8470ebf355b6da1c83c7fbd714453d0abc64144b50ecd641ab3df1f5ce0f2b511cfdf98bc0c282621e416a6
|
7
|
+
data.tar.gz: 86a5f3fa40e1899e6f4046f7ce8f9d775f23cd157a37097bea37944e9fe45d855840843a83ce12fb73b73b69edfc2f418a74cdd32deb17dd74a2c111579c9825
|
data/.gitignore
ADDED
data/Gemfile
ADDED
data/LICENSE.txt
ADDED
@@ -0,0 +1,22 @@
|
|
1
|
+
Copyright (c) 2014 Mike Reinmiller
|
2
|
+
|
3
|
+
MIT License
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
6
|
+
a copy of this software and associated documentation files (the
|
7
|
+
"Software"), to deal in the Software without restriction, including
|
8
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
9
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
10
|
+
permit persons to whom the Software is furnished to do so, subject to
|
11
|
+
the following conditions:
|
12
|
+
|
13
|
+
The above copyright notice and this permission notice shall be
|
14
|
+
included in all copies or substantial portions of the Software.
|
15
|
+
|
16
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
17
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
18
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
19
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
20
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
21
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
22
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,43 @@
|
|
1
|
+
# Skeletor Backbone
|
2
|
+
|
3
|
+
The goal of Skeletor is to provide a small unobtrusive CSS framework. This project
|
4
|
+
is an excellent starting point to help get new applications off the ground
|
5
|
+
quickly. It uses recommended styles and best practices from around the web.
|
6
|
+
|
7
|
+
#### Please Note
|
8
|
+
This project is currently in beta, I still have a list of features and some
|
9
|
+
bugs I am working out. I wanted to get this out in the wild in the hopes that
|
10
|
+
people will provide feedback and report any issues I may have missed.
|
11
|
+
|
12
|
+
## Installation
|
13
|
+
|
14
|
+
Add this line to your application's Gemfile:
|
15
|
+
|
16
|
+
gem 'skeletor_backbone'
|
17
|
+
|
18
|
+
And then execute:
|
19
|
+
|
20
|
+
$ bundle
|
21
|
+
|
22
|
+
Or install it yourself as:
|
23
|
+
|
24
|
+
$ gem install skeletor_backbone
|
25
|
+
|
26
|
+
## Usage
|
27
|
+
|
28
|
+
After Skeletor has been added to your Gemfile you can install it into your project by running:
|
29
|
+
|
30
|
+
```
|
31
|
+
rails g skeletor:install
|
32
|
+
```
|
33
|
+
|
34
|
+
This will create a skeletor settings file in your stylesheets directory. It will
|
35
|
+
also add the appropriate requirements to your application.css file.
|
36
|
+
|
37
|
+
## Contributing
|
38
|
+
|
39
|
+
1. Fork it ( http://github.com/<my-github-username>/skeletor_backbone/fork )
|
40
|
+
2. Create your feature branch (`git checkout -b my-new-feature`)
|
41
|
+
3. Commit your changes (`git commit -am 'Add some feature'`)
|
42
|
+
4. Push to the branch (`git push origin my-new-feature`)
|
43
|
+
5. Create new Pull Request
|
data/Rakefile
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
require "bundler/gem_tasks"
|
@@ -0,0 +1,21 @@
|
|
1
|
+
// Make sure charset is set appropriately
|
2
|
+
@charset "UTF-8"
|
3
|
+
|
4
|
+
// SMACSS 'Base' Structure
|
5
|
+
@import "skeletor/base/reset"
|
6
|
+
@import "skeletor/base/foundation"
|
7
|
+
|
8
|
+
// SMACSS 'Layout' Structure
|
9
|
+
@import "skeletor/layout/skeleton"
|
10
|
+
|
11
|
+
// SMACSS 'Modules' Structure
|
12
|
+
// TODO: Add commonly needed modules/components
|
13
|
+
|
14
|
+
// Print Styles
|
15
|
+
@import "skeletor/base/print"
|
16
|
+
|
17
|
+
// CSS Global Helpers
|
18
|
+
@import "skeletor/base/helpers"
|
19
|
+
|
20
|
+
// CSS Debugger
|
21
|
+
@import "skeletor/base/debug"
|
@@ -0,0 +1,26 @@
|
|
1
|
+
// =============================================================================
|
2
|
+
// SASS CSS3 MIXINS
|
3
|
+
//
|
4
|
+
// These mixins are some common css3 properties with the appropriate
|
5
|
+
// browser prefixes (see prefixer)
|
6
|
+
//
|
7
|
+
// Based on work by Bourbon/Thoughtbox and Matthew Wagerfield
|
8
|
+
//
|
9
|
+
// =============================================================================
|
10
|
+
|
11
|
+
@import "globals/css3/prefixer"
|
12
|
+
@import "globals/css3/flexbox"
|
13
|
+
@import "globals/css3/box_sizing"
|
14
|
+
@import "globals/css3/user_select"
|
15
|
+
@import "globals/css3/tab_size"
|
16
|
+
@import "globals/css3/hyphens"
|
17
|
+
@import "globals/css3/appearance"
|
18
|
+
@import "globals/css3/border_radius"
|
19
|
+
@import "globals/css3/box_shadow"
|
20
|
+
@import "globals/css3/text_shadow"
|
21
|
+
@import "globals/css3/gradients"
|
22
|
+
@import "globals/css3/transform"
|
23
|
+
@import "globals/css3/perspective"
|
24
|
+
@import "globals/css3/backface_visibility"
|
25
|
+
@import "globals/css3/transition"
|
26
|
+
@import "globals/css3/animation"
|
@@ -0,0 +1,13 @@
|
|
1
|
+
// =============================================================================
|
2
|
+
// SASS Functions
|
3
|
+
//
|
4
|
+
// These functions are loading individually throughout skeletor. To load all
|
5
|
+
// functions just load this functions.sass file.
|
6
|
+
//
|
7
|
+
// =============================================================================
|
8
|
+
|
9
|
+
@import "globals/functions/strip_units"
|
10
|
+
@import "globals/functions/calculate_rem"
|
11
|
+
@import "globals/functions/calculate_percent"
|
12
|
+
@import "globals/functions/calculate_em"
|
13
|
+
@import "globals/functions/calculate_modular_scale"
|
@@ -0,0 +1,23 @@
|
|
1
|
+
// =============================================================================
|
2
|
+
// SASS MIXINS
|
3
|
+
//
|
4
|
+
// These mixins are loading individually throughout skeletor. To load all
|
5
|
+
// mixins just load this mixins.sass file.
|
6
|
+
//
|
7
|
+
// =============================================================================
|
8
|
+
|
9
|
+
@import "globals/mixins/media_query"
|
10
|
+
@import "globals/mixins/silent_relative"
|
11
|
+
@import "globals/mixins/rgba"
|
12
|
+
@import "globals/mixins/grid_pull"
|
13
|
+
@import "globals/mixins/grid_push"
|
14
|
+
@import "globals/mixins/grid_widths"
|
15
|
+
@import "globals/mixins/opacity"
|
16
|
+
@import "globals/mixins/position"
|
17
|
+
@import "globals/mixins/hidpi"
|
18
|
+
@import "globals/mixins/retina_image"
|
19
|
+
@import "globals/mixins/size"
|
20
|
+
@import "globals/mixins/triangle"
|
21
|
+
@import "globals/mixins/truncate_text"
|
22
|
+
@import "globals/mixins/rem"
|
23
|
+
@import "globals/mixins/accessibility"
|
@@ -0,0 +1,153 @@
|
|
1
|
+
// Skeletor Variables & Settings
|
2
|
+
// Config file containing variable defaults and settings for the skeletor gem.
|
3
|
+
//
|
4
|
+
// =============================================================================
|
5
|
+
// Table of Contents
|
6
|
+
// =============================================================================
|
7
|
+
//
|
8
|
+
// IMPORTS.....................Import Additional SASS Settings
|
9
|
+
// SETTINGS....................Enable/Disable Skeletor Features
|
10
|
+
// COLORS......................Base Color Styles
|
11
|
+
// TYPOGRAPHY..................Font Families
|
12
|
+
// SIZES.......................Font sizes, including Modular Scale
|
13
|
+
// BREAKPOINTS.................Responsive Breakpoint Settings
|
14
|
+
//
|
15
|
+
|
16
|
+
// -----------------------------------------------------------------------------
|
17
|
+
// :: IMPORTS
|
18
|
+
// -----------------------------------------------------------------------------
|
19
|
+
@import "skeletor/globals/settings/font_stacks"
|
20
|
+
@import "skeletor/globals/settings/html5_input_types"
|
21
|
+
@import "skeletor/functions"
|
22
|
+
|
23
|
+
|
24
|
+
|
25
|
+
|
26
|
+
// -----------------------------------------------------------------------------
|
27
|
+
// :: SETTINGS
|
28
|
+
// -----------------------------------------------------------------------------
|
29
|
+
// DEBUG-MODE
|
30
|
+
// Set to true if you would like to test your CSS/HTML
|
31
|
+
$debug-mode: false !default
|
32
|
+
|
33
|
+
// RESPONSIVE
|
34
|
+
// Set to false if building a non-responsive site
|
35
|
+
$responsive: true !default
|
36
|
+
|
37
|
+
// BORDER-BOX - paulirish.com/2012/box-sizing-border-box-ftw
|
38
|
+
// Set to false to disable border-box (this will still be enabled on grid system)
|
39
|
+
$global-border-box: true !default
|
40
|
+
|
41
|
+
// SASS CLASS STYLE
|
42
|
+
// Set to false if you do not want to use the Sass 'silent' class types
|
43
|
+
$use-silent-classes: true !default
|
44
|
+
|
45
|
+
// GRID SYSTEM
|
46
|
+
// Set to false if you do not intend to use the grid system.
|
47
|
+
$grid: true !default
|
48
|
+
|
49
|
+
// PUSH && PULL
|
50
|
+
// Set to true if you would like push and pull classes enabled
|
51
|
+
// These produce a lot of code, make sure you actually need them
|
52
|
+
$push: false !default
|
53
|
+
$pull: false !default
|
54
|
+
|
55
|
+
// Browser Support
|
56
|
+
// Set to false to not support specific browsers
|
57
|
+
$webkitSupport: true !default
|
58
|
+
$firefoxSupport: true !default
|
59
|
+
$explorerSupport: true !default
|
60
|
+
$operaSupport: true !default
|
61
|
+
|
62
|
+
|
63
|
+
|
64
|
+
|
65
|
+
|
66
|
+
// -----------------------------------------------------------------------------
|
67
|
+
// :: COLORS
|
68
|
+
// -----------------------------------------------------------------------------
|
69
|
+
// Grayscale
|
70
|
+
$black: #222 !default
|
71
|
+
$darkest-gray: #444 !default
|
72
|
+
$darker-gray: #777 !default
|
73
|
+
$dark-gray: #aaa !default
|
74
|
+
$gray: #ccc !default
|
75
|
+
$light-gray: #dedede !default
|
76
|
+
$lighter-gray: #efefef !default
|
77
|
+
$lightest-gray: #f8f8f8 !default
|
78
|
+
$white: #fff !default
|
79
|
+
|
80
|
+
// Base Font Colors
|
81
|
+
$base-font-color: $darkest-gray !default
|
82
|
+
$header-font-color: $base-font-color !default
|
83
|
+
|
84
|
+
// Base Link Colors
|
85
|
+
$base-link-color: #477DCA !default
|
86
|
+
$hover-link-color: darken($base-link-color, 15%) !default
|
87
|
+
|
88
|
+
|
89
|
+
|
90
|
+
|
91
|
+
|
92
|
+
// -----------------------------------------------------------------------------
|
93
|
+
// :: TYPOGRAPHY
|
94
|
+
// -----------------------------------------------------------------------------
|
95
|
+
$sans-serif: $verdana !default
|
96
|
+
$serif: $georgia !default
|
97
|
+
|
98
|
+
$base-font-family: $sans-serif !default
|
99
|
+
$header-font-family: $base-font-family !default
|
100
|
+
|
101
|
+
|
102
|
+
|
103
|
+
|
104
|
+
|
105
|
+
// -----------------------------------------------------------------------------
|
106
|
+
// :: SIZES
|
107
|
+
// -----------------------------------------------------------------------------
|
108
|
+
$base-font-size: 16px !default
|
109
|
+
$base-line-height: $base-font-size * 1.5 !default
|
110
|
+
|
111
|
+
// http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
|
112
|
+
$line-height-ratio: $base-line-height / $base-font-size !default
|
113
|
+
|
114
|
+
// Set the Modular Scale Ratio calculation
|
115
|
+
$ms-ratio: major_third() !default
|
116
|
+
|
117
|
+
// Set the Base font size for the modular scale
|
118
|
+
$ms-base-size: $base-font-size !default
|
119
|
+
|
120
|
+
// Set to true if modular scale pixel calculations should be rounded
|
121
|
+
$ms-round-pixels: false !default
|
122
|
+
|
123
|
+
// Heading Sizes
|
124
|
+
$tera-size: skeletor-modular-scale(8) !default
|
125
|
+
$giga-size: skeletor-modular-scale(7) !default
|
126
|
+
$mega-size: skeletor-modular-scale(6) !default
|
127
|
+
|
128
|
+
$h1-size: skeletor-modular-scale(5) !default
|
129
|
+
$h2-size: skeletor-modular-scale(4) !default
|
130
|
+
$h3-size: skeletor-modular-scale(3) !default
|
131
|
+
$h4-size: skeletor-modular-scale(2) !default
|
132
|
+
$h5-size: skeletor-modular-scale(1) !default
|
133
|
+
$h6-size: skeletor-modular-scale(0) !default
|
134
|
+
|
135
|
+
$micro-size: skeletor-modular-scale(-1) !default
|
136
|
+
$nano-size: skeletor-modular-scale(-2) !default
|
137
|
+
$pico-size: skeletor-modular-scale(-3) !default
|
138
|
+
|
139
|
+
|
140
|
+
|
141
|
+
|
142
|
+
|
143
|
+
// -----------------------------------------------------------------------------
|
144
|
+
// :: BREAKPOINTS
|
145
|
+
// -----------------------------------------------------------------------------
|
146
|
+
|
147
|
+
// Other breakpoints for palm, lap-and-up, portable are calculated in media-query mixin
|
148
|
+
$lap-start: 481px !default
|
149
|
+
$desk-start: 1024px !default
|
150
|
+
$desk-wide-start: 1200px !default
|
151
|
+
|
152
|
+
// Media Query Breakpoints
|
153
|
+
$breakpoints: ("palm", "lap", "lap-and-up", "portable", "desk", "desk-wide") !default
|
@@ -0,0 +1,132 @@
|
|
1
|
+
// Debug Styles
|
2
|
+
// Enable this stylesheet to visually detect any improperly nested or potentially
|
3
|
+
// invalid markup or inaccessible code.
|
4
|
+
//
|
5
|
+
// * Red == definite error
|
6
|
+
// * Yellow == double-check
|
7
|
+
// * None == should be fine
|
8
|
+
//
|
9
|
+
// Please note that this method of checking markup quality should not be relied
|
10
|
+
// upon entirely. Validate your markup!
|
11
|
+
//
|
12
|
+
// =============================================================================
|
13
|
+
// Table of Contents
|
14
|
+
// =============================================================================
|
15
|
+
//
|
16
|
+
// DEBUG.......................Debug Styles/Classes
|
17
|
+
|
18
|
+
|
19
|
+
|
20
|
+
@if $debug-mode
|
21
|
+
// ---------------------------------------------------------------------------
|
22
|
+
// :: DEBUG
|
23
|
+
// ---------------------------------------------------------------------------
|
24
|
+
|
25
|
+
/**
|
26
|
+
* Are there any empty elements in your page? */
|
27
|
+
\:empty
|
28
|
+
outline: 5px solid yellow
|
29
|
+
|
30
|
+
/**
|
31
|
+
* Images require `alt` attributes, empty `alt`s are fine but should be
|
32
|
+
* double-checked, no `alt` is bad and is flagged red. */
|
33
|
+
img
|
34
|
+
outline: 5px solid red
|
35
|
+
|
36
|
+
img[alt]
|
37
|
+
outline: none
|
38
|
+
|
39
|
+
img[alt=""]
|
40
|
+
outline: 5px solid yellow
|
41
|
+
|
42
|
+
/**
|
43
|
+
* Links sometimes, though not always, benefit from `title` attributes. Links
|
44
|
+
* without are never invalid but it’s a good idea to check. */
|
45
|
+
a
|
46
|
+
outline: 5px solid yellow
|
47
|
+
|
48
|
+
a[title]
|
49
|
+
outline: none
|
50
|
+
|
51
|
+
/**
|
52
|
+
* Double-check any links whose `href` is something questionable. */
|
53
|
+
a[href=""],
|
54
|
+
a[href="#"],
|
55
|
+
a[href*="javascript"]
|
56
|
+
outline: 5px solid yellow
|
57
|
+
|
58
|
+
/**
|
59
|
+
* The `target` attribute ain’t too nice... */
|
60
|
+
a[target]
|
61
|
+
outline: 5px solid yellow
|
62
|
+
|
63
|
+
/**
|
64
|
+
* Ensure any lists only contain `li`s as children. */
|
65
|
+
ul,
|
66
|
+
ol
|
67
|
+
> *:not(li)
|
68
|
+
outline: 5px solid red
|
69
|
+
|
70
|
+
/**
|
71
|
+
* It’s always nice to give `th`s `scope` attributes. */
|
72
|
+
th
|
73
|
+
outline: 5px solid yellow
|
74
|
+
|
75
|
+
th[scope]
|
76
|
+
outline: none
|
77
|
+
|
78
|
+
/**
|
79
|
+
* `tr`s as children of `table`s ain’t great, did you need a `thead`/`tbody`? */
|
80
|
+
table > tr
|
81
|
+
outline: 5px solid yellow
|
82
|
+
|
83
|
+
/**
|
84
|
+
* `tfoot` needs to come *before* `tbody`. */
|
85
|
+
tbody + tfoot
|
86
|
+
outline: 5px solid yellow
|
87
|
+
|
88
|
+
/**
|
89
|
+
* Forms require `action` attributes */
|
90
|
+
form
|
91
|
+
outline: 5px solid red
|
92
|
+
|
93
|
+
form[action]
|
94
|
+
outline: none
|
95
|
+
|
96
|
+
/**
|
97
|
+
* Various form-field types have required attributes. `input`s need `type`
|
98
|
+
* attributes, `textarea`s need `rows` and `cols` attributes and submit buttons
|
99
|
+
* need a `value` attribute. */
|
100
|
+
textarea,
|
101
|
+
input
|
102
|
+
outline: 5px solid red
|
103
|
+
|
104
|
+
input[type]
|
105
|
+
outline: none
|
106
|
+
|
107
|
+
textarea[rows][cols]
|
108
|
+
outline: none
|
109
|
+
|
110
|
+
input[type=submit]
|
111
|
+
outline: 5px solid red
|
112
|
+
|
113
|
+
input[type=submit][value]
|
114
|
+
outline: none
|
115
|
+
|
116
|
+
/**
|
117
|
+
* Avoid inline styles where possible. */
|
118
|
+
[style]
|
119
|
+
outline: 5px solid yellow
|
120
|
+
|
121
|
+
/**
|
122
|
+
* You should avoid using IDs for CSS, is this doing any styling? */
|
123
|
+
[id]
|
124
|
+
outline: 5px solid yellow
|
125
|
+
|
126
|
+
/**
|
127
|
+
* Are you using the grid system correctly? */
|
128
|
+
//.gw > :not(.g),
|
129
|
+
//.grid-wrapper > :not(.grid),
|
130
|
+
//.gw--rev > :not(.g),
|
131
|
+
//.grid-wrapper--rev > :not(.grid)
|
132
|
+
// outline:5px solid red
|