Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Semantic UI

semantic-ui.com

Post reply on HN
Print view View original

241–250 of 257 posts

Re: Semantic UI

#241

Post by brcha »

phailhaus wrote: post #233
brcha wrote: post #227

Earlier quoted context omitted.

> It doesn't matter what you use, you can nest your CSS by hand or with Sass. Either way, you now have CSS tightly coupled to your HTML structure and it can be hell to change. I'm literally dealing with this right now (we use sass). There is no way for you to mess up something at the other end of your web app if you use specific sass files for specific web pages. The 'basket' class can be defined as one thing on the…

Single Page Applications. Reusable components. Both of these make CSS harder to manage, and semantic classes start becoming a problem.

Please elaborate. I don't see how having a library of SASS mixins that you mix in to make specific CSS classes for specific purposes make anything harder to manage? If anything, decomposing things to smallest common denominator makes it easier to build better and more versatile CSS for your apps.

Re: Semantic UI

#242

Post by mybrid »

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

Re: Semantic UI

#243

Post by phailhaus »

brcha wrote: post #241
phailhaus wrote: post #233

Earlier quoted context omitted.

Single Page Applications. Reusable components. Both of these make CSS harder to manage, and semantic classes start becoming a problem.

Please elaborate. I don't see how having a library of SASS mixins that you mix in to make specific CSS classes for specific purposes make anything harder to manage? If anything, decomposing things to smallest common denominator makes it easier to build better and more versatile CSS for your apps.

It's not the sass mixins that makes things harder to manage. The problem is having nested CSS rules that cause your CSS to become tightly coupled to the structure of HTML. Then when the HTML changes, you have to rethink the relationships. And if you're not using nesting, then isn't what you described just utility classes abstracted one level away?

Re: Semantic UI

#244

Post by phailhaus »

jonahx wrote: post #238
phailhaus wrote: post #232

Earlier quoted context omitted.

> The whole point is if you use SASS properly you don't have to nest anything unless you want to. I don't follow at all. One of the biggest selling points of Sass is being able to nest styles. If you don't need to nest styles, then Sass doesn't get you much. But once you start nesting, your CSS is coupled to your HTML. That's absurd.

it may be "a big selling point," but you're being sold a bill of goods. using sass as you describe is an anti-pattern. the important thing that sass allows you to do (which CSS should have built in, but doesn't) is to apply chunks of style to a named class. that is, precisely to decouple naming, styling, and html structure. you do this in sass with @extend or @include. practically, this means i can take canned styles…

I'm not convinced you can just call using a major feature of sass an "antipattern"... Without nesting, what you've described is essentially utility classes abstracted an extra level away under pretty names. Might as well get rid of that layer because it makes false promises. You'll end up reusing that CSS class and then find out that the usage in one area needs a slightly different markup. Cue nesting/extra CSS classes with slightly different names, etc.

There's this dream that you will need to "reskin" your application often, and be able to reuse a bunch of CSS classes all over your codebase. Instead what I've found is that it's better to think of your application as consisting of components with their own styling. Component-oriented frameworks like React are moving in this direction. Take a look at the styled-components library.

Re: Semantic UI

#245

Post by espresso_enigma »

tzury wrote: post #135
jwr wrote: post #56

I use Semantic UI in production on 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 Clojure…

FYI: The React version - is jQuery free http://react.semantic-ui.com/introduction

I'm trying that out, and it seems that jquery is installed when you include the Semantic UI CSS. According to the docs: http://react.semantic-ui.com/usage, you need to install the CSS separately with

  $ npm install semantic-ui-css --save
and with that I get

  ├─┬ semantic-ui-css@2.2.10
  │   └── jquery@3.2.1
Plus a whitescreen because jQuery is not defined...bummer

Re: Semantic UI

#246

Post by espresso_enigma »

espresso_enigma wrote: post #245
tzury wrote: post #135

Earlier quoted context omitted.

FYI: The React version - is jQuery free http://react.semantic-ui.com/introduction

I'm trying that out, and it seems that jquery is installed when you include the Semantic UI CSS. According to the docs: http://react.semantic-ui.com/usage , you need to install the CSS separately with $ npm install semantic-ui-css --save and with that I get ├─┬ semantic-ui-css@2.2.10 │ └── jquery@3.2.1 Plus a whitescreen because jQuery is not defined...bummer

Sorted it, thanks to this: https://github.com/Semantic-Org/Semantic-UI-React/issues/114...

  import 'semantic-ui-css';
should have been

  import 'semantic-ui-css/semantic.min.css';
Documentation of how to actually import and use the CSS would be nice...might be obvious to the creators, but not to hardheads like myself.

Re: Semantic UI

#247

Post by espresso_enigma »

tzury wrote: post #135
jwr wrote: post #56

I use Semantic UI in production on 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 Clojure…

FYI: The React version - is jQuery free http://react.semantic-ui.com/introduction

As one would expect with a fully featured framework, it does add some weight. I have a basic form project I'm working on that just uses some basic styling and components that I hand coded and the production JS and CSS (after gzip) are ~70k and ~2k respectively.

After including Semantic UI and dropping an example form component in, it jumped up to ~140k JS and ~93k CSS.

Re: Semantic UI

#248

Post by Omnius »

jpkeisala wrote: post #219
ssijak wrote: post #136

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.

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.

It's alpha meaning the API will change most likely just be aware to check release notes as breaking changes are expected to happen.

Re: Semantic UI

#249

Post by ahallock »

jameslk wrote: 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 know, all these users viewing source and getting excited about the semantic HTML classes. HTML classes are for devs so let's use them how we see fit. I don't even think screen readers take into account HTML classes. While semantic class names (odd term -- even presentational names have meaning) is a recommendation, in practice, it actually works against you.

Re: Semantic UI

#250

Post by ahallock »

jameslk wrote: 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…

If you break your HTML into partials using a template language or components with React, Vue.js, etc., you only need to update in one place as well.
Post reply on HN