
Semantic UI – A language for sharing UI - knes
http://semantic-ui.com/
======
acoleman616
This is semantic:

<header> <h1>Title</h1> <nav> <button class="active">Home</button>
<button>Link</button> <button>Link</button> </nav> </header>

not this:

<div class="ui menu"> <div class="header item">Title</div> <a class="active
item">Home</a> <a class="item">Link</a> <a class="item">Link</a> <div
class="right floated text item"> Signed in as <a href="#">user</a> </div>
</div>

~~~
nej
Yes, this EXACTLY. We need CSS libraries that encourage the use of new HTML5
tags. We're no longer living in a world of scrambled DIVs, we have a page
structure to follow now. I feel as if this may even be a step backwards, just
the third example code in which the Bootstrap version has button while the
semantic version is a DIV makes no sense, it's a button, not a DIV.

------
davej
The bootstrap markup is actually more semantic than Semantic UI. Classes like
large, red, floated, right, circular etc.. are presentational not semantic. If
you want to use a framework and keep semantic CSS then look in to using the
LESS/SASS version of Bootstrap or Foundation.

Edit: After a more detailed look, the framework is actually really nice (and
very comprehensive). The name still doesn't make much sense though.

~~~
andrewflnr
I don't understand this. It's CSS. Of course it's presentational. Do CSS class
names have to describe the semantic structure, as well as the DOM structure?

~~~
garethadams
There's no such thing as a "CSS class". HTML has classes, and CSS has class
selectors.

So yes, since HTML is designed to describe its content, the class names should
describe the content and the CSS should select that content to style.

~~~
iterative
Not true. A "CSS class" is where you go to be taught about CSS.

~~~
dyscrete
Any good sites I can select a CSS class?

------
donpark
I wouldn't call writing "ui large red labeled icon button" in HTML semantic
anything. I'd called it confusing orgy of style and content.

~~~
hablahaha
I agree. First of all, why is a ui class necessary? Second, what's large? The
icon, the button, the label? All of it? What's red, the icon or the button?
Certainly not both. There's a reason we have classes like "btn btn-small
icon-* icon-2x". A large icon in a small button. I think those names are more
'semantic'.

~~~
jonny_eh
I assume the ui class is there for namespacing, which I think is a good idea.

------
flyosity
In their examples, none of their buttons were actually buttons. Nor were they
even links. They were all DIVs. This is pretty terrible HTML, for many
reasons, especially for accessibility.

~~~
nakovet
I really liked it visually speaking but yes, buttons implemented as divs it's
sad.

~~~
clukic
It's a tag ambivalent CSS library. There's nothing sad about that. Just use
buttons tags, it's not stopping you. Don't get hung up on the demo code.

~~~
joesb
It's a little concerning using library claims to be about "semantic" when the
demo code doesn't even care about using the semantic tag for button. It makes
you worried if the author actually knows what he's doing.

------
jlukic
Hey, I'm jack the guy behind semantic UI. Semantic isn't ready for release
yet. A lot of the copy on the site is only currently in draft form. and there
are plenty of inconsistencies with the code base itself. Hell, there isn't
even a download link.

I've been privately been working on the framework trying to get it to a place
where i'm happy enough to open it up for outside feedback and it's not quite
there yet.

The idea behind semantic UI is that html tags aren't truly semantic, but have
become conventional to programmers. There is nothing semantic about using an
'a' tag to refer to a link or td for a table cell. These codifications make
web development less accessible to non programmers. Ideally we'd all start
going around creating our own top level tags to define user interface, but we
don't really have that opportunity today.

The only chance, I believe, we have to build a linguistically semantic web is
to build conventions around class names usage, the bit of web design where
most FEDs make their decisions.

Semantic uses DIVs as an equalizing factor. If we can't control how browsers
interpret tags then we might as well ignore them. I'm sure a lot of this stuff
sounds terribly bombastic. The intention is quite the opposite. Define by
convention, not by prescription.

I'm looking forward to bringing semantic back to hacker news sometime when its
more fully completed.

~~~
integraton
The HTML in the project is brittle, problematic for consumers and parsers,
confusing to developers and designers, and future-unfriendly. I encourage you
to spend some time researching the reasoning behind HTML and markup in
general, including why it's important to use id and class names that describe
the content (rather than the presentation) and HTML elements other than div.
They exist for a reason.

Think about this: I can see from the linked page that you understand how
adding _type= "password"_ to an _input_ makes some consumers, like various web
browsers, treat that field differently. There's a lot of stuff like that in
HTML.

If you want a short intro that also explains some of the "why" behind various
aspects of HTML5, read this: [http://www.abookapart.com/products/html5-for-
web-designers](http://www.abookapart.com/products/html5-for-web-designers)

The HTML5 spec also has a lot of info ( [http://www.w3.org/TR/html5/grouping-
content.html#the-div-ele...](http://www.w3.org/TR/html5/grouping-
content.html#the-div-element) ). For example:

 _> Authors are strongly encouraged to view the div element as an element of
last resort, for when no other element is suitable. Use of more appropriate
elements instead of the div element leads to better accessibility for readers
and easier maintainability for authors._

------
Miyamoto
Can you guys please stop whining about the name and talk about the features?
Didn't your elementary school teacher tell you not to judge a book by its
cover? They could always change the name if they had to. They never actually
say they're semantic HTML, it could have other meanings. Or, you know, it
could just be a name. There's plenty of projects with meaningless names.

~~~
JackFr
Don't be an idiot.

Semantic UI has a meaning. The authors chose to ignore its meaning while
trading on the cachet of the name. While their web dev skills may be
unsurpassed, it's a reasonable criteria on which to judge them.

~~~
Miyamoto
Ad hominem attack, really?

A single post or two on the name I could understand, but every comment? HN
fixates on the absurd.

~~~
adeaver
Because semantic actually _means_ something, it's not a subjective term.

Calling something Semantic UI and comparing it to another library, that more
follows the actually meaning of semantic, is silly. Yes you can change the
class name but setting up the name as something meaningful, something
semantic, such as 'submitButton' lets you redefine it in the CSS.

If I'm building something that multiple clients will use I don't want each
client having buttons with class names specific to the client, but something I
can modify easily in the CSS to get the look and feel they want.

It's ass backwards.

------
wheaties
Great idea except you don't namespace anything! I like namespaces because one
library or css import from another won't ever stomp on each other. I've seen
'ui', 'button' and 'red' in several other packages and places. They're going
to conflict. The one with the greatest specifity is going to win and cause
untold hours of frustrating debugging.

~~~
camus
+1 with that. I dont understand why css framework authors dont namespace their
frameworks. That's should be a basic requirement before distributing any css
library.

~~~
Kudos
Because it makes the selectors less efficient. On individual selectors it
probably doesn't make much of a difference (for most of them at least) but add
it all up and you can have a significant impact on performance for large DOM
trees.

------
Cthulhu_
What I'd really like is a UI toolkit for developers that goes <div
class="whatever just make it look good">

~~~
SwellJoe
Frankly, Bootstrap is exactly that, for me. I've been converting our products
(Webmin/Virtualmin, which are 15 and 10 year old codebases, respectively, and
it shows badly in the current UI). Converting to Bootstrap, while extremely
time-consuming, is not requiring significant design skill on my part to make
everything look freaking awesome.

~~~
Danieru
Thank you for redesigning Webmin. I used it for a client's server and the
functionality was fantastic, the design a bit less so. A Bootstrap'd frontend
sounds fantastic.

~~~
SwellJoe
You're welcome. Here's the most recent screenshot of progress:

[http://i.imgur.com/l5gEwUJ.png](http://i.imgur.com/l5gEwUJ.png)

It is also immediately theme-able with any Bootstrap theme, which is a major
leap forward. And, it is responsive...another major leap forward. The old way
of handling mobile is to have a custom theme for mobile devices (currently
based on Joe Hewitt's iUI, which is pretty long in the tooth, and looks like
ancient iOS versions).

We're about a week away from an alpha release (suitable for testing in the
wild), a month away from a beta release (suitable for daily use by people who
understand how to file bug reports), and two months away from it being the
default theme in all of our products, both Open Source and commercial.
Assuming I am able to maintain the current pace of development.

Bootstrap (and maybe moreso, jQuery) is pretty miraculous, honestly. I've
tried to do this on two separate occasions in the past with YUI and ExtJS, and
failed miserably, because they simply don't work well in a progressive
enhancement environment (and my brain doesn't work the way their developers
brains work...jQuery fits my Perlish brain a lot better).

------
joshcrowder
This is a great idea, however the website needs some work I keep getting
struck scrolling because the code boxes have overflow scroll on them. Also the
navigation arrows at the top don't work :/

------
_pmf_
I expected something about declarative, generic UI definitions.

I got a half-hearted lecture about HTML.

------
mtarnovan
Very nice, and has lots of components. I like it.

Regarding the semantic-ness of the class names - I see people complaining that
"ui three column grid" is not semantic. I don't understand what the big fuss
is about - how could a generic, non-preprocessed grid be semantic ? It's
presentational by definition, and the class names reflect that. If they
implemented the framework as SASS mixins, sure, you can be as as semantic as
you want when you use those mixins. That's what I like about Foundation. For
example:

    
    
      .my-foobar {
        @include grid-columns(3);
        @include panel;
      }

------
languagehacker
This is actually pretty regressive given the examples. This is the reverse of
the attitude that brought us the <article> tag. I disagree that stuff like
this should be in classes, so definitely not for me.

------
clukic
I think the point that a lot of people are missing is that the library is just
tag ambivalent. The demo code uses divs, but of course you don't have to use
divs. You can use whatever tag you like. It's hard to see why that could be
construed as anything other than an advantage.

If you like <button> tags then by all rights use button tags. It makes sense
that the demo code would use divs, because to do otherwise would imply that a
certain tag is required for the css to work.

~~~
steveax
Advantage? Tell that to screenreader users.

------
alphakappa
If the website creator is reading this - Please do something about the moving
background image. It's nausea-inducing, and I had to exit the website due to
it.

------
zimbatm
Should "large" and "red" really be part of the semantic, or should it be up to
the CSS to style the element with appropriate size and color ?

------
rob_mccann
Why does it do away with using <button> for buttons?

~~~
clukic
It doesn't. You just don't have to use <button> or any other tag for that
matter.

------
progx
Sorry if i misunderstand it, but where is the semantic and where the ui? This
contradicts to all efforts of the last years for real symantec and a good
readable html page with simple customizable css.

I see you intention to make a page readable for an ui designer and add
symantec to ui elements. But whom help this? (except a designer)

------
ergusto
This. I like this. It's sort of like an OOCSS Bootstrap.

~~~
gizmogwai
No. Not at all. OOCSS focuses on patterns that are reproduced in the page (or
site) multiple time with little variation of look or positioning. This is
everything but that.

------
ahallock
I like the design a lot better than Bootstrap, but I don't think "Semantic UI"
matches the implementation.

------
capisce
Shouldn't a language for sharing UI be human readable like QML (
[http://en.wikipedia.org/wiki/QML#Basic_syntax](http://en.wikipedia.org/wiki/QML#Basic_syntax)
) instead of machine readable like XML with its claustrophobic tag soup mess,
flow killing end tags, and so on?

------
jbeja
What is this? Inuit css is more semantic than this, and i don't see the point
to use classes in html document anymore, I actualy inject them via js or just
extend reausable classes made in scss, semantics of html should just have
attributes that actualy describe what the element is for with ARIA, roles,
etc.

------
isaacjohnwesley
I see semantics is much inclined to OOCSS (object oriented CSS) which is
actually good because the project is cleaner, works really great for large
websites with lots of pages.

But it's poorly executed. The good deal is, to use Bootstrap + OOCSS. Ive had
really good experiences and full control of the project by this method.

------
sriharis
I don't what about this is semantic except the class names. But even that
comes with a heavy loss in maintainability. If I have to customize say, the
border radius of an icon button, I'd have to override this specificity:
`.ui.vertical.labeled.icon.buttons .button:first-child > .icon` Not cool.

------
seaghost
This is not semantic at all!

------
bestest
am I the only one suffering from massive CPU usage while on that Semantic UI
page due to the "#example .masthead:before" CSS3 background animation? my MBA
fan starts spinning up like crazy.

------
Raphmedia
Would be good if it didn't suffer such a big case of divitis...

------
cwills
Ok so the name and tagline of this library is wrong/confusing. But forgetting
that, visually it looks like a nice alternative to bootstrap. Still some work
to be done.

------
d0m
Some parts are so beautiful, it's a very good inspiration.

------
joshbert
Looks great. I am also using a Chromium-based browser, so half the elements do
nothing when I click on them, but that's understandable seeing how new this
is.

Keep up the good work!

------
syva
Agree with everyone else on the semantic issue, nonetheless I'm loving the
theme and built-in features and would 100% use this for some prototype builds.

------
tharshan09
This is really nice, certain parts are just amazing. Such nice UI flow. I will
keep an eye on it and try and use it in my next project!

------
gfaure
Showing a modal takes ages on Chrome on iPad, presumably as the blurred
background is being rendered.

------
oneeyedpigeon
The first example claims that "ui three column grid" is semantic. Not in my
book.

~~~
oneeyedpigeon
Actually, I think we've all misunderstood this: it's "Semantic". Nowhere does
it actually claim it's 'semantic' :-)

------
steveax
_You Keep Using That Word, I Do Not Think It Means What You Think It Means._

------
knodi
Wow, I really like this.

------
thenerdfiles
This is cart-before-the-horse-ism.

Where did this trend come from to use presentation frameworks as a barometer
for developing semantic markup?

Go to [http://schema.org](http://schema.org) to understand what descriptive
semantics is about.

"What it looks like" is not basis for initiating a project into generic
semantic structures that involve interoperability with existing, mature
systems.

These exercises really need to stop. There are no "three column grids" in
e-mails. C'mon, folks !

How can we get drag-and-drag complex objects from microdata? — This is a
question of semantics, and this framework follows a principle of "UI is the
language of the web." With this axiom, one cannot even begin to talk about
interoperable/shared semantics!

Following such a principle, what do we end up saying about the lingua franca
of the Web, HTML, which does not describe any UI component? We're not "writing
for UIs"; we're writing for other humans, and possibly other species which can
parse a base language. If all we're writing for is the UI, we'd first need to
describe our grammar before we can begin to send a message, and this is
clearly not the case with natural language. We describe what we [mean] before
we go about describing how we meant it!

------
mumbi
This site infuriates me. Half the stuff I click does nothing(chrome).

