17 ms·

Semantic UI

768 points by jhund 10y ago

inputcoffee 10y ago
What is the best way to think of this. Is this like Twitter Bootstrap and Zurb Foundation, or is this like something else entirely?
- zitterbewegung 10y ago
  It's like Twitter Bootstrap where the classes are named after the functionality you are adding to the div. For example a div of an container of three buttons has two classes (three and buttons).
  - rspeer 10y ago
    "There are three of them" counts as functionality now?
- ukyrgf 10y ago
  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 10y ago
    >>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 10y ago
      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 10y ago
        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 10y ago
        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...
    - ed312 10y ago
      Some people think bootstrap without dashes in the class names is better... or is there more to it?
      - inputcoffee 10y ago
        Good question. From looking at it, it looks less, well, dashy. But in addition, there also seems to be much more compact HTML. I don't know if that is actually the case. Compare: <button type="button" class="btn btn-primary"> Primary </button> <button class="ui button"> Follow </button> or Semantic UI: <div class="ui breadcrumb"> <a class="section">Home</a> <div class="divider"> / </div> <a class="section">Store</a> <div class="divider"> / </div> <div class="active section">T-Shirt</div> </div> Twitter Bootstrap: <ol class="breadcrumb"> <li class="breadcrumb-item active">Home</li> </ol> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item active">Library</li> </ol> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Library</a></li> <li class="breadcrumb-item active">Data</li> </ol>
  - Bahamut 10y ago
    I think Google takes it one step further and minifies the CSS class names
  - SippinLean 10y ago
    From Semantic UI docs: <div class="ui three column grid"> <div class="four wide column"></div> <div class="eight wide column"></div> <div class="four wide column"></div> </div> How is that different than col-md-8? Either can be used as HTML classes or Sass mixins.
- deleted 10y ago
  [deleted]
sheeshkebab 10y ago
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 10y ago
  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 10y ago
    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
    - steveax 10y ago
      What would you expect from a library that encourages people to use any tag for a button?
    - cdubzzz 10y ago
      > tap just above the clock to return to to Didn't know about that. Thanks!
      - jlukic 10y ago
        Author here. Fixed the scroll issue in the docs. Should be glorious normal iOS scroll.
  - cwilkes 10y ago
    Better than the scrolling I had on iOS which was shaking up and down as it was semi scrolling. Thought I had one too many drinks.
  - 10y ago
taeric 10y ago
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.
debacle 10y ago
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 10y ago
  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/
aphextron 10y ago
32,000+ stars is insane, how have I not heard of this? Does anyone have production experience with it?
notliketherest 10y ago
I love semantic UI React for my teams internal tools. So easy to drop in an use without having to think about css
malloryerik 10y ago
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.
- datahack 10y ago
  Been using this library and generally impressed. +1
- constantlm 10y ago
  Wow Ant Design looks pretty great.
- Rotareti 10y ago
  Looks great! I wish the doc was fully translated though.
- bpicolo 10y ago
  I started working with it yesterday. It's a little gratuitous on hover state animation usage but has otherwise been very pleasant! I also couldn't find css classes just for coloring text in the docs anywhere which kinda made me sad, but wasn't too hard to add a couple to my baseline css. I just wish there were a text-primary class or something (is there one that I missed?)
- WA 10y ago
  Slick, first library that gets many things right I think. However, there's apparently a desktop-version and a mobile-version. Is this normal? Don't people make responsive designs these days, but separate UIs for mobile/desktop?
- crucialfelix 10y ago
  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
JusticeJuice 10y ago
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 10y ago
  Curious about this. Any clue why? Too much animation, heavy JS-use? Not familiar with how the framework does its stuff.
  - tmikaeld 10y ago
    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...
  - wishinghand 10y ago
    It's 850k in size plus jquery.
  - JusticeJuice 10y ago
    It's just a huge amount of CSS - with lots of animations and transitions. The css is somewhat optimised, it just does lots of cray shit, lots of repaints.
Finbarr 10y ago
We used Semantic UI for Startup School (https://startupschool.org https://startupschool.org) and it has been awesome. Really happy with the choice.
- cyberferret 10y ago
  Nice! I am actually IN this round of Startup School, and I never noticed that it was built with this framework. Good work.
tabeth 10y ago
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 10y ago
  It may be possible, but it would be very difficult to make it accessible for screen readers, etc.
  - tabeth 10y ago
    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).
- spankalee 10y ago
  Web components definitely help, IMO, not by getting rid of JavaScript, but by making it possible to use custom elements without JavaScript. You can just import someone's widget and user it in markup. Check out the elements on http://webcomponents.org http://webcomponents.org
- franciscop 10y ago
  Oh yes you can, there are many examples of individual components and I made one aggregating some of those in https://picnicss.com/ https://picnicss.com/ , but of course it has its limitations and tabs for example are deprecated as the HTML in those becomes funny/fragile. Modal and responsive nav are in the limit of what I consider sane enough to be in the default library.
xiaohanyu 10y ago
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-semantic-ui-forest/ http://semantic-ui-forest.com/posts/2017-04-05-introducing-s... . 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 10y ago
  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 10y ago
    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-fixed-top/ http://semantic-ui-forest.com/templates/bootstrap/navbar-fix... http://semantic-ui-forest.com/templates/bootstrap/non-responsive/ http://semantic-ui-forest.com/templates/bootstrap/non-respon... Semantic-UI gives more freedom for features like responsiveness, theme customization with 3000+ variables, although the default configurations are also very good.
TomFrost 10y ago
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/
- ollieco 10y ago
  Thanks for your work on porting Semantic UI to React. I've used it in an internal application and it was a breeze to work with.
- firman 10y ago
  Can it be used with project that initiated with `create-react-app`?
  - acemarke 10y ago
    Yep! I actually am using it in the sample project for my "Practical Redux" tutorial series: http://blog.isquaredsoftware.com/series/practical-redux/ http://blog.isquaredsoftware.com/series/practical-redux/ . Also using it at work.
- jorgeer 10y ago
  Thank you for the hard work done here! We make extensive use of your library, and love how well maintained and easy to use it is.
- rvanmil 10y ago
  I've been looking for a replacement for Bootstrap since it's been alpha for ages and it doesn't look like there is any interest in an official React implementation. So this might be it, I'm going to give it a try :)
  - jmknoll 10y ago
    Have you used React-bootstrap at all? I've used it in the past and it's not bad. And is relatively well maintained. https://github.com/react-bootstrap https://github.com/react-bootstrap However, there is the bigger problem that bootstrap feels more and more like a sinking ship.
jameslk 10y ago
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 10y ago
  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-architecture/ http://nicolasgallagher.com/about-html-semantics-front-end-a..., 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 10y ago
franciscop 10y ago
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 10y ago
  Sad I am considering to use picnicss in my next project. What you would recommend besides Semantic UI?
  - franciscop 10y ago
    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.
- allendoerfer 10y ago
  I used it, thanks for creating it!
Mizza 10y ago
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.
flukus 10y ago
Wouldn't a semantic UI have things like a <menu> tag that was up to the browser to render?
5_minutes 10y ago
I'm fine with Bootstrap though... another day, another framework
kbr 10y ago
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
jlukic 10y ago
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 10y ago
  For a minute I though I was looking at the real github and they finally got rid of that black bar. Well done! ;-)
  - xiaohanyu 10y ago
    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.
- jorgeer 10y ago
  Fantastic work. Our company use Semantic-UI for pretty much every project, as do I privately. A pleasure to work with, way above other frameworks I've used.
  - brightball 10y ago
    Are there decent options for themes out there? I really like what I see but my design talents are...lacking. :-)
    - du_bing 10y ago
      https://semantic-ui-forest.com https://semantic-ui-forest.com
karimdag 10y ago
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.
cyberferret 10y ago
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 10y ago
  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 10y ago
    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.
    - geniium 10y ago
      Totally agree with you!
    - jpkeisala 10y ago
      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?
- deleted 10y ago
  [deleted]
wishinghand 10y ago
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.
jwr 10y ago
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.
- ledgerdev 10y ago
  Cool, just today I was just looking for something like sematic/bootstrap.v4 that works well with clojurescript, do you have any suggestions? Have you had any issues pulling in jquery alongside react?
  - jwr 10y ago
    No, no issues apart from the dead weight (jQuery can't be compiled with Google Closure advanced optimizations either). jQuery is almost invisible, you only notice it sometimes because of the `js/$` appearing in your code, as in the common idiom: `(-> state rum/dom-node js/$ (.popup popup-params))`.
  - jasonm23 10y ago
    React Semantic UI doesn't have the jQuery dependency.
- AbuAssar 10y ago
  they added a new silent install feature in version 2.2: "We've added a new semantic.json setting autoInstall which allows for silent install when Semantic UI is used in CLI environments, making testing more streamlined."
rfw1z 10y ago
What makes the Internet so exciting is the direct opposite of this.
cknight 10y ago
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-original-doom/ https://www.wired.com/2016/04/average-webpage-now-size-origi...
- splintercell 10y ago
  Pretty neat looking and interesting site.
dandare 10y ago
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?
zeeshanu 10y ago
The interface looks good but it is like a nightmare to remeber every single class.
- dmoreno 10y ago
  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.
tmikaeld 10y ago
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.
daurnimator 10y ago
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.
chenshuiluke 10y ago
Semantic UI is really great! I suck at frontend design and it really helps me to make decent looking websites :)
dmoreno 10y ago
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/assets/stylesheets https://github.com/doabit/semantic-ui-sass/tree/master/app/a...)
constantlm 10y ago
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.
kuon 10y ago
I am starting a new project, and I am considering semantic UI and grommet. Anybody has experience with grommet?
vinayakkulkarni 10y ago
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 10y ago
  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 10y ago
    I ain't working in Zomato :P Got the info from this thread: https://github.com/Semantic-Org/Semantic-UI/issues/2449#issuecomment-280293760 https://github.com/Semantic-Org/Semantic-UI/issues/2449#issu...
nkkollaw 10y ago
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 10y ago
  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 10y ago
    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...
deleted 10y ago
[deleted]
tomelders 10y ago
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 10y ago
  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 10y ago
    But people will be forced to use it. That's my complaint.
- lofties 10y ago
  Wow, I wonder what happened in your childhood.
- YCode 10y ago
  Not sure about your definition of "these things" -- are you including say Bootstrap, jQuery or Angular/React/Vue/etc.?
- SippinLean 10y ago
  Working on enterprise-level sites this stuff is essential, not useless. CSS modals are a solved problem, I don't feel like solving it again. Designers won't follow any constraints.
xyproto 10y ago
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.
macca321 10y ago
I'd like to find a framework like this that comes with platform-neutral (handlebars or similar) templates for each component
voidhawk 10y ago
Anyone else find the pages jitter when scrolling? At least on Safari (iPhone)
ludbek 10y ago
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.
ssijak 10y ago
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 10y ago
  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 10y ago
    It's alpha meaning the API will change most likely just be aware to check release notes as breaking changes are expected to happen.
mark_l_watson 10y ago
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.
baby 10y ago
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.
keehun 10y ago
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 10y ago
  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 10y ago
    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 10y ago
      That's beside the point. That mobile exists doesn't excuse extremely poor non-mobile UI.
aecorredor 10y ago
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.
Too 10y ago
> 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 10y ago
  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.
jff 10y ago
All this and it still looks like Yet Another Bootstrap website. Guess that's the modern meaning of 'beautiful website'.
nwmcsween 10y ago
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.
tbabb 10y ago
> 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.
symboltoproc 10y ago
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.
nwmcsween 10y ago
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
ndarilek 10y ago
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 10y ago
jv22222 10y ago
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.
alexjv89 10y ago
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.
mybrid 10y ago
"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/

768 points by jhund 10y ago

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

zitterbewegung 10y ago
It's like Twitter Bootstrap where the classes are named after the functionality you are adding to the div. For example a div of an container of three buttons has two classes (three and buttons).
- rspeer 10y ago
  "There are three of them" counts as functionality now?
ukyrgf 10y ago
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 10y ago
  >>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 10y ago
    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 10y ago
      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 10y ago
        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...
  - ed312 10y ago
    Some people think bootstrap without dashes in the class names is better... or is there more to it?
    - inputcoffee 10y ago
      Good question. From looking at it, it looks less, well, dashy. But in addition, there also seems to be much more compact HTML. I don't know if that is actually the case. Compare: <button type="button" class="btn btn-primary"> Primary </button> <button class="ui button"> Follow </button> or Semantic UI: <div class="ui breadcrumb"> <a class="section">Home</a> <div class="divider"> / </div> <a class="section">Store</a> <div class="divider"> / </div> <div class="active section">T-Shirt</div> </div> Twitter Bootstrap: <ol class="breadcrumb"> <li class="breadcrumb-item active">Home</li> </ol> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item active">Library</li> </ol> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Library</a></li> <li class="breadcrumb-item active">Data</li> </ol>
- Bahamut 10y ago
  I think Google takes it one step further and minifies the CSS class names
- SippinLean 10y ago
  From Semantic UI docs: <div class="ui three column grid"> <div class="four wide column"></div> <div class="eight wide column"></div> <div class="four wide column"></div> </div> How is that different than col-md-8? Either can be used as HTML classes or Sass mixins.
deleted 10y ago
[deleted]

sheeshkebab 10y ago

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 10y ago
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 10y ago
  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
  - steveax 10y ago
    What would you expect from a library that encourages people to use any tag for a button?
  - cdubzzz 10y ago
    > tap just above the clock to return to to Didn't know about that. Thanks!
    - jlukic 10y ago
      Author here. Fixed the scroll issue in the docs. Should be glorious normal iOS scroll.
- cwilkes 10y ago
  Better than the scrolling I had on iOS which was shaking up and down as it was semi scrolling. Thought I had one too many drinks.
- 10y ago

taeric 10y ago

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.

debacle 10y ago

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 10y ago
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/

aphextron 10y ago

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

notliketherest 10y ago

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

malloryerik 10y ago

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.

datahack 10y ago
Been using this library and generally impressed. +1
constantlm 10y ago
Wow Ant Design looks pretty great.
Rotareti 10y ago
Looks great! I wish the doc was fully translated though.
bpicolo 10y ago
I started working with it yesterday. It's a little gratuitous on hover state animation usage but has otherwise been very pleasant! I also couldn't find css classes just for coloring text in the docs anywhere which kinda made me sad, but wasn't too hard to add a couple to my baseline css. I just wish there were a text-primary class or something (is there one that I missed?)
WA 10y ago
Slick, first library that gets many things right I think. However, there's apparently a desktop-version and a mobile-version. Is this normal? Don't people make responsive designs these days, but separate UIs for mobile/desktop?
crucialfelix 10y ago
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

JusticeJuice 10y ago

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 10y ago
Curious about this. Any clue why? Too much animation, heavy JS-use? Not familiar with how the framework does its stuff.
- tmikaeld 10y ago
  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...
- wishinghand 10y ago
  It's 850k in size plus jquery.
- JusticeJuice 10y ago
  It's just a huge amount of CSS - with lots of animations and transitions. The css is somewhat optimised, it just does lots of cray shit, lots of repaints.

Finbarr 10y ago

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

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

tabeth 10y ago

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 10y ago
It may be possible, but it would be very difficult to make it accessible for screen readers, etc.
- tabeth 10y ago
  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).
spankalee 10y ago
Web components definitely help, IMO, not by getting rid of JavaScript, but by making it possible to use custom elements without JavaScript. You can just import someone's widget and user it in markup. Check out the elements on http://webcomponents.org http://webcomponents.org
franciscop 10y ago
Oh yes you can, there are many examples of individual components and I made one aggregating some of those in https://picnicss.com/ https://picnicss.com/ , but of course it has its limitations and tabs for example are deprecated as the HTML in those becomes funny/fragile. Modal and responsive nav are in the limit of what I consider sane enough to be in the default library.

xiaohanyu 10y ago

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-semantic-ui-forest/ http://semantic-ui-forest.com/posts/2017-04-05-introducing-s... . 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 10y ago
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 10y ago
  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-fixed-top/ http://semantic-ui-forest.com/templates/bootstrap/navbar-fix... http://semantic-ui-forest.com/templates/bootstrap/non-responsive/ http://semantic-ui-forest.com/templates/bootstrap/non-respon... Semantic-UI gives more freedom for features like responsiveness, theme customization with 3000+ variables, although the default configurations are also very good.

TomFrost 10y ago

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/

ollieco 10y ago
Thanks for your work on porting Semantic UI to React. I've used it in an internal application and it was a breeze to work with.
firman 10y ago
Can it be used with project that initiated with `create-react-app`?
- acemarke 10y ago
  Yep! I actually am using it in the sample project for my "Practical Redux" tutorial series: http://blog.isquaredsoftware.com/series/practical-redux/ http://blog.isquaredsoftware.com/series/practical-redux/ . Also using it at work.
jorgeer 10y ago
Thank you for the hard work done here! We make extensive use of your library, and love how well maintained and easy to use it is.
rvanmil 10y ago
I've been looking for a replacement for Bootstrap since it's been alpha for ages and it doesn't look like there is any interest in an official React implementation. So this might be it, I'm going to give it a try :)
- jmknoll 10y ago
  Have you used React-bootstrap at all? I've used it in the past and it's not bad. And is relatively well maintained. https://github.com/react-bootstrap https://github.com/react-bootstrap However, there is the bigger problem that bootstrap feels more and more like a sinking ship.

jameslk 10y ago

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 10y ago
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-architecture/ http://nicolasgallagher.com/about-html-semantics-front-end-a..., 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 10y ago

franciscop 10y ago

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 10y ago
Sad I am considering to use picnicss in my next project. What you would recommend besides Semantic UI?
- franciscop 10y ago
  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.
allendoerfer 10y ago
I used it, thanks for creating it!

Mizza 10y ago

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.

flukus 10y ago

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

5_minutes 10y ago

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

kbr 10y ago

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

jlukic 10y ago

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 10y ago
For a minute I though I was looking at the real github and they finally got rid of that black bar. Well done! ;-)
- xiaohanyu 10y ago
  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.
jorgeer 10y ago
Fantastic work. Our company use Semantic-UI for pretty much every project, as do I privately. A pleasure to work with, way above other frameworks I've used.
- brightball 10y ago
  Are there decent options for themes out there? I really like what I see but my design talents are...lacking. :-)
  - du_bing 10y ago
    https://semantic-ui-forest.com https://semantic-ui-forest.com

karimdag 10y ago

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.

cyberferret 10y ago

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 10y ago
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 10y ago
  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.
  - geniium 10y ago
    Totally agree with you!
  - jpkeisala 10y ago
    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?
deleted 10y ago
[deleted]

wishinghand 10y ago

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.

jwr 10y ago

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.

ledgerdev 10y ago
Cool, just today I was just looking for something like sematic/bootstrap.v4 that works well with clojurescript, do you have any suggestions? Have you had any issues pulling in jquery alongside react?
- jwr 10y ago
  No, no issues apart from the dead weight (jQuery can't be compiled with Google Closure advanced optimizations either). jQuery is almost invisible, you only notice it sometimes because of the `js/$` appearing in your code, as in the common idiom: `(-> state rum/dom-node js/$ (.popup popup-params))`.
- jasonm23 10y ago
  React Semantic UI doesn't have the jQuery dependency.
AbuAssar 10y ago
they added a new silent install feature in version 2.2: "We've added a new semantic.json setting autoInstall which allows for silent install when Semantic UI is used in CLI environments, making testing more streamlined."

rfw1z 10y ago

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

cknight 10y ago

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-original-doom/ https://www.wired.com/2016/04/average-webpage-now-size-origi...

splintercell 10y ago
Pretty neat looking and interesting site.

dandare 10y ago

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?

zeeshanu 10y ago

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

dmoreno 10y ago
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.

tmikaeld 10y ago

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.

daurnimator 10y ago

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.

chenshuiluke 10y ago

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

dmoreno 10y ago

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/assets/stylesheets https://github.com/doabit/semantic-ui-sass/tree/master/app/a...)

constantlm 10y ago

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.

kuon 10y ago

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

vinayakkulkarni 10y ago

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 10y ago
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 10y ago
  I ain't working in Zomato :P Got the info from this thread: https://github.com/Semantic-Org/Semantic-UI/issues/2449#issuecomment-280293760 https://github.com/Semantic-Org/Semantic-UI/issues/2449#issu...

nkkollaw 10y ago

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 10y ago
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 10y ago
  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...

deleted 10y ago

[deleted]

tomelders 10y ago

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 10y ago
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 10y ago
  But people will be forced to use it. That's my complaint.
lofties 10y ago
Wow, I wonder what happened in your childhood.
YCode 10y ago
Not sure about your definition of "these things" -- are you including say Bootstrap, jQuery or Angular/React/Vue/etc.?
SippinLean 10y ago
Working on enterprise-level sites this stuff is essential, not useless. CSS modals are a solved problem, I don't feel like solving it again. Designers won't follow any constraints.

xyproto 10y ago

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.

macca321 10y ago

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

voidhawk 10y ago

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

ludbek 10y ago

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.

ssijak 10y ago

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 10y ago
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 10y ago
  It's alpha meaning the API will change most likely just be aware to check release notes as breaking changes are expected to happen.

mark_l_watson 10y ago

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.

baby 10y ago

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.

keehun 10y ago

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 10y ago
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 10y ago
  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 10y ago
    That's beside the point. That mobile exists doesn't excuse extremely poor non-mobile UI.

aecorredor 10y ago

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.

Too 10y ago

> 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 10y ago
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.

jff 10y ago

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

nwmcsween 10y ago

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.

tbabb 10y ago

> 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.

symboltoproc 10y ago

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.

nwmcsween 10y ago

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

ndarilek 10y ago

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 10y ago

jv22222 10y ago

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.

alexjv89 10y ago

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.

mybrid 10y ago

"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/