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:
styles.scss
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>
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.
git checkout -b my-new-feature
)git commit -am 'Add some feature'
)git push origin my-new-feature
)