Stack Overflow
Stack Overflow

Questions tagged [semantic-ui]

Semantic UI is a development framework for creating responsive layouts using human-friendly HTML and Javascript.

Semantic UI is a component framework based around useful principles from natural language. SUI can be used to helps create beautiful, responsive layouts using human-friendly HTML. Semantic UI is powered by Less and jQuery. It has a flat design look. The goal of the framework is to empower designers and developers by creating a language for sharing UI.

Current version: Semantic UI v2.4.1

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

Structure of Components

  • Element
  • Collection
  • View
  • Module
  • Behavior

Browser Support

  • Last 2 Versions FF, Chrome, IE 10+, Safari Mac
  • IE 10+
  • Android 4

Browser prefixes are present for Internet Explorer 9, but the browser is not officially supported for all components.

2735 questions
165
votes
18 answers

How to import jquery using ES6 syntax?

I'm writing a new app using (JavaScript) ES6 syntax through babel transpiler and the preset-es2015 plugins, as well as semantic-ui for the style. index.js import * as stylesheet from '../assets/styles/app.scss'; import * as jquery2 from…
Édouard Lopez
  • 40,270
  • 28
  • 126
  • 178
110
votes
3 answers

Semantic-ui vs Bootstrap

Which is the best one to use and if possible, please provide the difference(s) and advantages of these two. Semantic-ui vs Bootstrap I am trying to build my UI and really confused as what to use. Please suggest me the best one and if possible with…
Java Questions
  • 7,813
  • 41
  • 118
  • 176
93
votes
5 answers

Center div on the middle of screen

What is the best pattern to align a semantic ui grid in the middle of the screen? the css for this will ideal be this one. .div{ position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; width: 100px; …
carloss medranoo
  • 1,399
  • 2
  • 14
  • 19
59
votes
7 answers

semantic-ui dropdown menu do not work

I have been trying to build a menu using Semantic-UI. I can't get the dropdown menus to work at all. I took a copy of the page Menu examples and pulled out everything except the tiered menu and placed it in a separate file. Only the dropdown menu…
CarbonMan
  • 4,350
  • 12
  • 54
  • 75
40
votes
4 answers

How to use Semantic UI CDN?

How to include Semantic UI to HTML page using CDN? The CDN link is https://cdnjs.com/libraries/semantic-ui, but how to use it?
Adi
  • 876
  • 2
  • 8
  • 17
38
votes
8 answers

Datepicker in semantic ui

Is there any datepicker for semantic ui like bootstrap datepicker? I searched their website. But failed to get. Jquery datepicker is worked nicely but UI does not look nice with my project.
Russell
  • 1,624
  • 5
  • 23
  • 43
33
votes
2 answers

How to use Link components in Menu.List elements

I'm trying to get a semantic ui (react) menu list, which should be working with react router, which means I would like to use the Link component of react router If I use this... My…
user3142695
  • 15,844
  • 47
  • 176
  • 332
32
votes
3 answers

Vertical alignment of a div using Semantic-UI

I can't seem to find it anywhere in the docs. Is there a way to vertically center a div on the page using Semantic-UI semantics :) Here is what I'm trying to do:
I want to be…
Michael Khait
  • 755
  • 1
  • 6
  • 12
28
votes
5 answers

Using vue.js with semantic UI

I'm trying to use webpack + Semantic UI with Vue.js and I found this library https://vueui.github.io/ But there was problem compling: ERROR in ./~/vue-ui/components/sidebar/sidebar.jade Module parse failed: /Project/node_modules/vue- …
T0plomj3r
  • 685
  • 1
  • 9
  • 23
28
votes
3 answers

Semantic UI dropdown change handler

I have the following dropdown using Semantic UI:
French
Ionică Bizău
  • 109,027
  • 88
  • 289
  • 474
27
votes
13 answers

How to keep focus within modal dialog?

I'm developing an app with Angular and Semantic-UI. The app should be accessible, this means it should be compliant with WCAG 2.0. To reach this purpose the modals should keep focus within the dialog and prevents users from going outside or move…
smartmouse
  • 13,912
  • 34
  • 100
  • 166
24
votes
4 answers

How to toggle content in Semantic UI buttons?

The documentation says a button can be formatted to toggle on or off, but the example given is merely
Vote
which naturally, doesn't work. An inspection of the source code of the example reveals an active…
Huey
  • 5,110
  • 6
  • 32
  • 44
22
votes
2 answers

How do I properly mock third party libraries (like jQuery and Semantic UI) using Jest?

I have been learning React, Babel, Semantic UI, and Jest over the last couple of weeks. I haven't really run into too many issues with my components not rendering in the browser, but I have run into issues with rendering when writing unit tests with…
Reece Long
  • 437
  • 1
  • 4
  • 13
21
votes
11 answers

Icons not showing with Semantic UI

I am building Semantic UI with Gulp using this guide However, the problem is now that the icons are not showing. So if I use , nothing shows up. I guess I haven't built the icon font or something like that. Is it…
Jamgreen
  • 10,329
  • 29
  • 113
  • 224
21
votes
2 answers

Which are the correct classes for responsive visibility in Semantic-UI?

I am new with semantic-UI and i love with the framework. They have vast of helpful documentation though, and more so confusing thing. How does the Responsive visibility work? There are the mobile only tablet only small monitor onlylarge monitor…
postsrc
  • 732
  • 3
  • 9
  • 26
1
2 3
…
99 100