Semantic UI for Sass

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

NOTE

The gem only has default theme.

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

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

$font-url: 'http://fonts.useso.com/css?family=Lato:400,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';

Skip use of custom scrollbars

$use-custom-scrollbars: false;
@import 'semantic-ui';

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

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

Add packages with yarn:

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

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

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

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

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

TODO

Add global variables
Add rails helpers like render_flash?

Contributing

Fork it
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 new Pull Request