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-uiYou can also load individual modules, provided you also require any dependencies.
//= require semantic-ui/modal
//= require semantic-ui/dropdownInstall 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-uiThis 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-uiWhen 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
endclass 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
endAdd 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.
- 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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent