facades 1.0.0 → 1.0.1
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +70 -73
- data/app/controllers/facades_controller.rb +4 -0
- data/app/views/facades/style_guide.html.erb +300 -0
- data/lib/facades/helpers/frontend.rb +55 -0
- data/lib/facades/helpers/navigation.rb +11 -4
- data/lib/facades/helpers/notifications.rb +1 -1
- data/lib/facades/helpers.rb +2 -0
- data/lib/facades/support/rails.rb +3 -0
- data/lib/facades/version.rb +1 -1
- data/lib/facades.rb +11 -3
- data/spec/internal/log/test.log +188 -0
- data/spec/unit/helpers/navigation_spec.rb +16 -2
- data/src/scss/facades/_config.scss +48 -37
- data/src/scss/facades/_debug.scss +1 -1
- data/src/scss/facades/_forms.scss +19 -3
- data/src/scss/facades/_global.scss +46 -46
- data/src/scss/facades/_icons.scss +39 -39
- data/src/scss/facades/_mixins.scss +10 -0
- data/src/scss/facades/_typography.scss +85 -142
- data/src/scss/facades/debug/_susy.scss +20 -0
- data/src/scss/facades/icons/_classes.scss +30 -30
- data/src/scss/facades/typography/_code.scss +27 -0
- data/src/scss/facades/typography/_extra.scss +34 -0
- metadata +10 -4
data/README.md
CHANGED
|
@@ -1,7 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
Facades
|
|
3
|
-
==================================================================================================================
|
|
4
|
-
|
|
1
|
+
# Facades
|
|
5
2
|
Facades is a framework, written in SASS (.scss) designed to assist with front-end development rapid prototyping. It includes a number of base classes, patterns and mixins,
|
|
6
3
|
focused on semantic html, and styled around a consistent vertical rhythm.
|
|
7
4
|
|
|
@@ -17,58 +14,42 @@ wasn't available with anything existing at the time.
|
|
|
17
14
|
Facades also utilizes the fantastic [Compass](https://github.com/chriseppstein/compass) library to add additional function and flexiblity.
|
|
18
15
|
This helps increase the functionality and reliability of the framework as a whole.
|
|
19
16
|
|
|
20
|
-
Most of the patterns included here are written using sass mixins, with configuration options for fonts, sizes, and colors.
|
|
21
|
-
For instance, the notifications pattern (alerts/flash messages) is implemented as a mixin, allowing the developer to decide their own node and class
|
|
17
|
+
Most of the patterns included here are written using sass mixins, with configuration options for fonts, sizes, and colors. For instance, the notifications pattern (alerts/flash messages) is implemented as a mixin, allowing the developer to decide their own node and class
|
|
22
18
|
scheme to use. This makes facades easier to implement in existing projects, without having to change existing classes or html format.
|
|
23
19
|
|
|
24
20
|
When implementing patterns color schemes are provided as an option, for those instances where you'd prefer your own class names and design.
|
|
25
21
|
|
|
26
22
|
For those who just want to import and go, theres also a `_globals.scss` which creates all of the defaults, with classes and all. To utilize, import it into your main css file.
|
|
27
23
|
|
|
28
|
-
```
|
|
24
|
+
```scss
|
|
29
25
|
@import 'facades/global';
|
|
30
26
|
```
|
|
31
27
|
|
|
32
28
|
If you'd like to configure any particular variables such as sizes or line heights, do so before importing the global file.
|
|
33
29
|
|
|
34
|
-
Reset and Configuration
|
|
35
|
-
------------------------------
|
|
30
|
+
## Reset and Configuration
|
|
36
31
|
|
|
37
32
|
Facades implements the awesome [HTML5 Boilerplate](https://github.com/h5bp/html5-boilerplate) reset/normalize stylesheet to establish a
|
|
38
33
|
grounds for which to expand upon. Common colors, sizes and line-heights are fully configurable using the variables found in `_config.scss`.
|
|
39
34
|
The more common options you probably want to configure are:
|
|
40
35
|
|
|
41
36
|
`$font-color`: The body/default font color.
|
|
42
|
-
|
|
43
37
|
`$font-size`: The base font size, also used when calculating vertical rhythm
|
|
44
|
-
|
|
45
38
|
`$line-height`: The base line-height, combined with `$font-size` establishes a baseline and sets up the vertical-rhythm
|
|
46
|
-
|
|
47
39
|
`$font-family`: The base font-family
|
|
48
|
-
|
|
49
40
|
`$notice-color`: The color used for .notice alerts labels, blue by default
|
|
50
|
-
|
|
51
41
|
`$success-color`: The color used for .success labels and alerts, green by default
|
|
52
|
-
|
|
53
42
|
`$error-color`: The color used for :invalid fields, .error labels and alerts, red by default
|
|
54
|
-
|
|
55
43
|
`$warning-color`: The color used for .warning labels and alerts, yellow by default
|
|
56
|
-
|
|
57
44
|
`$input-border-color`: The default color used for form elements, grey by default.
|
|
58
|
-
|
|
59
45
|
`$input-focus-color`: The font color used when an input is focused, defaults to `$font-color`
|
|
60
|
-
|
|
61
46
|
`$input-focus-border-color`: The border color used for inputs when in a :focus state. Defaults to `$notice-color`
|
|
62
|
-
|
|
63
47
|
`$input-error-color`: The font color used for inputs in an :invalid or .error state. Defaults to red.
|
|
64
|
-
|
|
65
48
|
`$input-error-border-color`: The border color used for inputs in an :invalid or .error state. Defaults to `$error-color`.
|
|
66
49
|
|
|
50
|
+
## View Helpers
|
|
67
51
|
|
|
68
|
-
|
|
69
|
-
------------------------------
|
|
70
|
-
|
|
71
|
-
**Variables**
|
|
52
|
+
### Variables
|
|
72
53
|
Setup variables via templates to be used within your layout.
|
|
73
54
|
|
|
74
55
|
* `page_id` The id of the current page, useful for targeting with CSS. Defaults to "controller_action" in Rails
|
|
@@ -77,75 +58,85 @@ Setup variables via templates to be used within your layout.
|
|
|
77
58
|
* `description` Used to populate the description meta tag
|
|
78
59
|
|
|
79
60
|
To assign variables, pass their value to the method. To display, use the method without any arguments
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
61
|
+
|
|
62
|
+
```erb
|
|
63
|
+
# index.html.erb
|
|
64
|
+
<% page_id('home') %>
|
|
65
|
+
```
|
|
66
|
+
```erb
|
|
67
|
+
# In your layout
|
|
68
|
+
<body id="<%= page_id %>">
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
### Misc
|
|
88
72
|
|
|
89
73
|
`meta_tag` A shortcut for creating HTML meta tags.
|
|
90
74
|
|
|
91
|
-
|
|
92
|
-
|
|
75
|
+
```erb
|
|
76
|
+
<%= meta_tag('name', 'content') %> #=> <meta name="name" content="content" />
|
|
77
|
+
```
|
|
78
|
+
|
|
93
79
|
`robot_meta_tag` A shortcut for defining a robot meta tag based on the Rails.env. Useful to keep spiders out of your staging environments
|
|
94
80
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
81
|
+
```erb
|
|
82
|
+
# In any environment but production
|
|
83
|
+
<%= robot_meta_tag %> #=> <meta name="robots" content="noindex, nofollow" />
|
|
84
|
+
# In production
|
|
85
|
+
<%= robot_meta_tag %> #=> <meta name="robots" content="index, follow" />
|
|
86
|
+
```
|
|
100
87
|
|
|
101
88
|
`browser_name` Returns the name of the user's browser (ie webkit, mozilla, ie8, ie9, etc)
|
|
102
89
|
|
|
103
|
-
Navigation Helpers
|
|
104
|
-
------------------------------
|
|
90
|
+
### Navigation Helpers
|
|
105
91
|
|
|
106
92
|
Facades provides a navigation helper for creating nested navigation lists. Syntax is similar to other Rails helpers such as `form_for`
|
|
107
93
|
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
94
|
+
```erb
|
|
95
|
+
<%= nav do |n| %>
|
|
96
|
+
<%= n.link 'About Me', about_path %>
|
|
97
|
+
<%= n.link 'Top Level', some_path do |s| %>
|
|
98
|
+
<%= s.link 'Sub Item', some_sub_path %>
|
|
99
|
+
<% end %>
|
|
100
|
+
<% end %>
|
|
101
|
+
```
|
|
114
102
|
|
|
115
103
|
Will output
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
104
|
+
```html
|
|
105
|
+
<nav>
|
|
106
|
+
<ul>
|
|
107
|
+
<li><a href='/about-path'>About Me</a></li>
|
|
108
|
+
<li><a href='/some-path'>Top Level</a>
|
|
109
|
+
<ul>
|
|
110
|
+
<li><a href="/some-sub-path">Sub Item</a></li>
|
|
111
|
+
</ul>
|
|
112
|
+
</li>
|
|
113
|
+
</ul>
|
|
114
|
+
</nav>
|
|
115
|
+
```
|
|
128
116
|
Note: The `<nav>` tag is only included if `Facades.enable_html5` is set to true.
|
|
129
117
|
|
|
130
118
|
As a convenience, the class `active` will be added to a link when the current url matches that link. This can be overridden by using one of three ways:
|
|
131
119
|
1. Assigning a `:proc` attribute. When using a proc/lambda, returning true will set the `active` class.
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
120
|
+
|
|
121
|
+
```erb
|
|
122
|
+
# Current path /home
|
|
123
|
+
<%= n.link 'Path', some_path, proc: lambda{ |current_path| true } %> #=> <a href='/anything' class='active'>Path</a>
|
|
124
|
+
```
|
|
125
|
+
|
|
136
126
|
2. Passing a `:match` attribute as one of `:exact`, `:after`, or `:before` will match all urls based on that formula. `:exact` matches only the exact
|
|
137
127
|
url defined in the link's href attribute. `:before` matches any path matching a "parent" url, while `:after` matches any url starting with the specified path.
|
|
138
128
|
The latter is useful for when you'd like to match sub-pages or paths in nested navigations.
|
|
139
129
|
|
|
140
130
|
3. Assigning a `:matcher` attribute, containing a regular expression in which the request.path should match to be `active`.
|
|
141
|
-
|
|
142
|
-
|
|
131
|
+
|
|
132
|
+
```erb
|
|
133
|
+
<%= n.link 'Path', '/something-else', matcher: /something/ %> #=> <a href='/something-else' class='active'>Path</a>
|
|
134
|
+
```
|
|
143
135
|
|
|
144
136
|
In addition to the `nav` helper, a `nav_link` helper is also provided, for use when creating single links, which should also track 'active' state.
|
|
145
137
|
|
|
146
138
|
|
|
147
|
-
Contributing
|
|
148
|
-
------------------------------
|
|
139
|
+
## Contributing
|
|
149
140
|
|
|
150
141
|
Fork and create. When coding styles or ruby libs, adhere to a 2 space indention. Patterns should be written as mixins, with a
|
|
151
142
|
default class construction in `_global.scss`. Colors should be configurable, either by using one of the colors included in `_config.scss`
|
|
@@ -157,19 +148,25 @@ Styles should confirm to a vertical-rhythm as much as possible (some things seem
|
|
|
157
148
|
|
|
158
149
|
Document patterns with html examples, which should utilize HTML5 elements, in an intended/semantic manner.
|
|
159
150
|
|
|
160
|
-
|
|
161
|
-
|
|
151
|
+
## Changelog
|
|
152
|
+
|
|
153
|
+
**1.0.1 - October 12, 2012**
|
|
154
|
+
|
|
155
|
+
* Add additional configuration options for input padding
|
|
156
|
+
* Add configuration option for transitions specifically on inputs
|
|
157
|
+
* misc style cleanup, modifications to html output of notifications
|
|
158
|
+
|
|
159
|
+
## Thanks
|
|
162
160
|
|
|
163
161
|
Thanks to the fine folks who work on the HTML5 Boilerplate, the Compass library and contributors, and the hundreds of
|
|
164
162
|
random people who've blogged the tons and tons of google search results we've read in creating this library.
|
|
165
163
|
|
|
166
|
-
License
|
|
167
|
-
------------------------------
|
|
164
|
+
## License
|
|
168
165
|
|
|
169
166
|
Copyright 2012 kurb media llc.
|
|
170
167
|
MIT/GPL ( do whatever you want, but check the licenses below )
|
|
171
168
|
|
|
172
|
-
|
|
169
|
+
## Components:
|
|
173
170
|
|
|
174
171
|
Compass: MIT (modified)
|
|
175
172
|
HTML5 Boilerplate reset.css: Public Domain
|
|
@@ -0,0 +1,300 @@
|
|
|
1
|
+
<div id="style_guide">
|
|
2
|
+
<section id="typography">
|
|
3
|
+
<h2 class="headline">Typography</h2>
|
|
4
|
+
<div class="col">
|
|
5
|
+
<h2>Heading 2</h2>
|
|
6
|
+
<p>Lorem dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
|
7
|
+
</div>
|
|
8
|
+
<div class="col">
|
|
9
|
+
<h3>Heading 3</h3>
|
|
10
|
+
<p>Nullam quis risus eget mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
|
11
|
+
<p>Vivamus lacus vel augue laoreet rutrum faucibus dolor auctor. </p>
|
|
12
|
+
</div>
|
|
13
|
+
<div class="col last">
|
|
14
|
+
<h1>h1. Heading 1</h1>
|
|
15
|
+
<h2>h2. Heading 2</h2>
|
|
16
|
+
<h3>h3. Heading 3</h3>
|
|
17
|
+
<h4>h4. Heading 4</h4>
|
|
18
|
+
<h5>h5. Heading 5</h5>
|
|
19
|
+
<h6>h6. Heading 6</h6>
|
|
20
|
+
</div>
|
|
21
|
+
<div class="col clear">
|
|
22
|
+
<h3>Unordered Lists</h3>
|
|
23
|
+
<ul>
|
|
24
|
+
<li>Lorem ipsum dolor sit amet</li>
|
|
25
|
+
<li>Consectetur adipiscing elit</li>
|
|
26
|
+
<li>Nulla volutpat aliquam velit
|
|
27
|
+
<ul>
|
|
28
|
+
<li>Phasellus iaculis neque</li>
|
|
29
|
+
<li>Purus sodales ultricies</li>
|
|
30
|
+
<li>Vestibulum laoreet porttitor sem</li>
|
|
31
|
+
<li>Ac tristique libero volutpat at</li>
|
|
32
|
+
</ul>
|
|
33
|
+
</li>
|
|
34
|
+
<li>Faucibus porta lacus fringilla vel</li>
|
|
35
|
+
</ul>
|
|
36
|
+
</div>
|
|
37
|
+
<div class="col">
|
|
38
|
+
<h3>Ordered Lists</h3>
|
|
39
|
+
<ol>
|
|
40
|
+
<li>Lorem ipsum dolor sit amet</li>
|
|
41
|
+
<li>Consectetur adipiscing elit</li>
|
|
42
|
+
<li>Integer molestie lorem at massa</li>
|
|
43
|
+
<li>Facilisis in pretium nisl aliquet</li>
|
|
44
|
+
<li>Nulla volutpat aliquam velit
|
|
45
|
+
</ol>
|
|
46
|
+
</div>
|
|
47
|
+
<div class="col">
|
|
48
|
+
<h3>Block or bullet-less lists</h3>
|
|
49
|
+
<ul class="block">
|
|
50
|
+
<li>Lorem ipsum dolor sit amet</li>
|
|
51
|
+
<li>Consectetur adipiscing elit</li>
|
|
52
|
+
<li>Integer molestie lorem at massa</li>
|
|
53
|
+
<li>Facilisis in pretium nisl aliquet</li>
|
|
54
|
+
<li>Nulla volutpat aliquam velit
|
|
55
|
+
<ul>
|
|
56
|
+
<li>Phasellus iaculis neque</li>
|
|
57
|
+
<li>Purus sodales ultricies</li>
|
|
58
|
+
<li>Vestibulum laoreet porttitor sem</li>
|
|
59
|
+
<li>Ac tristique libero volutpat at</li>
|
|
60
|
+
</ul>
|
|
61
|
+
</li>
|
|
62
|
+
<li>Faucibus porta lacus fringilla vel</li>
|
|
63
|
+
<li>Aenean sit amet erat nunc</li>
|
|
64
|
+
<li>Eget porttitor lorem</li>
|
|
65
|
+
</ul>
|
|
66
|
+
</div>
|
|
67
|
+
<div class="col last">
|
|
68
|
+
<h3>Definition List</h3>
|
|
69
|
+
<dl>
|
|
70
|
+
<dt>Description lists</dt>
|
|
71
|
+
<dd>A description list is perfect for defining terms.</dd>
|
|
72
|
+
<dt>Euismod</dt>
|
|
73
|
+
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
|
|
74
|
+
<dt>Malesuada porta</dt>
|
|
75
|
+
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
|
|
76
|
+
</dl>
|
|
77
|
+
</div>
|
|
78
|
+
</section>
|
|
79
|
+
<section id="tables">
|
|
80
|
+
<h2 class="headline">Regular Tables</h2>
|
|
81
|
+
<table border="0">
|
|
82
|
+
<thead>
|
|
83
|
+
<tr>
|
|
84
|
+
<th width="40%">Header</th>
|
|
85
|
+
<th>Another Header</th>
|
|
86
|
+
</tr>
|
|
87
|
+
</thead>
|
|
88
|
+
<tbody>
|
|
89
|
+
<tr>
|
|
90
|
+
<td>Data</td>
|
|
91
|
+
<td>Data</td>
|
|
92
|
+
</tr>
|
|
93
|
+
<tr>
|
|
94
|
+
<td>Data</td>
|
|
95
|
+
<td>Data</td>
|
|
96
|
+
</tr>
|
|
97
|
+
<tr>
|
|
98
|
+
<td>Data</td>
|
|
99
|
+
<td>Data</td>
|
|
100
|
+
</tr>
|
|
101
|
+
</tbody>
|
|
102
|
+
</table>
|
|
103
|
+
<h2 class="headline">Border Tables</h2>
|
|
104
|
+
<table class="bordered">
|
|
105
|
+
<thead>
|
|
106
|
+
<tr>
|
|
107
|
+
<th>Header</th>
|
|
108
|
+
<th>Another Header</th>
|
|
109
|
+
</tr>
|
|
110
|
+
</thead>
|
|
111
|
+
<tbody>
|
|
112
|
+
<tr>
|
|
113
|
+
<td>Data</td>
|
|
114
|
+
<td>Data</td>
|
|
115
|
+
</tr>
|
|
116
|
+
<tr>
|
|
117
|
+
<td>Data</td>
|
|
118
|
+
<td>Data</td>
|
|
119
|
+
</tr>
|
|
120
|
+
<tr>
|
|
121
|
+
<td>Data</td>
|
|
122
|
+
<td>Data</td>
|
|
123
|
+
</tr>
|
|
124
|
+
</tbody>
|
|
125
|
+
</table>
|
|
126
|
+
<h2 class="headline">Stripe Tables</h2>
|
|
127
|
+
<table class="striped">
|
|
128
|
+
<thead>
|
|
129
|
+
<tr>
|
|
130
|
+
<th>Header</th>
|
|
131
|
+
<th>Another Header</th>
|
|
132
|
+
</tr>
|
|
133
|
+
</thead>
|
|
134
|
+
<tbody>
|
|
135
|
+
<tr>
|
|
136
|
+
<td>Data</td>
|
|
137
|
+
<td>Data</td>
|
|
138
|
+
</tr>
|
|
139
|
+
<tr>
|
|
140
|
+
<td>Data</td>
|
|
141
|
+
<td>Data</td>
|
|
142
|
+
</tr>
|
|
143
|
+
<tr>
|
|
144
|
+
<td>Data</td>
|
|
145
|
+
<td>Data</td>
|
|
146
|
+
</tr>
|
|
147
|
+
</tbody>
|
|
148
|
+
</table>
|
|
149
|
+
</section>
|
|
150
|
+
<section id="notifications">
|
|
151
|
+
<h1 class="headline">Alerts and Notifications</h1>
|
|
152
|
+
<p>Basic alerts and flash messages.</p>
|
|
153
|
+
|
|
154
|
+
<div class="alert">
|
|
155
|
+
This is a basic alert message, no color styles. <span class="close">x</span>
|
|
156
|
+
</div>
|
|
157
|
+
<div class="alert notice">
|
|
158
|
+
This is a notice alert message, for normal information. <span class="close">x</span>
|
|
159
|
+
</div>
|
|
160
|
+
<div class="alert success">
|
|
161
|
+
This is a success alert message, green because everything went awesome. <span class="close">x</span>
|
|
162
|
+
</div>
|
|
163
|
+
<div class="alert error">
|
|
164
|
+
This is a error alert message, red cus something went terribly wrong. <span class="close">x</span>
|
|
165
|
+
</div>
|
|
166
|
+
<div class="alert warning">
|
|
167
|
+
This is a warning alert message, its not terrible, but not good either. <span class="close">x</span>
|
|
168
|
+
</div>
|
|
169
|
+
</section>
|
|
170
|
+
<section id="forms">
|
|
171
|
+
<h2 class="headline">Forms & Buttons</h2>
|
|
172
|
+
<form action="#">
|
|
173
|
+
<ul class="columns">
|
|
174
|
+
<li>
|
|
175
|
+
<label for="text_field">Text Field</label>
|
|
176
|
+
<input type="text" name="text_field" value="" id="text_field" />
|
|
177
|
+
</li>
|
|
178
|
+
<li>
|
|
179
|
+
<label for="email_field">Email Field</label>
|
|
180
|
+
<input type="email" name="email_field" value="" id="email_field" />
|
|
181
|
+
<span class="hint">Please enter a valid email address</span>
|
|
182
|
+
</li>
|
|
183
|
+
<li>
|
|
184
|
+
<label for="disabled_field">Disabled Field</label>
|
|
185
|
+
<input type="text" name="disabled_field" value="" id="disabled_field" disabled />
|
|
186
|
+
</li>
|
|
187
|
+
<li>
|
|
188
|
+
<label for="single_select">Single Select</label>
|
|
189
|
+
<select name="single_select" id="single_select">
|
|
190
|
+
<option value="option">Please select...</option>
|
|
191
|
+
</select>
|
|
192
|
+
</li>
|
|
193
|
+
<li class="clear">
|
|
194
|
+
<label for="multi_select">Multiple Select</label>
|
|
195
|
+
<select name="multi_select" id="multi_select" size="5">
|
|
196
|
+
<option value="option">Option number 1</option>
|
|
197
|
+
<option value="option">Option number 2</option>
|
|
198
|
+
<option value="option">Option number 3</option>
|
|
199
|
+
<option value="option">Option number 4</option>
|
|
200
|
+
<option value="option">Option number 5</option>
|
|
201
|
+
</select>
|
|
202
|
+
</li>
|
|
203
|
+
<li>
|
|
204
|
+
<label for="invalid_field">Invalid Field</label>
|
|
205
|
+
<input type="text" name="invalid_field" value="" id="invalid_field" class="invalid" />
|
|
206
|
+
<span class="hint">Please enter a valid email address</span>
|
|
207
|
+
</li>
|
|
208
|
+
<li class="option-group">
|
|
209
|
+
<label>
|
|
210
|
+
<input type="radio" name="grouped_radio" value="1" id="radio" />
|
|
211
|
+
Option 1
|
|
212
|
+
</label>
|
|
213
|
+
<label>
|
|
214
|
+
<input type="radio" name="grouped_radio" value="2" id="radio" />
|
|
215
|
+
Option 2
|
|
216
|
+
</label>
|
|
217
|
+
<label>
|
|
218
|
+
<input type="radio" name="grouped_radio" value="3" id="radio" />
|
|
219
|
+
Option 3
|
|
220
|
+
</label>
|
|
221
|
+
</li>
|
|
222
|
+
<li>
|
|
223
|
+
<input type="checkbox" name="checkbox" value="1" id="checkbox" />
|
|
224
|
+
<label for="checkbox">Checkbox</label>
|
|
225
|
+
</li>
|
|
226
|
+
<li>
|
|
227
|
+
<input type="radio" name="radio" value="1" id="radio" />
|
|
228
|
+
<label for="radio">Radio</label>
|
|
229
|
+
</li>
|
|
230
|
+
<li class="clear">
|
|
231
|
+
<button class="button">Simple Button</button>
|
|
232
|
+
<button class="large button">Large Button</button>
|
|
233
|
+
<button class="glossy button">Glossy Button</button>
|
|
234
|
+
<button class="glossy large button">Large Glossy Button</button>
|
|
235
|
+
<button class="gradient button">Gradient Button</button>
|
|
236
|
+
<button class="gradient large button">Large Gradient Button</button>
|
|
237
|
+
</li>
|
|
238
|
+
</ul>
|
|
239
|
+
</form>
|
|
240
|
+
</section>
|
|
241
|
+
<section id="tabs">
|
|
242
|
+
<h2 class="headline">Tab & Pill Navigations</h2>
|
|
243
|
+
<div class="tabbed">
|
|
244
|
+
<ul class="tab-navigation" data-pattern="tab">
|
|
245
|
+
<li class="active">
|
|
246
|
+
<a href="#tab1">Active Tab</a>
|
|
247
|
+
</li>
|
|
248
|
+
<li>
|
|
249
|
+
<a href="#tab2">Second Tab</a>
|
|
250
|
+
</li>
|
|
251
|
+
<li>
|
|
252
|
+
<a href="#tab3">Third Tab</a>
|
|
253
|
+
</li>
|
|
254
|
+
</ul>
|
|
255
|
+
<section class="tab active" id="tab1">
|
|
256
|
+
<h3>This is some content for the first tab.</h3>
|
|
257
|
+
<p>Nullam quis risus eget mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
|
258
|
+
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p>
|
|
259
|
+
</section>
|
|
260
|
+
<section class="tab" id="tab2">
|
|
261
|
+
<h3>This is some content for the second tab.</h3>
|
|
262
|
+
<p>Nullam quis risus eget mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
|
263
|
+
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p>
|
|
264
|
+
</section>
|
|
265
|
+
<section class="tab" id='tab3'>
|
|
266
|
+
<h3>This is some content for the third tab.</h3>
|
|
267
|
+
<p>Nullam quis risus eget mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
|
268
|
+
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p>
|
|
269
|
+
</section>
|
|
270
|
+
</div>
|
|
271
|
+
<div class="tabbed">
|
|
272
|
+
<ul class="pill-navigation" data-pattern="pill">
|
|
273
|
+
<li class="active">
|
|
274
|
+
<a href="#pill1">Active Tab</a>
|
|
275
|
+
</li>
|
|
276
|
+
<li>
|
|
277
|
+
<a href="#pill2">Second Tab</a>
|
|
278
|
+
</li>
|
|
279
|
+
<li>
|
|
280
|
+
<a href="#pill3">Third Tab</a>
|
|
281
|
+
</li>
|
|
282
|
+
</ul>
|
|
283
|
+
<section class="tab active" id="pill1">
|
|
284
|
+
<h3>This is some content for the first tab.</h3>
|
|
285
|
+
<p>Nullam quis risus eget mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
|
286
|
+
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p>
|
|
287
|
+
</section>
|
|
288
|
+
<section class="tab" id="pill2">
|
|
289
|
+
<h3>This is some content for the second tab.</h3>
|
|
290
|
+
<p>Nullam quis risus eget mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
|
291
|
+
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p>
|
|
292
|
+
</section>
|
|
293
|
+
<section class="tab" id='pill3'>
|
|
294
|
+
<h3>This is some content for the third tab.</h3>
|
|
295
|
+
<p>Nullam quis risus eget mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
|
296
|
+
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p>
|
|
297
|
+
</section>
|
|
298
|
+
</div>
|
|
299
|
+
</section>
|
|
300
|
+
</div>
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
require 'chunky_png'
|
|
2
|
+
|
|
3
|
+
module Facades
|
|
4
|
+
module Helpers
|
|
5
|
+
##
|
|
6
|
+
# Misc helpers for front-end development.
|
|
7
|
+
#
|
|
8
|
+
module Frontend
|
|
9
|
+
|
|
10
|
+
def placeholder_image(*args)
|
|
11
|
+
@_placeholder_image_cache ||= ImageCache.new
|
|
12
|
+
options = args.extract_options!
|
|
13
|
+
image_tag(@_placeholder_image_cache.get(args), options)
|
|
14
|
+
end
|
|
15
|
+
|
|
16
|
+
##
|
|
17
|
+
# Caches placeholder image data based on
|
|
18
|
+
# a md5 hash.
|
|
19
|
+
#
|
|
20
|
+
class ImageCache
|
|
21
|
+
|
|
22
|
+
def get(args)
|
|
23
|
+
hash = ::Digest::MD5.hexdigest("#{args.join('|')}")
|
|
24
|
+
return cache[hash] if cache[hash].present?
|
|
25
|
+
|
|
26
|
+
width = args.shift
|
|
27
|
+
height = (args.shift || width)
|
|
28
|
+
color = (args.shift || '#cccccc')
|
|
29
|
+
text = args.shift
|
|
30
|
+
|
|
31
|
+
cache[hash] = generate_png(width, height, color, text)
|
|
32
|
+
end
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
private
|
|
36
|
+
|
|
37
|
+
def cache
|
|
38
|
+
@_cache ||= {}
|
|
39
|
+
end
|
|
40
|
+
|
|
41
|
+
##
|
|
42
|
+
# Generates an image based on the provided parameters.
|
|
43
|
+
#
|
|
44
|
+
#
|
|
45
|
+
def generate_png(width, height, color, text = nil)
|
|
46
|
+
color = color.sub(/^#/, '')
|
|
47
|
+
color = "#{color}#{color}" if color.size <= 3
|
|
48
|
+
color = ChunkyPNG::Color.from_hex("##{color}")
|
|
49
|
+
image = ChunkyPNG::Image.new(width, height, color)
|
|
50
|
+
image.to_data_url
|
|
51
|
+
end
|
|
52
|
+
end
|
|
53
|
+
end
|
|
54
|
+
end
|
|
55
|
+
end
|
|
@@ -53,11 +53,18 @@ module Facades
|
|
|
53
53
|
# Renders the resulting html list, wrapped in a <nav> tag.
|
|
54
54
|
#
|
|
55
55
|
def render(&block)
|
|
56
|
-
wrap_attrs = options.delete(:wrapper)
|
|
56
|
+
wrap_attrs = options.delete(:wrapper)
|
|
57
57
|
heading = options.delete(:heading)
|
|
58
|
+
outer = :nav
|
|
58
59
|
|
|
59
60
|
unless wrap_attrs.is_a?(Hash)
|
|
60
|
-
|
|
61
|
+
|
|
62
|
+
if wrap_attrs === false
|
|
63
|
+
wrapper = :ul
|
|
64
|
+
outer = false
|
|
65
|
+
else
|
|
66
|
+
wrapper = wrap_attrs || :ul
|
|
67
|
+
end
|
|
61
68
|
wrap_attrs = {}
|
|
62
69
|
else
|
|
63
70
|
wrapper = wrap_attrs.delete(:tag) || :ul
|
|
@@ -73,8 +80,8 @@ module Facades
|
|
|
73
80
|
heading = generate_heading(heading)
|
|
74
81
|
output = heading << output
|
|
75
82
|
end
|
|
76
|
-
|
|
77
|
-
|
|
83
|
+
return output if outer === false
|
|
84
|
+
content_tag(outer, output, wrap_attrs)
|
|
78
85
|
end
|
|
79
86
|
|
|
80
87
|
##
|
|
@@ -28,7 +28,7 @@ module Facades
|
|
|
28
28
|
wrapper = attrs.delete(:wrapper) || :div
|
|
29
29
|
closer = attrs.delete(:closer)
|
|
30
30
|
unless closer === false
|
|
31
|
-
closer ||= "<span class='close'
|
|
31
|
+
closer ||= "<span class='close'>×</span>"
|
|
32
32
|
end
|
|
33
33
|
klasses = (attrs.delete(:class) || "").split(" ")
|
|
34
34
|
klasses << "flash-message"
|
data/lib/facades/helpers.rb
CHANGED
|
@@ -7,6 +7,9 @@ require 'sass/rails'
|
|
|
7
7
|
module Facades
|
|
8
8
|
class Engine < Rails::Engine
|
|
9
9
|
|
|
10
|
+
paths['app/views'] << Facades.view_path
|
|
11
|
+
paths['app/controllers'] << File.join(Facades.app_path, 'controllers')
|
|
12
|
+
|
|
10
13
|
initializer 'load facades assets' do |app|
|
|
11
14
|
app.config.sass.load_paths ||= []
|
|
12
15
|
app.config.sass.load_paths << Facades.scss_path
|
data/lib/facades/version.rb
CHANGED