fomantic-ui-sass is an Sass-powered version of Fomantic UI and ready to drop into Rails, Compass, or Sprockets. It was forked from semantic-ui-sass to track Fomantic UI, a community fork of Semantic UI, and is intended to be a drop-in replacement. The project keeps references to Semantic UI for that reason and because Fomantic UI intends to merge back into Semantic UI once active development of Semantic begins again.

The gem only has default theme.

gem 'fomantic-ui-sass'

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

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";

$font-url: 'http://fonts.useso.com/css?family=Lato:400,700,400italic,700italic&subset=latin';
@import 'semantic-ui';

$import-google-fonts: false;
@import 'semantic-ui';

$font-family: 'custom-font-family';
@import 'semantic-ui';

$import-google-fonts: true !default;
$font-url: 'https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin,latin-ext' !default;
$font-name: 'Lato' !default;
$font-family: $font-name, 'Helvetica Neue', Arial, Helvetica, sans-serif !default;

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

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

gem install fomantic-ui-sass
compass create compass-project -r fomantic-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

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

gem install fomantic-ui-sass

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

compass install semantic-ui

When using compass, you should visit file in local server, eg http://localhost:3000/index.html, rather than file:///Users/doabit/demo/index.html

Add breadcrumbs helper <%= semantic_breadcrumbs %> to your layout.

class ApplicationController
  semantic_breadcrumb :index, :root_path
end

class ExamplesController < ApplicationController
  semantic_breadcrumb :index, :examples_path

  def index
  end

  def show
    @example = Example.find params[:id]
    semantic_breadcrumb @example.name, example_path(@example)
    # semantic_breadcrumb :show, example_path(@example)
  end
end

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

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>
semantic_icon('add', id: 'id')
# => <i class="add icon" id="id"></i>

• Add global variables
• Add rails helpers like render_flash?

The version for Fomantic-UI-SASS tracks the version for Fomantic-UI. The first three digits indicate the major, minor, and patch version of Fomantic-UI. The fourth digit indicates a patch release for Fomantic-UI-SASS.

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