fei0456116/semantic-ui-sass

Semantic UI, converted to Sass and ready to drop into Rails & Compass.

Semantic UI for Sass

semantic-ui-sass is an Sass-powered version of Semantic UI and ready to drop into Rails & Compass.

Installation and Usage

gem 'semantic-ui-sass', '~> 0.8.6.0'

or

gem 'semantic-ui-sass', github: 'doabit/semantic-ui-sass'

bundle install and restart your server to make the files available through the pipeline.

semantic-ui-sass with Rails

CSS

Import Semantic in an SCSS file (for example, application.css.scss) to get all of Semantic's styles

@import "semantic-ui";

You can also include modules

@import "semantic-ui/collections/menu";

Javascripts

We have a helper that includes all Semantic javascripts. Put this in your Javascript manifest (usually in application.js) to

// Loads all Semantic javascripts
//= require semantic-ui

You can also load individual modules, provided you also require any dependencies.

//= require semantic-ui/modal
//= require semantic-ui/dropdown

semantic-ui-sass with Compass

New project

Install the gem and create a new project using the gem.

gem install semantic-ui-sass
compass create compass-project -r semantic-ui-sass --using semantic-ui

This will sort a few things out:

• You'll get a starting styles.scss
• You'll get a compiled stylesheet compiled & ready to drop into your application
• We'll also copy the Semantic javascripts & images & fonts into their respective folders for you

Existing project

Install the gem, add the require statement to the top of your configuration file, and install the extension.

gem install semantic-ui-sass

# In config.rb
require 'semantic-ui-sass'

compass install semantic-ui

Rails Helpers

Flash helper

Add flash helper <%= semantic_flash %> to your layout

Icon helper

semantic_icon('add')
# => <i class="add icon"></i>
semantic_icon(:add)
# => <i class="add icon"></i>
semantic_icon('add sign')
# => <i class="add sign icon"></i>
semantic_icon('add', 'sign')
# => <i class="add sign icon"></i>
semantic_icon(:add, :sign)
# => <i class="add sign icon"></i>

TODO

• Add global variables
• Add rails helpers like render_flash?

Contributing

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request