Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
A responsive and modular front-end framework closely following the SMACSS naming conventions and concepts.
Ruby
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
lib
vendor/assets
.gitignore
Gemfile
README.md
Rakefile
flex-rails.gemspec
make.rb

README.md

Flex

A responsive and modular front-end framework closely following the SMACSS naming conventions and concepts.

To get started, checkout http://flex.fyvesmedia.com

Installing Gem

Add the following line in your gemfile:

gem "flex", :group => :assets

Alternatively you can install from the latest build:

gem "flex", :git => 'git://github.com/suciuvlad/flex-rails.git', :group => :assets

Then run bundle install to install the gem.

How to use

Require flex in your manifest files like so:

The CSS

application.css

/*
 *= require flex
 */

The Javascript

application.js

/*
 *= require flex
 */

Advanced

If your project only needs a couple of the flex functionalities you can select them by manually including the css and javascript you need.

Keep in mind that some of the files are required(i.e. settings, mixins, functions, etc) for the framework to work.

/*
 *= require flex/settings
 *= require flex/functions
 *= require flex/mixins
 *= require flex/base
 *= require flex/states

 *= require flex/form
 *= require flex/form-compose
 *= require flex/form-message

 ...
 */
/*
 *= require flex/polyfills

 *= require flex/dropdown
 *= require flex/message

 ...
 */

Here's the full list:

CSS

Name Code
REQUIRED
Reset css *= require flex/reset
Settings css *= require flex/settings
Functions css *= require flex/functions
Mixins css *= require flex/mixins
Base css *= require flex/base
States css *= require flex/states
 
 
 
OPTIONAL
Form css *= require flex/form
Form - Extension * css *= require flex/modules/form-compose
Message css *= require flex/modules/message
Message - Extension * css *= require flex/modules/message-compose
Label css *= require flex/modules/label
Label - Extension * css *= require flex/modules/label-compose
Button css *= require flex/modules/button
Button - Extension * css *= require flex/modules/button-compose
Toolbar css *= require flex/modules/button
Toolbar - Extension * css *= require flex/modules/toolbar-compose
Table css *= require flex/modules/table
Table - Extension * css *= require flex/modules/table-compose
Tooltip css *= require flex/modules/tooltip
Tooltip - Extension * css *= require flex/modules/tooltip-compose
Bubble css *= require flex/modules/tooltip
Bubble - Extension * css *= require flex/modules/bubble-compose
Subnav css *= require flex/modules/tooltip
Subnav - Extension * css *= require flex/modules/subnav-compose
Dropdown css *= require flex/modules/dropdown
Dropdown - Extension * css *= require flex/modules/dropdown-compose
Modal css *= require flex/modules/modal
Modal - Extension * css *= require flex/modules/modal-compose
Close ** css *= require flex/modules/close
Pagination css *= require flex/pagination
Pagination - Extension * css *= require flex/pagination-compose
Misc css *= require layout/misc
Grid css *= require layout/grid
Responsive (grid) css *= require layout/responsive

* Extensions usually include additional functionalities like rounded corners, zebra striped tables, etc

** Required by the Modal module

Some of the modules rely on javascript to work

Javascript

Module Code
Polyfills * css *= require flex/polyfills
Tooltip css *= require flex/jquery.tooltip.js
Bubble css *= require flex/jquery.bubble.js
Dropdown css *= require flex/jquery.dropdown.js
Message css *= require flex/jquery.message.js
Modal css *= require flex/jquery.modal.js
Tab css *= require flex/jquery.tab.js

* ECMA5 Polyfills

Copyright and license

MIT Open Source License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Something went wrong with that request. Please try again.