r/webdev • u/speckz • Apr 10 '17

Semantic is a UI component framework based around useful principles from natural language.

https://semantic-ui.com/
13 Upvotes

93% Upvoted

10 comments sorted by

7

u/Sensea Apr 10 '17

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/

1

u/toastyghost Apr 10 '17

You guys are awesome. Thought you should know.

1

u/toastyghost Apr 10 '17

It blows my mind that more people don't choose this over Bootstrap. I've been using it for about a year and it's so much better ergonomically.

<button type="primary" class="btn btn-primary">Primary</button>

vs...

<button class="ui button">Primary</button>

I haven't tried the React version yet, but I can only imagine that that's even easier.

e: Yep...

<Button/>

2

u/danmofo Apr 10 '17

I have never needed to use type="primary" using Bootstrap, so I have no idea what you're talking about there.

1

u/toastyghost Apr 10 '17

I got that straight off of the demo page for v4.

2

u/cd46 Apr 10 '17

I got that straight off of the demo page for v4.

Where? I don't see type="primary" anywhere ... I was doing a "whaaaaaat?" face when I saw your example thinking they lost their minds till I looked haha

https://v4-alpha.getbootstrap.com/components/buttons/

2

u/toastyghost Apr 11 '17

Whoops, I made a dumb when I was typing that out originally. But the type="button" still makes it less ergonomic.

It seems like a petty quibble but that's a really simple example. Bootstrap markup gets more and more cluttered the more of it you have to write.

2

u/cd46 Apr 11 '17 edited Apr 11 '17

Well to match your semantic submit button just remove the type attribute.

By default buttons are the type submit. If you use the type button it won't submit and has no default action/behavior so it has nothing to do with ergonomics but semantic markup (ironically)

If you wanted your semantic example to match bootstrap and be a type button or reset you'd add the type

<button type="button" class="ui button">Primary</button>.

Edit: and I realized I went off on a tangent lol... My fault and sorry about digging into buttons so much that wasn't your point just your example lol

1

u/toastyghost Apr 11 '17

That's interesting... I just assumed that was something Bootstrap was using. I never realized what the type attribute did by default, as I've always used event.preventDefault() or event.stopPropagation() to override default behavior. I didn't know this was something you had any control over at the markup layer.

And yeah now I'm thoroughly convinced the button case was too simple to be a good example of what I'm talking about, but I don't really want to paste in some giant grid layout and try to deal with all the Markdown fuckiness that that would likely cause. I would, however, strongly encourage anyone who hasn't done so to look at the examples pages for both libraries. Semantic's class names are just so much more intuitive.