flair 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- data/MIT-LICENSE +20 -0
- data/README.md +143 -0
- data/Rakefile +40 -0
- data/app/assets/javascripts/flair/application.js +15 -0
- data/app/assets/javascripts/flair/styleguide.js +2 -0
- data/app/assets/stylesheets/flair/application.css +4 -0
- data/app/assets/stylesheets/flair/core/chrome.css.scss +92 -0
- data/app/assets/stylesheets/flair/core/grid.css.scss +2 -0
- data/app/assets/stylesheets/flair/core/layouts.css.scss +5 -0
- data/app/assets/stylesheets/flair/core/mixins.css.scss +317 -0
- data/app/assets/stylesheets/flair/core/variables.css.scss +83 -0
- data/app/assets/stylesheets/flair/imports.css.scss +10 -0
- data/app/controllers/flair/application_controller.rb +4 -0
- data/app/controllers/flair/styleguides_controller.rb +12 -0
- data/app/helpers/flair/application_helper.rb +4 -0
- data/app/helpers/flair/styleguide_helper.rb +24 -0
- data/app/views/flair/styleguides/_navigation.html.erb +3 -0
- data/app/views/flair/styleguides/_styleguide_block.html.erb +22 -0
- data/app/views/flair/styleguides/buttons.html.erb +51 -0
- data/app/views/flair/styleguides/index.html.erb +21 -0
- data/app/views/layouts/flair/application.html.erb +29 -0
- data/config/routes.rb +7 -0
- data/lib/flair.rb +4 -0
- data/lib/flair/engine.rb +9 -0
- data/lib/flair/version.rb +3 -0
- data/lib/generators/flair/install/install_generator.rb +36 -0
- data/lib/generators/flair/install/templates/_navigation.html.erb +3 -0
- data/lib/generators/flair/install/templates/buttons.html.erb +5 -0
- data/lib/generators/flair/install/templates/flair-buttons.css +47 -0
- data/lib/tasks/flair_tasks.rake +4 -0
- data/test/dummy/README.rdoc +261 -0
- data/test/dummy/Rakefile +7 -0
- data/test/dummy/app/assets/javascripts/application.js +15 -0
- data/test/dummy/app/assets/stylesheets/application.css +13 -0
- data/test/dummy/app/assets/stylesheets/flair-buttons.css +47 -0
- data/test/dummy/app/controllers/application_controller.rb +3 -0
- data/test/dummy/app/helpers/application_helper.rb +2 -0
- data/test/dummy/app/views/flair/styleguides/_navigation.html.erb +3 -0
- data/test/dummy/app/views/flair/styleguides/buttons.html.erb +5 -0
- data/test/dummy/app/views/layouts/application.html.erb +14 -0
- data/test/dummy/config.ru +4 -0
- data/test/dummy/config/application.rb +59 -0
- data/test/dummy/config/boot.rb +10 -0
- data/test/dummy/config/database.yml +25 -0
- data/test/dummy/config/environment.rb +5 -0
- data/test/dummy/config/environments/development.rb +37 -0
- data/test/dummy/config/environments/production.rb +67 -0
- data/test/dummy/config/environments/test.rb +37 -0
- data/test/dummy/config/initializers/backtrace_silencers.rb +7 -0
- data/test/dummy/config/initializers/inflections.rb +15 -0
- data/test/dummy/config/initializers/mime_types.rb +5 -0
- data/test/dummy/config/initializers/secret_token.rb +7 -0
- data/test/dummy/config/initializers/session_store.rb +8 -0
- data/test/dummy/config/initializers/wrap_parameters.rb +14 -0
- data/test/dummy/config/locales/en.yml +5 -0
- data/test/dummy/config/routes.rb +3 -0
- data/test/dummy/db/development.sqlite3 +0 -0
- data/test/dummy/db/test.sqlite3 +0 -0
- data/test/dummy/log/development.log +45440 -0
- data/test/dummy/log/test.log +13 -0
- data/test/dummy/public/404.html +26 -0
- data/test/dummy/public/422.html +26 -0
- data/test/dummy/public/500.html +25 -0
- data/test/dummy/public/favicon.ico +0 -0
- data/test/dummy/script/rails +6 -0
- data/test/dummy/tmp/cache/assets/BFA/C40/sprockets%2F7903327920b3c0495e47624f935b0759 +0 -0
- data/test/dummy/tmp/cache/assets/C87/F70/sprockets%2F580d520e11914f4d84a8678565c3c4e4 +0 -0
- data/test/dummy/tmp/cache/assets/C8E/220/sprockets%2Ff607121417e18f5bb94985e23b29b499 +0 -0
- data/test/dummy/tmp/cache/assets/C96/E80/sprockets%2F77f0095cc86ba75d25c744975814875b +0 -0
- data/test/dummy/tmp/cache/assets/CC1/5B0/sprockets%2Fae3a4601e4c86d13125b0081e1173c6a +0 -0
- data/test/dummy/tmp/cache/assets/CD8/370/sprockets%2F357970feca3ac29060c1e3861e2c0953 +0 -0
- data/test/dummy/tmp/cache/assets/CE7/520/sprockets%2F77b568d285cc5f5075ca96d134271a4e +0 -0
- data/test/dummy/tmp/cache/assets/CE7/E00/sprockets%2Fe977d0b71fc865d87097bc4d1740121e +0 -0
- data/test/dummy/tmp/cache/assets/CF2/350/sprockets%2F25d6275f9d2ce3e2c8059cb558960c77 +0 -0
- data/test/dummy/tmp/cache/assets/CF8/650/sprockets%2F7a38dd60a8d1f7891d5995066cf8582b +0 -0
- data/test/dummy/tmp/cache/assets/CFB/8B0/sprockets%2F72c5c645f41698f9c96ff607487a5eb0 +0 -0
- data/test/dummy/tmp/cache/assets/D0B/920/sprockets%2F0d0638cc4ff3e6459e8d5295d0a3b040 +0 -0
- data/test/dummy/tmp/cache/assets/D32/A10/sprockets%2F13fe41fee1fe35b49d145bcc06610705 +0 -0
- data/test/dummy/tmp/cache/assets/D45/A10/sprockets%2F4c5d8152097545c4dbd4eded4d9d1185 +0 -0
- data/test/dummy/tmp/cache/assets/D5A/EA0/sprockets%2Fd771ace226fc8215a3572e0aa35bb0d6 +0 -0
- data/test/dummy/tmp/cache/assets/D5E/A70/sprockets%2Fd439960bd9bf145f7b7fe7ff7993551c +0 -0
- data/test/dummy/tmp/cache/assets/D66/4F0/sprockets%2F64f66d2b207f2eeaa0bb5781c76040ff +0 -0
- data/test/dummy/tmp/cache/assets/D7D/630/sprockets%2Fd640575fe9e6a459eeec4eb47362d25b +0 -0
- data/test/dummy/tmp/cache/assets/D8E/950/sprockets%2Fe5f46319cc4048c5fcbdc1b005edb350 +0 -0
- data/test/dummy/tmp/cache/assets/D97/3E0/sprockets%2F5d7ed5ad43bcfc8ce4d2e72120685b30 +0 -0
- data/test/dummy/tmp/cache/assets/D9B/D40/sprockets%2F36c43e2eb9a5bfbae2f464d7b9a61506 +0 -0
- data/test/dummy/tmp/cache/assets/DA1/5B0/sprockets%2Fd7c0376eaa490fcb70de9ff747d2a316 +0 -0
- data/test/dummy/tmp/cache/assets/DA5/9D0/sprockets%2F30b0de4297efac6cbe46482ab68829df +0 -0
- data/test/dummy/tmp/cache/assets/DA7/130/sprockets%2Fd6e091975df203e9b0cf88b6ecc33e5b +0 -0
- data/test/dummy/tmp/cache/assets/DAD/750/sprockets%2F08e21a7925b11ece1ca0da16cbce1a17 +0 -0
- data/test/dummy/tmp/cache/assets/DBF/B90/sprockets%2Fc0c0cde4bed6b1514a66a1bb2e75596e +0 -0
- data/test/dummy/tmp/cache/assets/DCE/8B0/sprockets%2Ffde142ea23abfe35f0507bf3d7f787c4 +0 -0
- data/test/dummy/tmp/cache/assets/DD5/6B0/sprockets%2F7ed5794579d5a22a04da1e28effaaee6 +0 -0
- data/test/dummy/tmp/cache/assets/DD5/E90/sprockets%2Fad9df9762c2c10a66df0a5f2b868d4fe +0 -0
- data/test/dummy/tmp/cache/assets/DDA/610/sprockets%2Fae2da67cef69af6885b803272a5fc8db +0 -0
- data/test/dummy/tmp/cache/assets/DFF/270/sprockets%2F59dba9573b86a6d1f1a5cc59ebc2cae4 +0 -0
- data/test/dummy/tmp/cache/assets/E05/300/sprockets%2Fc1629a2edf63e36bff280fedd644ef4c +0 -0
- data/test/dummy/tmp/cache/assets/E1A/130/sprockets%2Fcddc6ebe07a1afd182ec8cd340e20b26 +0 -0
- data/test/dummy/tmp/cache/assets/E1C/E50/sprockets%2F33faec66140b4cb1beaef663b53de0ed +0 -0
- data/test/dummy/tmp/cache/sass/16e54aa26ffb57dca9f991cfb2cdcc29ffbc7ff2/_grid.css.scssc +0 -0
- data/test/dummy/tmp/cache/sass/16e54aa26ffb57dca9f991cfb2cdcc29ffbc7ff2/_layouts.css.scssc +0 -0
- data/test/dummy/tmp/cache/sass/16e54aa26ffb57dca9f991cfb2cdcc29ffbc7ff2/_mixins.css.scssc +0 -0
- data/test/dummy/tmp/cache/sass/16e54aa26ffb57dca9f991cfb2cdcc29ffbc7ff2/_variables.css.scssc +0 -0
- data/test/dummy/tmp/cache/sass/16e54aa26ffb57dca9f991cfb2cdcc29ffbc7ff2/base.css.scssc +0 -0
- data/test/dummy/tmp/cache/sass/16e54aa26ffb57dca9f991cfb2cdcc29ffbc7ff2/chrome.css.scssc +0 -0
- data/test/dummy/tmp/cache/sass/16e54aa26ffb57dca9f991cfb2cdcc29ffbc7ff2/grid.css.scssc +0 -0
- data/test/dummy/tmp/cache/sass/16e54aa26ffb57dca9f991cfb2cdcc29ffbc7ff2/layouts.css.scssc +0 -0
- data/test/dummy/tmp/cache/sass/16e54aa26ffb57dca9f991cfb2cdcc29ffbc7ff2/mixins.css.scssc +0 -0
- data/test/dummy/tmp/cache/sass/16e54aa26ffb57dca9f991cfb2cdcc29ffbc7ff2/variables.css.scssc +0 -0
- data/test/dummy/tmp/cache/sass/29b6f4dab15a66dee92efff490e5d3ba9a073678/imports.css.scssc +0 -0
- data/test/dummy/tmp/cache/sass/cba3196169b5792c90aca9ae8aa809f687e7d3c9/_accordion.scssc +0 -0
- data/test/dummy/tmp/cache/sass/cba3196169b5792c90aca9ae8aa809f687e7d3c9/_alerts.scssc +0 -0
- data/test/dummy/tmp/cache/sass/cba3196169b5792c90aca9ae8aa809f687e7d3c9/_breadcrumbs.scssc +0 -0
- data/test/dummy/tmp/cache/sass/cba3196169b5792c90aca9ae8aa809f687e7d3c9/_button-groups.scssc +0 -0
- data/test/dummy/tmp/cache/sass/cba3196169b5792c90aca9ae8aa809f687e7d3c9/_buttons.scssc +0 -0
- data/test/dummy/tmp/cache/sass/cba3196169b5792c90aca9ae8aa809f687e7d3c9/_carousel.scssc +0 -0
- data/test/dummy/tmp/cache/sass/cba3196169b5792c90aca9ae8aa809f687e7d3c9/_close.scssc +0 -0
- data/test/dummy/tmp/cache/sass/cba3196169b5792c90aca9ae8aa809f687e7d3c9/_code.scssc +0 -0
- data/test/dummy/tmp/cache/sass/cba3196169b5792c90aca9ae8aa809f687e7d3c9/_component-animations.scssc +0 -0
- data/test/dummy/tmp/cache/sass/cba3196169b5792c90aca9ae8aa809f687e7d3c9/_dropdowns.scssc +0 -0
- data/test/dummy/tmp/cache/sass/cba3196169b5792c90aca9ae8aa809f687e7d3c9/_forms.scssc +0 -0
- data/test/dummy/tmp/cache/sass/cba3196169b5792c90aca9ae8aa809f687e7d3c9/_grid.scssc +0 -0
- data/test/dummy/tmp/cache/sass/cba3196169b5792c90aca9ae8aa809f687e7d3c9/_hero-unit.scssc +0 -0
- data/test/dummy/tmp/cache/sass/cba3196169b5792c90aca9ae8aa809f687e7d3c9/_labels-badges.scssc +0 -0
- data/test/dummy/tmp/cache/sass/cba3196169b5792c90aca9ae8aa809f687e7d3c9/_layouts.scssc +0 -0
- data/test/dummy/tmp/cache/sass/cba3196169b5792c90aca9ae8aa809f687e7d3c9/_mixins.scssc +0 -0
- data/test/dummy/tmp/cache/sass/cba3196169b5792c90aca9ae8aa809f687e7d3c9/_modals.scssc +0 -0
- data/test/dummy/tmp/cache/sass/cba3196169b5792c90aca9ae8aa809f687e7d3c9/_navbar.scssc +0 -0
- data/test/dummy/tmp/cache/sass/cba3196169b5792c90aca9ae8aa809f687e7d3c9/_navs.scssc +0 -0
- data/test/dummy/tmp/cache/sass/cba3196169b5792c90aca9ae8aa809f687e7d3c9/_pager.scssc +0 -0
- data/test/dummy/tmp/cache/sass/cba3196169b5792c90aca9ae8aa809f687e7d3c9/_pagination.scssc +0 -0
- data/test/dummy/tmp/cache/sass/cba3196169b5792c90aca9ae8aa809f687e7d3c9/_popovers.scssc +0 -0
- data/test/dummy/tmp/cache/sass/cba3196169b5792c90aca9ae8aa809f687e7d3c9/_progress-bars.scssc +0 -0
- data/test/dummy/tmp/cache/sass/cba3196169b5792c90aca9ae8aa809f687e7d3c9/_reset.scssc +0 -0
- data/test/dummy/tmp/cache/sass/cba3196169b5792c90aca9ae8aa809f687e7d3c9/_scaffolding.scssc +0 -0
- data/test/dummy/tmp/cache/sass/cba3196169b5792c90aca9ae8aa809f687e7d3c9/_sprites.scssc +0 -0
- data/test/dummy/tmp/cache/sass/cba3196169b5792c90aca9ae8aa809f687e7d3c9/_tables.scssc +0 -0
- data/test/dummy/tmp/cache/sass/cba3196169b5792c90aca9ae8aa809f687e7d3c9/_thumbnails.scssc +0 -0
- data/test/dummy/tmp/cache/sass/cba3196169b5792c90aca9ae8aa809f687e7d3c9/_tooltip.scssc +0 -0
- data/test/dummy/tmp/cache/sass/cba3196169b5792c90aca9ae8aa809f687e7d3c9/_type.scssc +0 -0
- data/test/dummy/tmp/cache/sass/cba3196169b5792c90aca9ae8aa809f687e7d3c9/_utilities.scssc +0 -0
- data/test/dummy/tmp/cache/sass/cba3196169b5792c90aca9ae8aa809f687e7d3c9/_variables.scssc +0 -0
- data/test/dummy/tmp/cache/sass/cba3196169b5792c90aca9ae8aa809f687e7d3c9/_wells.scssc +0 -0
- data/test/dummy/tmp/cache/sass/ccab0f7f31d65c265aca518a3ebd0cf1571cfad9/_bootstrap.scssc +0 -0
- data/test/flair_test.rb +7 -0
- data/test/functional/flair/styleguides_controller_test.rb +15 -0
- data/test/integration/navigation_test.rb +10 -0
- data/test/test_helper.rb +15 -0
- data/test/unit/helpers/flair/styleguides_helper_test.rb +6 -0
- metadata +383 -0
data/MIT-LICENSE
ADDED
@@ -0,0 +1,20 @@
|
|
1
|
+
Copyright 2012 YOURNAME
|
2
|
+
|
3
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
4
|
+
a copy of this software and associated documentation files (the
|
5
|
+
"Software"), to deal in the Software without restriction, including
|
6
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
7
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
8
|
+
permit persons to whom the Software is furnished to do so, subject to
|
9
|
+
the following conditions:
|
10
|
+
|
11
|
+
The above copyright notice and this permission notice shall be
|
12
|
+
included in all copies or substantial portions of the Software.
|
13
|
+
|
14
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
15
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
16
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
17
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
18
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
19
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
20
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,143 @@
|
|
1
|
+
Flair
|
2
|
+
==========================
|
3
|
+
|
4
|
+
Flair is designed to make adding an interactive styleguide to your Rails 3
|
5
|
+
application a snap.
|
6
|
+
|
7
|
+
A little bit about Flair
|
8
|
+
--------------------------
|
9
|
+
|
10
|
+
The idea for Flair came after I discovered [KSS by Kyle Neath](https://github.com/kneath/kss).
|
11
|
+
Using a very specific commenting style in your stylesheets, Flair will provide
|
12
|
+
you the ability to quickly create styleguide blocks for the different components
|
13
|
+
of your website.
|
14
|
+
|
15
|
+
Flair depends on the [KSS gem](https://github.com/kneath/kss).
|
16
|
+
|
17
|
+
How does this work?
|
18
|
+
--------------------------
|
19
|
+
|
20
|
+
Traditionally, if you were to create a styleguide for you website, you would
|
21
|
+
need to create a new element for each variation of your component. Take a
|
22
|
+
stylized button for example. You would need to have a different HTML block for
|
23
|
+
it's normal state, hover state, active state, disabled state, etc. That's a lot
|
24
|
+
of coding (or copy and pasting).
|
25
|
+
|
26
|
+
With Flair, all you need to do is comment the code for your button, then add
|
27
|
+
one block of HTML wrapped in a helper and voila! Flair will automatically create
|
28
|
+
each of the states you specify.
|
29
|
+
|
30
|
+
So how does this happen? Here, let me show you.
|
31
|
+
|
32
|
+
Say you have the following in your `app/assets/stylesheets/buttons.css.scss`
|
33
|
+
file:
|
34
|
+
|
35
|
+
```css
|
36
|
+
.btn {
|
37
|
+
background-color: #f9f9f9;
|
38
|
+
|
39
|
+
cursor: pointer;
|
40
|
+
display: inline-block;
|
41
|
+
padding: 4px 10px;
|
42
|
+
margin-bottom: 0;
|
43
|
+
|
44
|
+
color: #353535;
|
45
|
+
font-size: 13px;
|
46
|
+
line-height: 1.2;
|
47
|
+
text-align: center;
|
48
|
+
vertical-align: middle;
|
49
|
+
|
50
|
+
border: 1px solid #555;
|
51
|
+
border-radius: 3px;
|
52
|
+
}
|
53
|
+
|
54
|
+
.btn:hover {
|
55
|
+
background-color: #c9c9c9;
|
56
|
+
color: #353535;
|
57
|
+
text-decoration: none; // just in case this is a link
|
58
|
+
}
|
59
|
+
|
60
|
+
.btn:active {
|
61
|
+
background-color: #666;
|
62
|
+
color: #f8f8f8;
|
63
|
+
}
|
64
|
+
```
|
65
|
+
|
66
|
+
Now, that's just the base styling for this button, but we already have 3
|
67
|
+
different states that the button can be in: normal, hovered, and active. To
|
68
|
+
utilize Flair all you need to do is add a comment to the element you want to
|
69
|
+
show in your styleguide. So in this case, we would add it to the core style, the
|
70
|
+
`.btn`.
|
71
|
+
|
72
|
+
```css
|
73
|
+
/*
|
74
|
+
Turns the element with this class into a stylized button. Typically used on
|
75
|
+
<a> or <button> elements.
|
76
|
+
|
77
|
+
:hover - sets the style for when the user hover their mouse over the element
|
78
|
+
:active - sets the style for when the user click the button
|
79
|
+
|
80
|
+
Styleguide 1.0
|
81
|
+
*/
|
82
|
+
.btn {
|
83
|
+
background-color: #f9f9f9;
|
84
|
+
|
85
|
+
cursor: pointer;
|
86
|
+
display: inline-block;
|
87
|
+
padding: 4px 10px;
|
88
|
+
margin-bottom: 0;
|
89
|
+
|
90
|
+
color: #353535;
|
91
|
+
font-size: 13px;
|
92
|
+
line-height: 1.2;
|
93
|
+
text-align: center;
|
94
|
+
vertical-align: middle;
|
95
|
+
|
96
|
+
border: 1px solid #555;
|
97
|
+
border-radius: 3px;
|
98
|
+
}
|
99
|
+
|
100
|
+
.btn:hover,
|
101
|
+
.btn.pseudo-class-hover {
|
102
|
+
background-color: #c9c9c9;
|
103
|
+
color: #353535;
|
104
|
+
text-decoration: none; // just in case this is a link
|
105
|
+
}
|
106
|
+
|
107
|
+
.btn:active,
|
108
|
+
.btn.pseudo-class-active {
|
109
|
+
background-color: #666;
|
110
|
+
color: #f8f8f8;
|
111
|
+
}
|
112
|
+
```
|
113
|
+
|
114
|
+
I won't go into detail as to how you lay out the comments as Kyle does a good
|
115
|
+
job of that on the [KSS page](http://github.com/kneath/kss). However, there
|
116
|
+
is a very important change that I made to the CSS itself. YOu may have noticed
|
117
|
+
that I added 2 new classes: `.pseudo-class-hover` and `.pseudo-class-active`.
|
118
|
+
These are specific to the KSS Ruby parser and are dynamically created when
|
119
|
+
your stylesheets are parsed. These will come in handy, trust me.
|
120
|
+
|
121
|
+
So, in our comment block we have specified a description for our button widget,
|
122
|
+
alternate states that it can have and the styleguide section that we should
|
123
|
+
look at to see how the button appears. pretty simple right? I mean, you are
|
124
|
+
probably already commenting your CSS anyway right?
|
125
|
+
|
126
|
+
Now onto the magic. You will need to create a new file in
|
127
|
+
`app/view/flair/styleguide/` called `buttons.html.erb`. This filename can be
|
128
|
+
anything you want really, but `buttons.html.erb` makes sense since that is
|
129
|
+
what you are showing. In that file you will want to add the following code.
|
130
|
+
|
131
|
+
```erb
|
132
|
+
<%= styleguide_block '1.0' do %>
|
133
|
+
<button class='btn $modifier_class'>I am a button</button>
|
134
|
+
<%- end -%>
|
135
|
+
```
|
136
|
+
|
137
|
+
That's it! When you create your example HTML you will need to make sure you
|
138
|
+
add the `$modifier_class` class. This is a special classname that will be
|
139
|
+
dynamically changed to any of the alternate states that you reference in your
|
140
|
+
stylesheet. This is also why we had to add those 2 new pseudo class names for
|
141
|
+
`:hover` and `:active`. The result will look something like this:
|
142
|
+
|
143
|
+
Insert Image Here
|
data/Rakefile
ADDED
@@ -0,0 +1,40 @@
|
|
1
|
+
#!/usr/bin/env rake
|
2
|
+
begin
|
3
|
+
require 'bundler/setup'
|
4
|
+
rescue LoadError
|
5
|
+
puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
|
6
|
+
end
|
7
|
+
begin
|
8
|
+
require 'rdoc/task'
|
9
|
+
rescue LoadError
|
10
|
+
require 'rdoc/rdoc'
|
11
|
+
require 'rake/rdoctask'
|
12
|
+
RDoc::Task = Rake::RDocTask
|
13
|
+
end
|
14
|
+
|
15
|
+
RDoc::Task.new(:rdoc) do |rdoc|
|
16
|
+
rdoc.rdoc_dir = 'rdoc'
|
17
|
+
rdoc.title = 'Flair'
|
18
|
+
rdoc.options << '--line-numbers'
|
19
|
+
rdoc.rdoc_files.include('README.rdoc')
|
20
|
+
rdoc.rdoc_files.include('lib/**/*.rb')
|
21
|
+
end
|
22
|
+
|
23
|
+
APP_RAKEFILE = File.expand_path("../test/dummy/Rakefile", __FILE__)
|
24
|
+
load 'rails/tasks/engine.rake'
|
25
|
+
|
26
|
+
|
27
|
+
|
28
|
+
Bundler::GemHelper.install_tasks
|
29
|
+
|
30
|
+
require 'rake/testtask'
|
31
|
+
|
32
|
+
Rake::TestTask.new(:test) do |t|
|
33
|
+
t.libs << 'lib'
|
34
|
+
t.libs << 'test'
|
35
|
+
t.pattern = 'test/**/*_test.rb'
|
36
|
+
t.verbose = false
|
37
|
+
end
|
38
|
+
|
39
|
+
|
40
|
+
task :default => :test
|
@@ -0,0 +1,15 @@
|
|
1
|
+
// This is a manifest file that'll be compiled into application.js, which will include all the files
|
2
|
+
// listed below.
|
3
|
+
//
|
4
|
+
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
|
5
|
+
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
|
6
|
+
//
|
7
|
+
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
|
8
|
+
// the compiled file.
|
9
|
+
//
|
10
|
+
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
|
11
|
+
// GO AFTER THE REQUIRES BELOW.
|
12
|
+
//
|
13
|
+
//= require jquery
|
14
|
+
//= require jquery_ujs
|
15
|
+
//= require_tree .
|
@@ -0,0 +1,92 @@
|
|
1
|
+
/*
|
2
|
+
Wrapper for a styleguide example
|
3
|
+
|
4
|
+
No styleguide reference
|
5
|
+
*/
|
6
|
+
.flair-styleguide-example {
|
7
|
+
border: 1px solid;
|
8
|
+
border-radius: 3px;
|
9
|
+
@include box-shadow(0 0 8px 2px $flairGrayLight);
|
10
|
+
}
|
11
|
+
|
12
|
+
.flair-styleguide-title {
|
13
|
+
@include font-sans-serif();
|
14
|
+
|
15
|
+
background-color: #353535;
|
16
|
+
color: $flairWhite;
|
17
|
+
font-size: 1.4em;
|
18
|
+
margin: 0;
|
19
|
+
padding: 18px 15px;
|
20
|
+
|
21
|
+
.pull-right {
|
22
|
+
float: right;
|
23
|
+
}
|
24
|
+
|
25
|
+
small {
|
26
|
+
font-size: $flairBaseFontSize;
|
27
|
+
}
|
28
|
+
}
|
29
|
+
|
30
|
+
.flair-styleguide-description {
|
31
|
+
@include font-sans-serif();
|
32
|
+
background-color: #f8f8f8;
|
33
|
+
border-bottom: 1px solid $flairGrayLight;
|
34
|
+
padding: 15px;
|
35
|
+
}
|
36
|
+
|
37
|
+
.flair-styleguide-element {
|
38
|
+
@include clearfix();
|
39
|
+
|
40
|
+
border-bottom: 1px solid $flairGrayLight;
|
41
|
+
|
42
|
+
padding: 15px;
|
43
|
+
position: relative;
|
44
|
+
|
45
|
+
&:last-of-type {
|
46
|
+
border-bottom: 0;
|
47
|
+
}
|
48
|
+
|
49
|
+
&:hover .flair-styleguide-modifier-name {
|
50
|
+
border-color: $flairGrayLight;
|
51
|
+
color: $flairGrayLight;
|
52
|
+
}
|
53
|
+
}
|
54
|
+
|
55
|
+
.flair-styleguide-modifier-name {
|
56
|
+
border: 1px solid $flairGrayLighter;
|
57
|
+
border-top: 0;
|
58
|
+
|
59
|
+
color: $flairGrayLighter;
|
60
|
+
text-align: center;
|
61
|
+
|
62
|
+
padding: 4px 8px;
|
63
|
+
position: absolute;
|
64
|
+
right: 15px;
|
65
|
+
top: 0;
|
66
|
+
}
|
67
|
+
|
68
|
+
.flair-page-header {
|
69
|
+
@include font-sans-serif();
|
70
|
+
border-bottom: 1px solid $flairGrayLight;
|
71
|
+
margin-bottom: 15px;
|
72
|
+
|
73
|
+
a {
|
74
|
+
color: #5f5f5f;
|
75
|
+
text-decoration: none;
|
76
|
+
}
|
77
|
+
}
|
78
|
+
|
79
|
+
.flair-styleguide-navigation {
|
80
|
+
@include font-sans-serif();
|
81
|
+
|
82
|
+
a {
|
83
|
+
color: $flairBlue;
|
84
|
+
font-size: 1.1em;
|
85
|
+
text-decoration: none;
|
86
|
+
|
87
|
+
&.active {
|
88
|
+
color: $flairGray;
|
89
|
+
font-weight: bold;
|
90
|
+
}
|
91
|
+
}
|
92
|
+
}
|
@@ -0,0 +1,317 @@
|
|
1
|
+
// Mixins
|
2
|
+
// Snippets of reusable CSS to develop faster and keep code readable
|
3
|
+
// -----------------------------------------------------------------
|
4
|
+
|
5
|
+
|
6
|
+
// UTILITY MIXINS
|
7
|
+
// --------------------------------------------------
|
8
|
+
|
9
|
+
// Clearfix
|
10
|
+
// --------
|
11
|
+
// For clearing floats like a boss h5bp.com/q
|
12
|
+
@mixin clearfix() {
|
13
|
+
*zoom: 1;
|
14
|
+
&:before,
|
15
|
+
&:after {
|
16
|
+
display: table;
|
17
|
+
content: "";
|
18
|
+
}
|
19
|
+
&:after {
|
20
|
+
clear: both;
|
21
|
+
}
|
22
|
+
}
|
23
|
+
.clearfix { @include clearfix(); }
|
24
|
+
|
25
|
+
// Webkit-style focus
|
26
|
+
// ------------------
|
27
|
+
@mixin tab-focus() {
|
28
|
+
// Default
|
29
|
+
outline: thin dotted #333;
|
30
|
+
// Webkit
|
31
|
+
outline: 5px auto -webkit-focus-ring-color;
|
32
|
+
outline-offset: -2px;
|
33
|
+
}
|
34
|
+
|
35
|
+
// Center-align a block level element
|
36
|
+
// ----------------------------------
|
37
|
+
@mixin center-block() {
|
38
|
+
display: block;
|
39
|
+
margin-left: auto;
|
40
|
+
margin-right: auto;
|
41
|
+
}
|
42
|
+
|
43
|
+
// IE7 inline-block
|
44
|
+
// ----------------
|
45
|
+
@mixin ie7-inline-block() {
|
46
|
+
*display: inline; /* IE7 inline-block hack */
|
47
|
+
*zoom: 1;
|
48
|
+
}
|
49
|
+
|
50
|
+
// IE7 likes to collapse whitespace on either side of the inline-block elements.
|
51
|
+
// Ems because we're attempting to match the width of a space character. Left
|
52
|
+
// version is for form buttons, which typically come after other elements, and
|
53
|
+
// right version is for icons, which come before. Applying both is ok, but it will
|
54
|
+
// mean that space between those elements will be .6em (~2 space characters) in IE7,
|
55
|
+
// instead of the 1 space in other browsers.
|
56
|
+
@mixin ie7-restore-left-whitespace() {
|
57
|
+
*margin-left: .3em;
|
58
|
+
|
59
|
+
&:first-child {
|
60
|
+
*margin-left: 0;
|
61
|
+
}
|
62
|
+
}
|
63
|
+
|
64
|
+
@mixin ie7-restore-right-whitespace() {
|
65
|
+
*margin-right: .3em;
|
66
|
+
|
67
|
+
&:last-child {
|
68
|
+
*margin-left: 0;
|
69
|
+
}
|
70
|
+
}
|
71
|
+
|
72
|
+
// FONTS
|
73
|
+
// --------------------------------------------------
|
74
|
+
@mixin font-family-serif() {
|
75
|
+
font-family: $flairSerifFontFamily;
|
76
|
+
}
|
77
|
+
@mixin font-family-sans-serif() {
|
78
|
+
font-family: $flairSansFontFamily;
|
79
|
+
}
|
80
|
+
@mixin font-family-monospace() {
|
81
|
+
font-family: $flairMonoFontFamily;
|
82
|
+
}
|
83
|
+
@mixin font-shorthand($size: $flairBaseFontSize, $weight: normal, $lineHeight: $flairBaseLineHeight) {
|
84
|
+
font-size: $size;
|
85
|
+
font-weight: $weight;
|
86
|
+
line-height: $lineHeight;
|
87
|
+
}
|
88
|
+
@mixin font-serif($size: $flairBaseFontSize, $weight: normal, $lineHeight: $flairBaseLineHeight) {
|
89
|
+
@include font-family-serif();
|
90
|
+
@include font-shorthand($size, $weight, $lineHeight);
|
91
|
+
}
|
92
|
+
@mixin font-sans-serif($size: $flairBaseFontSize, $weight: normal, $lineHeight: $flairBaseLineHeight) {
|
93
|
+
@include font-family-sans-serif();
|
94
|
+
@include font-shorthand($size, $weight, $lineHeight);
|
95
|
+
}
|
96
|
+
@mixin font-monospace($size: $flairBaseFontSize, $weight: normal, $lineHeight: $flairBaseLineHeight) {
|
97
|
+
@include font-family-monospace();
|
98
|
+
@include font-shorthand($size, $weight, $lineHeight);
|
99
|
+
}
|
100
|
+
|
101
|
+
|
102
|
+
// CSS3 PROPERTIES
|
103
|
+
// --------------------------------------------------
|
104
|
+
|
105
|
+
// Border Radius
|
106
|
+
@mixin border-radius($radius) {
|
107
|
+
-webkit-border-radius: $radius;
|
108
|
+
-moz-border-radius: $radius;
|
109
|
+
border-radius: $radius;
|
110
|
+
}
|
111
|
+
|
112
|
+
// Drop shadows
|
113
|
+
@mixin box-shadow($shadow) {
|
114
|
+
-webkit-box-shadow: $shadow;
|
115
|
+
-moz-box-shadow: $shadow;
|
116
|
+
box-shadow: $shadow;
|
117
|
+
}
|
118
|
+
|
119
|
+
|
120
|
+
// Box sizing
|
121
|
+
@mixin box-sizing($boxmodel) {
|
122
|
+
-webkit-box-sizing: $boxmodel;
|
123
|
+
-moz-box-sizing: $boxmodel;
|
124
|
+
-ms-box-sizing: $boxmodel;
|
125
|
+
box-sizing: $boxmodel;
|
126
|
+
}
|
127
|
+
|
128
|
+
// User select
|
129
|
+
// For selecting text on the page
|
130
|
+
@mixin user-select($select) {
|
131
|
+
-webkit-user-select: $select;
|
132
|
+
-moz-user-select: $select;
|
133
|
+
-ms-user-select: $select;
|
134
|
+
-o-user-select: $select;
|
135
|
+
user-select: $select;
|
136
|
+
}
|
137
|
+
|
138
|
+
// CSS3 Content Columns
|
139
|
+
@mixin content-columns($columnCount, $columnGap: $gridGutterWidth) {
|
140
|
+
-webkit-column-count: $columnCount;
|
141
|
+
-moz-column-count: $columnCount;
|
142
|
+
column-count: $columnCount;
|
143
|
+
-webkit-column-gap: $columnGap;
|
144
|
+
-moz-column-gap: $columnGap;
|
145
|
+
column-gap: $columnGap;
|
146
|
+
}
|
147
|
+
|
148
|
+
|
149
|
+
// Optional hyphenation
|
150
|
+
@mixin hyphens($mode: auto) {
|
151
|
+
word-wrap: break-word;
|
152
|
+
-webkit-hyphens: $mode;
|
153
|
+
-moz-hyphens: $mode;
|
154
|
+
-ms-hyphens: $mode;
|
155
|
+
-o-hyphens: $mode;
|
156
|
+
hyphens: $mode;
|
157
|
+
}
|
158
|
+
|
159
|
+
// Opacity
|
160
|
+
@mixin opacity($opacity: 1) {
|
161
|
+
opacity: $opacity;
|
162
|
+
filter: alpha(opacity=#{$opacity * 100});
|
163
|
+
}
|
164
|
+
|
165
|
+
|
166
|
+
|
167
|
+
// BACKGROUNDS
|
168
|
+
// --------------------------------------------------
|
169
|
+
|
170
|
+
// Add an alphatransparency value to any background or border color (via Elyse Holladay)
|
171
|
+
@mixin translucent-background($color: $white, $alpha: 1) {
|
172
|
+
background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
|
173
|
+
}
|
174
|
+
@mixin translucent-border($color: $white, $alpha: 1) {
|
175
|
+
border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
|
176
|
+
@include background-clip(padding-box);
|
177
|
+
}
|
178
|
+
|
179
|
+
// Gradient Bar Colors for buttons and alerts
|
180
|
+
@mixin gradientBar($primaryColor, $secondaryColor) {
|
181
|
+
@include gradient-vertical($primaryColor, $secondaryColor);
|
182
|
+
border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%);
|
183
|
+
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
|
184
|
+
}
|
185
|
+
|
186
|
+
// Gradients
|
187
|
+
@mixin gradient-horizontal($startColor: #555, $endColor: #333) {
|
188
|
+
background-color: $endColor;
|
189
|
+
background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
|
190
|
+
background-image: -ms-linear-gradient(left, $startColor, $endColor); // IE10
|
191
|
+
background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
|
192
|
+
background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+
|
193
|
+
background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
|
194
|
+
background-image: linear-gradient(left, $startColor, $endColor); // Le standard
|
195
|
+
background-repeat: repeat-x;
|
196
|
+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=1); // IE9 and down
|
197
|
+
}
|
198
|
+
@mixin gradient-vertical($startColor: #555, $endColor: #333) {
|
199
|
+
background-color: mix($startColor, $endColor, 60%);
|
200
|
+
background-image: -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+
|
201
|
+
background-image: -ms-linear-gradient(top, $startColor, $endColor); // IE10
|
202
|
+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
|
203
|
+
background-image: -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+
|
204
|
+
background-image: -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10
|
205
|
+
background-image: linear-gradient(top, $startColor, $endColor); // The standard
|
206
|
+
background-repeat: repeat-x;
|
207
|
+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=0); // IE9 and down
|
208
|
+
}
|
209
|
+
@mixin gradient-directional($startColor: #555, $endColor: #333, $deg: 45deg) {
|
210
|
+
background-color: $endColor;
|
211
|
+
background-repeat: repeat-x;
|
212
|
+
background-image: -moz-linear-gradient($deg, $startColor, $endColor); // FF 3.6+
|
213
|
+
background-image: -ms-linear-gradient($deg, $startColor, $endColor); // IE10
|
214
|
+
background-image: -webkit-linear-gradient($deg, $startColor, $endColor); // Safari 5.1+, Chrome 10+
|
215
|
+
background-image: -o-linear-gradient($deg, $startColor, $endColor); // Opera 11.10
|
216
|
+
background-image: linear-gradient($deg, $startColor, $endColor); // The standard
|
217
|
+
}
|
218
|
+
@mixin gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
|
219
|
+
background-color: mix($midColor, $endColor, 80%);
|
220
|
+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor));
|
221
|
+
background-image: -webkit-linear-gradient($startColor, $midColor $colorStop, $endColor);
|
222
|
+
background-image: -moz-linear-gradient(top, $startColor, $midColor $colorStop, $endColor);
|
223
|
+
background-image: -ms-linear-gradient($startColor, $midColor $colorStop, $endColor);
|
224
|
+
background-image: -o-linear-gradient($startColor, $midColor $colorStop, $endColor);
|
225
|
+
background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
|
226
|
+
background-repeat: no-repeat;
|
227
|
+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
|
228
|
+
}
|
229
|
+
@mixin gradient-radial($innerColor: #555, $outerColor: #333) {
|
230
|
+
background-color: $outerColor;
|
231
|
+
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor), to($outerColor));
|
232
|
+
background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor);
|
233
|
+
background-image: -moz-radial-gradient(circle, $innerColor, $outerColor);
|
234
|
+
background-image: -ms-radial-gradient(circle, $innerColor, $outerColor);
|
235
|
+
background-image: -o-radial-gradient(circle, $innerColor, $outerColor);
|
236
|
+
background-repeat: no-repeat;
|
237
|
+
}
|
238
|
+
@mixin gradient-striped($color, $angle: -45deg) {
|
239
|
+
background-color: $color;
|
240
|
+
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
|
241
|
+
background-image: -webkit-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
|
242
|
+
background-image: -moz-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
|
243
|
+
background-image: -ms-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
|
244
|
+
background-image: -o-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
|
245
|
+
background-image: linear-gradient($angle, rgba(255,255,255,.15) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0));
|
246
|
+
}
|
247
|
+
// Reset filters for IE
|
248
|
+
@mixin reset-filter() {
|
249
|
+
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
|
250
|
+
}
|
251
|
+
|
252
|
+
|
253
|
+
|
254
|
+
|
255
|
+
// Grid System
|
256
|
+
// -----------
|
257
|
+
|
258
|
+
// Centered container element
|
259
|
+
@mixin container-fixed() {
|
260
|
+
margin-right: auto;
|
261
|
+
margin-left: auto;
|
262
|
+
@include clearfix();
|
263
|
+
}
|
264
|
+
|
265
|
+
// Table columns
|
266
|
+
@mixin tableColumns($columnSpan: 1) {
|
267
|
+
float: none; // undo default grid column styles
|
268
|
+
width: (($flairGridColumnWidth) * $columnSpan) + ($flairGridGutterWidth * ($columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
|
269
|
+
margin-left: 0; // undo default grid column styles
|
270
|
+
}
|
271
|
+
|
272
|
+
// Make a Grid
|
273
|
+
// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
|
274
|
+
@mixin makeRow() {
|
275
|
+
margin-left: $flairGridGutterWidth * -1;
|
276
|
+
@include clearfix();
|
277
|
+
}
|
278
|
+
@mixin makeColumn($columns: 1, $offset: 0) {
|
279
|
+
float: left;
|
280
|
+
margin-left: ($flairGridColumnWidth * $offset) + ($flairGridGutterWidth * ($offset - 1)) + ($flairGridGutterWidth * 2);
|
281
|
+
width: ($flairGridColumnWidth * $columns) + ($flairGridGutterWidth * ($columns - 1));
|
282
|
+
}
|
283
|
+
|
284
|
+
// The Grid
|
285
|
+
@mixin gridCore($columnWidth, $gutterWidth) {
|
286
|
+
.flair-row {
|
287
|
+
margin-left: $gutterWidth * -1;
|
288
|
+
@include clearfix();
|
289
|
+
}
|
290
|
+
|
291
|
+
[class*="flair-span"] {
|
292
|
+
float: left;
|
293
|
+
margin-left: $gutterWidth;
|
294
|
+
}
|
295
|
+
|
296
|
+
// Set the container width, and override it for fixed navbars in media queries
|
297
|
+
.flair-container { @include gridCoreSpan($flairGridColumns, $columnWidth, $gutterWidth); }
|
298
|
+
|
299
|
+
@include gridCoreSpanX($flairGridColumns, $columnWidth, $gutterWidth);
|
300
|
+
@include gridCoreOffsetX($flairGridColumns, $columnWidth, $gutterWidth);
|
301
|
+
}
|
302
|
+
@mixin gridCoreSpanX($cols, $columnWidth, $gutterWidth) {
|
303
|
+
@for $i from 1 through $cols {
|
304
|
+
.flair-span#{$i} { @include gridCoreSpan($i, $columnWidth, $gutterWidth) };
|
305
|
+
}
|
306
|
+
}
|
307
|
+
@mixin gridCoreSpan($columns, $columnWidth, $gutterWidth) {
|
308
|
+
width: ($columnWidth * $columns) + ($gutterWidth * ($columns - 1));
|
309
|
+
}
|
310
|
+
@mixin gridCoreOffsetX($cols, $columnWidth, $gutterWidth) {
|
311
|
+
@for $i from 1 through $cols {
|
312
|
+
.flair-offset#{$i} { @include gridCoreOffset($i, $columnWidth, $gutterWidth); };
|
313
|
+
}
|
314
|
+
}
|
315
|
+
@mixin gridCoreOffset($columns, $columnWidth, $gutterWidth) {
|
316
|
+
margin-left: ($columnWidth * $columns) + ($gutterWidth * ($columns + 1));
|
317
|
+
}
|