semantic-org/semantic-ui

Semantic is a UI component framework based around useful principles from natural language.

Semantic UI

Semantic is a UI framework designed for theming.

Key Features

• 50+ UI elements
• 3000 + CSS variables
• 3 Levels of variable inheritance (similar to SublimeText)
• Built with EM values for responsive design
• Flexbox friendly

Semantic allows developers to build beautiful websites fast, with concise HTML, intuitive javascript, and simplified debugging, helping make front-end development a delightful experience. Semantic is responsively designed allowing your website to scale on multiple devices. Semantic is production ready and partnered with frameworks such as React, Angular, Meteor, and Ember, which means you can integrate it with any of these frameworks to organize your UI layer alongside your application logic.

2.5.0 Release (Oct 6, 2022)

Semantic UI is now compatible with Node 18 and Gulp 4.

User Support

Please help us keep the issue tracker organized. For technical questions that do not include a specific JSFiddle test case (bug reports), or feature request please use StackOverflow to find a solution.

Visit our contributing guide for more on what should be posted to GitHub Issues.

Install

Recommended Install

npm install semantic-ui  # Use themes, import build/watch tasks into your own gulpfile.

Semantic UI includes an interactive installer to help setup your project.

• For more details on setup visit our getting started guide.
• To learn more about theming please read our theming guide

Additional Versions

Environment	Install Script	Repo
CSS Only	npm install semantic-ui-css	CSS Repo
LESS Only	npm install semantic-ui-less	LESS Repo
LESS plugin	npm install less-plugin-semantic-ui	LESS Plugin Repo
EmberJS	ember install:addon semantic-ui-ember	Ember Repo
Meteor - LESS	meteor add semantic:ui	Meteor Repo
Meteor - CSS	meteor add semantic:ui-css	CSS Repo
Bower	bower install semantic-ui

Check out our integration wiki for more options.

Browser Support

• Last 2 Versions FF, Chrome, Safari Mac
• IE 11+
• Android 4.4+, Chrome for Android 44+
• iOS Safari 7+
• Microsoft Edge 12+

Although some components will work in IE9, grids and other flexbox components are not supported by IE9 and may not appear correctly.

Community

Getting Help

Please do not post usage questions to GitHub Issues. For these types of questions use our Gitter chatroom or StackOverflow.

Submitting Bugs and Enhancements

GitHub Issues is for suggesting enhancements and reporting bugs. Before submiting a bug make sure you do the following:

• Check out our contributing guide for info on our release cycle.
• Fork this boilerplate JSFiddle to create a test case for your bug. If a bug is apparent in the docs, that's ok as a test case, just make it clear exactly how to reproduce the issue. Only bugs that include a test case can be triaged.

Pull Requests

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

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.

Resources

Resource	Description
Bugs & Feature Requests	All bug submission require a link to a test case, and a set of steps to reproduce the issue. You can make a test case by forking this JSFiddle, then submit your bug report on GitHub Issues
Live Chat	Join our Gitter.im Room
Newsletter Updates	Sign up for updates at semantic-ui.com
Additional Resources	Submit a question on StackOverflow or ask our Google Group

Places to Help

Project	How To Help	Next Step
Localization	Help us translate Semantic UI into your language	Join our Translation Community
SCSS	SASS needs PR to support variables inside @import	Add Pull Request for #739
Angular	Help develop angular bindings	Reach Out on GitHub Issues
Guides & Tutorials	Help write guides and tutorials	Join the discussion

Reaching Out

If you'd like to start a conversation about Semantic feel free to e-mail me at [email protected]

semantic-ui's Issues

One Point Oh

Miscategorized

collections/table: Celled table with 2px border on left side

Left border in the first column cells of the celled table adds 1px additionally to the 1px table border.

.ui.celled.table tbody td {
  border: 1px solid #E0E0E0;
}

Accordion Not Working

the accordion example on the page
http://semantic-ui.com/modules/accordion.html
is not working

Icon Extras

It would be awesome if font-awesome-ish icon styles were added.

E.g.

• Rotated/Flipped Icons
• Stacked Icons
• Spinners

Css bug

Nexus 7 2012

collections/menu: Search field is not vertically centered in menu

The search field in the menu is not vertically centered. Although the text for "search" is on the font baseline, I think the search field would look better if it is centered.

Active style disappear while scroll

Active style of secondary menu disappear while scroll on the page UI Definitions.

Remove -ms- prefixes for animation properties

As mentioned in MSDN (like http://msdn.microsoft.com/en-us/library/ie/hh772233(v=vs.85).aspx), -ms- prefix is not needed.

Modules events are being enqueued

The Dropdown and Dimmer hide and show events are being enqueued and executing multiple times.
To reproduce that try clicking the dropdown or dimmer button multiple times.

elements/image: First p with margin-top

The left floated image causes a margin-top for the first p.

Make it really semantic

Please rework the whole codebase, especially the examples, to make the project semantic, as it states itself to be.

Where is the semantic in styling a DIV as a button? Use the BUTTON-element instead. It has a special purpose and meaning. And purpose and meaning are what drives semantics. Not the naming of a class.

How do I create the scrolling menu seen in the left side of the documentation?

I want a menu that when I click an item, it scrolls to the part of the page it's pointed at.

Example: http://semantic-ui.com/elements/image.html

improve the semantic about menu component

if you have a list of items, you probably have to work with UL followed by LI

and if you have a short piece of code inside your menu, you shouldn't use DIV, because W3C recommends SMALL tag to do this.

Modal

Do you have Modal module in your Semantic UI?

Thanks!

collections/form: Hand cursor only on part of toggle checkbox

The hand cursor only shows if the mouse hovers over the red dot, but the checkbox can actually be toggled on the whole element. Thus the hand cursor should be shown when the mouse hovers the element instead of only the red dot.

Should be able to set width for a modal ?

or width should adapt itself to the device-width ?

elements/divider: Icon in input field caused wrong left offset in corner label icon

<div class="field">
  <label>Username</label>
  <div class="ui labeled icon input">
    <input type="password" placeholder="Username">
    <i class="user icon"></i>
    <div class="ui corner label">
      <i class="asterisk icon"></i>
    </div>
  </div>
</div>

How the corner label icon looks if the icon i in the input field and the class icon in the div are removed:

<div class="field">
  <label>Username</label>
  <div class="ui labeled input">
    <input type="password" placeholder="Username">
    <div class="ui corner label">
      <i class="asterisk icon"></i>
    </div>
  </div>
</div>

Also: input type should not be "password" for the username.

modules/accordion: colored table segment without curved corners

The border corners in the table segments in modules/accordion...

...should look like that of the colored segments in elements/segment.

The tables on the doc pages of the other modules use celled definition table segments instead of colored table segments. Do the definition tables supersede the colored tables? It would be nice to have an example of a colored table segment in collections/table.

elements/label: Ribbon label with small gap to segment

Here the ribbon label has a small gap in interaction with segment.

In element.html (UI Elements) the ribbon label has no gap in interaction with items > item.

Browser support

This project looks amazing. I can't find any info on browser support. Did I miss it or has it not been decided yet? Will it be similar to bootstrap? http://getbootstrap.com/getting-started/#browsers

If it hasn't been decided yet, can I vote for IE8+ support as that is our clients requirements.

Modal doesn't show correctly on iphone

AJAX form validation

Does you have any plans to add any kind of AJAX-validations support for the form validation module? I think, it would be great.

Some icons do not work.

for example: http://screenshot.su/show.php?img=020e2ad16a6ff85c2a957355f1dee106.jpg

google chrome
ver 29.0.1547.66 m (last)

Issue when closing the dimmer

In the second example of dimmer documentation to close it you have to click out of the centered div, and could mislead the user.
I think would be better if close when you click anywhere.

Form Validations

To make inline validation perfect (the last example here http://semantic-ui.com/modules/form.html) according to the UX, the scenario should be like that:

1. I enter 'wrong' data, no error is showed.
2. I move focus to the other input and in case of wrong data in previous one the inline error appears.
3. I return to the input with wrong data and (this part works wrong now) as only as I enter correct data the error message disappears.
   Now check happens only when the input loses focus. But in case of error already shown check should happen after every sign typed.
   

Icons are cropped

The icons on the last example (Inverted) on this page are cropped on top and left side.http://semantic-ui.com/elements/icon.html

Add a select dropdown with a search input

I wnat to talk about the possibility of adding a select dropdown with input search, some like Select2, Selectize or Choosen... but restyled to fit to the apperance of semantic-ui.
With an animation when the dropdown appear.
Would be epic. I think would be very useful.

Checkbox (radio) in modal not working

Hi,
I'm displaying a radio group inside a modal and the radios are not selectable (clickable). Might be a z-index problem?

<div class="ui dimmer page visible active">
<div class="ui signoff modal transition visible active" style="margin-top: -198px;">
            <i class="close icon"></i>
            <div class="header">
              ...
            </div>
            <div class="content">
              <div class="left">
                <img class="ui image" src="images/avatar.jpg">
              </div>
              <div class="right">
                <div class="ui header">...</div>
                <div class="ui form">
                  <div class="grouped inline fields">
                    <div class="field">
                      <div class="ui radio checkbox">
                        <input type="radio" name="example" checked="checked" value="1">
                        <label></label>
                      </div>
                      <label>A</label>
                    </div>
                    <div class="field">
                      <div class="ui radio checkbox">
                        <input type="radio" name="example" value="2">
                        <label></label>
                      </div>
                      <label>B</label>
                    </div>
                    <div class="field">
                      <div class="ui radio checkbox">
                        <input type="radio" name="example" value="3">
                        <label></label>
                      </div>
                      <label>C</label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="actions">
            ...
            </div>
          </div>
</div>

collections/grid: Menu item uses missing (old) font Neutraface instead of Open Sans

The font in the black menu items, The font Neutraface is not found and defaults to a serif font.

#example .page .menu, 
#example .page .of {
  font-family: 'Neutraface';
}

Conditional button only with "or" word

In the conditional buttons there is no the chance to choose the word of inside.
Imagine that someone wants to put "and" instead, or just a word in another language.

modules/modal: On 'show' passes default params

I may be not that experienced with UI but let me show what happens when I try to pass onHide function into the modal.
At first, I initialise it with these params. And I can see that the params were passed successfully:

        debug: false
        performance: false
        onHide: ->
            console.log "Hided!"
        onShow: ->
            console.log "Shown!" 

But if I try to show it:

$('.ui.modal').modal('show')

I get a modal with default params. E. g. with debug: true and without callbacks.

What am I doing wrong?

On the docs site, anchors are too small to click

Firstly, I think this is awesome.

Little issue. The clickable area in links on the top of your site are as small as 7 px wide. It'd be easier if the anchors filled the container. Thanks!

examples/feed: right floated date

<a class="item">
  <i class="empty star link icon"></i>
  text
  <div class="right floated date">Sep 05, 2013</div>
</a>

should be

<a class="item">
  <div class="right floated date">Sep 05, 2013</div>
  <i class="empty star link icon"></i>
  text
</a>

So that it shows the text and dates like in the feed view.

Corner label in field is above the loader in form loading-state

should add a z-index:>10 to.ui.form.loading:after ...

circular icon inside field isn't circular

<div class="field">
    <label>Password</label>
    <div class="ui right labeled icon input">
      <input type="password">
      <i class="circular inverted teal lock icon"></i>
    </div>
  </div>

Doc mention a roadmap but I wasn't able to find it :)

Datepicker for Date field or automatic formatting

It would be just great :)

Gulp - Add Official NuGet Package

It would be great if you'll make your project available in Nuget.

Thanks in advance!

Autocomplete

I hope you will add autocomplete to your project soon... Thanks!

why fontello and not icomoon ?

hi

thanks a lot for your work i love semantic-ui

is there a special reason for choosing fontello ?

Modal with dimmer - working only once

Hi,
I've used this lib for the first time, I love the design and feel!

I've found a couple of problems, this is related to the modal:

To show the modal I use:

$('.ui.modal.signoff').modal('toggle')

This is the inspected HTML:

<div class="ui dimmer page visible active">
<div class="ui signoff modal transition visible active" style="margin-top: -198px;">
...
</div>
</div>

After closing the modal, this is the HTML (no more classes on the modal div!):

<div class="ui dimmer page hidden">
<div class="" style="margin-top: -198px;">
....
</div>
</div>

Alex

multiple screen support

I was wondering if you are planning to provide multi-screen support, something like ink's:

http://ink.sapo.pt/layout#nav-screens

or twitter bootstrap responsive utilities:

http://getbootstrap.com/css/#responsive-utilities

(I think I like ink's approach better...)

collections/menu: Small icon offset when hovering over secondary menu

There is a small offset between normal and hover icons in the secondary menu.

Silders/Toggles dont appear to work

When attempting to use the Slider/Toggle they appear to be static

JSFiddle example
http://jsfiddle.net/PPHkQ/1/

Colums are not responsive.

I was checking the grid examples, I redimensionated the browser, and this is the result:

Problem with fixed menu and loader

Hi, I think fixed menu should be above of loader, but only if loader not in modal window.

elements/button: Gaps and text on horizontally attached buttons

There is a gap between the buttons and the text is not horizontally centered.

On the website, 'Download' uses the 'Upload' icon

In both the sidebar and the main button on the homepage, this isn't very semantic.

There is a download icon available on Fontello.

Class stack you're using:

inverted circular red upload icon

What it should probably be:

inverted circular red download icon

More Specification Information

i want to say well done ... Good Job 👍 I think it would be nice to add more specification such as

• Supported Browser
• CSS version
• Possible Dependency (eg HTML5)
• Mobile Compatibility
• Performance
• etc

modules/dropdown: Combobox is missing border when pressed

Should look like the combobox "Gender" in section Types/Selection, I think. :)