flat-ui-sass
is a SASS port of Designmodo's Flat-UI Free. flat-ui-sass
also provides a rake task to convert and locally vendor Flat-UI Pro for use with
Rails, Compass, and vanilla SASS.
flat-ui-sass
requires bootstrap-sass
as well as sass >= 3.3.0.rc.2
.
Right now you need to be running the master branch of bootstrap-sass
for the
converter to run:
gem 'bootstrap-sass', github:'twbs/bootstrap-sass'
flat-ui-sass
also depends on term-ansicolor
right now for the logging
functionality of the converter. This is on the TODO list for removal.
Flat-UI uses the Lato font as its base font. This gem does not vendor Lato. It is up to you to make sure Lato is available on your page.
Add the following to your Gemfile:
gem 'flat-ui-sass', github: 'wingrunr21/flat-ui-sass'
Install the gem:
gem install flat-ui-sass
or add it to your Gemfile:
gem 'flat-ui-sass', github: 'wingrunr21/flat-ui-sass'
For existing projects:
# config.rb:
require 'flat-ui-sass'
bundle exec compass install flat-ui
For new projects:
bundle exec compass create new_project -r flat-ui-sass --using flat-ui
The resulting Compass project will have all Flat-UI JS/fonts/images as well as the bootstrap JS/fonts.
The following SCSS files will also be created:
- _variables.scss - all of the Flat UI variables (override them here).
- styles.scss - primary SCSS file, import
variables
,flat-ui/variables
,bootstrap
, andflat-ui
.
Not done yet
You can use the conversion script packaged along with flat-ui-sass
to
automatically convert and vendor Flat-UI Pro to your local application:
- Place the Flat-UI-Pro directory (e.g. the one with the less, js, font, image,
etc files in it) in a directory at the root of your app titled
flat-ui-pro
- Run
bundle exec rake flat_ui_pro:convert
. You should see a lot of output regarding the conversion process. When it is finished, Flat-UI Pro should be converted and available in thevendor/assets/
directory.
Import the Flat-UI variables, bootstrap, and then Flat-UI in application.css.scss
:
@import 'flat-ui/variables';
@import 'boostrap';
@import 'flat-ui';
For Flat-UI Pro, simply import flat-ui-pro
instead:
@import 'flat-ui-pro/variables';
@import 'boostrap';
@import 'flat-ui-pro';
You must import the Flat-UI variables before bootstrap, otherwise bootstrap's variables will take priority!
Flat-UI has a lot of javascript dependencies. It is up to you to make sure the
appropriate javascript files are available in your appliction. The below are
example dependencies as used in the index.html
demo page.
In application.js
:
//= require jquery
//= require jquery.ui.core
//= require jquery.ui.widget
//= require jquery.ui.mouse
//= require jquery.ui.position
//= require jquery.ui.slider
//= require jquery.ui.tooltip
//= require jquery.ui.effect
//= require jquery.ui.touch-punch.min
//= require bootstrap
//= require bootstrap-select
//= require bootstrap-switch
//= require flat-ui
//= require jquery.tagsinput
//= require jquery.placeholder
//= require jquery.stacktable
For Flat-UI Pro:
//= require jquery
//= require jquery.ui.core
//= require jquery.ui.widget
//= require jquery.ui.mouse
//= require jquery.ui.position
//= require jquery.ui.button
//= require jquery.ui.datepicker
//= require jquery.ui.slider
//= require jquery.ui.spinner
//= require jquery.ui.tooltip
//= require jquery.ui.effect
//= require jquery.ui.touch-punch.min
//= require bootstrap
//= require bootstrap-select
//= require bootstrap-switch
//= require flat-ui-pro
//= require jquery.tagsinput
//= require jquery.placeholder
//= require jquery.stacktable
//= require bootstrap-typeahead
Not done yet
Not done yet
- Add Flat-UI modules that are missing in Flat-UI Pro to the Pro manifest
- Add Rake task for downloading/vendoring various JS dependencies
- Remove
term-ansicolor
dependency in converter - More user-friendly logging (less verbose)
This gem uses a modified version of the converter utilized in 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:
- Converts the LESS to SASS, fixing
@import
orders to load correct under SASS. - Generates a
flat-ui.scss
orflat-ui-pro.scss
manifest - Copies Flat-UI javascript files and generates a
flat-ui.js
orflat-ui-pro.js
manifest - Copies the Flat-UI Icons font
- Copies supporting Flat-UI images
The converter is located in lib/tasks/
Version numbers for the current versions of Flat-UI and Flat-UI Pro that the
converter works against are in version.rb
- Clone this repository to a working directory
- Initialize the Flat-UI submodule (
git submodule update --init
) - Create a new topic branch for your changes (
git checkout -b my_new_feature
) - Make some changes
- Run
rake flat_ui:convert
to convert Flat-UI and vendor it - Possible bower support
- Rails ActionView helpers for fui icons similar to how font-awesome-rails does it
The conversion scripts and general gem structure rely upon and are heavily influenced by the work done on bootstrap-sass. This gem would not be possible without all of the hard work put into that project.
Thanks also go to Designmodo for creating and publishing Flat-UI.