Menu

Recipes

Custom Pipelines

Importing Gulp Tasks

You don't have to use our gulp pipeline, just import the task into your own gulpfile

You can fork this example project to see an example of how to import Semantic UI tasks into your project.

var gulp = require('gulp'), watch = require('./semantic/tasks/watch'), build = require('./semantic/tasks/build') ; // import task with a custom task name gulp.task('watch ui', watch); gulp.task('build ui', build);

Semantic.json Settings

Auto-Install

Running npm install normally will launch an interactive installer, to allow this installer to run without user interaction include a special flag autoInstall: truein your semantic.json file.

{ // install will now automatically build your project files without user interaction "autoInstall": true, // these settings may be different "base": "", "paths": { "source": { "config": "src/theme.config", "definitions": "src/definitions/", "site": "src/site/", "themes": "src/themes/" }, "output": { "packaged": "dist/", "uncompressed": "dist/components/", "compressed": "dist/components/", "themes": "dist/themes/" }, "clean": "dist/" }, "permission": false, "rtl": false, }

Right-to-left (RTL) Languages

Including the flag rtl:true will build Semantic UI using RTLCSS.

To build both LTR and RTL versions use the flag rtl: 'both'

{ // builds both LTR and RTL version "rtl": "both", // these settings may be different "base": "", "paths": { "source": { "config": "src/theme.config", "definitions": "src/definitions/", "site": "src/site/", "themes": "src/themes/" }, "output": { "packaged": "dist/", "uncompressed": "dist/components/", "compressed": "dist/components/", "themes": "dist/themes/" }, "clean": "dist/" }, "permission": false, }

Prototyping with Semantic UI

Sketch Files

If you are looking to prototype layouts using Sketch with Semantic UI check out Semantic UI Sketch Files

Single Components

CDN Releases

Individual components are available on jsDelivr

View All CDN Files

Tagged Releases

Component repos are released on NPM and as tagged releases on GitHub.

Check the list of repos available under Semantic Org on GitHub

Each component's release notes will automatically update with the relevant notes for that component from the main release.

npm install semantic-ui-component

Server-Side Rendering

Individual components repos include an auto-generated index.js file to simplify require use with NodeJS, for server-side rendering or with Browserify.

npm install semantic-ui-dropdown
var dropdown = require('semantic-ui-dropdown') ; foo.dropdown();

Importing LESS

LESS Only Distribution

A special distribution Semantic-UI-LESS is available for projects that use custom integrations and do not require our build tools.

LESS source files are not prefixed, and will need to be run through autoprefixer before being used

Importing Semantic

semantic.less is available in all releases as an entry point for importing multiple components from other LESS files.

/* Import all components */ @import 'src/semantic';

Importing Components

If you need to import individual components, you should scope each import to avoid inheritance issues.

/* Import specific components with scope */ & { @import 'src/definitions/elements/button'; } & { @import 'src/definitions/elements/list'; }

Running Docs Locally

Download Docs Server

The easiest way to get Semantic UI docs is to clone the repo

git clone https://github.com/Semantic-Org/Semantic-UI-Docs.git

Install Dependencies

Semantic UI's documentation is written in Docpad an amazing static site generator built in NodeJS

cd docs/ npm install

A Note About Paths

Semantic UI's build tools include two special commands build-docs and serve-docs for use with the documentation. These will pass changes from the ui/ folder directly to a live docs server.

These gulp tasks expect two sibling folders

ui/
Files from semantic ui repo
docs/
Files from docs repo

Build UI

The first time you run docs you will need to build the whole project once

cd ui/ gulp build-docs

Run Docpad Server

Docpad

cd docs/ # initial build may take several minutes docpad run

Serve UI to Docs

You can then continue to make modifications to UI and "serve" these files to a live docs instance to see your changes immediately

cd ui/ gulp serve-docs

Hosted Docs

If you are managing your documentation you can automatically deploy to GitHub Pages using a built in docpad gh-pages plugin

For more information about GitHub Pages, check out the docs on GitHub

docpad deploy-ghpages --env static

Custom Docs Paths

Doc task paths are specified in a file tasks/config/docs.js and can be adjusted to use any folder set-up necessary for your project.

Dimmer Message
Dimmer sub-header