No Longer Maintained
Please consider this project abandoned. There are many roadblocks that prevent upgrading this to the latest Semantic-UI and now there's Fomantic-UI. #53. I suggest you look at bundling Fomantic-UI in with webpacker instead. It is possible though not completely straightforward. This project is starting to get security tickets around dependencies (that I won't fix), so user beware.
less-rails-semantic_ui
This is a gem for Rails with Semantic UI assets inside. It provides the ability to customize component themes and variables on the fly in your application.
Features
- LESS based (meaning that it doesn't contains hacks usually used to convert LESS to SASS)
- Semantic UI configs integrated in your application (you can customize and change component styles on the fly)
Installation
Add this block to your application's Gemfile:
# Semantic UI assets
gem 'less-rails-semantic_ui'
gem 'autoprefixer-rails'
gem 'therubyracer'
Semantic UI is using autoprefixer (in our case autoprefixer-rails) to appending additional CSS vendor-prefixes for improve compatibility with different browsers. Without it some parts of Semantic UI (i.e. transitions or modal dialogs because they depends to transitions) won't works in some browsers. You can remove this gem if you don't use such functionality of Semantic UI.
P.S. I hope in the future this hack will be unnecessary.
And then execute:
$ bundle install
After that, install configuration files inside your application in the vendor/assets
directory with:
$ rails generate semantic_ui:install
Require semantic_ui/semantic_ui.js
in app/assets/application.js
:
...
//= require semantic_ui/semantic_ui
...
Require semantic_ui/semantic_ui.css
in app/assets/application.css
:
...
*= require semantic_ui/semantic_ui
...
Upgrade to new version
Execute command below and merge your custom and new changes in config files:
$ rails generate semantic_ui:install
Customization
You can modify any Semantic UI configs and files placed to vendor/assets/javascripts/semantic_ui
and vendor/assets/stylesheets/semantic_ui
directories.
For example:
- if you wish to remove unused components you can just remove corresponding lines from
semantic_ui.js
andsemantic_ui.css
files. - if you wish to change components themes you can just configure them in
theme.config
. - if you wish to change component variables or extend components you can just configure corresponding
config/{collections,elements, globals,modules,views}/*.{overrides,variables}
files.
Versioning
This gem will directly track the semantic versioning of the Semantic UI project. Major and minor versions will always match to theirs, though we may have tiny patch level releases specific to this gem.
Contributing
- Fork it ( https://github.com/maxd/less-rails-semantic_ui )
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create a new Pull Request