Skip to content
<awesome-gh-repos>
vic

doabit/semantic-ui-sass

Semantic UI, converted to Sass and ready to drop into Rails & Compass.
Source code at GitHub https://github.com/doabit/semantic-ui-sass
doabit/semantic-ui-sass.json
{
  "createdAt": "2013-10-09T03:34:04Z",
  "defaultBranch": "master",
  "description": "Semantic UI, converted to Sass and ready to drop into Rails & Compass.",
  "fullName": "doabit/semantic-ui-sass",
  "homepage": "",
  "language": "SCSS",
  "name": "semantic-ui-sass",
  "pushedAt": "2022-07-03T19:06:47Z",
  "stargazersCount": 1134,
  "topics": [],
  "updatedAt": "2025-10-26T17:42:00Z",
  "url": "https://github.com/doabit/semantic-ui-sass"
}

Semantic UI for Sass

Section titled “Semantic UI for Sass”

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

Build Status

NOTE

Section titled “NOTE”

The gem only has default theme.

Installation and Usage

Section titled “Installation and Usage”
gem 'semantic-ui-sass'

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

semantic-ui-sass with Rails or Sprockets

Section titled “semantic-ui-sass with Rails or Sprockets”

CSS

Section titled “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';

Custom font

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

Skip font loading

Section titled “Skip font loading”
$import-google-fonts: false;
@import 'semantic-ui';

Custom font family

Section titled “Custom font family”
$font-family: 'custom-font-family';
@import 'semantic-ui';

Skip use of custom scrollbars

Section titled “Skip use of custom scrollbars”
$use-custom-scrollbars: false;
@import 'semantic-ui';

All variables, you can custom any of that

Section titled “All variables, you can custom any of that”

Fonts:

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

Scrollbars:

$use-custom-scrollbars: true !default;

Breakpoints:

$mobile-breakpoint: 320px !default;
$tablet-breakpoint: 768px !default;
$computer-breakpoint: 992px !default;
$large-monitor-breakpoint: 1200px !default;
$widescreen-monitor-breakpoint: 1920px !default;

Javascripts

Section titled “Javascripts”

Ruby on Rails Version 5

Section titled “Ruby on Rails Version 5”

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

Ruby on Rails Version 6+ with webpacker

Section titled “Ruby on Rails Version 6+ with webpacker”

Add packages with yarn:

Terminal window
yarn add jquery popper.js @doabit/semantic-ui-sass

In config/webpack/environment.js add the following:

const webpack = require('webpack')


environment.plugins.append(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default']
  })
)

In app/javascript/packs/application.js add the following:

import '@doabit/semantic-ui-sass'

If you use webpacker to import stylesheet, you should add

import '@doabit/semantic-ui-sass/src/scss/semantic-ui.scss'

Rails6 webpacker demo

semantic-ui-sass with Compass

Section titled “semantic-ui-sass with Compass”

New project

Section titled “New project”

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

Terminal window
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

Section titled “Existing project”

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

Terminal window
gem install semantic-ui-sass
# In config.rb
require 'semantic-ui-sass'
Terminal window
compass install semantic-ui

NOTE

Section titled “NOTE”

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

Section titled “Rails Helpers”
Section titled “Breadcrumbs helper”

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

Flash helper

Section titled “Flash helper”

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

Icon helper

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

TODO

Section titled “TODO”
  • Add global variables
  • Add rails helpers like render_flash?

Contributing

Section titled “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