Commit d3a8294d3d1cbc9be08dee09162399f858913318
1 parent
c4626d83
Exists in
master
and in
1 other branch
replaced evergreen with flutie
Showing
41 changed files
with
1902 additions
and
383 deletions
Show diff stats
app/views/layouts/application.html.erb
... | ... | @@ -4,7 +4,7 @@ |
4 | 4 | <head> |
5 | 5 | <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> |
6 | 6 | <title>CHANGEME</title> |
7 | - <%= stylesheet_link_tag 'screen', :media => 'all', :cache => true %> | |
7 | + <%= stylesheet_link_tag :flutie, CHANGEME, :cache => 'screen' %> | |
8 | 8 | </head> |
9 | 9 | <body class="<%= body_class %>"> |
10 | 10 | <div class="main"> | ... | ... |
... | ... | @@ -0,0 +1,9 @@ |
1 | +ActionView::Helpers::AssetTagHelper.register_stylesheet_expansion :flutie => [ | |
2 | + '/flutie/stylesheets/reset', | |
3 | + '/flutie/stylesheets/defaults', | |
4 | + '/flutie/stylesheets/type', | |
5 | + '/flutie/stylesheets/forms', | |
6 | + '/flutie/stylesheets/tables', | |
7 | + '/flutie/stylesheets/lists', | |
8 | + '/flutie/stylesheets/screen' | |
9 | +] | ... | ... |
... | ... | @@ -0,0 +1,78 @@ |
1 | +body { | |
2 | + color: #222; | |
3 | + font-size: 13px; | |
4 | + font-family: arial, "Helvetica Neue", "Lucida Grande", Helvetica, Arial, Verdana, sans-serif; | |
5 | +} | |
6 | + | |
7 | +h1, h2, h3, h4, h5, h6 { | |
8 | + color: #111; | |
9 | + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
10 | +} | |
11 | + | |
12 | +/* Success, error & notice boxes for messages and errors. */ | |
13 | +div.error, div.notice, div.success { | |
14 | + padding: .8em; | |
15 | + margin-bottom: 1em; | |
16 | + border: 1px solid #ddd; | |
17 | + -moz-border-radius: 8px; | |
18 | + -webkit-border-radius: 8px; | |
19 | +} | |
20 | +div.error { | |
21 | + background: #FBE3E4; | |
22 | + color: #D12F19; | |
23 | + border-color: #FBC2C4; | |
24 | +} | |
25 | +div.error a { color: #D12F19; } | |
26 | + | |
27 | +div.notice { | |
28 | + background: #FFF6BF; | |
29 | + color: #817134; | |
30 | + border-color: #FFD324; | |
31 | +} | |
32 | +div.notice a { color: #817134; } | |
33 | + | |
34 | +div.success { | |
35 | + background: #E6EFC2; | |
36 | + color: #529214; | |
37 | + border-color: #C6D880; | |
38 | +} | |
39 | +div.success a { color: #529214; } | |
40 | + | |
41 | +/* Misc classes and elements */ | |
42 | + | |
43 | +/* Use a .box to create a padded box inside a column. */ | |
44 | +.box { | |
45 | + padding: 1.5em; | |
46 | + margin-bottom: 1.5em; | |
47 | + background: #eee; | |
48 | +} | |
49 | + | |
50 | +/* Use this to create a horizontal ruler across a column. */ | |
51 | +hr { | |
52 | + background: #ddd; | |
53 | + color: #ddd; | |
54 | + clear: both; | |
55 | + float: none; | |
56 | + width: 100%; | |
57 | + height: 1px; | |
58 | + margin: 0 0 1.4em; | |
59 | + border: none; | |
60 | +} | |
61 | +hr.space { | |
62 | + background: #fff; | |
63 | + color: #fff; | |
64 | +} | |
65 | + | |
66 | +/* Clearfix hack I love you */ | |
67 | +.clearfix:after { | |
68 | + content:"."; | |
69 | + display:block; | |
70 | + height:0; | |
71 | + clear:both; | |
72 | + visibility:hidden; | |
73 | +} | |
74 | + | |
75 | +.clearfix {display:inline-block;} | |
76 | +/* Hide from IE Mac \*/ | |
77 | +.clearfix {display:block;} | |
78 | +/* End hide from IE Mac */ | ... | ... |
... | ... | @@ -0,0 +1,113 @@ |
1 | +/* Forms */ | |
2 | + | |
3 | +form ol { | |
4 | + list-style: none; | |
5 | + margin: 0 0 1em 0; | |
6 | +} | |
7 | +form ol ol { margin-left: 0; } | |
8 | +form ol li { margin: 0 0 1em 0; } | |
9 | +form ol ol li { margin: 0 0 .25em 0; } | |
10 | + | |
11 | +form ol li.error input { background: #FBE3E4; } | |
12 | +p.inline-errors { color: #D12F19; } | |
13 | +form ol li.file { | |
14 | + background: #e1e1e1; | |
15 | + border: 1px solid #c8c8c8; | |
16 | + padding: 10px; | |
17 | +} | |
18 | + | |
19 | +form abbr { border-bottom: 0; } | |
20 | + | |
21 | +label { display: block; } | |
22 | +.required label { font-weight: bold; } | |
23 | +.checkbox_field label, .radio_field label { font-weight: normal; } | |
24 | + | |
25 | +a.cancel { color: #7d0d0d; } | |
26 | +.inline-hints { | |
27 | + font-size: .8em; | |
28 | + color: #666; | |
29 | + margin-bottom: .25em; | |
30 | +} | |
31 | + | |
32 | +/* Fieldsets */ | |
33 | +fieldset { | |
34 | + margin: 0 0 1.5em 0; | |
35 | + background: #f1f1f1; | |
36 | + padding: 1.5em 1.5em 1em 1.5em; | |
37 | + border: 1px solid #e3e3e3; | |
38 | +} | |
39 | +fieldset fieldset, fieldset fieldset fieldset { | |
40 | + padding: 0; | |
41 | + border: 0; | |
42 | +} | |
43 | +legend { font-weight: bold; } | |
44 | +fieldset.buttons { | |
45 | + background: inherit; | |
46 | + border: 0; | |
47 | + padding: 0; | |
48 | +} | |
49 | +fieldset.buttons li { display: inline; } | |
50 | +.radio fieldset { | |
51 | + padding: 0; | |
52 | + margin: 0; | |
53 | +} | |
54 | + | |
55 | +/* Text fields */ | |
56 | +input[type="text"], input[type="password"] { | |
57 | + width: 300px; | |
58 | + padding: 3px 2px; | |
59 | + font-size: inherit; | |
60 | +} | |
61 | +input[disabled='disabled'] { | |
62 | + background-color: #fcfcfc; | |
63 | + cursor:default; | |
64 | +} | |
65 | +input[type="checkbox"] { | |
66 | + margin: 0 3px 0 0; | |
67 | + vertical-align: middle; | |
68 | + position: relative; | |
69 | + top: -2px; | |
70 | +} | |
71 | +input[type="radio"] { | |
72 | + margin: 0 3px 0 0; | |
73 | + vertical-align: middle; | |
74 | + position: relative; | |
75 | + top: -2px; | |
76 | +} | |
77 | +.check_boxes label { | |
78 | + vertical-align: middle; | |
79 | + padding: 0; | |
80 | + display: inline; | |
81 | +} | |
82 | +.radio label { padding: 0; } | |
83 | + | |
84 | +/* Textareas */ | |
85 | +textarea { | |
86 | + width: 440px; | |
87 | + height: 200px; | |
88 | + margin: 0 0.5em 0.5em 0; | |
89 | + padding: 5px; | |
90 | + font-size: inherit; | |
91 | +} | |
92 | + | |
93 | +/* Select fields */ | |
94 | +fieldset .select select { | |
95 | + width:200px; | |
96 | + font-size: .9em; | |
97 | +} | |
98 | +optgroup { margin: 0 0 .5em 0; } | |
99 | + | |
100 | +/* Date & Time */ | |
101 | +form ol li.date ol li, form ol li.time ol li { | |
102 | + display: inline; | |
103 | +} | |
104 | +form ol li.datetime ol li { | |
105 | + display: inline-block; | |
106 | +} | |
107 | +form ol li.datetime select, form ol li.date select, form ol li.time select { | |
108 | + display: inline; | |
109 | + width: auto; | |
110 | +} | |
111 | +form ol li.date label, form ol li.time label { | |
112 | + display: none; | |
113 | +} | ... | ... |
... | ... | @@ -0,0 +1,25 @@ |
1 | +/* Lists */ | |
2 | + | |
3 | +ul, ol { | |
4 | + margin-bottom: 1.5em; | |
5 | + list-style-position: inside; | |
6 | +} | |
7 | +ul { list-style-type: disc; } | |
8 | +ol { list-style-type: decimal; } | |
9 | + | |
10 | +dl { | |
11 | + margin-bottom: 1.5em; | |
12 | + line-height: 1.4; | |
13 | +} | |
14 | +dl dt { | |
15 | + font-weight: bold; | |
16 | + margin-top: .5em; | |
17 | +} | |
18 | +dl dd { margin-bottom: 0em;} | |
19 | +dd { margin-left: .5em; } | |
20 | + | |
21 | +li { line-height: 1.4; } | |
22 | + | |
23 | +ol ol, ol ul, ul ul, ul ol { | |
24 | + margin-left: 1em; | |
25 | +} | ... | ... |
... | ... | @@ -0,0 +1,49 @@ |
1 | +/* http://meyerweb.com/eric/tools/css/reset/ */ | |
2 | +/* v1.0 | 20080212 */ | |
3 | + | |
4 | +html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, | |
5 | +blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, | |
6 | +font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, | |
7 | +b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, | |
8 | +caption, tbody, tfoot, thead, tr, th, td { | |
9 | + margin: 0; | |
10 | + padding: 0; | |
11 | + border: 0; | |
12 | + outline: 0; | |
13 | + font-size: 100%; | |
14 | + vertical-align: baseline; | |
15 | + background: transparent; | |
16 | +} | |
17 | +body { | |
18 | + line-height: 1; | |
19 | +} | |
20 | +ol, ul { | |
21 | + list-style: none; | |
22 | +} | |
23 | +blockquote, q { | |
24 | + quotes: none; | |
25 | +} | |
26 | +blockquote:before, blockquote:after, | |
27 | +q:before, q:after { | |
28 | + content: ''; | |
29 | + content: none; | |
30 | +} | |
31 | + | |
32 | +/* remember to define focus styles! */ | |
33 | +:focus { | |
34 | + outline: 0; | |
35 | +} | |
36 | + | |
37 | +/* remember to highlight inserts somehow! */ | |
38 | +ins { | |
39 | + text-decoration: none; | |
40 | +} | |
41 | +del { | |
42 | + text-decoration: line-through; | |
43 | +} | |
44 | + | |
45 | +/* tables still need 'cellspacing="0"' in the markup */ | |
46 | +table { | |
47 | + border-collapse: collapse; | |
48 | + border-spacing: 0; | |
49 | +} | ... | ... |
... | ... | @@ -0,0 +1,23 @@ |
1 | +/* Tables */ | |
2 | + | |
3 | +table { | |
4 | + margin-bottom: 2em; | |
5 | + width: 100%; | |
6 | +} | |
7 | +th { | |
8 | + border-bottom: 2px solid #ccc; | |
9 | + font-weight: bold; | |
10 | + text-align: left; | |
11 | +} | |
12 | +td { border-bottom: 1px solid #ddd; } | |
13 | +caption, th, td { | |
14 | + padding: 4px 10px 4px 0; | |
15 | +} | |
16 | +caption { | |
17 | + background: #f1f1f1; | |
18 | + padding: 10px 0; | |
19 | + margin-bottom: 1em; | |
20 | +} | |
21 | + | |
22 | +/* Use this if you use span-x classes on th/td. */ | |
23 | +table .last { padding-right: 0; } | ... | ... |
... | ... | @@ -0,0 +1,90 @@ |
1 | +/* Headings */ | |
2 | + | |
3 | +h1, h2, h3, h4, h5, h6 { font-weight: bold; } | |
4 | + | |
5 | +h1 { | |
6 | + font-size: 2.2em; | |
7 | + line-height: 1; | |
8 | + margin-bottom: 0.25em; | |
9 | +} | |
10 | +h2 { | |
11 | + font-size: 1.6em; | |
12 | + margin-bottom: 0.25em; | |
13 | + line-height: 1.1; | |
14 | +} | |
15 | +h3 { | |
16 | + font-size: 1.3em; | |
17 | + line-height: 1; | |
18 | + margin-bottom: .25em; | |
19 | +} | |
20 | +h4 { | |
21 | + font-size: 1.1em; | |
22 | + line-height: 1.25; | |
23 | + margin-bottom: .25em; | |
24 | +} | |
25 | +h5 { | |
26 | + font-size: 1em; | |
27 | + margin-bottom: .25em; | |
28 | +} | |
29 | +h6 { | |
30 | + font-size: 1em; | |
31 | + margin-bottom: .25em; | |
32 | +} | |
33 | + | |
34 | +/* Text elements */ | |
35 | + | |
36 | +p.last { margin-bottom: 0; } | |
37 | +p img { | |
38 | + float: left; | |
39 | + margin: 1.5em 1.5em 1.5em 0; | |
40 | + padding: 0; | |
41 | +} | |
42 | +p img.top { margin-top: 0; } /* Use this if the image is at the top of the <p>. */ | |
43 | +img { margin: 0 0 1.5em; } | |
44 | + | |
45 | +abbr, acronym { | |
46 | + border-bottom: 1px dotted #666; | |
47 | + cursor: help; | |
48 | +} | |
49 | +address { | |
50 | + margin-top: 1.5em; | |
51 | + font-style: italic; | |
52 | +} | |
53 | +del { color:#666; } | |
54 | + | |
55 | +a, a:link { | |
56 | + color: #1a4882; | |
57 | + text-decoration: underline; | |
58 | +} | |
59 | +a:visited { color: #1a4882; } | |
60 | +a:hover { color: #052246; } | |
61 | +a:active, a:focus { color: #1a4882; } | |
62 | + | |
63 | +blockquote { | |
64 | + margin: 1.5em 0; | |
65 | + color: #666; | |
66 | + font-style: italic; | |
67 | + padding-left: 1em; | |
68 | + border-left: 4px solid #d1d1d1; | |
69 | +} | |
70 | +strong { font-weight: bold; } | |
71 | +em, dfn { font-style: italic; } | |
72 | +dfn { font-weight: bold; } | |
73 | +pre, code { | |
74 | + margin: 1.5em 0; | |
75 | + white-space: pre; | |
76 | +} | |
77 | +pre, code, tt { | |
78 | + font: 1em 'andale mono', 'monotype.com', 'lucida console', monospace; | |
79 | + line-height: 1.5; | |
80 | +} | |
81 | +pre.code { | |
82 | + background: #000; | |
83 | + color: #fff; | |
84 | + padding: 20px; | |
85 | +} | |
86 | +tt { | |
87 | + display: block; | |
88 | + margin: 1.5em 0; | |
89 | + line-height: 1.5; | |
90 | +} | ... | ... |
public/stylesheets/framework/color.css
... | ... | @@ -1,47 +0,0 @@ |
1 | -/* | |
2 | - We use CSS color names by default for readability. | |
3 | - http://www.w3schools.com/css/css_colorsfull.asp | |
4 | - | |
5 | - It is expected the designer(s) will pick a scheme that may include hex colors. | |
6 | - http://colors.napcsweb.com/colorschemer | |
7 | - | |
8 | - We prefer off-white & off-black because computer screens | |
9 | - have high black/white contrast. | |
10 | -*/ | |
11 | - | |
12 | -/* body */ | |
13 | - | |
14 | -body { | |
15 | - background-color: snow; } | |
16 | - | |
17 | -/* links */ | |
18 | - | |
19 | -a { | |
20 | - color: midgnightblue; } | |
21 | -a:visited { | |
22 | - color: dimgray; } | |
23 | - | |
24 | -/* flash */ | |
25 | - | |
26 | -#flash_success { | |
27 | - background: seagreen; } | |
28 | -#flash_failure { | |
29 | - color: beige; | |
30 | - background: firebrick; } | |
31 | -#flash_notice { | |
32 | - color: snow; | |
33 | - background: dimgray; } | |
34 | - | |
35 | -/* errors */ | |
36 | - | |
37 | -.fieldWithErrors { | |
38 | - background-color: tomato; } | |
39 | -#errorExplanation { | |
40 | - border-color: tomato; | |
41 | - background-color: snow; } | |
42 | -#errorExplanation h2 { | |
43 | - background-color: firebrick; | |
44 | - color: floralwhite; } | |
45 | -#errorExplanation p { | |
46 | - color: darkgray; } | |
47 | - |
public/stylesheets/framework/grid.css
... | ... | @@ -1,46 +0,0 @@ |
1 | -/* | |
2 | - grid | |
3 | - | |
4 | - Every column can be divided into two, three, four and five parts. | |
5 | - Idea from http://code.google.com/p/malo | |
6 | -*/ | |
7 | - | |
8 | -.main { | |
9 | - margin: 0 auto; | |
10 | - width: 96em; } | |
11 | - | |
12 | -.grid { | |
13 | - float: left; | |
14 | - display: inline; | |
15 | - *margin-left: -0.04em; } /* IE margin hack */ | |
16 | - | |
17 | -.grid .whole { | |
18 | - width: 100%; } | |
19 | - | |
20 | -.grid .one_fifth { | |
21 | - width: 20% } | |
22 | - | |
23 | -.grid .one_fourth { | |
24 | - width: 25%; } | |
25 | - | |
26 | -.grid .one_third { | |
27 | - width: 33.33% } | |
28 | - | |
29 | -.grid .two_fifths { | |
30 | - width: 40%; } | |
31 | - | |
32 | -.grid .one_half { | |
33 | - width: 50%; } | |
34 | - | |
35 | -.grid .three_fifths { | |
36 | - width: 60% } | |
37 | - | |
38 | -.grid .two_thirds { | |
39 | - width: 66.66%; } | |
40 | - | |
41 | -.grid .three_quarters { | |
42 | - width: 75%; } | |
43 | - | |
44 | -.grid .four_fifths { | |
45 | - width: 80%; } | |
46 | - |
public/stylesheets/framework/reset.css
... | ... | @@ -1,44 +0,0 @@ |
1 | -/* http://meyerweb.com/eric/tools/css/reset */ | |
2 | - | |
3 | -html, body, div, span, applet, object, iframe, | |
4 | -h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |
5 | -a, abbr, acronym, address, big, cite, code, | |
6 | -del, dfn, em, font, img, ins, kbd, q, s, samp, | |
7 | -small, strike, strong, sub, sup, tt, var, | |
8 | -b, u, i, center, | |
9 | -dl, dt, dd, ol, ul, li, | |
10 | -fieldset, form, label, legend, | |
11 | -table, caption, tbody, tfoot, thead, tr, th, td { | |
12 | - margin: 0; | |
13 | - padding: 0; | |
14 | - border: 0; | |
15 | - outline: 0; | |
16 | - font-size: 100%; | |
17 | - vertical-align: baseline; | |
18 | - background: transparent; } | |
19 | - | |
20 | -body { | |
21 | - line-height: 1; } | |
22 | - | |
23 | -ol, ul { | |
24 | - list-style: none; } | |
25 | - | |
26 | -blockquote, q { | |
27 | - quotes: none; } | |
28 | -blockquote:before, blockquote:after, | |
29 | -q:before, q:after { | |
30 | - content: ''; | |
31 | - content: none; } | |
32 | - | |
33 | -:focus { | |
34 | - outline: 0; } | |
35 | - | |
36 | -ins { | |
37 | - text-decoration: none; } | |
38 | -del { | |
39 | - text-decoration: line-through; } | |
40 | - | |
41 | -table { | |
42 | - border-collapse: collapse; | |
43 | - border-spacing: 0; } | |
44 | - |
public/stylesheets/framework/spacing.css
... | ... | @@ -1,97 +0,0 @@ |
1 | -p { | |
2 | - padding: 0.4em 0; } | |
3 | - | |
4 | -/* flashes & errors */ | |
5 | - | |
6 | -#flash_notice, #flash_success, #flash_failure, #errorExplanation ul li { | |
7 | - padding: 0.6em; } | |
8 | - | |
9 | -/* fieldsets */ | |
10 | - | |
11 | -fieldset.inputs, fieldset.buttons { | |
12 | - margin: 1em 0; } | |
13 | - | |
14 | -/* labels */ | |
15 | - | |
16 | -label { | |
17 | - display: block; | |
18 | - font-size: 1.4em; } | |
19 | - | |
20 | -/* hidden field */ | |
21 | - | |
22 | -fieldset div.hidden { | |
23 | - display: none; } | |
24 | - | |
25 | -/* inputs */ | |
26 | - | |
27 | -input { | |
28 | - vertical-align: middle; } | |
29 | - | |
30 | -fieldset div.string, | |
31 | -fieldset div.numeric, | |
32 | -fieldset div.password, | |
33 | -fieldset div.text, | |
34 | -fieldset div.boolean { | |
35 | - margin: 0 0 1em 0; } | |
36 | - | |
37 | -fieldset div.string label, | |
38 | -fieldset div.numeric label, | |
39 | -fieldset div.password label, | |
40 | -fieldset div.text label { | |
41 | - padding: 0.2em 0; } | |
42 | - | |
43 | -fieldset div.string input, | |
44 | -fieldset div.numeric input, | |
45 | -fieldset div.password input, | |
46 | -fieldset div.text textarea { | |
47 | - padding: 0.4em; } | |
48 | - | |
49 | -fieldset div.boolean label { | |
50 | - display: inline; | |
51 | - margin: 0.2em; } | |
52 | - | |
53 | -fieldset div.boolean input { | |
54 | - margin: 0; | |
55 | - vertical-align: top; } | |
56 | - | |
57 | -/* radio buttons and check boxes */ | |
58 | - | |
59 | -fieldset div.radios fieldset ol, | |
60 | -fieldset div.checks fieldset ol, { | |
61 | - margin-bottom: -0.6em; } | |
62 | -fieldset div.radios fieldset ol li, | |
63 | -fieldset div.checks fieldset ol li, { | |
64 | - margin: 0.1em 0 0.5em 0; } | |
65 | -fieldset div.radios fieldset ol li label, | |
66 | -fieldset div.checks fieldset ol li label { | |
67 | - float: none; } | |
68 | -fieldset div.radios fieldset ol li label input, | |
69 | -fieldset div.checks fieldset ol li label input, { | |
70 | - margin-right: 0.2em; } | |
71 | - | |
72 | -/* dates, times, and datetimes */ | |
73 | - | |
74 | -fieldset div.date fieldset ol li, | |
75 | -fieldset div.time fieldset ol li, | |
76 | -fieldset div.datetime fieldset ol li { | |
77 | - float: left; | |
78 | - width: auto; | |
79 | - margin: 0 .3em 0 0; } | |
80 | - | |
81 | -fieldset div.date fieldset ol li label, | |
82 | -fieldset div.time fieldset ol li label, | |
83 | -fieldset div.datetime fieldset ol li label { | |
84 | - display: none; } | |
85 | - | |
86 | -fieldset div.date fieldset ol li label input, | |
87 | -fieldset div.time fieldset ol li label input, | |
88 | -fieldset div.datetime fieldset ol li label input { | |
89 | - display: inline; | |
90 | - margin: 0; | |
91 | - padding: 0; } | |
92 | - | |
93 | -/* buttons */ | |
94 | - | |
95 | -fieldset.buttons input { | |
96 | - padding: 1em; } | |
97 | - |
public/stylesheets/framework/typography.css
... | ... | @@ -1,142 +0,0 @@ |
1 | -/* | |
2 | - scale | |
3 | - | |
4 | - Use the classic typographer's scale: | |
5 | - 6,7,8,9,10,11,12,14,16,18,21,24,36,48,60,72 | |
6 | - | |
7 | - We use ems for font size. | |
8 | - | |
9 | - Our typographical math is made easier by Richard Rutter's 62.5% trick: | |
10 | - http://www.clagnut.com/blog/348/ | |
11 | - | |
12 | - 16 pixels is 1.6em. 18 pixels is 1.8em. 9 pixels is 0.9em. | |
13 | - | |
14 | - Inheritance slightly complicates the math, but there's a simple formula: | |
15 | - | |
16 | - child pixels / parent pixels = child ems | |
17 | -*/ | |
18 | - | |
19 | -body { | |
20 | - font-size: .625em; } | |
21 | - | |
22 | -h1 { | |
23 | - font-size: 4.8em; } | |
24 | - | |
25 | -h2 { | |
26 | - font-size: 3.6em; } | |
27 | - | |
28 | -h3 { | |
29 | - font-size: 2.4em; } | |
30 | - | |
31 | -h4 { | |
32 | - font-size: 2.1em; } | |
33 | - | |
34 | -h5 { | |
35 | - font-size: 1.8em; } | |
36 | - | |
37 | -h6 { | |
38 | - font-size: 1.6em; } | |
39 | - | |
40 | -#flash_notice, #flash_success, #flash_failure, #errorExplanation ul li { | |
41 | - font-size: 1.6em; } | |
42 | - | |
43 | -p, ul, dl, th, td, legend { | |
44 | - font-size: 1.4em; } | |
45 | - | |
46 | -fieldset.buttons input { | |
47 | - font-size: 1.2em; } | |
48 | - | |
49 | -fieldset p.instruction { | |
50 | - font-size: 1em; } | |
51 | - | |
52 | -/* typeface */ | |
53 | - | |
54 | -body { | |
55 | - font-family: Verdana, "Lucida Grande", Lucida, Arial, sans-serif; } | |
56 | - | |
57 | -h1, h2, h3, h4, h5, h6 { | |
58 | - font-family: Georgia, "Times New Roman", Times, serif; } | |
59 | - | |
60 | -pre, code { | |
61 | - font-family: Monaco, "DejaVu Sans", Courier, "Courier New", monospace; } | |
62 | - | |
63 | -/* weighting */ | |
64 | - | |
65 | -h1, h2, h3, h4, h5, h6 { | |
66 | - font-weight: normal; } | |
67 | - | |
68 | -p, ul, li, dl, th, td, legend { | |
69 | - font-weight: lighter; } | |
70 | - | |
71 | -#flash_notice, #flash_success, #flash_failure, #errorExplanation ul li { | |
72 | - font-weight: bold; } | |
73 | - | |
74 | -/* | |
75 | - leading | |
76 | - | |
77 | - d. The space between lines of type. | |
78 | - | |
79 | - Blocks of text usually need positive leading. | |
80 | - Headers usually need less leading. | |
81 | - | |
82 | - Darker faces usually need more lead than lighter ones. | |
83 | - Sans serif type usually needs more lead then serif type. | |
84 | - | |
85 | - Leading is set with line-height. | |
86 | - line-height can be (and should be) set with a unit-less integer. | |
87 | - We use the unit-less integer to ensure line-height scales with text. | |
88 | -*/ | |
89 | - | |
90 | -h1 { | |
91 | - line-height: 1.0; } | |
92 | - | |
93 | -h2 { | |
94 | - line-height: 1.2; } | |
95 | - | |
96 | -h3 { | |
97 | - line-height: 1.4; } | |
98 | - | |
99 | -h4 { | |
100 | - line-height: 1.6; } | |
101 | - | |
102 | -h5 { | |
103 | - line-height: 1.6; } | |
104 | - | |
105 | -h6, p { | |
106 | - line-height: 1.8; } | |
107 | - | |
108 | -ul, dl, th, td, legend { | |
109 | - line-height: 1.6; } | |
110 | - | |
111 | -/* justification */ | |
112 | - | |
113 | -body { | |
114 | - text-align: left; } | |
115 | - | |
116 | -/* decoration */ | |
117 | - | |
118 | -ul { | |
119 | - list-style-position: outside; | |
120 | - list-style-type: square; } | |
121 | - | |
122 | -a, a:visited, a:link { | |
123 | - text-decoration: none; } | |
124 | - | |
125 | -a:hover { | |
126 | - text-decoration: underline; } | |
127 | - | |
128 | -th { | |
129 | - text-transform: uppercase; } | |
130 | - | |
131 | -fieldset div.password input { | |
132 | - font-weight: bold; } | |
133 | - | |
134 | -/* | |
135 | - the measure | |
136 | - | |
137 | - d. The length of a single line of text. | |
138 | - | |
139 | - We use ems to set the width of blocks of text. | |
140 | - Typically, between 30 and 50 ems is recommended for optimal readibility. | |
141 | -*/ | |
142 | - |
public/stylesheets/screen.css
script/create_project
... | ... | @@ -88,6 +88,8 @@ if not_installed?("rubaidh-google_analytics") |
88 | 88 | run "sudo gem install rubaidh-google_analytics --version='1.1.4'" |
89 | 89 | end |
90 | 90 | |
91 | +run("sudo touch public/stylesheets/#{project_name}.css") | |
92 | + | |
91 | 93 | run("sudo touch log/development.log") |
92 | 94 | run("sudo chmod 0666 log/development.log") |
93 | 95 | run("sudo touch log/test.log") | ... | ... |
... | ... | @@ -0,0 +1,82 @@ |
1 | +h1. Flutie | |
2 | + | |
3 | +Basic, default styles for rails applications | |
4 | + | |
5 | +h2. Installation | |
6 | + | |
7 | +Flutie is a Rails engine. It works with versions of Rails greater than 2.3. | |
8 | + | |
9 | +Flutie is recommended to be run as a plugin so that the automatic installer is run. | |
10 | + | |
11 | +script/plugin install git@github.com:thoughtbot/flutie.git | |
12 | + | |
13 | +The installer will copy the Flutie stylesheets into public/flutie/stylesheets | |
14 | + | |
15 | +Once Flutie is installed, with your application running (not in production environment) you can browse to /styleguide. This will present you with many standard markup elements that are present in a Rails application, in your default application layout. | |
16 | + | |
17 | +Click on the "Default styles" link to view the same markup with a barebones layout that only contains the Flutie stylesheets. Click on "Application styles" to view the markup in your application layout. | |
18 | + | |
19 | +h2. Usage | |
20 | + | |
21 | +Flutie registers a :flutie shortcut for stylesheets, so in your layout you can do... | |
22 | + | |
23 | + <%= stylesheet_link_tag :flutie, 'admin', :cache => true %> | |
24 | + | |
25 | +...this will include all the flutie stylesheets, then the 'admin' stylesheet, and it will cache them all into one file. | |
26 | + | |
27 | +To add custom styles to the styleguide add partials to the app/views/styleguides directory. For example: | |
28 | + | |
29 | +bc. app/views/styleguides/_todo_item.erb: | |
30 | + | |
31 | +bc.. <ol> | |
32 | + <li class="todo">This is a todo item</li> | |
33 | +</ol> | |
34 | + | |
35 | +p. Plugin authors can also add to the styleguide by ensuring that their view path | |
36 | +is in ActionController::Base.view_paths and by placing a partial under the | |
37 | +styleguides directory. For example: | |
38 | + | |
39 | +bc. ActionController::Base.append_view_path(File.join(File.dirname(__FILE__), 'views')) | |
40 | + | |
41 | +bc. my_awesome_plugin/views/styleguides/_pagination.erb: | |
42 | + | |
43 | +bc.. <div class="pagination"> | |
44 | + <a href="#prev">Previous</a> | |
45 | + <a href="#next">Next</a> | |
46 | +</div> | |
47 | + | |
48 | +h2. Gem Installation | |
49 | + | |
50 | +You can also install Flutie as a gem, but then you'll need to run the install task manually. | |
51 | + | |
52 | +In config/environment.rb: | |
53 | + | |
54 | +<pre> | |
55 | +config.gem "thoughtbot-flutie", | |
56 | + :lib => 'flutie', | |
57 | + :source => 'http://gems.github.com', | |
58 | + :version => '1.0.0' | |
59 | +</pre> | |
60 | + | |
61 | +Vendor the gem: | |
62 | + | |
63 | +<pre> | |
64 | +rake gems:install | |
65 | +rake gems:unpack | |
66 | +</pre> | |
67 | + | |
68 | +Run the installer: | |
69 | + | |
70 | +<pre> | |
71 | +ruby vendor/gems/thoughtbot-flutie-1.0.0/install.rb | |
72 | +</pre> | |
73 | + | |
74 | +h2. | |
75 | + | |
76 | +h2. Authors | |
77 | + | |
78 | +Flutie was written by thoughtbot, inc. | |
79 | + | |
80 | +h2. Suggestions, Bugs, Refactoring? | |
81 | + | |
82 | +Fork away and create a "Github Issue":http://github.com/thoughtbot/flutie/issues. Please don't send pull requests. | ... | ... |
... | ... | @@ -0,0 +1,41 @@ |
1 | +# encoding: utf-8 | |
2 | + | |
3 | +require 'rake' | |
4 | +require 'rake/testtask' | |
5 | +require 'rake/rdoctask' | |
6 | + | |
7 | +desc 'Default: run unit tests.' | |
8 | +task :default => :test | |
9 | + | |
10 | +Rake::TestTask.new(:test) do |t| | |
11 | + t.libs << 'lib' | |
12 | + t.libs << 'test' | |
13 | + t.pattern = 'test/**/*_test.rb' | |
14 | + t.verbose = true | |
15 | +end | |
16 | + | |
17 | +Rake::RDocTask.new(:rdoc) do |rdoc| | |
18 | + rdoc.rdoc_dir = 'rdoc' | |
19 | + rdoc.title = 'Flutie' | |
20 | + rdoc.options << '--line-numbers' << '--inline-source' | |
21 | + rdoc.rdoc_files.include('README') | |
22 | + rdoc.rdoc_files.include('lib/**/*.rb') | |
23 | +end | |
24 | + | |
25 | +gem_spec = Gem::Specification.new do |gem_spec| | |
26 | + gem_spec.name = "flutie" | |
27 | + gem_spec.version = "1.0" | |
28 | + gem_spec.summary = "style defaults" | |
29 | + gem_spec.email = "support@thoughtbot.com" | |
30 | + gem_spec.homepage = "http://github.com/thoughtbot/flutie" | |
31 | + gem_spec.description = "Rails authentication with email & password." | |
32 | + gem_spec.authors = ["thoughtbot"] | |
33 | + gem_spec.files = FileList["[A-Z]*", "{app,config,lib,rails}/**/*"] | |
34 | +end | |
35 | + | |
36 | +desc "Generate a gemspec file" | |
37 | +task :gemspec do | |
38 | + File.open("#{gem_spec.name}.gemspec", 'w') do |f| | |
39 | + f.write gem_spec.to_yaml | |
40 | + end | |
41 | +end | ... | ... |
vendor/plugins/flutie/app/controllers/flutie/styleguides_controller.rb
0 → 100644
... | ... | @@ -0,0 +1,23 @@ |
1 | +class Flutie::StyleguidesController < ApplicationController | |
2 | + | |
3 | + unloadable | |
4 | + | |
5 | + def show | |
6 | + @styleguides = styleguides | |
7 | + render :layout => "flutie" if params[:flutie] == "true" | |
8 | + end | |
9 | + | |
10 | + private | |
11 | + | |
12 | + def styleguides | |
13 | + all_styleguide_partials = ActionController::Base.view_paths.map do |view_path| | |
14 | + styleguide_path = File.join(view_path, 'styleguides') | |
15 | + if File.exists?(styleguide_path) | |
16 | + Dir.glob(styleguide_path + '/_*.*') | |
17 | + else | |
18 | + nil | |
19 | + end | |
20 | + end | |
21 | + all_styleguide_partials.flatten.compact | |
22 | + end | |
23 | +end | ... | ... |
vendor/plugins/flutie/app/views/flutie/styleguides/show.erb
0 → 100644
... | ... | @@ -0,0 +1,742 @@ |
1 | +<div> | |
2 | + <div style="padding: 15px; text-align: right;"> | |
3 | + <% if params[:flutie] -%> | |
4 | + <%= link_to "Application Styles", :flutie => false %> | |
5 | + <% else -%> | |
6 | + <%= link_to "Default Styles", :flutie => true %> | |
7 | + <% end -%> | |
8 | + </div> | |
9 | + | |
10 | + <h1>This is an example page of our basic styles</h1> | |
11 | + <h2>This is an h2 level heading</h2> | |
12 | + | |
13 | + <p>Wolbachia pipientis is a maternally transmitted obligate intracellular bacterium that chronically infects thousands of insect species, as well as a range of other arthropods and filarial nematodes. Wolbachia bacteria can induce various reproductive abnormalities in hosts that promote the bacteria's vertical transmission and spread. The discordance of host and Wolbachia phylogenies indicates that these bacteria have moved between host lineages on <a href="#">multiple occasions</a> during their evolutionary history, although the mechanisms that facilitate the transfer of Wolbachia are not well understood. The success of such host shifts is inherently reliant on the ability of the bacteria to adapt to new intracellular environments.</p> | |
14 | + | |
15 | + <p>The experimental transfer of Wolbachia between host species (transinfection) has proved technically challenging, and the success of such experiments is difficult to predict. Despite an increasing number of reports that document Wolbachia transinfection, many attempts to experimentally infect host species are unsuccessful due to poor maternal transmission rates in the novel host (40). In some cases, transferred strains are extremely stable and maternally inherited at very high rates. This situation occurs primarily when Wolbachia is transferred within or between closely related species in a family or genus. In other cases, the infecting strain appears to be poorly adapted to its new host, showing fluctuating infection densities and various degrees of transovarial transmission. The result is often the loss of infection within a few host generations. Not surprisingly, Wolbachia infections tend to be more susceptible to loss when they have been transferred between phylogenetically distant hosts (17, 35). Similarly, those species that do not naturally harbor Wolbachia can be especially challenging to successfully transinfect.</p> | |
16 | + | |
17 | + <blockquote> | |
18 | + <p>Blockquoted text. Not too long ago, two friends of mine were talking to a Cuban refugee, a businessman who had escaped from Castro, and in the midst of his story one of my friends turned to the other and said, "We don't know how lucky we are." And the Cuban stopped and said, "How lucky you are? I had someplace to escape to." And in that sentence he told us the entire story. If we lose freedom here, there's no place to escape to. This is the last stand on earth.</p> | |
19 | + </blockquote> | |
20 | + | |
21 | + <h3>This is an h3 level heading</h3> | |
22 | + <p>Senator Humphrey last week charged that Barry Goldwater, as President, would seek to eliminate farmers. He should do his homework a little better, because he'll find out that we've had a decline of 5 million in the farm population under these government programs. He'll also find that the Democratic administration has sought to get from Congress [an] extension of the farm program to include that three-fourths that is now free. He'll find that they've also asked for the right to imprison farmers who wouldn't keep books as prescribed by the federal government. The Secretary of Agriculture asked for the right to seize farms through condemnation and resell them to other individuals. And contained in that same program was a provision that would have allowed the federal government to remove 2 million farmers from the soil.</p> | |
23 | + | |
24 | + <br /> | |
25 | + <hr /> | |
26 | + <br /> | |
27 | + | |
28 | + <h1>This is an h1 heading</h1> | |
29 | + <h2>This is an h2 heading</h2> | |
30 | + <h3>This is an h3 heading</h3> | |
31 | + <h4>This is an h4 heading</h4> | |
32 | + <h5>This is an h5 heading</h5> | |
33 | + <h6>This is an h6 heading</h6> | |
34 | + | |
35 | + <br /> | |
36 | + <hr /> | |
37 | + <br /> | |
38 | + | |
39 | + <h1>This is an h1 heading. It's extremely long and will undoubtedly wrap on a line or two by the time it's completely and utterly finished in ultimate perpetuity.</h1> | |
40 | + <p>And this is some text in a paragraph below it. Looks good. To understand what is really going on in a colony of ants or bees, Dr. Dornhaus, an assistant professor of ecology and evolutionary biology at the University of Arizona, tracks the little creatures individually — hence the paint and the numbers. Individual ants, she said, have “their own brains and legs, as well as complex and flexible behaviors.” She continues, “Each ant’s behavior and the rules under which it operates generate a pattern for the colony, so it’s crucial to discover its individual cognitive skill.”</p> | |
41 | + <h2>This is an h2 heading. It's also far too long for a typical headline but we need to know what it will look like when it wraps. I'm sure you understand. Don't read too far in to it, if at all possible.</h2> | |
42 | + <p>And this is some text in a paragraph below it. The study identifies that there are two scenarios in which a group can act as a unit. The first is when all the members are very closely related, and carry the same genes, so ensuring their genes are passed on to the next generation. The second is when the group's behaviour is controlled by a form of policing -in honey bee hives, for example, any egg not laid by the queen is destroyed by worker bees, to ensure only the queen's offspring survive. Both methods ensure that all the individuals involved are united in a common purpose.</p> | |
43 | + <h3>This is an h3 heading that, as you can probably imagine, is going to be much too long than is typically desired but you have to understand there is a perfectly good reason.</h3> | |
44 | + <p>And this is some text in a paragraph below it. Dr Andy Gardner, from the School of Biological Sciences at the University of Edinburgh, said: "We often see animals appearing to move in unison, such as bison or fish. However, what looks like a team effort is in fact each animal jostling to get to the middle of the group to evade predators.</p> | |
45 | + <h4>This is an h4 heading</h4> | |
46 | + <p>And this is some text in a paragraph below it. Looks good.Dr. Dornhaus is breaking new ground in her studies of whether the efficiency of ant society, based on a division of labor among ant specialists, is important to their success. To do that, she said, I briefly anesthetized 1,200 ants, one by one, and painted them using a single wire-size brush, with model airplane paint — Rally Green, Racing Red, Daytona Yellow.</p> | |
47 | + | |
48 | + <p>After recording their behavior with two video cameras aiming down on an insect-size stage, she analyzed 300 hours of videotape of the ants in action. She discovered behavior more worthy of Aesop’s grasshopper than the proverbial industrious ants.</p> | |
49 | + | |
50 | + | |
51 | + <h2>List styles</h2> | |
52 | + | |
53 | + <ul> | |
54 | + <li>Unordered list test</li> | |
55 | + <li>Another list element. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> | |
56 | + <li>Yet another element in the list</li> | |
57 | + <li>Some long text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> | |
58 | + </ul> | |
59 | + <ol> | |
60 | + <li>Ordered list test</li> | |
61 | + <li>Another list element</li> | |
62 | + <li>Yet another element in the list</li> | |
63 | + <li>How many things do you really need in a list</li> | |
64 | + </ol> | |
65 | + | |
66 | + <ol> | |
67 | + <li>Outer Ordered list item</li> | |
68 | + <li>Outer Ordered list item | |
69 | + <ul> | |
70 | + <li>Nested Unordered list item</li> | |
71 | + <li>Nested Unordered list item | |
72 | + <ol> | |
73 | + <li>Inner Nested Ordered list item</li> | |
74 | + <li>Inner Nested Ordered list item</li> | |
75 | + </ol> | |
76 | + </li> | |
77 | + </ul> | |
78 | + </li> | |
79 | + <li>Outer Ordered list item</li> | |
80 | + <li>Outer Ordered list item | |
81 | + <ol> | |
82 | + <li>Nested Ordered list item</li> | |
83 | + <li>Nested Ordered list item | |
84 | + <ul> | |
85 | + <li>Inner Nested Unordered list item</li> | |
86 | + <li>Inner Nested Unordered list item</li> | |
87 | + </ul> | |
88 | + </li> | |
89 | + </ol> | |
90 | + </li> | |
91 | + </ol> | |
92 | + | |
93 | + <dl> | |
94 | + <dt>definition list dt</dt> | |
95 | + <dd>definition list dd</dd> | |
96 | + <dt>definition list dt</dt> | |
97 | + <dd>definition list dd</dd> | |
98 | + <dt>definition list dt</dt> | |
99 | + <dd>definition list dd one</dd> | |
100 | + <dd>definition list dd two</dd> | |
101 | + </dl> | |
102 | + | |
103 | + | |
104 | + | |
105 | + | |
106 | + <h2>Basic form styles</h2> | |
107 | + | |
108 | + <form id="dummy" action="" method="post"> | |
109 | + <fieldset class="inputs"> | |
110 | + <h5 class="legend">Simple sample form</h5> | |
111 | + | |
112 | + <ol> | |
113 | + <li class="string required title" id="dummy0_input"> | |
114 | + <label for="dummy0">Text input<abbr title="required">*</abbr></label> | |
115 | + <input id="dummy0" name="dummy0" type="text" maxlength="255" size="50" value="This is some text" /> | |
116 | + <p class="inline-hints">this is some hint text</p> | |
117 | + </li> | |
118 | + <li class="string required title" id="dummy1_input"> | |
119 | + <label for="dummy1">Disabled text input<abbr title="required">*</abbr></label> | |
120 | + <input id="dummy1" name="dummy1" type="text" maxlength="255" size="50" disabled="disabled" value="You're not allowed to enter text here" /> | |
121 | + <p class="inline-hints">You need to be an admin to edit this</p> | |
122 | + </li> | |
123 | + <li class="string required" id="dummy2_input"> | |
124 | + <label for="dummy2">Another field<abbr title="required">*</abbr></label> | |
125 | + <input id="dummy2" name="dummy2" type="text" maxlength="255" size="50" value="" /> | |
126 | + </li> | |
127 | + | |
128 | + <li class="string required error" id="dummy3_input"> | |
129 | + <label for="dummy3">Text with error<abbr title="required">*</abbr></label> | |
130 | + <input id="dummy3" name="dummy3" type="text" maxlength="255" size="50" value="" /> | |
131 | + <p class="inline-errors">can't be blank</p> | |
132 | + </li> | |
133 | + | |
134 | + <li class="text required" id="dummy4_input"> | |
135 | + <label for="dummy4">Textarea<abbr title="required">*</abbr></label> | |
136 | + <textarea cols="40" id="dummy4" name="dummy4" rows="20"></textarea> | |
137 | + </li> | |
138 | + | |
139 | + <li class="file optional" id="dummy5_input"> | |
140 | + <label for="dummy5">File</label> | |
141 | + <input id="dummy5" name="dummy5" size="30" type="file" /> | |
142 | + </li> | |
143 | + | |
144 | + <li class="password required" id="dummy6_input"> | |
145 | + <label for="dummy6">Password<abbr title="required">*</abbr></label> | |
146 | + <input id="dummy6" maxlength="255" name="dummy6" size="50" type="password" value="pass" /> | |
147 | + </li> | |
148 | + </ol> | |
149 | + | |
150 | + </fieldset> | |
151 | + | |
152 | + <fieldset class="inputs"> | |
153 | + <h5 class="legend">Select, checkboxes, lists</h5> | |
154 | + | |
155 | + <ol> | |
156 | + <li class="select optional" id="dummy7_input"> | |
157 | + <label for="dummy7">Name</label> | |
158 | + <select id="dummy7" name="dummy7"> | |
159 | + <option value=""></option> | |
160 | + <option value="1">Ottawa</option> | |
161 | + <option value="2">Calgary</option> | |
162 | + <option value="3">Moosejaw</option> | |
163 | + </select> | |
164 | + <p class="inline-hints">this is some hint text</p> | |
165 | + </li> | |
166 | + | |
167 | + <li class="select optional" id="dummy8_input"> | |
168 | + <label for="dummy8">Select with groups</label> | |
169 | + <select id="dummy8" name="dummy8"> | |
170 | + <optgroup label="mammals"> | |
171 | + <option>dog</option> | |
172 | + <option>cat</option> | |
173 | + <option>rabbit</option> | |
174 | + <option>horse</option> | |
175 | + </optgroup> | |
176 | + <optgroup label="reptiles"> | |
177 | + <option>iguana</option> | |
178 | + <option>snake</option> | |
179 | + </optgroup> | |
180 | + </select> | |
181 | + </li> | |
182 | + | |
183 | + <li class="select optional error" id="dummy9_input"> | |
184 | + <label for="dummy9">Select with error</label> | |
185 | + <select id="dummy9" name="dummy9"> | |
186 | + <option value=""></option> | |
187 | + <option value="1">Ottawa</option> | |
188 | + <option value="2">Calgary</option> | |
189 | + <option value="3">Moosejaw</option> | |
190 | + </select> | |
191 | + <p class="inline-errors">can't be blank</p> | |
192 | + </li> | |
193 | + | |
194 | + <li class="radio optional" id="dummy10_input"> | |
195 | + <fieldset> | |
196 | + <h5 class="legend"> | |
197 | + <span class="label">Radio Buttons</span> | |
198 | + </h5> | |
199 | + <ol> | |
200 | + <li> | |
201 | + <label for="dummy10_mastercard"> | |
202 | + <input id="dummy10_mastercard" name="dummy10" type="radio" value="MasterCard" /> MasterCard | |
203 | + </label> | |
204 | + </li> | |
205 | + <li> | |
206 | + <label for="dummy11_discover"> | |
207 | + <input id="dummy11_discover" name="dummy11" type="radio" value="Discover" /> Discover | |
208 | + </label> | |
209 | + </li> | |
210 | + <li> | |
211 | + <label for="dummy12_visa"> | |
212 | + <input id="dummy12_visa" name="dummy12" type="radio" value="Visa" /> Visa | |
213 | + </label> | |
214 | + </li> | |
215 | + <li> | |
216 | + <label for="dummy13_american_express"> | |
217 | + <input id="dummy13_american_express" name="dummy13" type="radio" value="American Express" /> American Express | |
218 | + </label> | |
219 | + </li> | |
220 | + </ol> | |
221 | + </fieldset> | |
222 | + <p class="inline-hints">this is some hint text</p> | |
223 | + </li> | |
224 | + | |
225 | + <li class="check_boxes optional" id="dummy14_input"> | |
226 | + <fieldset> | |
227 | + <h5 class="legend"><span class="label">Checkboxes</span></h5> | |
228 | + <ol> | |
229 | + <li> | |
230 | + <label for="dummy14_mastercard"> | |
231 | + <input name="dummy14[]" type="hidden" value="" /> | |
232 | + <input id="dummy14_mastercard" name="dummy14[]" type="checkbox" value="MasterCard" /> MasterCard | |
233 | + </label> | |
234 | + </li> | |
235 | + <li> | |
236 | + <label for="dummy14_discover"> | |
237 | + <input name="dummy14[]" type="hidden" value="" /> | |
238 | + <input id="dummy14_discover" name="dummy14[]" type="checkbox" value="Discover" /> Discover | |
239 | + </label> | |
240 | + </li> | |
241 | + <li> | |
242 | + <label for="dummy14_visa"> | |
243 | + <input name="dummy14[]" type="hidden" value="" /> | |
244 | + <input id="dummy14_visa" name="dummy14[]" type="checkbox" value="Visa" /> Visa | |
245 | + </label> | |
246 | + </li> | |
247 | + <li> | |
248 | + <label for="dummy14_american_express"> | |
249 | + <input name="dummy14[]" type="hidden" value="" /> | |
250 | + <input id="dummy14_american_express" name="dummy14[]" type="checkbox" value="American Express" /> American Express | |
251 | + </label> | |
252 | + </li> | |
253 | + </ol> | |
254 | + </fieldset> | |
255 | + </li> | |
256 | + | |
257 | + <li class="datetime optional" id="dummy15_input"> | |
258 | + <fieldset> | |
259 | + <h5 class="legend"><span class="label">Date and Time Selector</span></h5> | |
260 | + <ol> | |
261 | + <li> | |
262 | + <label for="dummy15_1i">Year</label> | |
263 | + <select id="dummy15_1i" name="dummy15(1i)"> | |
264 | + <option value="2007">2007</option> | |
265 | + <option value="2008">2008</option> | |
266 | + <option selected="selected" value="2009">2009</option> | |
267 | + <option value="2010">2010</option> | |
268 | + </select> | |
269 | + </li> | |
270 | + <li> | |
271 | + <label for="dummy15_2i">Month</label> | |
272 | + <select id="dummy15_2i" name="dummy15(2i)"> | |
273 | + <option value="1">January</option> | |
274 | + <option value="2">February</option> | |
275 | + <option value="3">March</option> | |
276 | + <option value="4">April</option> | |
277 | + <option value="5">May</option> | |
278 | + <option value="6">June</option> | |
279 | + <option selected="selected" value="7">July</option> | |
280 | + <option value="8">August</option> | |
281 | + <option value="9">September</option> | |
282 | + <option value="10">October</option> | |
283 | + <option value="11">November</option> | |
284 | + <option value="12">December</option> | |
285 | + </select> | |
286 | + </li> | |
287 | + <li> | |
288 | + <label for="dummy15_3i">Day</label> | |
289 | + <select id="dummy15_3i" name="dummy15(3i)"> | |
290 | + <option value="1">1</option> | |
291 | + <option value="2">2</option> | |
292 | + <option value="3">3</option> | |
293 | + <option value="4">4</option> | |
294 | + <option value="5">5</option> | |
295 | + <option value="6">6</option> | |
296 | + <option value="7">7</option> | |
297 | + <option value="8">8</option> | |
298 | + <option value="9">9</option> | |
299 | + <option selected="selected" value="10">10</option> | |
300 | + <option value="11">11</option> | |
301 | + <option value="12">12</option> | |
302 | + <option value="13">13</option> | |
303 | + <option value="14">14</option> | |
304 | + <option value="15">15</option> | |
305 | + <option value="16">16</option> | |
306 | + <option value="17">17</option> | |
307 | + <option value="18">18</option> | |
308 | + <option value="19">19</option> | |
309 | + <option value="20">20</option> | |
310 | + <option value="21">21</option> | |
311 | + <option value="22">22</option> | |
312 | + <option value="23">23</option> | |
313 | + <option value="24">24</option> | |
314 | + <option value="25">25</option> | |
315 | + <option value="26">26</option> | |
316 | + <option value="27">27</option> | |
317 | + <option value="28">28</option> | |
318 | + <option value="29">29</option> | |
319 | + <option value="30">30</option> | |
320 | + <option value="31">31</option> | |
321 | + </select> | |
322 | + </li> | |
323 | + <li> | |
324 | + <label for="dummy15_4i">Hour</label> | |
325 | + <select id="dummy15_4i" name="dummy15(4i)"> | |
326 | + <option value="00">00</option> | |
327 | + <option value="01">01</option> | |
328 | + <option value="02">02</option> | |
329 | + <option value="03">03</option> | |
330 | + <option value="04">04</option> | |
331 | + <option value="05">05</option> | |
332 | + <option value="06">06</option> | |
333 | + <option value="07">07</option> | |
334 | + <option value="08">08</option> | |
335 | + <option value="09">09</option> | |
336 | + <option value="10">10</option> | |
337 | + <option value="11">11</option> | |
338 | + <option selected="selected" value="12">12</option> | |
339 | + <option value="13">13</option> | |
340 | + <option value="14">14</option> | |
341 | + <option value="15">15</option> | |
342 | + <option value="16">16</option> | |
343 | + <option value="17">17</option> | |
344 | + <option value="18">18</option> | |
345 | + <option value="19">19</option> | |
346 | + <option value="20">20</option> | |
347 | + <option value="21">21</option> | |
348 | + <option value="22">22</option> | |
349 | + <option value="23">23</option> | |
350 | + </select> | |
351 | + </li> | |
352 | + <li> | |
353 | + <label for="dummy15_5i">Minute</label> | |
354 | + <select id="dummy15_5i" name="dummy15(5i)"> | |
355 | + <option value="00">00</option> | |
356 | + <option value="01">01</option> | |
357 | + <option value="02">02</option> | |
358 | + <option value="03">03</option> | |
359 | + <option value="04">04</option> | |
360 | + <option value="05">05</option> | |
361 | + <option value="06">06</option> | |
362 | + <option value="07">07</option> | |
363 | + <option value="08">08</option> | |
364 | + <option value="09">09</option> | |
365 | + <option value="10">10</option> | |
366 | + <option value="11">11</option> | |
367 | + <option value="12">12</option> | |
368 | + <option value="13">13</option> | |
369 | + <option value="14">14</option> | |
370 | + <option value="15">15</option> | |
371 | + <option value="16">16</option> | |
372 | + <option value="17">17</option> | |
373 | + <option value="18">18</option> | |
374 | + <option value="19">19</option> | |
375 | + <option value="20">20</option> | |
376 | + <option value="21">21</option> | |
377 | + <option value="22">22</option> | |
378 | + <option value="23">23</option> | |
379 | + <option value="24">24</option> | |
380 | + <option value="25">25</option> | |
381 | + <option value="26">26</option> | |
382 | + <option value="27">27</option> | |
383 | + <option value="28">28</option> | |
384 | + <option value="29">29</option> | |
385 | + <option value="30">30</option> | |
386 | + <option value="31">31</option> | |
387 | + <option value="32">32</option> | |
388 | + <option value="33">33</option> | |
389 | + <option value="34">34</option> | |
390 | + <option value="35">35</option> | |
391 | + <option value="36">36</option> | |
392 | + <option value="37">37</option> | |
393 | + <option value="38">38</option> | |
394 | + <option value="39">39</option> | |
395 | + <option value="40">40</option> | |
396 | + <option value="41">41</option> | |
397 | + <option value="42">42</option> | |
398 | + <option value="43">43</option> | |
399 | + <option value="44">44</option> | |
400 | + <option value="45">45</option> | |
401 | + <option value="46">46</option> | |
402 | + <option value="47">47</option> | |
403 | + <option value="48">48</option> | |
404 | + <option value="49">49</option> | |
405 | + <option selected="selected" value="50">50</option> | |
406 | + <option value="51">51</option> | |
407 | + <option value="52">52</option> | |
408 | + <option value="53">53</option> | |
409 | + <option value="54">54</option> | |
410 | + <option value="55">55</option> | |
411 | + <option value="56">56</option> | |
412 | + <option value="57">57</option> | |
413 | + <option value="58">58</option> | |
414 | + <option value="59">59</option> | |
415 | + </select> | |
416 | + </li> | |
417 | + </ol> | |
418 | + </fieldset> | |
419 | + </li> | |
420 | + | |
421 | + <li class="date optional" id="dummy16_input"> | |
422 | + <fieldset> | |
423 | + <h5 class="legend"><span class="label">Date Selector</span></h5> | |
424 | + <ol> | |
425 | + <li> | |
426 | + <label for="dummy16_1i">Year</label> | |
427 | + <select id="dummy16_1i" name="dummy16(1i)"> | |
428 | + <option value="2007">2007</option> | |
429 | + <option value="2008">2008</option> | |
430 | + <option selected="selected" value="2009">2009</option> | |
431 | + <option value="2010">2010</option> | |
432 | + </select> | |
433 | + </li> | |
434 | + <li> | |
435 | + <label for="dummy16_2i">Month</label> | |
436 | + <select id="dummy16_2i" name="dummy16(2i)"> | |
437 | + <option value="1">January</option> | |
438 | + <option value="2">February</option> | |
439 | + <option value="3">March</option> | |
440 | + <option value="4">April</option> | |
441 | + <option value="5">May</option> | |
442 | + <option value="6">June</option> | |
443 | + <option selected="selected" value="7">July</option> | |
444 | + <option value="8">August</option> | |
445 | + <option value="9">September</option> | |
446 | + <option value="10">October</option> | |
447 | + <option value="11">November</option> | |
448 | + <option value="12">December</option> | |
449 | + </select> | |
450 | + </li> | |
451 | + <li> | |
452 | + <label for="dummy16_3i">Day</label> | |
453 | + <select id="dummy16_3i" name="dummy16(3i)"> | |
454 | + <option value="1">1</option> | |
455 | + <option value="2">2</option> | |
456 | + <option value="3">3</option> | |
457 | + <option value="4">4</option> | |
458 | + <option value="5">5</option> | |
459 | + <option value="6">6</option> | |
460 | + <option value="7">7</option> | |
461 | + <option value="8">8</option> | |
462 | + <option value="9">9</option> | |
463 | + <option selected="selected" value="10">10</option> | |
464 | + <option value="11">11</option> | |
465 | + <option value="12">12</option> | |
466 | + <option value="13">13</option> | |
467 | + <option value="14">14</option> | |
468 | + <option value="15">15</option> | |
469 | + <option value="16">16</option> | |
470 | + <option value="17">17</option> | |
471 | + <option value="18">18</option> | |
472 | + <option value="19">19</option> | |
473 | + <option value="20">20</option> | |
474 | + <option value="21">21</option> | |
475 | + <option value="22">22</option> | |
476 | + <option value="23">23</option> | |
477 | + <option value="24">24</option> | |
478 | + <option value="25">25</option> | |
479 | + <option value="26">26</option> | |
480 | + <option value="27">27</option> | |
481 | + <option value="28">28</option> | |
482 | + <option value="29">29</option> | |
483 | + <option value="30">30</option> | |
484 | + <option value="31">31</option> | |
485 | + </select> | |
486 | + </li> | |
487 | + </ol> | |
488 | + </fieldset> | |
489 | + </li> | |
490 | + | |
491 | + <li class="time optional" id="dummy17_input"> | |
492 | + <fieldset> | |
493 | + <h5 class="legend"><span class="label">Time Selector</span></h5> | |
494 | + <ol> | |
495 | + <li> | |
496 | + <label for="dummy17_4i">Hour</label> | |
497 | + <select id="dummy17_4i" name="dummy17(4i)"> | |
498 | + <option value="00">00</option> | |
499 | + <option value="01">01</option> | |
500 | + <option value="02">02</option> | |
501 | + <option value="03">03</option> | |
502 | + <option value="04">04</option> | |
503 | + <option value="05">05</option> | |
504 | + <option value="06">06</option> | |
505 | + <option value="07">07</option> | |
506 | + <option value="08">08</option> | |
507 | + <option value="09">09</option> | |
508 | + <option value="10">10</option> | |
509 | + <option value="11">11</option> | |
510 | + <option selected="selected" value="12">12</option> | |
511 | + <option value="13">13</option> | |
512 | + <option value="14">14</option> | |
513 | + <option value="15">15</option> | |
514 | + <option value="16">16</option> | |
515 | + <option value="17">17</option> | |
516 | + <option value="18">18</option> | |
517 | + <option value="19">19</option> | |
518 | + <option value="20">20</option> | |
519 | + <option value="21">21</option> | |
520 | + <option value="22">22</option> | |
521 | + <option value="23">23</option> | |
522 | + </select> | |
523 | + </li> | |
524 | + <li> | |
525 | + <span>:</span> | |
526 | + </li> | |
527 | + <li> | |
528 | + <label for="dummy17_5i">Minute</label> | |
529 | + <select id="dummy17_5i" name="dummy17(5i)"> | |
530 | + <option value="00">00</option> | |
531 | + <option value="01">01</option> | |
532 | + <option value="02">02</option> | |
533 | + <option value="03">03</option> | |
534 | + <option value="04">04</option> | |
535 | + <option value="05">05</option> | |
536 | + <option value="06">06</option> | |
537 | + <option value="07">07</option> | |
538 | + <option value="08">08</option> | |
539 | + <option value="09">09</option> | |
540 | + <option value="10">10</option> | |
541 | + <option value="11">11</option> | |
542 | + <option value="12">12</option> | |
543 | + <option value="13">13</option> | |
544 | + <option value="14">14</option> | |
545 | + <option value="15">15</option> | |
546 | + <option value="16">16</option> | |
547 | + <option value="17">17</option> | |
548 | + <option value="18">18</option> | |
549 | + <option value="19">19</option> | |
550 | + <option value="20">20</option> | |
551 | + <option value="21">21</option> | |
552 | + <option value="22">22</option> | |
553 | + <option value="23">23</option> | |
554 | + <option value="24">24</option> | |
555 | + <option value="25">25</option> | |
556 | + <option value="26">26</option> | |
557 | + <option value="27">27</option> | |
558 | + <option value="28">28</option> | |
559 | + <option value="29">29</option> | |
560 | + <option value="30">30</option> | |
561 | + <option value="31">31</option> | |
562 | + <option value="32">32</option> | |
563 | + <option value="33">33</option> | |
564 | + <option value="34">34</option> | |
565 | + <option value="35">35</option> | |
566 | + <option value="36">36</option> | |
567 | + <option value="37">37</option> | |
568 | + <option value="38">38</option> | |
569 | + <option value="39">39</option> | |
570 | + <option value="40">40</option> | |
571 | + <option value="41">41</option> | |
572 | + <option value="42">42</option> | |
573 | + <option value="43">43</option> | |
574 | + <option value="44">44</option> | |
575 | + <option value="45">45</option> | |
576 | + <option value="46">46</option> | |
577 | + <option value="47">47</option> | |
578 | + <option value="48">48</option> | |
579 | + <option value="49">49</option> | |
580 | + <option selected="selected" value="50">50</option> | |
581 | + <option value="51">51</option> | |
582 | + <option value="52">52</option> | |
583 | + <option value="53">53</option> | |
584 | + <option value="54">54</option> | |
585 | + <option value="55">55</option> | |
586 | + <option value="56">56</option> | |
587 | + <option value="57">57</option> | |
588 | + <option value="58">58</option> | |
589 | + <option value="59">59</option> | |
590 | + </select> | |
591 | + </li> | |
592 | + </ol> | |
593 | + </fieldset> | |
594 | + </li> | |
595 | + | |
596 | + </ol> | |
597 | + </fieldset> | |
598 | + | |
599 | + <fieldset class="buttons"> | |
600 | + <ol> | |
601 | + <li class="commit"> | |
602 | + <input id="dummy_submit" name="commit" type="submit" value="Submit" /> | |
603 | + </li> | |
604 | + <li> | |
605 | + <a class="cancel" href="#">Cancel</a> | |
606 | + </li> | |
607 | + </ol> | |
608 | + </fieldset> | |
609 | + | |
610 | + </form> | |
611 | + | |
612 | + <h2>Miscellaneous Styles</h2> | |
613 | + | |
614 | + <div class="error"> | |
615 | + This is a <div> with the class <strong>.error</strong>. | |
616 | + </div> | |
617 | + <div class="notice"> | |
618 | + This is a <div> with the class <strong>.notice</strong>. | |
619 | + </div> | |
620 | + <div class="success"> | |
621 | + This is a <div> with the class <strong>.success</strong>. | |
622 | + </div> | |
623 | + | |
624 | + <p> | |
625 | + <strong><strong></strong><br /> | |
626 | + <ins><ins> inserted</ins><br /> | |
627 | + <del><del> deleted</del><br /> | |
628 | + <dfn><dfn> dfn</dfn><br /> | |
629 | + <em><em> emphasis</em><br /> | |
630 | + </p> | |
631 | + <p> | |
632 | + <a><a> anchor</a><br /> | |
633 | + <a href="http://www.google.com"><a> a + href</a><br /> | |
634 | + </p> | |
635 | + <p> | |
636 | + <abbr title="extended abbr text should show when mouse over"><abbr> abbr - extended text when mouseover.</abbr><br /> | |
637 | + <acronym title="extended acronym text should show when mouse over"><acronym> acronym - extended text when mouseover.</acronym><br /> | |
638 | + </p> | |
639 | + <address> | |
640 | + <address><br /> | |
641 | + Donald Duck<br /> | |
642 | + Box 555<br /> | |
643 | + Disneyland | |
644 | + </address> | |
645 | + | |
646 | + <h2>Table Styles</h2> | |
647 | + | |
648 | + <table summary="This is the summary text for this table." border="0" cellspacing="0" cellpadding="0"> | |
649 | + <tr> | |
650 | + <th class="">Table Header One</th> | |
651 | + <th class="last">Table Header Two</th> | |
652 | + </tr> | |
653 | + <tr> | |
654 | + <td>TD One</td> | |
655 | + <td>TD Two</td> | |
656 | + </tr> | |
657 | + <tr> | |
658 | + <td colspan="2">TD colspan 2</td> | |
659 | + </tr> | |
660 | + </table> | |
661 | + | |
662 | + <table summary="This is the summary text for this table." border="0" cellspacing="0" cellpadding="0"> | |
663 | + <thead> | |
664 | + <tr> | |
665 | + <th>Table Header One</th> | |
666 | + <th>Table Header Two</th> | |
667 | + <th>Table Header One</th> | |
668 | + <th>Table Header Two</th> | |
669 | + </tr> | |
670 | + </thead> | |
671 | + <tfoot> | |
672 | + <tr> | |
673 | + <td colspan="4">tfoot footer</td> | |
674 | + </tr> | |
675 | + </tfoot> | |
676 | + <tbody> | |
677 | + <tr> | |
678 | + <td>TD One</td> | |
679 | + <td>TD Two</td> | |
680 | + <td>TD One</td> | |
681 | + <td>TD Two</td> | |
682 | + </tr> | |
683 | + <tr> | |
684 | + <td>TD One</td> | |
685 | + <td>TD Two</td> | |
686 | + <td>TD One</td> | |
687 | + <td>TD Two</td> | |
688 | + </tr> | |
689 | + </tbody> | |
690 | + <tbody> | |
691 | + <tr> | |
692 | + <td>TD One</td> | |
693 | + <td>TD Two</td> | |
694 | + <td>TD One</td> | |
695 | + <td>TD Two</td> | |
696 | + </tr> | |
697 | + <tr> | |
698 | + <td>TD One</td> | |
699 | + <td>TD Two</td> | |
700 | + <td>TD One</td> | |
701 | + <td>TD Two</td> | |
702 | + </tr> | |
703 | + </tbody> | |
704 | + </table> | |
705 | + | |
706 | + <h2>Code Styles</h2> | |
707 | + | |
708 | + <pre><pre> | |
709 | +What light | |
710 | + through yonder window breaks</pre> | |
711 | + | |
712 | +<code><code> | |
713 | +User.new</code> | |
714 | + | |
715 | +<pre class="code"><code><pre class="code"><code> | |
716 | +class User < ActiveRecord::Base | |
717 | + has_many :groups | |
718 | + belongs_to :account | |
719 | + | |
720 | + def name | |
721 | + [first_name, last_name].join(' ') | |
722 | + end | |
723 | +end</code></pre> | |
724 | + | |
725 | + <tt><tt> | |
726 | + This tt text should be monospaced | |
727 | + and | |
728 | + wrap as if | |
729 | + one line of text | |
730 | + even though the code has newlines, spaces, and tabs. | |
731 | + It should be the same size as <p> text. | |
732 | + </tt> | |
733 | + | |
734 | +<hr /> | |
735 | +<h1>Additional Styleguides</h1> | |
736 | +<hr /> | |
737 | + | |
738 | +<% @styleguides.each do |styleguide| %> | |
739 | + <%= render :file => styleguide %> | |
740 | +<% end %> | |
741 | + | |
742 | +</div> | ... | ... |
... | ... | @@ -0,0 +1,30 @@ |
1 | +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" | |
2 | + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
3 | +<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> | |
4 | + <head> | |
5 | + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
6 | + <%= stylesheet_link_tag :flutie %> | |
7 | + <title>Flutie v1</title> | |
8 | + | |
9 | + <style type="text/css"> | |
10 | + /* These are styles to make the page look nice */ | |
11 | + | |
12 | + body { background-color: #dadada;} | |
13 | + .content { | |
14 | + background: #fff; | |
15 | + padding: 40px; | |
16 | + margin: 40px auto; | |
17 | + width: 880px; | |
18 | + -moz-border-radius: 24px; | |
19 | + -webkit-border-radius: 24px; | |
20 | + } | |
21 | + </style> | |
22 | + | |
23 | + </head> | |
24 | + | |
25 | + <body> | |
26 | + <div class="content"> | |
27 | + <%= yield %> | |
28 | + </div> | |
29 | + </body> | |
30 | +</html> | ... | ... |
... | ... | @@ -0,0 +1,9 @@ |
1 | +ActionView::Helpers::AssetTagHelper.register_stylesheet_expansion :flutie => [ | |
2 | + '/flutie/stylesheets/reset', | |
3 | + '/flutie/stylesheets/defaults', | |
4 | + '/flutie/stylesheets/type', | |
5 | + '/flutie/stylesheets/forms', | |
6 | + '/flutie/stylesheets/tables', | |
7 | + '/flutie/stylesheets/lists', | |
8 | + '/flutie/stylesheets/screen' | |
9 | +] | ... | ... |
... | ... | @@ -0,0 +1,69 @@ |
1 | +--- !ruby/object:Gem::Specification | |
2 | +name: flutie | |
3 | +version: !ruby/object:Gem::Version | |
4 | + version: 0.6.9 | |
5 | +platform: ruby | |
6 | +authors: | |
7 | +- thoughtbot | |
8 | +autorequire: | |
9 | +bindir: bin | |
10 | +cert_chain: [] | |
11 | + | |
12 | +date: 2009-07-24 00:00:00 -04:00 | |
13 | +default_executable: | |
14 | +dependencies: [] | |
15 | + | |
16 | +description: Default application styles | |
17 | +email: support@thoughtbot.com | |
18 | +executables: [] | |
19 | + | |
20 | +extensions: [] | |
21 | + | |
22 | +extra_rdoc_files: [] | |
23 | + | |
24 | +files: | |
25 | +- LICENSE | |
26 | +- Rakefile | |
27 | +- README.textile | |
28 | +- app/controllers | |
29 | +- app/controllers/flutie | |
30 | +- app/controllers/flutie/styleguides_controller.rb | |
31 | +- app/views | |
32 | +- app/views/styleguides | |
33 | +- app/views/styleguides/show.html.erb | |
34 | +- config/flutie_routes.rb | |
35 | +- lib/flutie | |
36 | +- lib/flutie/extensions | |
37 | +- lib/flutie/extensions/routes.rb | |
38 | +- lib/flutier.rb | |
39 | +- rails/init.rb | |
40 | +has_rdoc: true | |
41 | +homepage: http://github.com/thoughtbot/flutie | |
42 | +licenses: [] | |
43 | + | |
44 | +post_install_message: | |
45 | +rdoc_options: [] | |
46 | + | |
47 | +require_paths: | |
48 | +- lib | |
49 | +required_ruby_version: !ruby/object:Gem::Requirement | |
50 | + requirements: | |
51 | + - - ">=" | |
52 | + - !ruby/object:Gem::Version | |
53 | + version: "0" | |
54 | + version: | |
55 | +required_rubygems_version: !ruby/object:Gem::Requirement | |
56 | + requirements: | |
57 | + - - ">=" | |
58 | + - !ruby/object:Gem::Version | |
59 | + version: "0" | |
60 | + version: | |
61 | +requirements: [] | |
62 | + | |
63 | +rubyforge_project: | |
64 | +rubygems_version: 1.3.4 | |
65 | +signing_key: | |
66 | +specification_version: 3 | |
67 | +summary: Default application styles | |
68 | +test_files: [] | |
69 | + | ... | ... |
... | ... | @@ -0,0 +1 @@ |
1 | +require 'flutie' | ... | ... |
... | ... | @@ -0,0 +1,19 @@ |
1 | +## | |
2 | +## Copy over asset files (javascript/css/images) from the plugin directory to public/ | |
3 | +## | |
4 | + | |
5 | +require 'fileutils' | |
6 | + | |
7 | +def copy_files(source_path, destination_path, directory) | |
8 | + source, destination = File.join(directory, source_path), File.join(RAILS_ROOT, destination_path) | |
9 | + FileUtils.mkdir_p(destination, :verbose => true) unless File.exist?(destination) | |
10 | + FileUtils.cp_r(source, destination, :verbose => true) | |
11 | +end | |
12 | + | |
13 | +directory = File.dirname(__FILE__) | |
14 | + | |
15 | +# Copy the flutie stylesheets into rails_root/public/flutie | |
16 | +copy_files("/public/stylesheets", "/public/flutie", directory) | |
17 | + | |
18 | +# Copy the stylesheet expansion into rails_root/config/initializers | |
19 | +copy_files("/config/flutie_expansion.rb", "/config/initializers", directory) | ... | ... |
... | ... | @@ -0,0 +1,14 @@ |
1 | +if defined?(ActionController::Routing::RouteSet) && defined?(Rails) && !Rails.env.production? | |
2 | + class ActionController::Routing::RouteSet | |
3 | + def load_routes_with_flutie! | |
4 | + lib_path = File.dirname(__FILE__) | |
5 | + flutie_routes = File.join(lib_path, *%w[.. .. .. config flutie_routes.rb]) | |
6 | + unless configuration_files.include?(flutie_routes) | |
7 | + add_configuration_file(flutie_routes) | |
8 | + end | |
9 | + load_routes_without_flutie! | |
10 | + end | |
11 | + | |
12 | + alias_method_chain :load_routes!, :flutie | |
13 | + end | |
14 | +end | ... | ... |
... | ... | @@ -0,0 +1,78 @@ |
1 | +body { | |
2 | + color: #222; | |
3 | + font-size: 13px; | |
4 | + font-family: arial, "Helvetica Neue", "Lucida Grande", Helvetica, Arial, Verdana, sans-serif; | |
5 | +} | |
6 | + | |
7 | +h1, h2, h3, h4, h5, h6 { | |
8 | + color: #111; | |
9 | + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
10 | +} | |
11 | + | |
12 | +/* Success, error & notice boxes for messages and errors. */ | |
13 | +div.error, div.notice, div.success { | |
14 | + padding: .8em; | |
15 | + margin-bottom: 1em; | |
16 | + border: 1px solid #ddd; | |
17 | + -moz-border-radius: 8px; | |
18 | + -webkit-border-radius: 8px; | |
19 | +} | |
20 | +div.error { | |
21 | + background: #FBE3E4; | |
22 | + color: #D12F19; | |
23 | + border-color: #FBC2C4; | |
24 | +} | |
25 | +div.error a { color: #D12F19; } | |
26 | + | |
27 | +div.notice { | |
28 | + background: #FFF6BF; | |
29 | + color: #817134; | |
30 | + border-color: #FFD324; | |
31 | +} | |
32 | +div.notice a { color: #817134; } | |
33 | + | |
34 | +div.success { | |
35 | + background: #E6EFC2; | |
36 | + color: #529214; | |
37 | + border-color: #C6D880; | |
38 | +} | |
39 | +div.success a { color: #529214; } | |
40 | + | |
41 | +/* Misc classes and elements */ | |
42 | + | |
43 | +/* Use a .box to create a padded box inside a column. */ | |
44 | +.box { | |
45 | + padding: 1.5em; | |
46 | + margin-bottom: 1.5em; | |
47 | + background: #eee; | |
48 | +} | |
49 | + | |
50 | +/* Use this to create a horizontal ruler across a column. */ | |
51 | +hr { | |
52 | + background: #ddd; | |
53 | + color: #ddd; | |
54 | + clear: both; | |
55 | + float: none; | |
56 | + width: 100%; | |
57 | + height: 1px; | |
58 | + margin: 0 0 1.4em; | |
59 | + border: none; | |
60 | +} | |
61 | +hr.space { | |
62 | + background: #fff; | |
63 | + color: #fff; | |
64 | +} | |
65 | + | |
66 | +/* Clearfix hack I love you */ | |
67 | +.clearfix:after { | |
68 | + content:"."; | |
69 | + display:block; | |
70 | + height:0; | |
71 | + clear:both; | |
72 | + visibility:hidden; | |
73 | +} | |
74 | + | |
75 | +.clearfix {display:inline-block;} | |
76 | +/* Hide from IE Mac \*/ | |
77 | +.clearfix {display:block;} | |
78 | +/* End hide from IE Mac */ | ... | ... |
... | ... | @@ -0,0 +1,113 @@ |
1 | +/* Forms */ | |
2 | + | |
3 | +form ol { | |
4 | + list-style: none; | |
5 | + margin: 0 0 1em 0; | |
6 | +} | |
7 | +form ol ol { margin-left: 0; } | |
8 | +form ol li { margin: 0 0 1em 0; } | |
9 | +form ol ol li { margin: 0 0 .25em 0; } | |
10 | + | |
11 | +form ol li.error input { background: #FBE3E4; } | |
12 | +p.inline-errors { color: #D12F19; } | |
13 | +form ol li.file { | |
14 | + background: #e1e1e1; | |
15 | + border: 1px solid #c8c8c8; | |
16 | + padding: 10px; | |
17 | +} | |
18 | + | |
19 | +form abbr { border-bottom: 0; } | |
20 | + | |
21 | +label { display: block; } | |
22 | +.required label { font-weight: bold; } | |
23 | +.checkbox_field label, .radio_field label { font-weight: normal; } | |
24 | + | |
25 | +a.cancel { color: #7d0d0d; } | |
26 | +.inline-hints { | |
27 | + font-size: .8em; | |
28 | + color: #666; | |
29 | + margin-bottom: .25em; | |
30 | +} | |
31 | + | |
32 | +/* Fieldsets */ | |
33 | +fieldset { | |
34 | + margin: 0 0 1.5em 0; | |
35 | + background: #f1f1f1; | |
36 | + padding: 1.5em 1.5em 1em 1.5em; | |
37 | + border: 1px solid #e3e3e3; | |
38 | +} | |
39 | +fieldset fieldset, fieldset fieldset fieldset { | |
40 | + padding: 0; | |
41 | + border: 0; | |
42 | +} | |
43 | +legend { font-weight: bold; } | |
44 | +fieldset.buttons { | |
45 | + background: inherit; | |
46 | + border: 0; | |
47 | + padding: 0; | |
48 | +} | |
49 | +fieldset.buttons li { display: inline; } | |
50 | +.radio fieldset { | |
51 | + padding: 0; | |
52 | + margin: 0; | |
53 | +} | |
54 | + | |
55 | +/* Text fields */ | |
56 | +input[type="text"], input[type="password"] { | |
57 | + width: 300px; | |
58 | + padding: 3px 2px; | |
59 | + font-size: inherit; | |
60 | +} | |
61 | +input[disabled='disabled'] { | |
62 | + background-color: #fcfcfc; | |
63 | + cursor:default; | |
64 | +} | |
65 | +input[type="checkbox"] { | |
66 | + margin: 0 3px 0 0; | |
67 | + vertical-align: middle; | |
68 | + position: relative; | |
69 | + top: -2px; | |
70 | +} | |
71 | +input[type="radio"] { | |
72 | + margin: 0 3px 0 0; | |
73 | + vertical-align: middle; | |
74 | + position: relative; | |
75 | + top: -2px; | |
76 | +} | |
77 | +.check_boxes label { | |
78 | + vertical-align: middle; | |
79 | + padding: 0; | |
80 | + display: inline; | |
81 | +} | |
82 | +.radio label { padding: 0; } | |
83 | + | |
84 | +/* Textareas */ | |
85 | +textarea { | |
86 | + width: 440px; | |
87 | + height: 200px; | |
88 | + margin: 0 0.5em 0.5em 0; | |
89 | + padding: 5px; | |
90 | + font-size: inherit; | |
91 | +} | |
92 | + | |
93 | +/* Select fields */ | |
94 | +fieldset .select select { | |
95 | + width:200px; | |
96 | + font-size: .9em; | |
97 | +} | |
98 | +optgroup { margin: 0 0 .5em 0; } | |
99 | + | |
100 | +/* Date & Time */ | |
101 | +form ol li.date ol li, form ol li.time ol li { | |
102 | + display: inline; | |
103 | +} | |
104 | +form ol li.datetime ol li { | |
105 | + display: inline-block; | |
106 | +} | |
107 | +form ol li.datetime select, form ol li.date select, form ol li.time select { | |
108 | + display: inline; | |
109 | + width: auto; | |
110 | +} | |
111 | +form ol li.date label, form ol li.time label { | |
112 | + display: none; | |
113 | +} | ... | ... |
... | ... | @@ -0,0 +1,25 @@ |
1 | +/* Lists */ | |
2 | + | |
3 | +ul, ol { | |
4 | + margin-bottom: 1.5em; | |
5 | + list-style-position: inside; | |
6 | +} | |
7 | +ul { list-style-type: disc; } | |
8 | +ol { list-style-type: decimal; } | |
9 | + | |
10 | +dl { | |
11 | + margin-bottom: 1.5em; | |
12 | + line-height: 1.4; | |
13 | +} | |
14 | +dl dt { | |
15 | + font-weight: bold; | |
16 | + margin-top: .5em; | |
17 | +} | |
18 | +dl dd { margin-bottom: 0em;} | |
19 | +dd { margin-left: .5em; } | |
20 | + | |
21 | +li { line-height: 1.4; } | |
22 | + | |
23 | +ol ol, ol ul, ul ul, ul ol { | |
24 | + margin-left: 1em; | |
25 | +} | ... | ... |
... | ... | @@ -0,0 +1,49 @@ |
1 | +/* http://meyerweb.com/eric/tools/css/reset/ */ | |
2 | +/* v1.0 | 20080212 */ | |
3 | + | |
4 | +html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, | |
5 | +blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, | |
6 | +font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, | |
7 | +b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, | |
8 | +caption, tbody, tfoot, thead, tr, th, td { | |
9 | + margin: 0; | |
10 | + padding: 0; | |
11 | + border: 0; | |
12 | + outline: 0; | |
13 | + font-size: 100%; | |
14 | + vertical-align: baseline; | |
15 | + background: transparent; | |
16 | +} | |
17 | +body { | |
18 | + line-height: 1; | |
19 | +} | |
20 | +ol, ul { | |
21 | + list-style: none; | |
22 | +} | |
23 | +blockquote, q { | |
24 | + quotes: none; | |
25 | +} | |
26 | +blockquote:before, blockquote:after, | |
27 | +q:before, q:after { | |
28 | + content: ''; | |
29 | + content: none; | |
30 | +} | |
31 | + | |
32 | +/* remember to define focus styles! */ | |
33 | +:focus { | |
34 | + outline: 0; | |
35 | +} | |
36 | + | |
37 | +/* remember to highlight inserts somehow! */ | |
38 | +ins { | |
39 | + text-decoration: none; | |
40 | +} | |
41 | +del { | |
42 | + text-decoration: line-through; | |
43 | +} | |
44 | + | |
45 | +/* tables still need 'cellspacing="0"' in the markup */ | |
46 | +table { | |
47 | + border-collapse: collapse; | |
48 | + border-spacing: 0; | |
49 | +} | ... | ... |
... | ... | @@ -0,0 +1,23 @@ |
1 | +/* Tables */ | |
2 | + | |
3 | +table { | |
4 | + margin-bottom: 2em; | |
5 | + width: 100%; | |
6 | +} | |
7 | +th { | |
8 | + border-bottom: 2px solid #ccc; | |
9 | + font-weight: bold; | |
10 | + text-align: left; | |
11 | +} | |
12 | +td { border-bottom: 1px solid #ddd; } | |
13 | +caption, th, td { | |
14 | + padding: 4px 10px 4px 0; | |
15 | +} | |
16 | +caption { | |
17 | + background: #f1f1f1; | |
18 | + padding: 10px 0; | |
19 | + margin-bottom: 1em; | |
20 | +} | |
21 | + | |
22 | +/* Use this if you use span-x classes on th/td. */ | |
23 | +table .last { padding-right: 0; } | ... | ... |
... | ... | @@ -0,0 +1,90 @@ |
1 | +/* Headings */ | |
2 | + | |
3 | +h1, h2, h3, h4, h5, h6 { font-weight: bold; } | |
4 | + | |
5 | +h1 { | |
6 | + font-size: 2.2em; | |
7 | + line-height: 1; | |
8 | + margin-bottom: 0.25em; | |
9 | +} | |
10 | +h2 { | |
11 | + font-size: 1.6em; | |
12 | + margin-bottom: 0.25em; | |
13 | + line-height: 1.1; | |
14 | +} | |
15 | +h3 { | |
16 | + font-size: 1.3em; | |
17 | + line-height: 1; | |
18 | + margin-bottom: .25em; | |
19 | +} | |
20 | +h4 { | |
21 | + font-size: 1.1em; | |
22 | + line-height: 1.25; | |
23 | + margin-bottom: .25em; | |
24 | +} | |
25 | +h5 { | |
26 | + font-size: 1em; | |
27 | + margin-bottom: .25em; | |
28 | +} | |
29 | +h6 { | |
30 | + font-size: 1em; | |
31 | + margin-bottom: .25em; | |
32 | +} | |
33 | + | |
34 | +/* Text elements */ | |
35 | + | |
36 | +p.last { margin-bottom: 0; } | |
37 | +p img { | |
38 | + float: left; | |
39 | + margin: 1.5em 1.5em 1.5em 0; | |
40 | + padding: 0; | |
41 | +} | |
42 | +p img.top { margin-top: 0; } /* Use this if the image is at the top of the <p>. */ | |
43 | +img { margin: 0 0 1.5em; } | |
44 | + | |
45 | +abbr, acronym { | |
46 | + border-bottom: 1px dotted #666; | |
47 | + cursor: help; | |
48 | +} | |
49 | +address { | |
50 | + margin-top: 1.5em; | |
51 | + font-style: italic; | |
52 | +} | |
53 | +del { color:#666; } | |
54 | + | |
55 | +a, a:link { | |
56 | + color: #1a4882; | |
57 | + text-decoration: underline; | |
58 | +} | |
59 | +a:visited { color: #1a4882; } | |
60 | +a:hover { color: #052246; } | |
61 | +a:active, a:focus { color: #1a4882; } | |
62 | + | |
63 | +blockquote { | |
64 | + margin: 1.5em 0; | |
65 | + color: #666; | |
66 | + font-style: italic; | |
67 | + padding-left: 1em; | |
68 | + border-left: 4px solid #d1d1d1; | |
69 | +} | |
70 | +strong { font-weight: bold; } | |
71 | +em, dfn { font-style: italic; } | |
72 | +dfn { font-weight: bold; } | |
73 | +pre, code { | |
74 | + margin: 1.5em 0; | |
75 | + white-space: pre; | |
76 | +} | |
77 | +pre, code, tt { | |
78 | + font: 1em 'andale mono', 'monotype.com', 'lucida console', monospace; | |
79 | + line-height: 1.5; | |
80 | +} | |
81 | +pre.code { | |
82 | + background: #000; | |
83 | + color: #fff; | |
84 | + padding: 20px; | |
85 | +} | |
86 | +tt { | |
87 | + display: block; | |
88 | + margin: 1.5em 0; | |
89 | + line-height: 1.5; | |
90 | +} | ... | ... |
... | ... | @@ -0,0 +1 @@ |
1 | +require 'flutie' | ... | ... |
vendor/plugins/flutie/test/fixtures/app/views/styleguides/_one.erb
0 → 100644
... | ... | @@ -0,0 +1 @@ |
1 | +fixture partial 1 | ... | ... |
vendor/plugins/flutie/test/fixtures/app/views/styleguides/_two.erb
0 → 100644
... | ... | @@ -0,0 +1 @@ |
1 | +fixture partial 2 | ... | ... |
vendor/plugins/flutie/test/functional/styleguides_controller_test.rb
0 → 100644
... | ... | @@ -0,0 +1,56 @@ |
1 | +require 'test_helper' | |
2 | + | |
3 | +class ApplicationController < ActionController::Base | |
4 | +end | |
5 | + | |
6 | +ActionController::Base.prepend_view_path File.join(File.dirname(__FILE__), '..', '..', 'app', 'views') | |
7 | +ActionController::Base.prepend_view_path File.join(File.dirname(__FILE__), '..', 'fixtures', 'app', 'views') | |
8 | +require "flutie/styleguides_controller" | |
9 | +require File.join(File.dirname(__FILE__), '..', '..', 'config', 'flutie_routes') | |
10 | + | |
11 | +class Flutie::StyleguidesControllerTest < ActionController::TestCase | |
12 | + def self.should_render_well_formed_xml | |
13 | + should "render well-formed XML" do | |
14 | + assert_nothing_raised("expected a well-formed XML document") do | |
15 | + REXML::Document.new(@response.body) | |
16 | + end | |
17 | + end | |
18 | + end | |
19 | + | |
20 | + def self.should_render_all_styleguide_partials | |
21 | + should "render the partials in the fixtures directory" do | |
22 | + assert_match %r{fixture partial 1}, @response.body | |
23 | + assert_match %r{fixture partial 2}, @response.body | |
24 | + end | |
25 | + end | |
26 | + | |
27 | + context "on GET to /styleguides/show" do | |
28 | + setup { get :show } | |
29 | + | |
30 | + should_respond_with :success | |
31 | + should_render_template :show | |
32 | + should_render_without_layout | |
33 | + should_render_well_formed_xml | |
34 | + should_render_all_styleguide_partials | |
35 | + end | |
36 | + | |
37 | + context "on GET to /styleguides/show with flutie=false" do | |
38 | + setup { get :show, :flutie => "false" } | |
39 | + | |
40 | + should_respond_with :success | |
41 | + should_render_template :show | |
42 | + should_render_without_layout | |
43 | + should_render_well_formed_xml | |
44 | + should_render_all_styleguide_partials | |
45 | + end | |
46 | + | |
47 | + context "on GET to /styleguides/show with flutie=true" do | |
48 | + setup { get :show, :flutie => "true" } | |
49 | + | |
50 | + should_respond_with :success | |
51 | + should_render_template :show | |
52 | + should_render_with_layout :flutie | |
53 | + should_render_well_formed_xml | |
54 | + should_render_all_styleguide_partials | |
55 | + end | |
56 | +end | ... | ... |
... | ... | @@ -0,0 +1,16 @@ |
1 | +ENV['RAILS_ENV'] = 'test' | |
2 | + | |
3 | +require 'rubygems' | |
4 | +require 'active_support' | |
5 | +require 'active_support/test_case' | |
6 | +require 'action_controller' | |
7 | +require 'test_help' | |
8 | +require 'flutie' | |
9 | +require 'config/flutie_expansion' | |
10 | +require 'rexml/document' | |
11 | + | |
12 | +$LOAD_PATH << File.join(File.dirname(__FILE__), '..', 'app', 'controllers') | |
13 | + | |
14 | +require 'shoulda' | |
15 | +require 'shoulda/rails' | |
16 | +begin require 'redgreen'; rescue LoadError; end | ... | ... |
... | ... | @@ -0,0 +1,18 @@ |
1 | +require 'test_helper' | |
2 | + | |
3 | +class InitializationTest < ActiveSupport::TestCase | |
4 | + | |
5 | + should "register stylesheet expansions with rails" do | |
6 | + expected = {:flutie => [ | |
7 | + '/flutie/stylesheets/reset', | |
8 | + '/flutie/stylesheets/defaults', | |
9 | + '/flutie/stylesheets/type', | |
10 | + '/flutie/stylesheets/forms', | |
11 | + '/flutie/stylesheets/tables', | |
12 | + '/flutie/stylesheets/lists', | |
13 | + '/flutie/stylesheets/screen'] | |
14 | + } | |
15 | + assert_equal expected, ActionView::Helpers::AssetTagHelper.send(:class_variable_get, :@@stylesheet_expansions) | |
16 | + end | |
17 | + | |
18 | +end | ... | ... |