Fomantic UI, converted to SASS and ready to drop into Rails & Compass.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
app Update Fomantic UI to 2.7.2 Feb 5, 2019
gemfiles Specify gemspec path Dec 15, 2018
lib Update Fomantic UI to 2.7.2 Feb 5, 2019
spec Install rubocop Dec 14, 2018
tasks Install rubocop Dec 14, 2018
templates/project Install rubocop Dec 14, 2018
.gitignore Test against multiple versions of ruby and rails Dec 14, 2018
.rspec Add flash helper Oct 21, 2013
.rubocop.yml Install rubocop Dec 14, 2018
.rubocop_todo.yml Install rubocop Dec 14, 2018
.travis.yml Run default rake task in Travis Dec 14, 2018
Gemfile first commit Oct 9, 2013
LICENSE.txt Correct name Feb 5, 2019
fomantic-ui-sass.gemspec Update homepage in gemspec Jan 7, 2019

Fomantic UI for Sass

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.

Gem Version Build Status


The gem only has default theme.

Installation and Usage

gem 'fomantic-ui-sass'

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

fomantic-ui-sass with Rails or Sprockets


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

Custom font

$font-url: ',700,400italic,700italic&subset=latin';
@import 'semantic-ui';

Skip font loading

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

Custom font family

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

All variables, you can custom any of that

$import-google-fonts: true !default;
$font-url: ',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

fomantic-ui-sass with Compass

New project

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

Existing project

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

Rails Helpers

Breadcrumbs helper

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

class ApplicationController
  semantic_breadcrumb :index, :root_path
class ExamplesController < ApplicationController
  semantic_breadcrumb :index, :examples_path

  def index

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

Flash helper

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

Icon helper

# => <i class="add icon"></i>
# => <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?


  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