semantic-ui-sass is an Sass-powered version of
Semantic UI and ready to drop
into Rails, Compass, or Sprockets.
The gem only has default theme.
gem 'semantic-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';$use-custom-scrollbars: false;
@import 'semantic-ui';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;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/dropdownAdd packages with yarn:
yarn add jquery popper.js @doabit/semantic-ui-sassIn 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'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-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 semantic-ui-sass# In config.rb
require 'semantic-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?
- 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