Semantic UI

Semantic is a highly-themable UI framework with intuitive naming conventions built around common usage.

Key Features

• 50+ UI Elements
• 3000 + CSS Variables
• 3 Levels of Variable Inheritance (Similar to SublimeText)
• Built using EM values for responsive design

Semantic UI is now at 1.0, be sure to check out our release notes for changes from the pre-release.

International

• Chinese A Chinese mirror site is available at http://www.semantic-ui.cn
• Right-to-Left (RTL) - An RTL version can be created using our build tools by selecting rtl from the install script
• Translation - To help translate see the Wiki Guide for translations

Release Schedule

Semantic follows a weekly schedule for feature updates. To see what changes are scheduled for upcoming releases, be sure to visit the release milestone page.

Community Support

• Want to learn about Semantic? Request an Invite to join our Slack chatroom for support and project discussions
• Have a bug? Make a test case by forking this jsfiddle, then submit a bug on GitHub
• Having issues with your code? Submit a question on StackOverflow or ask our Google Group
• Looking for a specific integration like Dart, Wordpress, Angular, or Rails? Check out our integration page

Contributing

• Missing documentation in your language? Help us make Semantic available in more languages by joining our translation community
• Want to help with integration? Projects are organizing for official Meteor, and Angular integrations as well as a Sass port. Join the discussion on their respective boards.
• Want to help others learn concepts behind Semantic? Learnsemantic.com needs articles to help others get others up to speed with Semantic UI. Send me an e-mail if you are interested.

Getting Started

Basic Usage (Default Theme)

We recommend setting up the Semantic build workflow to support on-the-fly theming and customization, but it is not required.

To use the "ready-to-use" distribution version, which includes all components, simply link to dist/semantic.js and dist/semantic.css (or their minified counterparts) in your page.

<link rel="stylesheet" type="text/css" href="/dist/semantic.min.css">
<script src="/dist/semantic.min.js"></script>

You may also prefer to use individual components found in dist/components to reduce the libraries file size.

<link rel="stylesheet" type="text/css" href="/dist/components/icon.css">

Recommended Usage (Themed)

Semantic is best used actively during development. We have included build tools for updating your site's theme as you work.

npm install
gulp

Running gulp for the first time will start the interactive set-up.

This helps you create two important files semantic.json which stores your folder set-up, and themes.config a central file for setting ui themes.

The install utility will also help you set-up which components you want to include in your packaged release, ignoring parts of Semantic you may not use.

Once set-up you can use these commands to maintain your project

gulp  // defaults to watch after install
gulp build // build all files from source
gulp clean // clears your dist folder
gulp watch // watch files
gulp install // re-runs install
gulp help // list all commands

For more detail into how work with Semantic when building a site please read out customization guide on LearnSemantic.com

Meteor

To use Semantic with the Meteor.js framework, run

$ meteor add semantic:ui

Learn more by reading the Meteor integration README.

Browser Support

• Last 2 Versions FF, Chrome, IE (aka 10+)
• Safari 6
• IE 9+ (Browser prefix only)
• Android 4
• Blackberry 10

Pull Requests

When adding pull requests be sure to merge into next branch. If you need to demonstrate a fix in next release, you can use this jsfiddle

Reaching Out

If you'd like to start a conversation about Semantic feel free to reach out by e-mail jack@semantic-ui.com