
Semantic UI - jhund
https://semantic-ui.com/
======
jameslk
I've always found it ironic that this library calls itself "Semantic UI" but
doesn't follow the practice of semantic HTML/classes[0]. W3C suggests[1] that
classes should be used for semantic roles (e.g. "warning", "news", "footer"),
rather than for display ("left", "angle", "small" \-- examples taken from
Semantic UI's docs). So instead of giving a button the class of "button" it
would be better to give it a class such as "download-book." The benefit of
this is when it comes time to redesign parts of a site, you only have to touch
your stylesheets instead of manipulating both the stylesheets and HTML. That
is, so we don't fall into the old habits of what amounts to using <b> <font>
<blink> tags.

0\. [https://css-tricks.com/semantic-class-names/](https://css-
tricks.com/semantic-class-names/)

1\.
[https://www.w3.org/QA/Tips/goodclassnames](https://www.w3.org/QA/Tips/goodclassnames)

~~~
jasim
The concept of 'semantic classnames', even if propagated by w3.org has caused
as much grief as the concept of 'separation of concerns' between HTML & CSS
fad. The reason we need semantics in HTML is to make the markup accessible for
screen-readers, and no screenreader considers the class name of an element
when reading it out. What we instead need are semantic tags like article,
section etc. and aria tags like role.

CSS classnames are purely for the developer's benefit. Not the user's. And as
developers, forcing ourselves to find semantic meaning for every element we
write leads us to component-oriented CSS like BEM. Which is a fine thing, but
we can also use purely visual classes - like `bg-red bold border-solid` if it
helps (and it does. check out tachyons.io)

The class names of elements in Google's homepage for example reads like
'tsf-p', `oq`, `gsb` etc. I suspect these are machine generated. Same with
Facebook. One of the best libraries to do this currently is styled-components
([https://github.com/styled-components/styled-
components](https://github.com/styled-components/styled-components)).

Consider reading [http://nicolasgallagher.com/about-html-semantics-front-
end-a...](http://nicolasgallagher.com/about-html-semantics-front-end-
architecture/), [http://mrmrs.io/writing/2016/03/24/scalable-
css/](http://mrmrs.io/writing/2016/03/24/scalable-css/), and
[http://johnpolacek.com/2016/06/17/atomic-css-
movement/](http://johnpolacek.com/2016/06/17/atomic-css-movement/) for
reasoned perspectives.

~~~
jameslk
I think this is missing the point. For me, semantic class names have lead to
very maintainable websites/apps that I've been able to completely redesign
without touching much of the HTML, which is usually much harder to change in
larger dyanmic applications. It's also made it much easier on teams I've
worked with because the designers could quickly dig into the styles to make
tweaks in a central location (single source of truth) without rummaging
through our entire codebase to modify appearances of things (separation of
concerns).

When I first discovered csszengarden.com, I realized the point of CSS and its
power. HTML was made for hypertext and semantic content structure and CSS was
made for appearances. Either one could be completely replaced partially or
wholly, separate of each other. Classes are like interfaces[0] which allows
for HTML to remain dumb and decoupled from presentation. When the HTML and CSS
are hardcoded to specific design concepts themselves, then the usefulness of
CSS as in "cascading style sheets" is nearly eliminated. These concepts aren't
a fad, this is good software architecture brought to you by an international
consortium who's been thinking about it for decades.

0\.
[https://en.wikipedia.org/wiki/Dependency_inversion_principle](https://en.wikipedia.org/wiki/Dependency_inversion_principle)

~~~
andrewingram
There's flaw in reasoning here, but I'm glad we're at least focusing on the
maintainability arguments.

Ultimately it comes down to how your CSS is authored, and how your teams
works. If you develop in a heavily document-oriented way, and make big use of
the cascade, you're most likely to benefit from semantic (rather than
presentational) class names. This is because when you make full use of the
cascade, markup changes tend to be more expensive (you can't just move a block
of HTML from one place to another and not expect its appearance to change).

These days though, we're increasingly building things in a UI-oriented way.
What you see on the page is a composition of a number of components. If I move
a component from one place to another, I expect it to look the same (with a
caveat for responsive layouts) assuming it's still rendered with the same
input properties. So now i'm authoring CSS that is bound to the structure of
this component, naming becomes a lesser issues. The other thing worth pointing
out is that it's not too difficult to built a document-UI (like say a
magazine) using app-UI patterns, but it's rather challenging to do it the
other way around.

If the goal is maintainability, then there should be zero industry-wide dogma.
Best practices are going to be coupled to the methodology of the maintaining
team. Personally, I did document-oriented CSS for 15 years, now i'm doing
component-oriented CSS, and the results are _much_ better. Obviously this is
just an anecdote, but i'm not alone in this.

This idea that design is a "layer" on top of structure is somewhat offensive
to the designer in me. Visual design is (and should forever be) coupled to
structure and behaviour. Design is not a higher abstraction, it's something
that pervades everything.

~~~
nailer
> If I move a component from one place to another, I expect it to look the
> same (with a caveat for responsive layouts) assuming it's still rendered
> with the same input properties.

What's preventing you from doing this with your presentation login in your
stylesheet, and what about this requires you to split your presentation logic
between a stylesheet and HTML?

We use components everywhere. We style in stylesheets. Handily we even keep
the stylesheets in the same component as the module, thanks to npm-sass /
sass-npm.

~~~
andrewingram
Sorry, i'm struggling to follow what you're asking here.

Whether you style in stylesheets or by some other means (CSS-in-JS?) is an
implementation choice rather than something that affects the fundamental
pattern. If your components are truly portable, you're already doing things
the way I suggest. If they inherit things like fonts and colors from their
parent _via the cascade_ rather than via explicit properties, then you don't
have truly portable components - their appearance will change when you move
them around.

~~~
nailer
> Whether you style in stylesheets or by some other means (CSS-in-JS?)

We're specifically talking here about putting styling logic - "left" "shiny"
"big" etc - in HTML.

> is an implementation choice rather than something that affects the
> fundamental pattern.

Sure, you can still use a component pattern with styling split into HTML and
stylesheets - it certainly doesn't effect the pattern.

The issue is: when you want to change the appearance of your component, do you
want to modify styling logic in two places or one?

~~~
andrewingram
One, that's why I style inline :)

~~~
nailer
Do you mean inline in CSS / style tags, avoiding visual HTML classes (in which
case we're in agreement - there's one way to edit how something looks, though
style tags have other issues) or combining either of those with visual HTML
classes like this library uses?

~~~
andrewingram
Okay, I think we're in agreement and are just crossing wires a but. The main
reason i'm loosely okay with Semantic UI is that I just see it as using HTML
fragments as building blocks rather than using JavaScript components. I
wouldn't advocate it for anything elaborate, but I think it can work well
within a certain problem space.

------
jwr
I use Semantic UI in production on
[https://partsbox.io/](https://partsbox.io/) and can list some upsides and
downsides.

On the positive side:

* very complete, with good form styling, and lots of widgets you will use often, which is especially important for larger apps,

* the default theme is mature and has good usability, without the crazy "oh, how flat and invisible our UI is!" look.

* the class naming plays well with React (I use ClojureScript and Rum) and looks good in your code,

On the negative side:

* the CSS is huge and there is little you can do to trim it down,

* the JavaScript code is not Google Closure-ready, so it's a drag compared to my ClojureScript codebase: large and unwieldy,

* there is a jQuery dependency, so I have to pull that in, too,

* the build system is… well, strange, let's put it that way. I'm used to typing "make" and getting things built, while this thing here insists on a) painting pretty pictures in the console window, b) crapping node_modules in a directory _up_ from the one I'm building in, c) requires interactive feedback. I still haven't found a way to automatically build Semantic UI from a zip/tarball, and others seem to struggle with it, too.

Overall, I'm happy with the choice and it has been serving me well.

~~~
tzury
FYI: The React version - is jQuery free

[http://react.semantic-ui.com/introduction](http://react.semantic-
ui.com/introduction)

~~~
espresso_enigma
I'm trying that out, and it seems that jquery is installed when you include
the Semantic UI CSS. According to the docs: [http://react.semantic-
ui.com/usage](http://react.semantic-ui.com/usage), you need to install the CSS
separately with

    
    
      $ npm install semantic-ui-css --save
    

and with that I get

    
    
      ├─┬ semantic-ui-css@2.2.10
      │   └── jquery@3.2.1
    

Plus a whitescreen because jQuery is not defined...bummer

~~~
espresso_enigma
Sorted it, thanks to this: [https://github.com/Semantic-Org/Semantic-UI-
React/issues/114...](https://github.com/Semantic-Org/Semantic-UI-
React/issues/1143#issuecomment-284625478)

    
    
      import 'semantic-ui-css';
    

should have been

    
    
      import 'semantic-ui-css/semantic.min.css';
    

Documentation of how to actually import and use the CSS would be nice...might
be obvious to the creators, but not to hardheads like myself.

------
jlukic
For people who are curious about theming here is classic GitHub done entirely
in Semantic UI. [http://semantic-org.github.io/example-
github/](http://semantic-org.github.io/example-github/)

(Click the small paint icon in the top menu to swap themes to see in native
SUI)

I did a meteor dev night where I talked about some of the ideas behind
Semantic UI, which might clear up some of the linguistic origins for the
library and it's ideas about language:
[https://www.youtube.com/watch?v=86PbLfUyFtA](https://www.youtube.com/watch?v=86PbLfUyFtA)

And if anyone wants to dig really deep, there are a few podcasts as well
[https://changelog.com/podcast/106](https://changelog.com/podcast/106)
[https://changelog.com/podcast/164](https://changelog.com/podcast/164)

~~~
flashmob
For a minute I though I was looking at the real github and they finally got
rid of that black bar. Well done! ;-)

~~~
xiaohanyu
haha, yep, this example shows the power of Semantic-UI, I was attracted by
this---I was really amazed by the power of Semantic-UI.

Besides, I don't like github's black navbar.

------
TomFrost
Semantic recently adopted my team's React adaptation as their official React
port. It's lighter weight, eliminates jQuery, and all components are standard
React components that can be extended or dropped in as-is.

[https://react.semantic-ui.com/](https://react.semantic-ui.com/)

~~~
bpicolo
I might have to try this out, too bad I didn't see this yesterday.

Settled out with trying [http://ant.design/](http://ant.design/) which has
actually been pretty nice as well.

Seems most React components libs are material design and I can't stand the
look.

~~~
Simorgh
Ant looks really good as well!

It has a nicely designed DatePicker [1]. Semantic UI doesn't currently have an
official implementation of a Date Picker (although there are unofficial
versions on GitHub).

[1] [https://ant.design/components/date-
picker/](https://ant.design/components/date-picker/)

------
xiaohanyu
Hi, guys,

We have spent hundreds of hours build a new website with Semantic-UI for
Semantic-UI: [http://semantic-ui-forest.com/](http://semantic-ui-forest.com/).

Semantic-UI is my favourite front-end CSS website, I have built several
websites with Semantic-UI, and I love it, feel delightful when developing with
Semantic-UI.

But compared with Bootstrap, the ecosystem of Semantic-UI is small, so we have
semantic-ui-forest for you: [http://semantic-ui-
forest.com/posts/2017-04-05-introducing-s...](http://semantic-ui-
forest.com/posts/2017-04-05-introducing-semantic-ui-forest/) .

In this website, we have ported 16 themes from bootswatch(bootstrap) to
Semantic-UI ([http://semantic-ui-forest.com/themes](http://semantic-ui-
forest.com/themes)), and also, we have ported 18 official bootstrap examples
([https://getbootstrap.com/getting-
started/#examples](https://getbootstrap.com/getting-started/#examples)) and
reimplemented in Semantic-UI ([http://semantic-ui-
forest.com/templates/](http://semantic-ui-forest.com/templates/)).

Not advertising, however, we think this maybe helpful for people who are
interested in Semantic-UI and want to give it a try.

~~~
NicoJuicy
I hate to say this, but when I opened this with my smartphone, the layout was
not responsive. So I closed it again

~~~
du_bing
Co-worker here, yeah, truly some pages of the site are not yet quite
responsive, sorry for that, we plan to improve it in the future. On the site
there are some particular templates designed to show the responsiveness or
non-responsiveness, you could open them on smart phone or desktop computer to
see the differences:

[http://semantic-ui-forest.com/templates/bootstrap/grid/](http://semantic-ui-
forest.com/templates/bootstrap/grid/)

[http://semantic-ui-forest.com/templates/bootstrap/navbar-
fix...](http://semantic-ui-forest.com/templates/bootstrap/navbar-fixed-top/)

[http://semantic-ui-forest.com/templates/bootstrap/non-
respon...](http://semantic-ui-forest.com/templates/bootstrap/non-responsive/)

Semantic-UI gives more freedom for features like responsiveness, theme
customization with 3000+ variables, although the default configurations are
also very good.

~~~
NicoJuicy
I think it's not detecting my mobile as mobile. Motorola Play X here in
Android, chrome

~~~
du_bing
Oh，yeah, it's set to be like so in the HTML's header, so you could see the
whole webpage's layout like on a computer, we are going to improve the
responsiveness soon. For developers who want to apply some themes and
templates to build their websites, it may be useful. Thanks for visiting!

------
sheeshkebab
This doesn't work well on mobile - on iOS at least... scrolling is funny,
flickering screens, jerky inputs. Loading feels slow too - and I'm on wifi.

~~~
dawnerd
It feels like they added their own smooth scrolling in. I barely scrolled and
it shot to the bottom of the page in iOS.

~~~
djs070
Gosh that irritates me - does that mean that the "tap just above the clock to
return to top" doesn't work?

Edit: just checked, and yes it does. Also breaks the pattern where iOS shrinks
the address bar and navigation bar when you scroll down. Completely
unacceptable for a UI library to break these OS-level patterns

~~~
cdubzzz
> tap just above the clock to return to to

Didn't know about that. Thanks!

~~~
jlukic
Author here.

Fixed the scroll issue in the docs. Should be glorious normal iOS scroll.

------
franciscop
When I started Picnic CSS[1] there were few CSS libraries out there and the
ones that were available were severely lacking. They didn't have either :hover
or :active states, no transitions, etc.

Now with new libraries or modern versions of those, including Semantic UI, I
wonder whether it's time to stop supporting it and switch to one of those.
They are still different but with somewhat similar principles (at least
compared to others) such as the grid: <div class="flex
two"><div></div><div></div></div>.

What I want to say, kudos. As I see jlukic answering some questions, how do
you find the time/sponsorship to keep working on it? Is it a personal project,
company project, funded through some external medium, etc? I see there's a
donate button, does people contribute there a lot?

[1] [https://picnicss.com/](https://picnicss.com/)

~~~
dvnguyen
Sad I am considering to use picnicss in my next project. What you would
recommend besides Semantic UI?

~~~
franciscop
I haven't really seen Picnic CSS in the wild (only here
[https://gyshido.com/](https://gyshido.com/) and in my own projects) so I
actually have no idea on adoption, which is one of the main decision points. I
will probably keep using Picnic for most of my projects.

My two main alternatives are Materialize CSS for mobile because of the styles
( [http://materializecss.com/](http://materializecss.com/) ) and Semantic UI
for quick mock-ups/prototypes because of how complete it is (while looking way
better than Bootstrap). Another " _alternative_ " (not for CSS but for the
type of projects I do) is [https://html5up.net/](https://html5up.net/) since
they are really well designed when personalization is not so important.

------
tbabb
> Design Beautiful Websites Quicker

* "...More Quickly".

Quicker is an adjective, used to describe nouns. You could say "design quicker
websites", "quicker" in that case describing an aspect of the website. If you
wanted to describe the manner in which you will do the designing, you have to
use the adverb "quickly"\-- "design websites quickly". Adding the adverb
"more" to modify the adverb "quickly" is the proper way to make it
comparative.

------
malloryerik
Might also check out Ant Design. [https://ant.design/](https://ant.design/)

It's integrated with React and there's a separate mobile UI for it. Ant is
Chinese, with docs translated into English. Like China, it's huge^^ I've just
been fooling around with it today for the first time in create-react-app and
seems good so far. Haven't tried on mobile.

~~~
crucialfelix
I like that you can import just the css you need for a component. Semantic ui
should do this too.

Some mobile glitches with Ant, but I'm considering trying it. I only need a
few components

~~~
enobrev
Semantic-UI does allow this. If you look in the build folder, it has CSS files
for every component, and you can include whichever you need.

------
JusticeJuice
I've done a few projects with Sematic UI. I think it's great for desktop based
business applications. It looks slick, and has great animations. Plays nice
with heaps of frameworks, I was using meteor.js

However, don't use it on mobile - it will destroy performance.

~~~
lawik
Curious about this. Any clue why? Too much animation, heavy JS-use? Not
familiar with how the framework does its stuff.

~~~
tmikaeld
Only the size is an issue, the performance otherwise is great.

There is even performance debugging built in, so you can monitor how your app
performs.

If you ignore the debugger and just build insane things, of course it's going
to be slow...

------
tomelders
Please stop with these things. They're never fit for purpose, and now there's
another thing that looks - to non technical people - like a panacea for all
development woes. Designers will never follow your constraints. Managers will
never understand why this hasn't magically reduced our estimates by 90%. And
yet again, it's just "developers being difficult" because there's a bunch of
guys in India who say they CAN work with this for half the price.

This sort of stuff is worse than useless.

~~~
pedalpete
Nobody is forcing you to use it. I don't use these libraries anymore, but that
doesn't mean they don't have a purpose. And no, people shouldn't 'stop with
these things'. You shouldn't be the one telling people what they should and
should not be doing. You don't have to like it, but there are many developers
who are really bad at styling. They don't have a good eye for design and
they're trying to build a usable product, or they have an internal need, or
want to learn. Libraries such as these have many purposes, even if you don't
like them.

~~~
tomelders
But people will be forced to use it. That's my complaint.

------
aphextron
32,000+ stars is insane, how have I not heard of this? Does anyone have
production experience with it?

------
nkkollaw
It looks great.

However, I've used it in the past and the CSS size is _HUGE_, with no way to
reduce it. We're talking about > 500KB of CSS (in my case, at least). The
JavaScript is extremely bloated as well.

Honestly, being that heavy I wonder how anyone can use it. If your site is to
be viewed by mobile users, adding 500KB just to style a few elements is
unacceptable.

I'd much rather go with Bootstrap. It has the added benefit of having the
majority of front-end devs know it, and you can buy or use a theme for free
and make it look great.

~~~
dreyfiz
A custom build with only the components you're using cuts the CSS size
dramatically. You also get to specify your supported browsers, which can cut
down the size as well. Finally, you don't have to use their javascript, and
not every component requires it.

~~~
nkkollaw
Somehow we were unable to reduce the file size to a sane level and we switch
to another framework. I guess we needed some components and we had to load
jQuery as well.

In any case, wouldn't it make sense for the default configuration to be
suitable for the average project? 500KB is really something...

------
dandare
Sidenote: the [https://en.bem.info/](https://en.bem.info/) website (mentioned
in the first paragraph of text about Semantic UI) totally irritates me. Would
you be so kind and explain with a single sentence what is the purpose of your
website/platform/framework?

------
constantlm
I recently dropped Bootstrap early in a project and switched to Semantic. I've
been using it for a few months - so far it seems fantastic and much more
"natural" to work with than Bootstrap. The gigantic set of components, and
integration with both EmberJS and React make it even more amazing.

------
flukus
Wouldn't a semantic UI have things like a <menu> tag that was up to the
browser to render?

------
inputcoffee
What is the best way to think of this. Is this like Twitter Bootstrap and Zurb
Foundation, or is this like something else entirely?

~~~
ukyrgf
This is the step between making prototypes with Bootstrap/Foundation and
turning those classes/mixins into a final working application. You don't want
your final build to have a bunch of 'col-md-6' class names.

~~~
enraged_camel
>>You don't want your final build to have a bunch of 'col-md-6' class names.

Why not? Who cares what your class names are?

~~~
karmajunkie
Nobody, except the individual that has to change them all when you need to
swap out frameworks or upgrade to a version that breaks compatibility or the
product team decides on a new layout across the app...

~~~
enraged_camel
Okay, no one has actually explained how Semantic UI overcomes this.

What if in the future you decide to switch from Semantic UI to something else?

~~~
karmajunkie
Fair point, but I'm with you on it—I'm not proposing Semantic UI is any
better, just that ".col-md-12" has its own set of problems. I suppose in
theory what would be the best is using application selectors (i.e. class names
your application owns) with the sass version of bootstrap/semantic/etc to
extend the selectors with appropriate styles. However, I've done this, and
while I'm no CSS expert so I probably was doing something wrong, my
stylesheets became ginormous.

Now, I just kind of live with the ".col-md-12" business...

------
taeric
I alternate between thinking this sort of thing is merely misguided, or merely
a waste of time.

I want to like it, a lot. But I can't help feeling that this ship sailed years
ago.

Simple UIs that are easy to interpret are a thing of the nineties. We left
them because we evidently didn't realize what we had. Also, people like flashy
things. A lot.

------
ssijak
Why is bootstrap 4 taking so long to get to a final version? All that waiting
is pushing me towards other libraries. But me, being primarily backend
engineer, want a library that has a large community because I am not so
skilled with frontend UI and want the possibility to find the help easily.

~~~
jpkeisala
I wonder same as well. I am building something right now with v4alpha and I
have not found any problems. Therefore it is a bit weird why don't they just
call it 4.0 and be done with it.

~~~
Omnius
It's alpha meaning the API will change most likely just be aware to check
release notes as breaking changes are expected to happen.

------
cknight
I chose Semantic UI for my project:
[https://suitocracy.com](https://suitocracy.com) if anyone wants to see
another live example, it also uses the default theme.

Like others, I was somewhat concerned about the bloat - over half of my front
page's total file size. But at about 250KB all up, I realised this was only
around a tenth of what the average website throws at people these days.
[https://www.wired.com/2016/04/average-webpage-now-size-
origi...](https://www.wired.com/2016/04/average-webpage-now-size-original-
doom/)

~~~
splintercell
Pretty neat looking and interesting site.

------
cyberferret
I've been a Bootstrap user for years on all my web apps, but thinking that
perhaps instead of re-learning things for v4, I look at expending a similar
amount of time and effort to learn something new.

I came across Semantic-UI last year and remember being impressed by it, but
for some reason it just slipped my mind until I saw this post today. I seems
it could work for another small project that I am thinking of starting.

Just to clarify - No reliance on jQuery with this framework, right? Has anyone
else worked with Semantic-UI using Umbrella.js and/or Intercooler.js ??

~~~
Zitrax
Semantic-ui does require jQuery. See [https://github.com/Semantic-
Org/Semantic-UI/issues/1175](https://github.com/Semantic-Org/Semantic-
UI/issues/1175)

~~~
cyberferret
Ah, thanks for the clarification... A bit surprised that libraries written
within the era of mobile devices etc. still have that dependency. Not a put
down of jQuery per se - it was a great toolkit in its day.

~~~
jpkeisala
Is jQuery still a problem with mobile devices? I would image devices are
faster now and isn't jQuery already in version 3. Haven't they optimize it?

------
keehun
Am I the only one that passionately dislikes the menus that require clicking
on the hamburger icon? I'm okay with it in phone apps when used tastefully,
but it seems like too many websites are adopting it now for no good reason.
This trend is especially evident among the online Wordpress/HTML template
communities and creators...

~~~
alphapapa
The worst is when, if you maximize the browser window, the hamburger menu
expands into actual menu elements, but then if you resize the browser window
to, say, half the width of your screen, it turns into a hamburger button with
enough whitespace around it to display the hidden menu elements. Really,
really hate that. The web was more usable 15 years ago.

~~~
dguo
I'm not a big fan of the hamburger menu either, but web developers also didn't
have to worry about mobile 15 years ago.

~~~
alphapapa
That's beside the point. That mobile exists doesn't excuse extremely poor non-
mobile UI.

------
debacle
Seems like a next evolution of Bootstrap components. The trick with this type
of stuff is _always_ in how it plays with other frameworks. Can I drop into
jQuery if I need to, and still interact easily with controls? Is there some
obscene DOM skeletons in the closet that's going to bite me in the ass later?

~~~
jfarlow
We use an Ember library of Semantic UI [1] and it's pretty much a drop-in
install to get a visually coherent front-end up and running with a minimal
amount of redesigning a wheel. It's themeable and pretty extensible on the CSS
side (and is all prefixed with a 'ui' class), and on the javascript side Ember
lets you get right to it's hooks with Ember.$.component(). It may be a little
on the heavy side, but it's been designed to be severable when needed, by
component, by css, and by javascript-requiring components. I've not felt
hemmed in or constricted by it's design mechanics.

I've had a few javascript 'settings' fail to make it all the way to my Ember
components, but in general these were bugs that were promptly fixed in newer
versions. Docs are pretty good too.

I kind of like it. It's been pretty nice to just have a dropdown, a button, a
label, a whatever out of the box without me having to figure out all the CSS
tricks for mobile or various browsers. And the more I've used it I've been
able to craft my own visual components upon its foundation that conform to a
consistent style.

[1] [http://semantic-org.github.io/Semantic-UI-Ember/](http://semantic-
org.github.io/Semantic-UI-Ember/)

------
ludbek
I have been using Semantic UI for a while now. Overall I love this framework.
It has lots of essential components. I highly recommend it to lean startups
who dont have enough expertise for designing and developing their own UI
components.

But I do hate it for having weak and restrictive responsive queries.

------
Mizza
Semantic has replaced Bootstrap as my go-to web framework. I find it more
natural, and the default components are nicer. I think it needs a larger theme
ecosystem and more consistent documentation, but I appreciate all the work
that has gone into it.

------
tabeth
Is it possible these days to have a fully interactive mobile application with
just HTML and CSS? Have CSS animations gotten good enough? I'm talking things
like pure CSS accordians, modals/pop-ups, tooltips, etc.

Semantic UI is something I personally use for a few projects, but I really
wish some of this stuff didn't require so much javascript and was more
encapsulated like Tachyons [1]. The main problem I've encountered when using
Semantic UI is that it becomes difficult to change the prebuild components
significantly.

[1] [http://tachyons.io/](http://tachyons.io/)

~~~
pitaj
It may be possible, but it would be very difficult to make it accessible for
screen readers, etc.

~~~
tabeth
Can you elaborate? I was under the impression that HTML and CSS were by
default already accessible and Javascript is likely to break things (an
instance I've encountered is not properly setting tabindex, for example).

------
mybrid
"Semantic is a development framework that helps create beautiful, responsive
layouts using human-friendly HTML."

Claims made without evidence can be dismissed without evidence.

I'm not singling out Semantic UI here except to say that usability studies
validate beautiful, responsive layouts using human-friendly HTML.

Has anybody done a usability study to confirm any such claims?

Again, not singling out Semantic UI except to point out an opportunity.
Semantic UI could be the first to quantify this by providing usability study
support rather than just putting it our there.

[https://www.nngroup.com/](https://www.nngroup.com/)

------
alexjv89
We use semantic-ui at Highlyreco
([https://www.highlyreco.com](https://www.highlyreco.com)). Semantic is a CSS
framework that we absolutely love. Cant recommend it enough. Semantic made it
possible for 2 developers(non of us are front end focus engineers) to build
out a fairly complex ui at Highlyreco. Semantic gives us the ability to
iterate really fast on UI.

We probably would not exist without semantic. For earlier projects I used to
use bootstrap. My opinion is that Bootstrap is good for designing landing
pages and semantic is good for building user interface pages.

------
tmikaeld
My company has been using SUI in production the past 3 years and it's been
absolutely great, sure it is big, but that translates into flexibility and
speed of development as well as having a production-ready framework that we
know can handle anything thrown at it.

I've seen some mentions of jQuery, I don't think that's a bad thing at all -
the framework uses the plugin system so fully that without jQuery, I'm sure
the framework would be even bigger and less flexible. The added advantage is
that other jQuery plugins work without adding anything.

------
vinayakkulkarni
Just FYI,

[https://www.zomato.com/](https://www.zomato.com/) one of the biggest in it's
industry uses Semantic-UI :)

Love the Framework and Jack + all contributors effort in it :)

~~~
BilalBudhani
Whoa! This is interesting. Just curious to know

\- how did you decide to go with Semantic UI? \- what all frameworks did you
compare? \- which preprocessor are you using?

~~~
vinayakkulkarni
I ain't working in Zomato :P

Got the info from this thread: [https://github.com/Semantic-Org/Semantic-
UI/issues/2449#issu...](https://github.com/Semantic-Org/Semantic-
UI/issues/2449#issuecomment-280293760)

------
wishinghand
I love the style and components of Semantic UI, but it's really heavy in terms
of CSS file size, even once minified. I'd recommend running UnCSS or something
similar on it before deployment.

------
Finbarr
We used Semantic UI for Startup School
([https://startupschool.org](https://startupschool.org)) and it has been
awesome. Really happy with the choice.

~~~
cyberferret
Nice! I am actually IN this round of Startup School, and I never noticed that
it was built with this framework. Good work.

------
dmoreno
I love semantic UI. I'm using it now with my new project (serverboards.io) and
it really was a huge time saver.

I would prefer it using sass, but the is a 'port'
([https://github.com/doabit/semantic-ui-
sass/tree/master/app/a...](https://github.com/doabit/semantic-ui-
sass/tree/master/app/assets/stylesheets))

------
nwmcsween
I guess it's as good of time as any to plug my project s.css[1], it tries to
be the exact opposite of semantic ui. Class names are simply abbreviated
properties such as .di-bl { display: block; }. It isn't meant to be used as a
framework, but something that other frameworks can build upon (I will soon be
releasing something that build on it).

[1] github.com/nwmcsween/s.css

------
Too
> Intuitive javascript: $('select.dropdown') .dropdown('set selected',
> ['meteor', 'ember']);

Please no...just use React, Vue, Angular or some other sane data binding
framework already. Don't mix logic and presentation. Your javascript code
should never know about CSS classes, and ids and preferably not DOM-states
either.

~~~
always_good
Not every project needs to use React.

Sometimes you just want some quick JS for your one dropdown component that
comes with the framework you're already using.

------
chenshuiluke
Semantic UI is really great! I suck at frontend design and it really helps me
to make decent looking websites :)

------
karimdag
Personally I have chose Semantic UI as my go-to css framework over bootstrap.
While bootstrap performs better on mobile, SUI is way nicer/cleaner it
therefore eliminates the need to customize anything which I think is one of
the reasons that someone would use a css framework in the first place.

------
kbr
Checked it out, and it looks quite nice! Congrats on making such a nice tool.
I'm a fellow CSS library author here, of Wing[1].

Everything seems fine, but as others have said, the scrolling is jumpy. Might
want to fix that :)

1\. [http://usewing.ml](http://usewing.ml)

------
daurnimator
Anyone able to help explain to me how to use this with e.g. a simple static
site?

i.e. hand written HTML (perhaps compiled from markdown) with no JS?

The manuals for semantic UI seem to jump strait into integrations with other
frontend frameworks and build tools; but I don't want to use them.

------
baby
I use it for small projects/pages just because it looks so good :)
[http://cryptologie.net/links](http://cryptologie.net/links)

but I found it harder to get into compared to bootstrap/foundation.

------
nwmcsween
There seems to be some sort of impedance mismatch CSS is _for_ developers give
me .di-bl { display: block; }, make it easy to understand by just looking at
the markup instead of having to having to dig into other files.

------
voidhawk
Anyone else find the pages jitter when scrolling? At least on Safari (iPhone)

------
ndarilek
As a blind web developer, I want to like Semantic. My usual mode of developing
HTML, once it's at the "I need to make this look good" stage, is "show it to
my girlfriend and ask her various questions." She says things like "I wish X
were a bit larger," or "Y should be blue," and pulling that off in Bootstrap
is challenging. I can drop down to lower-level CSS, but have no clue how my
changes interact with Bootstrap's defaults, or indeed if they take effect at
all. I mean, I can tweak font sizes and hex codes, but at the end of the day
they're all numbers, when what I _want_ to do is say "No really, make this
thing larger relative to these other things," not "make it 125%, with this hex
code I scraped out of some color list and hope looks nice."

But, gods, buttons as divs. Maybe they're easier to style, but if I had a
dollar for every time I couldn't use someone's site because they used a div as
a button, then didn't do the several other things that <button/> gives you for
free that make all the accessibility difference, well, I'd not worry about
money ever again.

I'm glad to see that the homepage example at least uses <button/>, but then
the rendering of the example isn't keyboard-focusable or actionable. Then,
when I look at the actual code they're rendering, it's back to divs. So
they're not even rendering their example code.

Can I use Semantic with the actual HTML elements that the divs are meant to
style, so I can use the CSS class names some folks hate and derive their
benefits to me, but still get the accessibility benefits of the tags? I'd read
their docs and check, but I don't know if they're linked from the main page. I
see links to 1.X/0.X docs, but I can't find a link to 2.X docs. There's a
"Menu" link which may pop up more links, but I can't seem to trigger this with
Enter. I seriously spent 10-15 minutes on this page looking for docs using
only my keyboard, before deciding that I really had better ways to spend my
day.

I hate to advise people to avoid projects because I'm not so arrogant as to
think my language/stack/framework/whatever is anything other than _my_
favorite, and I do _want_ to like this one, but every time I look at it the
accessibility story is disappointing, and given that it's a framework, that
means _other_ sites will likely inherit disappointing accessibility stories
too.

And now it's back to drinking, which seems to be the only fix for this[1].

1\. Not really, but damn am I tired of a) fighting the same battles again and
again and b) answering the same questions about said battles again and again.
All of this stuff is exhaustively documented by folks who are smarter than I
am, so it isn't obscure, nor is it something I need to (or am even highly
_qualified_ to) answer.

~~~
du_bing
Incredible, thanks for sharing your unique experience, I don't know the
difference of <div class="ui button"> and <button class="ui button"> when I
use Semantic-UI, because they show the same thing. According to your
declaration, I think from now on I will better use the latter one.

~~~
ndarilek
1\. The div is not keyboard-focusable by default, so you need to add
`tabindex="0"`. 2\. By default, the div does not trigger click on Enter/Space,
so you need to add a keyup handler to make it do so. 3\. Screen readers won't
report the div as a button because they can't identify widgets based on how
they look, so add `role="button"` as per the ARIA spec (only on first cup of
coffee now, so I'm not providing a link.)

Yes, it isn't super complicated, but a) most don't do it because they _look_
identical and b) multiply that by any other widget where the HTML version is
replaced with a div and suddenly things get complicated. If you're not a
keyboard user, you may not understand how the web works without a mouse. All
that is lost when switching to divs.

This says nothing about how OS/screen reader combinations differ in key
handling, nor about how complex widgets such as multiselects include similarly
complex key handling. Also, the above ARIA is super simplistic. It doesn't
handle situations where, for instance, you have multiple roles and have to
toggle some of them based on what item is selected, what item is focused, etc.

So, TLDR: It's _so_ much better to use the HTML elements specifically designed
for a certain task because you get a lot for free that is taken for granted.
That said, I like how Semantic specifies how my UI might look, an wish I could
have the best of both worlds.

~~~
mwcampbell
And a custom button is certainly not the worst offender, though it's probably
the most commonly cited example. A blind friend just needed sighted help to
complete a purchase, because the process included a custom checkbox with no
ARIA support. At least with a button that's not identified as such, the user
can figure out that it's a button from the name and context, and use their
screen reader's ability to simulate a mouse click. Unless the buttons are
implemented using spans rather than divs, and there's more than one of them in
the same block element.

~~~
du_bing
Great sharing, it seems that HTML tags are safer and more robust.

------
mark_l_watson
I have been using bootstrap exclusively for years. I will give this a try on a
small throwaway project. I am concerned by the apparently large size of CSS
and JS, based on other comments here.

------
symboltoproc
I work for quite some time now with Javascript and I must say:

$('select.dropdown').dropdown('set selected', ['meteor', 'ember']);

Is the most unintuitive Javascript I've ever seen.

------
aecorredor
Does anyone else feel that the documentation does not clearly explain how to
create responsive layouts? I see the visual examples, but no clear code like
in bootstrap's docs.

------
xyproto
Sounds great in theory, but the dropdown box on the front page is a list where
only half the height of the letters are shown, instead of a proper dropdown
box.

------
jff
All this and it still looks like Yet Another Bootstrap website. Guess that's
the modern meaning of 'beautiful website'.

------
jv22222
There's a pretty bad bug on that website. When you open it in Safari on iPhone
6 it jitters badly as you scroll the page down.

------
macca321
I'd like to find a framework like this that comes with platform-neutral
(handlebars or similar) templates for each component

------
kuon
I am starting a new project, and I am considering semantic UI and grommet.
Anybody has experience with grommet?

------
zeeshanu
The interface looks good but it is like a nightmare to remeber every single
class.

~~~
dmoreno
I actually think the opposite. The names are very logical and once you know
some the rest is quite logical. Bootstrap on the other hand never made sense
to me.

Anyway many times I need SUIs documentation open for reference.

------
5_minutes
I'm fine with Bootstrap though... another day, another framework

------
rfw1z
What makes the Internet so exciting is the direct opposite of this.

------
notliketherest
I love semantic UI React for my teams internal tools. So easy to drop in an
use without having to think about css

