flat-ui-sass 2.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/.gitignore +18 -0
- data/.gitmodules +3 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +22 -0
- data/README.md +256 -0
- data/Rakefile +14 -0
- data/app/helpers/flat_ui/rails/icon_helper.rb +60 -0
- data/bin/fui_convert +9 -0
- data/flat-ui-sass.gemspec +28 -0
- data/lib/flat-ui-sass.rb +98 -0
- data/lib/flat-ui-sass/cli.rb +56 -0
- data/lib/flat-ui-sass/engine.rb +13 -0
- data/lib/flat-ui-sass/sass_functions.rb +56 -0
- data/lib/flat-ui-sass/version.rb +4 -0
- data/lib/tasks/converter.rb +99 -0
- data/lib/tasks/converter/filesystem.rb +16 -0
- data/lib/tasks/converter/flat_ui_fonts_conversion.rb +19 -0
- data/lib/tasks/converter/flat_ui_images_conversion.rb +19 -0
- data/lib/tasks/converter/flat_ui_js_conversion.rb +28 -0
- data/lib/tasks/converter/flat_ui_less_conversion.rb +328 -0
- data/lib/tasks/converter/logger.rb +61 -0
- data/lib/tasks/flat-ui-sass.rake +8 -0
- data/templates/project/_variables.scss.erb +5 -0
- data/templates/project/manifest.rb +57 -0
- data/templates/project/styles.scss +4 -0
- data/vendor/assets/fonts/flat-ui/flat-ui-icons-regular.eot +0 -0
- data/vendor/assets/fonts/flat-ui/flat-ui-icons-regular.svg +140 -0
- data/vendor/assets/fonts/flat-ui/flat-ui-icons-regular.ttf +0 -0
- data/vendor/assets/fonts/flat-ui/flat-ui-icons-regular.woff +0 -0
- data/vendor/assets/images/flat-ui/icons/png/Book.png +0 -0
- data/vendor/assets/images/flat-ui/icons/png/Calendar.png +0 -0
- data/vendor/assets/images/flat-ui/icons/png/Chat.png +0 -0
- data/vendor/assets/images/flat-ui/icons/png/Clipboard.png +0 -0
- data/vendor/assets/images/flat-ui/icons/png/Compas.png +0 -0
- data/vendor/assets/images/flat-ui/icons/png/Gift-Box.png +0 -0
- data/vendor/assets/images/flat-ui/icons/png/Infinity-Loop.png +0 -0
- data/vendor/assets/images/flat-ui/icons/png/Mail.png +0 -0
- data/vendor/assets/images/flat-ui/icons/png/Map.png +0 -0
- data/vendor/assets/images/flat-ui/icons/png/Pensils.png +0 -0
- data/vendor/assets/images/flat-ui/icons/png/Pocket.png +0 -0
- data/vendor/assets/images/flat-ui/icons/png/Retina-Ready.png +0 -0
- data/vendor/assets/images/flat-ui/icons/png/Toilet-Paper.png +0 -0
- data/vendor/assets/images/flat-ui/icons/png/Watches.png +0 -0
- data/vendor/assets/images/flat-ui/icons/svg/book.svg +1 -0
- data/vendor/assets/images/flat-ui/icons/svg/calendar.svg +1 -0
- data/vendor/assets/images/flat-ui/icons/svg/chat.svg +1 -0
- data/vendor/assets/images/flat-ui/icons/svg/clipboard.svg +1 -0
- data/vendor/assets/images/flat-ui/icons/svg/clocks.svg +9 -0
- data/vendor/assets/images/flat-ui/icons/svg/compas.svg +1 -0
- data/vendor/assets/images/flat-ui/icons/svg/gift-box.svg +1 -0
- data/vendor/assets/images/flat-ui/icons/svg/loop.svg +5 -0
- data/vendor/assets/images/flat-ui/icons/svg/mail.svg +1 -0
- data/vendor/assets/images/flat-ui/icons/svg/map.svg +1 -0
- data/vendor/assets/images/flat-ui/icons/svg/paper-bag.svg +1 -0
- data/vendor/assets/images/flat-ui/icons/svg/pencils.svg +1 -0
- data/vendor/assets/images/flat-ui/icons/svg/retina.svg +1 -0
- data/vendor/assets/images/flat-ui/icons/svg/toilet-paper.svg +1 -0
- data/vendor/assets/images/flat-ui/login/icon.png +0 -0
- data/vendor/assets/images/flat-ui/login/imac-2x.png +0 -0
- data/vendor/assets/images/flat-ui/login/imac.png +0 -0
- data/vendor/assets/images/flat-ui/switch/mask-square.png +0 -0
- data/vendor/assets/images/flat-ui/switch/mask.png +0 -0
- data/vendor/assets/images/flat-ui/tile/ribbon-2x.png +0 -0
- data/vendor/assets/images/flat-ui/tile/ribbon.png +0 -0
- data/vendor/assets/images/flat-ui/todo/done-2x.png +0 -0
- data/vendor/assets/images/flat-ui/todo/done.png +0 -0
- data/vendor/assets/images/flat-ui/todo/search-2x.png +0 -0
- data/vendor/assets/images/flat-ui/todo/search.png +0 -0
- data/vendor/assets/images/flat-ui/todo/todo-2x.png +0 -0
- data/vendor/assets/images/flat-ui/todo/todo.png +0 -0
- data/vendor/assets/images/flat-ui/video/fullscreen-2x.png +0 -0
- data/vendor/assets/images/flat-ui/video/fullscreen.png +0 -0
- data/vendor/assets/images/flat-ui/video/pause-2x.png +0 -0
- data/vendor/assets/images/flat-ui/video/pause.png +0 -0
- data/vendor/assets/images/flat-ui/video/play-2x.png +0 -0
- data/vendor/assets/images/flat-ui/video/play.png +0 -0
- data/vendor/assets/images/flat-ui/video/poster.jpg +0 -0
- data/vendor/assets/images/flat-ui/video/volume-full-2x.png +0 -0
- data/vendor/assets/images/flat-ui/video/volume-full.png +0 -0
- data/vendor/assets/images/flat-ui/video/volume-off-2x.png +0 -0
- data/vendor/assets/images/flat-ui/video/volume-off.png +0 -0
- data/vendor/assets/javascripts/flat-ui.js +2 -0
- data/vendor/assets/javascripts/flat-ui/flatui-checkbox.js +112 -0
- data/vendor/assets/javascripts/flat-ui/flatui-radio.js +139 -0
- data/vendor/assets/stylesheets/flat-ui.scss +1 -0
- data/vendor/assets/stylesheets/flat-ui/_mixins.scss +878 -0
- data/vendor/assets/stylesheets/flat-ui/_spaces.scss +172 -0
- data/vendor/assets/stylesheets/flat-ui/_variables.scss +509 -0
- data/vendor/assets/stylesheets/flat-ui/flat-ui.scss +45 -0
- data/vendor/assets/stylesheets/flat-ui/modules/_button-groups.scss +110 -0
- data/vendor/assets/stylesheets/flat-ui/modules/_buttons.scss +151 -0
- data/vendor/assets/stylesheets/flat-ui/modules/_caret.scss +30 -0
- data/vendor/assets/stylesheets/flat-ui/modules/_checkbox-and-radio.scss +143 -0
- data/vendor/assets/stylesheets/flat-ui/modules/_code.scss +49 -0
- data/vendor/assets/stylesheets/flat-ui/modules/_dropdown.scss +223 -0
- data/vendor/assets/stylesheets/flat-ui/modules/_footer.scss +76 -0
- data/vendor/assets/stylesheets/flat-ui/modules/_forms.scss +188 -0
- data/vendor/assets/stylesheets/flat-ui/modules/_glyphicons.scss +135 -0
- data/vendor/assets/stylesheets/flat-ui/modules/_input-groups.scss +153 -0
- data/vendor/assets/stylesheets/flat-ui/modules/_input-icons.scss +72 -0
- data/vendor/assets/stylesheets/flat-ui/modules/_local-fonts.scss +69 -0
- data/vendor/assets/stylesheets/flat-ui/modules/_login.scss +111 -0
- data/vendor/assets/stylesheets/flat-ui/modules/_navbar.scss +876 -0
- data/vendor/assets/stylesheets/flat-ui/modules/_pager.scss +51 -0
- data/vendor/assets/stylesheets/flat-ui/modules/_pagination.scss +166 -0
- data/vendor/assets/stylesheets/flat-ui/modules/_palette.scss +71 -0
- data/vendor/assets/stylesheets/flat-ui/modules/_progress-bars.scss +34 -0
- data/vendor/assets/stylesheets/flat-ui/modules/_scaffolding.scss +64 -0
- data/vendor/assets/stylesheets/flat-ui/modules/_select.scss +145 -0
- data/vendor/assets/stylesheets/flat-ui/modules/_share.scss +44 -0
- data/vendor/assets/stylesheets/flat-ui/modules/_slider.scss +105 -0
- data/vendor/assets/stylesheets/flat-ui/modules/_switch.scss +150 -0
- data/vendor/assets/stylesheets/flat-ui/modules/_tagsinput.scss +121 -0
- data/vendor/assets/stylesheets/flat-ui/modules/_thumbnails.scss +38 -0
- data/vendor/assets/stylesheets/flat-ui/modules/_tile.scss +54 -0
- data/vendor/assets/stylesheets/flat-ui/modules/_todo.scss +110 -0
- data/vendor/assets/stylesheets/flat-ui/modules/_tooltip.scss +56 -0
- data/vendor/assets/stylesheets/flat-ui/modules/_type.scss +208 -0
- data/vendor/assets/stylesheets/flat-ui/modules/_typeahead.scss +41 -0
- data/vendor/assets/stylesheets/flat-ui/modules/_video.scss +458 -0
- metadata +251 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: 30b75c5684d98ac62d61fee26600df3fbeacd023
|
4
|
+
data.tar.gz: d4d52c67b5674279bc21b197842ad64b96150a76
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: d6cda5974818e6ca28d19f71f16947e5aeae3430422212cf33c2957a73e1028faa7921d98660a0ab51e5f61e05e3df78014b39c9854f91d204d22c14898fac1e
|
7
|
+
data.tar.gz: 44cc69598d798d9a43f3fd65f3a17b7471a177ebba21f369a895b90ba0c866218178bc8457d072889a4f3986502148d6d68f90d91a47afb2481634657eb93173
|
data/.gitignore
ADDED
data/.gitmodules
ADDED
data/Gemfile
ADDED
data/LICENSE.txt
ADDED
@@ -0,0 +1,22 @@
|
|
1
|
+
Copyright (c) 2014 Stafford Brunk
|
2
|
+
|
3
|
+
MIT License
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
6
|
+
a copy of this software and associated documentation files (the
|
7
|
+
"Software"), to deal in the Software without restriction, including
|
8
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
9
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
10
|
+
permit persons to whom the Software is furnished to do so, subject to
|
11
|
+
the following conditions:
|
12
|
+
|
13
|
+
The above copyright notice and this permission notice shall be
|
14
|
+
included in all copies or substantial portions of the Software.
|
15
|
+
|
16
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
17
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
18
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
19
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
20
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
21
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
22
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,256 @@
|
|
1
|
+
# Flat UI for Sass
|
2
|
+
|
3
|
+
`flat-ui-sass` is a SASS port of Designmodo's [Flat-UI Free](http://designmodo.github.io/Flat-UI/). `flat-ui-sass`
|
4
|
+
also provides a rake task to convert and locally vendor [Flat-UI Pro](http://designmodo.com/flat/) for use with
|
5
|
+
Rails, Compass, and vanilla SASS.
|
6
|
+
|
7
|
+
##### This gem is currently under development! Things may be broken!
|
8
|
+
|
9
|
+
## Dependencies
|
10
|
+
|
11
|
+
`flat-ui-sass` requires [`bootstrap-sass`](https://github.com/twbs/bootstrap-sass)
|
12
|
+
|
13
|
+
`flat-ui-sass` depends on `term-ansicolor` right now for the logging
|
14
|
+
functionality of the converter. This is on the roadmap for removal.
|
15
|
+
|
16
|
+
Flat-UI uses the [Lato](https://www.google.com/fonts/specimen/Lato)
|
17
|
+
font as its base font. This gem does not vendor Lato. It is up to you to make
|
18
|
+
sure Lato is available on your page.
|
19
|
+
|
20
|
+
#### Notice:
|
21
|
+
|
22
|
+
The preferred version of sass is v3.3.0+. Unfortunately, this version is not
|
23
|
+
supported by sass-rails >= v4.0.2. If you run on sass v3.2.x, the only thing
|
24
|
+
that will not work properly is the color swatch module in Flat-UI Free. The only
|
25
|
+
other difference is in how the Flat-UI asset helper is discovered (see
|
26
|
+
`_variables.scss`).
|
27
|
+
|
28
|
+
## Installation
|
29
|
+
|
30
|
+
### Rails
|
31
|
+
|
32
|
+
Add the following to your Gemfile:
|
33
|
+
|
34
|
+
gem 'flat-ui-sass', github: 'wingrunr21/flat-ui-sass'
|
35
|
+
|
36
|
+
### Compass (no Rails, Flat-UI free only right now)
|
37
|
+
|
38
|
+
Install the gem:
|
39
|
+
|
40
|
+
gem install flat-ui-sass
|
41
|
+
|
42
|
+
or add it to your Gemfile:
|
43
|
+
|
44
|
+
gem 'flat-ui-sass', github: 'wingrunr21/flat-ui-sass'
|
45
|
+
|
46
|
+
For existing projects:
|
47
|
+
|
48
|
+
# config.rb:
|
49
|
+
require 'flat-ui-sass'
|
50
|
+
|
51
|
+
bundle exec compass install flat-ui
|
52
|
+
|
53
|
+
For new projects:
|
54
|
+
|
55
|
+
bundle exec compass create new_project -r flat-ui-sass --using flat-ui
|
56
|
+
|
57
|
+
The resulting Compass project will have all Flat-UI JS/fonts/images as well as
|
58
|
+
the bootstrap JS/fonts.
|
59
|
+
|
60
|
+
The following SCSS files will also be created:
|
61
|
+
|
62
|
+
* [_variables.scss](/templates/project/_variables.scss.erb) - all of the Flat UI variables (override them here).
|
63
|
+
* [styles.scss](/templates/project/styles.scss) - primary SCSS file, import `variables`, `flat-ui/variables`, `bootstrap`, and `flat-ui`.
|
64
|
+
|
65
|
+
### vanilla SASS (no Compass or Rails)
|
66
|
+
|
67
|
+
Install the gem:
|
68
|
+
|
69
|
+
gem install flat-ui-sass
|
70
|
+
|
71
|
+
or add it to your Gemfile:
|
72
|
+
|
73
|
+
gem 'flat-ui-sass', github: 'wingrunr21/flat-ui-sass'
|
74
|
+
|
75
|
+
Follow the JS and Fonts setup instructions for [bootstrap-sass](https://github.com/twbs/bootstrap-sass#js-and-fonts)
|
76
|
+
|
77
|
+
In addition, you will need to copy font, image, and javascript assets out of
|
78
|
+
flat-ui-sass if you are using Flat-UI Free:
|
79
|
+
|
80
|
+
mkdir public/images
|
81
|
+
cp -r $(bundle show flat-ui-sass)/vendor/assets/images/ public/images
|
82
|
+
cp -r $(bundle show flat-ui-sass)/vendor/assets/fonts/ public/fonts/
|
83
|
+
cp -r $(bundle show flat-ui-sass)/vendor/assets/javascripts/ public/javascripts/
|
84
|
+
|
85
|
+
If you are using Flat-UI Pro, you can copy or symlink the various assets out of
|
86
|
+
the local vendor/assets directory in the root of your project.
|
87
|
+
|
88
|
+
Similar to bootstrap-sass, we provide Ruby methods to report the appropriate
|
89
|
+
paths:
|
90
|
+
|
91
|
+
FlatUI.stylesheets_path
|
92
|
+
FlatUI.fonts_path
|
93
|
+
FlatUI.javascripts_path
|
94
|
+
FlatUI.images_path
|
95
|
+
|
96
|
+
## Usage
|
97
|
+
|
98
|
+
### Converting Flat-UI Pro
|
99
|
+
|
100
|
+
You can use the `fui_convert` command packaged along with `flat-ui-sass` to
|
101
|
+
automatically convert and vendor Flat-UI Pro to your local application:
|
102
|
+
|
103
|
+
1. Place the Flat-UI Pro directory (e.g. the one with the less, js, font, image,
|
104
|
+
etc files in it) in a directory at the root of your app titled `flat-ui-pro`
|
105
|
+
2. Run `bundle exec fui_convert`. You should see a lot of output
|
106
|
+
regarding the conversion process. When it is finished, Flat-UI Pro should be
|
107
|
+
converted and available in the `vendor/assets/` directory.
|
108
|
+
|
109
|
+
See `fui_convert --help` for more advanced usage
|
110
|
+
|
111
|
+
#### SCSS
|
112
|
+
|
113
|
+
Import the Flat-UI variables, bootstrap, and then Flat-UI:
|
114
|
+
|
115
|
+
@import 'flat-ui/variables';
|
116
|
+
@import 'bootstrap';
|
117
|
+
@import 'flat-ui';
|
118
|
+
|
119
|
+
For Flat-UI Pro, simply import `flat-ui-pro` instead:
|
120
|
+
|
121
|
+
@import 'flat-ui-pro/variables';
|
122
|
+
@import 'bootstrap';
|
123
|
+
@import 'flat-ui-pro';
|
124
|
+
|
125
|
+
You must import the Flat-UI variables before bootstrap, otherwise bootstrap's
|
126
|
+
variables will take priority!
|
127
|
+
|
128
|
+
##### Missing Modules
|
129
|
+
|
130
|
+
Flat-UI Pro does not include a few modules that exist in Flat-UI Free.
|
131
|
+
Designmodo has stated this is because [they are not yet mobile-ready](https://github.com/designmodo/Flat-UI-Pro-Support/issues/419#issuecomment-39879885). If you
|
132
|
+
still wish to use these modules, you can import them from this gem's version of
|
133
|
+
Flat-UI Free:
|
134
|
+
|
135
|
+
@import 'flat-ui/modules/footer';
|
136
|
+
@import 'flat-ui/modules/login';
|
137
|
+
@import 'flat-ui/modules/palette';
|
138
|
+
@import 'flat-ui/modules/share';
|
139
|
+
@import 'flat-ui/modules/tile';
|
140
|
+
@import 'flat-ui/modules/todo';
|
141
|
+
|
142
|
+
#### Javascript
|
143
|
+
Flat-UI has a lot of javascript dependencies. It is up to you to make sure the
|
144
|
+
appropriate javascript files are available in your application. For a reference,
|
145
|
+
check out the bottom of the `index.html` example page for your version of
|
146
|
+
Flat-UI or the list below.
|
147
|
+
|
148
|
+
If you are using Rails or Sprockets, you may require the manifest for all
|
149
|
+
javascript assets:
|
150
|
+
|
151
|
+
Free:
|
152
|
+
|
153
|
+
//= require flat-ui
|
154
|
+
|
155
|
+
Pro:
|
156
|
+
|
157
|
+
//= require flat-ui-pro
|
158
|
+
|
159
|
+
Alternatively, you may require individual modules as well
|
160
|
+
|
161
|
+
Free:
|
162
|
+
|
163
|
+
//= require flat-ui/flatui-checkbox
|
164
|
+
//= require flat-ui/flatui-radio
|
165
|
+
|
166
|
+
Pro:
|
167
|
+
|
168
|
+
//= require flat-ui-pro/flatui-checkbox
|
169
|
+
//= require flat-ui-pro/flatui-radio
|
170
|
+
//= require flat-ui-pro/flatui-fileinput
|
171
|
+
|
172
|
+
Here's a list of javascript dependencies in Flat-UI Free:
|
173
|
+
|
174
|
+
* jquery
|
175
|
+
* jquery.ui.core
|
176
|
+
* jquery.ui.widget
|
177
|
+
* jquery.ui.mouse
|
178
|
+
* jquery.ui.position
|
179
|
+
* jquery.ui.slider
|
180
|
+
* jquery.ui.tooltip
|
181
|
+
* jquery.ui.effect
|
182
|
+
* jquery.ui.touch-punch.min
|
183
|
+
* bootstrap
|
184
|
+
* bootstrap-select
|
185
|
+
* bootstrap-switch
|
186
|
+
* jquery.tagsinput
|
187
|
+
* jquery.placeholder
|
188
|
+
* jquery.stacktable
|
189
|
+
* video.js
|
190
|
+
|
191
|
+
In addition, Flat-UI Pro also requires:
|
192
|
+
|
193
|
+
* jquery.ui.button
|
194
|
+
* jquery.ui.datepicker
|
195
|
+
* jquery.ui.spinner
|
196
|
+
* typeahead.js
|
197
|
+
* holder.js
|
198
|
+
|
199
|
+
#### Icon Helper
|
200
|
+
A Rails helper is also included to aid with using the Flat-UI glyph icons:
|
201
|
+
|
202
|
+
fui_icon "heart"
|
203
|
+
# => <i class="fui-heart"></i>
|
204
|
+
|
205
|
+
fui_icon "heart", tag: :span
|
206
|
+
# => <span class="fui-heart"></span>
|
207
|
+
|
208
|
+
fui_icon "heart", text: "Flat-UI!"
|
209
|
+
# => <i class="fui-heart"></i> Flat-UI!
|
210
|
+
fui_icon "arrow-right", text: "Get started", right: true
|
211
|
+
# => Get started <i class="fui-arrow-right"></i>
|
212
|
+
|
213
|
+
fui_icon "photo", class: "pull-left"
|
214
|
+
# => <i class="fui-photo pull-left"></i>
|
215
|
+
|
216
|
+
fui_icon "user", data: { id: 123 }
|
217
|
+
# => <i class="fui-user" data-id="123"></i>
|
218
|
+
|
219
|
+
content_tag(:li, fui_icon("check", text: "Bulleted list item"))
|
220
|
+
# => <li><i class="fui-check"></i> Bulleted list item</li>
|
221
|
+
|
222
|
+
## Roadmap
|
223
|
+
|
224
|
+
1. bower support
|
225
|
+
2. Tests
|
226
|
+
|
227
|
+
## Development and Contributing
|
228
|
+
|
229
|
+
This gem uses a modified version of the converter utilized in [bootstrap-sass](https://github.com/twbs/bootstrap-sass). The converter runs over the checked-out Flat-UI git submodule and vendors the resulting files in `vendor/assets`. The converter does the following:
|
230
|
+
|
231
|
+
* Converts the LESS to SASS, fixing `@import` orders to load correct under SASS.
|
232
|
+
* Generates a `flat-ui.scss` or `flat-ui-pro.scss` manifest
|
233
|
+
* Copies Flat-UI javascript files and generates a `flat-ui.js` or
|
234
|
+
`flat-ui-pro.js` manifest
|
235
|
+
* Copies the Flat-UI Icons font
|
236
|
+
* Copies supporting Flat-UI images
|
237
|
+
|
238
|
+
The converter is located in `lib/tasks/`
|
239
|
+
|
240
|
+
Version numbers for the current versions of Flat-UI and Flat-UI Pro that the
|
241
|
+
converter works against are in `version.rb`
|
242
|
+
|
243
|
+
### Developing
|
244
|
+
|
245
|
+
1. Clone this repository to a working directory
|
246
|
+
2. Initialize the Flat-UI submodule (`git submodule update --init`)
|
247
|
+
3. Create a new topic branch for your changes (`git checkout -b my_new_feature`)
|
248
|
+
4. Make some changes
|
249
|
+
5. Run `rake flat_ui:convert` to convert Flat-UI and vendor it
|
250
|
+
|
251
|
+
## Credits
|
252
|
+
|
253
|
+
The conversion scripts and general gem structure rely upon and are heavily
|
254
|
+
influenced by the work done on [bootstrap-sass](https://github.com/twbs/bootstrap-sass). This gem would not be possible without all of the hard work put into that project.
|
255
|
+
|
256
|
+
Thanks also go to [Designmodo](http://designmodo.com/) for creating and publishing Flat-UI.
|
data/Rakefile
ADDED
@@ -0,0 +1,14 @@
|
|
1
|
+
require "bundler/gem_tasks"
|
2
|
+
|
3
|
+
namespace :flat_ui do
|
4
|
+
desc "Converts Flat UI from LESS to SASS and vendors it"
|
5
|
+
task :convert do |t, args|
|
6
|
+
require 'tasks/converter'
|
7
|
+
Converter.new.process_flat_ui!
|
8
|
+
end
|
9
|
+
|
10
|
+
desc "Updates the Flat UI Free submodule"
|
11
|
+
task :update do
|
12
|
+
`git submodule foreach git pull origin master`
|
13
|
+
end
|
14
|
+
end
|
@@ -0,0 +1,60 @@
|
|
1
|
+
# Rails view helpers for Flat-UI glyphs
|
2
|
+
# Based on https://github.com/bokmann/font-awesome-rails/blob/master/app/helpers/font_awesome/rails/icon_helper.rb
|
3
|
+
module FlatUI
|
4
|
+
module Rails
|
5
|
+
module IconHelper
|
6
|
+
# Creates an icon tag given an icon name and possible icon
|
7
|
+
# modifiers.
|
8
|
+
#
|
9
|
+
# Examples
|
10
|
+
#
|
11
|
+
# fui_icon "heart"
|
12
|
+
# # => <i class="fui-heart"></i>
|
13
|
+
#
|
14
|
+
# fui_icon "heart", tag: :span
|
15
|
+
# # => <span class="fui-heart"></span>
|
16
|
+
#
|
17
|
+
# fui_icon "heart", text: "Flat-UI!"
|
18
|
+
# # => <i class="fui-heart"></i> Flat-UI!
|
19
|
+
# fui_icon "arrow-right", text: "Get started", right: true
|
20
|
+
# # => Get started <i class="fui-arrow-right"></i>
|
21
|
+
#
|
22
|
+
# fui_icon "photo", class: "pull-left"
|
23
|
+
# # => <i class="fui-photo pull-left"></i>
|
24
|
+
#
|
25
|
+
# fui_icon "user", data: { id: 123 }
|
26
|
+
# # => <i class="fui-user" data-id="123"></i>
|
27
|
+
#
|
28
|
+
# content_tag(:li, fui_icon("check", text: "Bulleted list item"))
|
29
|
+
# # => <li><i class="fui-check"></i> Bulleted list item</li>
|
30
|
+
def fui_icon(names = "flag", options = {})
|
31
|
+
classes = Private.icon_names(names)
|
32
|
+
classes.concat Array.wrap(options.delete(:class))
|
33
|
+
text = options.delete(:text)
|
34
|
+
right_icon = options.delete(:right)
|
35
|
+
tag = options.delete(:tag) { :i }
|
36
|
+
icon = content_tag(tag, nil, options.merge(:class => classes))
|
37
|
+
Private.icon_join(icon, text, right_icon)
|
38
|
+
end
|
39
|
+
|
40
|
+
module Private
|
41
|
+
extend ActionView::Helpers::OutputSafetyHelper
|
42
|
+
|
43
|
+
def self.icon_join(icon, text, reverse_order = false)
|
44
|
+
return icon if text.blank?
|
45
|
+
elements = [icon, ERB::Util.html_escape(text)]
|
46
|
+
elements.reverse! if reverse_order
|
47
|
+
safe_join(elements, " ")
|
48
|
+
end
|
49
|
+
|
50
|
+
def self.icon_names(names = [])
|
51
|
+
array_value(names).map { |n| "fui-#{n}" }
|
52
|
+
end
|
53
|
+
|
54
|
+
def self.array_value(value = [])
|
55
|
+
value.is_a?(Array) ? value : value.to_s.split(/\s+/)
|
56
|
+
end
|
57
|
+
end
|
58
|
+
end
|
59
|
+
end
|
60
|
+
end
|
data/bin/fui_convert
ADDED
@@ -0,0 +1,28 @@
|
|
1
|
+
# coding: utf-8
|
2
|
+
lib = File.expand_path('../lib', __FILE__)
|
3
|
+
$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
|
4
|
+
require 'flat-ui-sass/version'
|
5
|
+
|
6
|
+
Gem::Specification.new do |spec|
|
7
|
+
spec.name = "flat-ui-sass"
|
8
|
+
spec.version = FlatUI::VERSION
|
9
|
+
spec.authors = ["Stafford Brunk"]
|
10
|
+
spec.email = ["stafford.brunk@gmail.com"]
|
11
|
+
spec.description = %q{SASS conversion of Designmodo's Flat UI Free along with tools to convert Flat UI Pro}
|
12
|
+
spec.summary = %q{An automatic SASS conversion of Designmodo's Flat UI Free along with tools to automatically convert Flat UI Pro to SASS}
|
13
|
+
spec.homepage = "https://github.com/wingrunr21/flat-ui-sass"
|
14
|
+
spec.license = "MIT"
|
15
|
+
|
16
|
+
spec.files = `git ls-files`.split($/)
|
17
|
+
spec.executables = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
|
18
|
+
spec.test_files = spec.files.grep(%r{^(test|spec|features)/})
|
19
|
+
spec.require_paths = ["lib"]
|
20
|
+
|
21
|
+
spec.add_dependency "bootstrap-sass", ">= 3.1"
|
22
|
+
spec.add_dependency "sass", ">= 3.2.0"
|
23
|
+
|
24
|
+
spec.add_development_dependency "bundler", "~> 1.3"
|
25
|
+
spec.add_development_dependency "rake"
|
26
|
+
spec.add_development_dependency "compass"
|
27
|
+
spec.add_development_dependency "sass-rails", ">= 3.2"
|
28
|
+
end
|
data/lib/flat-ui-sass.rb
ADDED
@@ -0,0 +1,98 @@
|
|
1
|
+
# Based on bootstrap-sass.rb
|
2
|
+
# https://github.com/twbs/bootstrap-sass/blob/master/lib/bootstrap-sass.rb
|
3
|
+
|
4
|
+
require "bootstrap-sass"
|
5
|
+
require "flat-ui-sass/version"
|
6
|
+
|
7
|
+
module FlatUI
|
8
|
+
class << self
|
9
|
+
def load!
|
10
|
+
require 'flat-ui-sass/sass_functions'
|
11
|
+
|
12
|
+
register_compass_extension if compass?
|
13
|
+
|
14
|
+
if rails?
|
15
|
+
require 'sass-rails'
|
16
|
+
register_rails_engine
|
17
|
+
end
|
18
|
+
|
19
|
+
configure_sass
|
20
|
+
end
|
21
|
+
|
22
|
+
# Paths
|
23
|
+
def gem_path
|
24
|
+
@gem_path ||= File.expand_path '..', File.dirname(__FILE__)
|
25
|
+
end
|
26
|
+
|
27
|
+
# This definitely needs a better solution
|
28
|
+
def project_path
|
29
|
+
@project_path ||= Dir.pwd
|
30
|
+
end
|
31
|
+
|
32
|
+
def base_path
|
33
|
+
@base_path ||= pro? ? project_path : gem_path
|
34
|
+
end
|
35
|
+
|
36
|
+
def stylesheets_path
|
37
|
+
File.join assets_path, 'stylesheets'
|
38
|
+
end
|
39
|
+
|
40
|
+
def fonts_path
|
41
|
+
File.join assets_path, 'fonts'
|
42
|
+
end
|
43
|
+
|
44
|
+
def javascripts_path
|
45
|
+
File.join assets_path, 'javascripts'
|
46
|
+
end
|
47
|
+
|
48
|
+
def images_path
|
49
|
+
File.join assets_path, 'images'
|
50
|
+
end
|
51
|
+
|
52
|
+
def assets_path
|
53
|
+
@assets_path ||= File.join base_path, 'vendor', 'assets'
|
54
|
+
end
|
55
|
+
|
56
|
+
# Environment detection helpers
|
57
|
+
def asset_pipeline?
|
58
|
+
defined?(::Sprockets)
|
59
|
+
end
|
60
|
+
|
61
|
+
def compass?
|
62
|
+
defined?(::Compass)
|
63
|
+
end
|
64
|
+
|
65
|
+
def rails?
|
66
|
+
defined?(::Rails)
|
67
|
+
end
|
68
|
+
|
69
|
+
def pro?
|
70
|
+
Dir.exists? File.join(project_path, 'vendor/assets/stylesheets/flat-ui-pro')
|
71
|
+
end
|
72
|
+
|
73
|
+
private
|
74
|
+
|
75
|
+
def configure_sass
|
76
|
+
::Sass.load_paths << stylesheets_path
|
77
|
+
|
78
|
+
# bootstrap requires minimum precision of 10, see https://github.com/twbs/bootstrap-sass/issues/409
|
79
|
+
::Sass::Script::Number.precision = [10, ::Sass::Script::Number.precision].max
|
80
|
+
end
|
81
|
+
|
82
|
+
def register_compass_extension
|
83
|
+
::Compass::Frameworks.register(
|
84
|
+
pro? ? 'flat-ui-pro' : 'flat-ui',
|
85
|
+
:path => gem_path,
|
86
|
+
:stylesheets_directory => stylesheets_path,
|
87
|
+
:templates_directory => File.join(gem_path, 'templates')
|
88
|
+
)
|
89
|
+
end
|
90
|
+
|
91
|
+
def register_rails_engine
|
92
|
+
require 'flat-ui-sass/engine'
|
93
|
+
end
|
94
|
+
end
|
95
|
+
end
|
96
|
+
FlatUi = FlatUI
|
97
|
+
|
98
|
+
FlatUI.load!
|