Live data from Hacker News

Semantic UI

semantic-ui.com

181–190 of 257 posts

Re: Semantic UI

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

Re: Semantic UI

#182

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 wor…

You're right, people need to stop coming up with all this stuff. I have an idea to end it: why don't we just take all the good parts of all the frameworks and leave out the bad parts and finally make one framework that everyone can use? DM to discuss.

(p.s. this is a joke! no need to actually DM me except for coffee)

Re: Semantic UI

#183
post #163

Earlier quoted context omitted.

I used to think this way until reading this article by Nicolas Gallagher: http://nicolasgallagher.com/about-html-semantics-front-end-a... These days I'm quite convinced trying to author your markup such that you can redesign a site by applying a different stylesheet has the dependencies backwards. If you try to keep visual information out of your HTML, you end up authoring stylesheets designed to nimbly navigate your…

I disagree. I find that SASS mixins provide the same reusability as classes but in a much cleaner way. True, it makes your HTML and CSS very coupled, but it does provide you with a true clean separation of content and presentation. I find // style.scss @mixin button($color, $size) { ... } .download-book { @include button( $color: red, $size: big ); } .send-email { @include button( $color: blue, $size: small ); } // i…

I find tha the library-style "button" "red" "blue" "big" example prevents me from having to flip over and maintain CSS with every HTML change.

Yet your first example has everyone editing CSS files and appending new classes to it all the time, which in my experience is the fastest way to end up with unmaintainable CSS.

Mixins sounded good to me at first, but I've only experienced less maintainability when the CSS was too clever.

Re: Semantic UI

#184
post #23

Earlier quoted context omitted.

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

Some people think bootstrap without dashes in the class names is better... or is there more to it?

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:

Primary

Follow

or

Semantic UI:

Home / Store / T-Shirt

Twitter Bootstrap:

Home Home Library Home Library Data

Re: Semantic UI

#185
post #67

I chose Semantic UI for my project: 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-ori…

Pretty neat looking and interesting site.

Re: Semantic UI

#186
post #180

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

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.

Re: Semantic UI

#187
post #95

Earlier quoted context omitted.

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 :)

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 However, there is the bigger problem that bootstrap feels more and more like a sinking ship.

Why does Bootstrap 4 feel like a sinking ship?

Re: Semantic UI

#188
post #34

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 suc…

I used to think this way until reading this article by Nicolas Gallagher: http://nicolasgallagher.com/about-html-semantics-front-end-a... These days I'm quite convinced trying to author your markup such that you can redesign a site by applying a different stylesheet has the dependencies backwards. If you try to keep visual information out of your HTML, you end up authoring stylesheets designed to nimbly navigate your…

Strongly disagree, and the primary reason is that semantic HTML makes your source and stylesheets readable and easy to navigate and change for that reason. That is, setting aside technical arguments about re-usability for a moment, it's disastrous to have to look at a large codebase in this style:

    
    
    
when you could look at this:

    
    
    
The latter, aside from sparing your brain endless visual noise, makes it instantly clear how the html maps to the page elements.

Taken from http://maintainablecss.com/chapters/semantics/

> If you try to keep visual information out of your HTML, you end up authoring stylesheets designed to nimbly navigate your DOM structure to precisely target elements to style in a way that makes your CSS extremely coupled to the particular site you are building.

As for this technical argument, it's flatly untrue. Writing semantic HTML and the coupling you are referring to are completely orthogonal as long as you are using a tool like Sass / postCSS / etc to author your CSS.

Re: Semantic UI

#189

Earlier quoted context omitted.

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 However, there is the bigger problem that bootstrap feels more and more like a sinking ship.

Why does Bootstrap 4 feel like a sinking ship?

Because v4 has been in alpha since august 2015, and v3 hasn't had significant updates since 2015 either.

Re: Semantic UI

#190
post #163

Earlier quoted context omitted.

I used to think this way until reading this article by Nicolas Gallagher: http://nicolasgallagher.com/about-html-semantics-front-end-a... These days I'm quite convinced trying to author your markup such that you can redesign a site by applying a different stylesheet has the dependencies backwards. If you try to keep visual information out of your HTML, you end up authoring stylesheets designed to nimbly navigate your…

I disagree. I find that SASS mixins provide the same reusability as classes but in a much cleaner way. True, it makes your HTML and CSS very coupled, but it does provide you with a true clean separation of content and presentation. I find // style.scss @mixin button($color, $size) { ... } .download-book { @include button( $color: red, $size: big ); } .send-email { @include button( $color: blue, $size: small ); } // i…

A class called "download-book" wouldn't be semantic either.

A semantic choice of classes should represent the roles that things have in the UI hierarchy: if a "book download" button is the main action of the page, it should have a class of, say "main-action", possibly with an extra "download" class to show UI specific to download actions.

If a "book download" button is just an action, for example a button that is repeated multiple times in a table, then it needs a different class, like "action", still possibly with "download".

This is exactly like properly written HTML is semantic, elements represent hierarchical roles ("nav", "footer"), not their look, nor their content.

Post reply on HN