7 ms·

Semantic UI 1.0 released

185 points by rtcoms 12y ago

ifyoumakeit 12y ago
On Chrome v37, if you change the theme, the "Download Now" button breaks. A lot of the UI elements are really great, especially the Views section.
digisign 12y ago
Looks quite beautiful. Wondering why these frameworks always need a build tool written in ruby, javascript, ...or OCaml? Anyone know "gulp?" I'd prefer a build tool that does not require runtimes to be installed, i.e. something in C, python, even perl for example.
- dragonwriter 12y ago
  > I'd prefer a build tool that does not require runtimes to be installed, i.e. something in C, python, even perl for example. Since when does python or perl not require a runtime? It may be more common that OS distros include a perl or python runtime, but that doesn't mean that its not required. (And, of course, its quite possible for a tool in any of those languages to be packaged in such a way that it includes the necessary runtime in its own distribution rather than require it to be separately installed.)
  - digisign 12y ago
    "runtime to be installed."
ckluis 12y ago
At first blush I was like great another UI framework, but going through the kitchen sink - they seem to have added all the “normal” UI patterns like Cards - seems like an excellent framework for banging out a prototype.
andyfleming 12y ago
Here's the discussion from last time this was posted: https://news.ycombinator.com/item?id=6381220 https://news.ycombinator.com/item?id=6381220
- andremendes 12y ago
  Good discussion, I believe the best option is to use semantic html5 tags together with Semantic UI css, which would be way more semantic than html5 tags + bootstrap css, for example.
priteshjain 12y ago
I have been using this and love this UI framework. +1
skratlo 12y ago
Great, the site kept my CPU cores (and cooling fans) very busy, I accidentally clicked on the download link, which brought me 2.5 MB zip file. This thing ain't light. But gosh! 10k stars on github? are you people crazy?
- ddoolin 12y ago
  A lot of the bulk is due to the different themes included, 20 (!) total. Also the distribution folder is packed in as well , with the source. The source, by itself, without all the themes, is about one MB. Not bad, but still quite heavy. I haven't used it but it seems to cover a lot, like TWBS, so I can see why people like it.
  - weego 12y ago
    The source, by itself, without all the themes, is about one MB That's just the basics. You still need to override/add more. 1MB to get you out of the gate is appalling.
UncleCarbs 12y ago
Very pretty, but is it really semantic? "A button can have different sizes. A button can have different colors." </soapbox>
- zimbatm 12y ago
  I'm more surprised that the button is defined using a <div> tag instead of a <button> one. http://semantic-ui.com/elements/button.html http://semantic-ui.com/elements/button.html A lot of these elements seem to be using div tags instead of list, button, ...
  - elyase 12y ago
    “Semantic is tag agnostic, meaning you can use any html tags with UI elements.”
    - moonlighter 12y ago
      It's unfortunate that they chose to use un-semantic tags in all their examples. It's almost backwards. Other than that, it's extremely well documented and a pleasure to work with, and much easier to pick up than Bootstrap these days.
    - deleted 12y ago
      [deleted]
    - usingpond 12y ago
      So is it the obvious usability fail that this statement would seem?
- oneeyedpigeon 12y ago
  I believe last time this was discussed it was broadly agreed that the framework isn't semantic, it's Semantic. I.e. it's just the name of the framework. Of course, it's incredibly misleading ...
  - jlukic 12y ago
TuringTest 12y ago
The main home page would benefit from a sentence like "Semantic UI is a user interface framework" explicitly written down somewhere... Relying on context to convey that idea seems to me a glaring omission. Other than that, I like their stated goal and approach. http://learnsemantic.com/preface/introduction.html http://learnsemantic.com/preface/introduction.html
- redalastor 12y ago
  There's no clear instructions on how to use it so most people are confused. There should be a getting started that makes clear that the framework works by adding classes on html tags and that's about it.
  - fit2rule 12y ago
    There is indeed a GETTING-STARTED.md file, and its relatively well-written, imho. It answers all sorts of things you may ask .. "There's no clear instructions" !true, imho. EDIT: Plus, if you follow the documents in the sources (i.e. README and so on ..) you get to http://learnsemantic.com/ http://learnsemantic.com/ .. which is clearly a useful set of documents for developer needs. Quite some polish.
pothibo 12y ago
I went to their homepage - http://semantic-ui.com/ http://semantic-ui.com/ - the page is slow on my macbook pro '14. ~ 25FPS...
CSDude 12y ago
Looks really good, besides whether it is really semantic or not, do you feel that the page is very slow? I have a good computer with a good gpu but the page seems slowing down, even in the individual components' page.
Siecje 12y ago
After click a couple of the transitions at the bottom of the kitchen sink page, the transitions stop working. Firefox 33.0 http://semantic-ui.com/kitchen-sink.html#transition http://semantic-ui.com/kitchen-sink.html#transition
- dkersten 12y ago
  Same happened to me. I clicked through the top row and when I got to the bottom row, they didn't work. The top row then no longer worked either. Chrome 39 here.
- delluminatus 12y ago
  I think the Vertical Flip transition is the one with an issue. Not only does it not work, but it breaks the others.
  - sergiosgc 12y ago
    I concur. Everything works fine unless I click the Vertical Flip transition. Whenever I click it, animations stop working.
- snarkyturtle 12y ago
  Same thing happened in Chrome, think it's just a bug with their demo JS.
Semiapies 12y ago
The menus are flickery and unresponsive on my Nexus 7.
triangleman 12y ago
ifyoumakeit, your account is hellbanned.
- glibgil 12y ago
  ifyoumakeit wrote: "On Chrome v37, if you change the theme, the "Download Now" button breaks." "A lot of the UI elements are really great, especially the Views section." EDIT: the down-vote on this meta-discussion is a real tyranny-of-the-minority situation. What, there's not enough room in this little crack in the paint of the Internet for a little in-context self reflection? Stay precious.
  - glibgil 12y ago
    On that note, why would HN hellban this user https://news.ycombinator.com/threads?id=ifyoumakeit https://news.ycombinator.com/threads?id=ifyoumakeit, https://news.ycombinator.com/submitted?id=ifyoumakeit https://news.ycombinator.com/submitted?id=ifyoumakeit? Obviously, their offensive comment or submission is probably deleted, but they hardly post and their posts aren't bad. Broken system.
    - ifyoumakeit 12y ago
      Thanks glibgil. triangleman, I'm not sure why I was hellbanned. After 100+ days of lurking and a handful posts/comments, I decided today to start trying to start participating again. My comment history is pretty vanilla, with one random link that I don't remember even posting on the Uber article and didn't even make any sense in the context of the article. Also, there was never a deleted offensive comment on my account, so I'm not sure why I would be hell-banned. Is there anything I can do to reverse this?
      - dang 12y ago
        That account was not banned. All: please follow the HN guidelines and email us (hn@ycombinator.com) rather than posting in the threads. There are two reasons: (a) it's the only reliable way to get things like this fixed, and (b) these meta-subthreads add noise. https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html
joelthelion 12y ago
This is simply too slow. On my phone the home page takes ages to load and repaints too many times before reaching it's final state.
- sergiosgc 12y ago
  If we're going down anecdote avenue, on my phone it loads and displays just fine on both Chrome and Firefox. Even the Kitchen Sink page is ok (scrolling is not so smooth, but acceptable for a page with so many interactive elements).
tomc1985 12y ago
This doesn't have anything to do with that "Semantic web" idea thats been floating around forever is it? Why the hell did they take the name then? :(
Sarkie 12y ago
Not semantic. The FPS is good. The amount of painting on some of the objects is Too Damn High. What button is this? <div class="ui animated fade button"> Meh.
- SwellJoe 12y ago
  The word "semantic" isn't semantic. The problem with being semantic (where I guess "semantic" means, to you, that the CSS class is representative of the human readable content of the element?) in underlying UI code is that it doesn't make sense to have a CSS class for every unique item in the UI. The projects I'm working on a UI for would literally have thousands of classes. Even if I categorized them down to some subset (e.g. "apache-config-item"), it would still be in the hundreds, and would be unnecessary information; my UI doesn't need for Apache configuration textboxes to be differently styled than Postfix configuration textboxes. In fact, it would be counter-productive and ugly to give them different styles. The "semantic" in "Semantic UI" seems to be that the classes describe the resulting visual output. This is semantic. It's just not semantic for the end user (which it doesn't need to be). It is semantic for the developer. The developer, at a given moment, doesn't (generally) care whether the text box is for Apache of Postfix configuration options; they only care if it is the kind of text box they want the user to see. Presumably, you'll also have IDs that uniquely identify your divs and your input elements. Which still allows styling for specific use cases. In short, I can't imagine a "semantic" framework being useful if it is semantic for the end user rather than semantic for what the developer is interacting with.
- hobarrera 12y ago
  I agree completely. The resulting HTML is unreadable. All div tags, and you have to dive through the classes to see what it is.
integraton 12y ago
I'm not even joking when I say that the creator of this framework should consider going into marketing or sales. It's pretty impressive that he managed to take a framework that violates so many semantic HTML principles that it seems like it's being done on purpose, have the audacity to then call it "Semantic UI," and actually have it get some level of traction. It's like if someone took a bunch of iron beams, claimed that they were actually 100% natural wood, and managed to get a bunch of people to buy them.
- jdmichal 12y ago
  Well, the people buying would probably be those who were interested in buying iron beams to start with, then saw some guy selling them at the price of a wood beam.
pacomerh 12y ago
I think an optimization pass for speed is due. I really like the styles and animations though.
epayne 12y ago
Bravo to the Semantic UI team! The Developer Experience seems very smooth and this kit is now a contender... I am now planning to use it on my next small project. Previously I may have only considered Bootstrap or Foundation.
clukic 12y ago
By the scope and polish, it's obvious many hundreds of hours of work have been invested in this library. It's at least as comprehensive as Bootstrap or Foundation, and only a casual review is needed to see that it's a lot easier to use then either. And yet all the comments are about the CSS transform in the header, or a knee jerk snipe about the name of the framework itself.
- nicholasreed 12y ago
  Kitchen Sink example: http://semantic-ui.com/kitchen-sink.html http://semantic-ui.com/kitchen-sink.html Lots of examples in there, useful to Inspect. I'm glad this got resubmitted or I might have missed out, it seems extremely comprehensive to prototype with.
- fit2rule 12y ago
  I'm an hour through checking it out, and as it already solves problems for me, I'm just going to try to bring it into my work toolset as quickly as possible .. only hiccup was getting through the 'gulp' install, but relatively smooth sailing throughout. (Plus, I just learned about better-console, which is actually now some other thing on my Todo list, but a good one. ;) As a relative troglodyte on the subject of CSS and web-UI stuff, I have to say that its thrilling to see so many takes on the same ol' thing. A vibrant and thriving scene indeed.
nkoren 12y ago
I think that semantic-ui.com looks gorgeous. I also think it eats a full core on my 2013 Macbook. This, unfortunately, is a poor advertisement for the framework.

185 points by rtcoms 12y ago

On Chrome v37, if you change the theme, the "Download Now" button breaks. A lot of the UI elements are really great, especially the Views section.

digisign 12y ago

Looks quite beautiful. Wondering why these frameworks always need a build tool written in ruby, javascript, ...or OCaml? Anyone know "gulp?" I'd prefer a build tool that does not require runtimes to be installed, i.e. something in C, python, even perl for example.

dragonwriter 12y ago
> I'd prefer a build tool that does not require runtimes to be installed, i.e. something in C, python, even perl for example. Since when does python or perl not require a runtime? It may be more common that OS distros include a perl or python runtime, but that doesn't mean that its not required. (And, of course, its quite possible for a tool in any of those languages to be packaged in such a way that it includes the necessary runtime in its own distribution rather than require it to be separately installed.)
- digisign 12y ago
  "runtime to be installed."

ckluis 12y ago

At first blush I was like great another UI framework, but going through the kitchen sink - they seem to have added all the “normal” UI patterns like Cards - seems like an excellent framework for banging out a prototype.

andyfleming 12y ago

Here's the discussion from last time this was posted: https://news.ycombinator.com/item?id=6381220 https://news.ycombinator.com/item?id=6381220

andremendes 12y ago
Good discussion, I believe the best option is to use semantic html5 tags together with Semantic UI css, which would be way more semantic than html5 tags + bootstrap css, for example.

priteshjain 12y ago

I have been using this and love this UI framework. +1

skratlo 12y ago

Great, the site kept my CPU cores (and cooling fans) very busy, I accidentally clicked on the download link, which brought me 2.5 MB zip file. This thing ain't light. But gosh! 10k stars on github? are you people crazy?

ddoolin 12y ago
A lot of the bulk is due to the different themes included, 20 (!) total. Also the distribution folder is packed in as well , with the source. The source, by itself, without all the themes, is about one MB. Not bad, but still quite heavy. I haven't used it but it seems to cover a lot, like TWBS, so I can see why people like it.
- weego 12y ago
  The source, by itself, without all the themes, is about one MB That's just the basics. You still need to override/add more. 1MB to get you out of the gate is appalling.

UncleCarbs 12y ago

Very pretty, but is it really semantic? "A button can have different sizes. A button can have different colors." </soapbox>

zimbatm 12y ago
I'm more surprised that the button is defined using a <div> tag instead of a <button> one. http://semantic-ui.com/elements/button.html http://semantic-ui.com/elements/button.html A lot of these elements seem to be using div tags instead of list, button, ...
- elyase 12y ago
  “Semantic is tag agnostic, meaning you can use any html tags with UI elements.”
  - moonlighter 12y ago
    It's unfortunate that they chose to use un-semantic tags in all their examples. It's almost backwards. Other than that, it's extremely well documented and a pleasure to work with, and much easier to pick up than Bootstrap these days.
  - deleted 12y ago
    [deleted]
  - usingpond 12y ago
    So is it the obvious usability fail that this statement would seem?
oneeyedpigeon 12y ago
I believe last time this was discussed it was broadly agreed that the framework isn't semantic, it's Semantic. I.e. it's just the name of the framework. Of course, it's incredibly misleading ...
- jlukic 12y ago

TuringTest 12y ago

The main home page would benefit from a sentence like "Semantic UI is a user interface framework" explicitly written down somewhere... Relying on context to convey that idea seems to me a glaring omission. Other than that, I like their stated goal and approach. http://learnsemantic.com/preface/introduction.html http://learnsemantic.com/preface/introduction.html

redalastor 12y ago
There's no clear instructions on how to use it so most people are confused. There should be a getting started that makes clear that the framework works by adding classes on html tags and that's about it.
- fit2rule 12y ago
  There is indeed a GETTING-STARTED.md file, and its relatively well-written, imho. It answers all sorts of things you may ask .. "There's no clear instructions" !true, imho. EDIT: Plus, if you follow the documents in the sources (i.e. README and so on ..) you get to http://learnsemantic.com/ http://learnsemantic.com/ .. which is clearly a useful set of documents for developer needs. Quite some polish.

pothibo 12y ago

I went to their homepage - http://semantic-ui.com/ http://semantic-ui.com/ - the page is slow on my macbook pro '14. ~ 25FPS...

CSDude 12y ago

Looks really good, besides whether it is really semantic or not, do you feel that the page is very slow? I have a good computer with a good gpu but the page seems slowing down, even in the individual components' page.

Siecje 12y ago

After click a couple of the transitions at the bottom of the kitchen sink page, the transitions stop working. Firefox 33.0 http://semantic-ui.com/kitchen-sink.html#transition http://semantic-ui.com/kitchen-sink.html#transition

dkersten 12y ago
Same happened to me. I clicked through the top row and when I got to the bottom row, they didn't work. The top row then no longer worked either. Chrome 39 here.
delluminatus 12y ago
I think the Vertical Flip transition is the one with an issue. Not only does it not work, but it breaks the others.
- sergiosgc 12y ago
  I concur. Everything works fine unless I click the Vertical Flip transition. Whenever I click it, animations stop working.
snarkyturtle 12y ago
Same thing happened in Chrome, think it's just a bug with their demo JS.

Semiapies 12y ago

The menus are flickery and unresponsive on my Nexus 7.

triangleman 12y ago

ifyoumakeit, your account is hellbanned.

glibgil 12y ago
ifyoumakeit wrote: "On Chrome v37, if you change the theme, the "Download Now" button breaks." "A lot of the UI elements are really great, especially the Views section." EDIT: the down-vote on this meta-discussion is a real tyranny-of-the-minority situation. What, there's not enough room in this little crack in the paint of the Internet for a little in-context self reflection? Stay precious.
- glibgil 12y ago
  On that note, why would HN hellban this user https://news.ycombinator.com/threads?id=ifyoumakeit https://news.ycombinator.com/threads?id=ifyoumakeit, https://news.ycombinator.com/submitted?id=ifyoumakeit https://news.ycombinator.com/submitted?id=ifyoumakeit? Obviously, their offensive comment or submission is probably deleted, but they hardly post and their posts aren't bad. Broken system.
  - ifyoumakeit 12y ago
    Thanks glibgil. triangleman, I'm not sure why I was hellbanned. After 100+ days of lurking and a handful posts/comments, I decided today to start trying to start participating again. My comment history is pretty vanilla, with one random link that I don't remember even posting on the Uber article and didn't even make any sense in the context of the article. Also, there was never a deleted offensive comment on my account, so I'm not sure why I would be hell-banned. Is there anything I can do to reverse this?
    - dang 12y ago
      That account was not banned. All: please follow the HN guidelines and email us (hn@ycombinator.com) rather than posting in the threads. There are two reasons: (a) it's the only reliable way to get things like this fixed, and (b) these meta-subthreads add noise. https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html

joelthelion 12y ago

This is simply too slow. On my phone the home page takes ages to load and repaints too many times before reaching it's final state.

sergiosgc 12y ago
If we're going down anecdote avenue, on my phone it loads and displays just fine on both Chrome and Firefox. Even the Kitchen Sink page is ok (scrolling is not so smooth, but acceptable for a page with so many interactive elements).

tomc1985 12y ago

This doesn't have anything to do with that "Semantic web" idea thats been floating around forever is it? Why the hell did they take the name then? :(

Sarkie 12y ago

Not semantic. The FPS is good. The amount of painting on some of the objects is Too Damn High. What button is this? <div class="ui animated fade button"> Meh.

SwellJoe 12y ago
The word "semantic" isn't semantic. The problem with being semantic (where I guess "semantic" means, to you, that the CSS class is representative of the human readable content of the element?) in underlying UI code is that it doesn't make sense to have a CSS class for every unique item in the UI. The projects I'm working on a UI for would literally have thousands of classes. Even if I categorized them down to some subset (e.g. "apache-config-item"), it would still be in the hundreds, and would be unnecessary information; my UI doesn't need for Apache configuration textboxes to be differently styled than Postfix configuration textboxes. In fact, it would be counter-productive and ugly to give them different styles. The "semantic" in "Semantic UI" seems to be that the classes describe the resulting visual output. This is semantic. It's just not semantic for the end user (which it doesn't need to be). It is semantic for the developer. The developer, at a given moment, doesn't (generally) care whether the text box is for Apache of Postfix configuration options; they only care if it is the kind of text box they want the user to see. Presumably, you'll also have IDs that uniquely identify your divs and your input elements. Which still allows styling for specific use cases. In short, I can't imagine a "semantic" framework being useful if it is semantic for the end user rather than semantic for what the developer is interacting with.
hobarrera 12y ago
I agree completely. The resulting HTML is unreadable. All div tags, and you have to dive through the classes to see what it is.

integraton 12y ago

I'm not even joking when I say that the creator of this framework should consider going into marketing or sales. It's pretty impressive that he managed to take a framework that violates so many semantic HTML principles that it seems like it's being done on purpose, have the audacity to then call it "Semantic UI," and actually have it get some level of traction. It's like if someone took a bunch of iron beams, claimed that they were actually 100% natural wood, and managed to get a bunch of people to buy them.

jdmichal 12y ago
Well, the people buying would probably be those who were interested in buying iron beams to start with, then saw some guy selling them at the price of a wood beam.

pacomerh 12y ago

I think an optimization pass for speed is due. I really like the styles and animations though.

epayne 12y ago

Bravo to the Semantic UI team! The Developer Experience seems very smooth and this kit is now a contender... I am now planning to use it on my next small project. Previously I may have only considered Bootstrap or Foundation.

clukic 12y ago

By the scope and polish, it's obvious many hundreds of hours of work have been invested in this library. It's at least as comprehensive as Bootstrap or Foundation, and only a casual review is needed to see that it's a lot easier to use then either. And yet all the comments are about the CSS transform in the header, or a knee jerk snipe about the name of the framework itself.

nicholasreed 12y ago
Kitchen Sink example: http://semantic-ui.com/kitchen-sink.html http://semantic-ui.com/kitchen-sink.html Lots of examples in there, useful to Inspect. I'm glad this got resubmitted or I might have missed out, it seems extremely comprehensive to prototype with.
fit2rule 12y ago
I'm an hour through checking it out, and as it already solves problems for me, I'm just going to try to bring it into my work toolset as quickly as possible .. only hiccup was getting through the 'gulp' install, but relatively smooth sailing throughout. (Plus, I just learned about better-console, which is actually now some other thing on my Todo list, but a good one. ;) As a relative troglodyte on the subject of CSS and web-UI stuff, I have to say that its thrilling to see so many takes on the same ol' thing. A vibrant and thriving scene indeed.

nkoren 12y ago

I think that semantic-ui.com looks gorgeous. I also think it eats a full core on my 2013 Macbook. This, unfortunately, is a poor advertisement for the framework.