Move over Bootstrap and Foundation, welcome Semantic UI

  • I don't see any benefit to using this framework to Bootstrap. The author lists the following pros and cons:

    Pros:

    - Published under the incredibly permissive MIT License (sure, I don't know enough about the different licenses to comment on this)

    - Very well documented (bootstrap is very well documented, and has a huge community behind it)

    - Seems to be easier to learn/use (that's subjective, but I think bootstrap is plenty easy to use)

    - Has a Grid layout (yes... who doesn't use a grid layout?)

    - Uses LESS (so does bootstrap)

    - A very nice implementation of buttons, modals, & progress bars (again, subjective, but bootstrap has a great, and simple, button and modal implementation, haven't used the progress bars. also, <button class="btn"> is much better than <div class="button">, especially if you're going for semantics)

    - Uses an Icon font for many of it's features (k, sure)

    - Has some very useful extras such as the inverted class (so does bootstrap)

    - Open to community contribution (so is bootstrap)

    Cons:

    - No image slider (bootstrap has this)

    - No thumbnail classes (bootstrap also has this)

    - No visibility classes (bootstrap has this)

    - No SASS (does have LESS) (not really a con but ok)

    - Not at a release >1.0

    I'm not trying to dis the framework (I haven't use it), but the author is claiming that it is somehow superior to bootstrap and foundation and does not present any evidence supporting this claim.

  • Interesting definition of "semantic". In terms of the code, I'd take <button> over <div> every day of the week. Similarly lists, <nav>, and all that other lovely html5 stuff.

    I really don't like stuff like <div class="right floated text"> - specifying the layout with class like that is pretty gruesome.

    But then, I suppose "semantic" has a different meaning for this project than the one that I'm used to in the HTML/CSS/etc. world...

  • I find it interesting the author of this is so earnest about getting an image slider. I can't remember where I saw it, but it made it to the front page of HN... it was a single-purpose site demonstrating that sliders/carousels are lazy answers to information hierarchy challenges. I agree, although I've been guilty of using sliders in the past. However, I'm trying to make amends and try to come up with design solutions that don't require a carousel or slider.

    I don't have any research to back up that sliders are detrimental if not just ineffective. But I do see how they can be just convenient...and not in a good way. The fast food of design? Tastes good at first but doesn't really sustain?

  • Will this fill the void of CSS frameworks for rapid WebApp development?

    Bootstrap is fine, but even in Responsive mode it is not made for developing sound application interfaces on the mobile form factors. The grid adjusts, but the elements do not do a good job of resizing for touch over mouse use.

    RatchetUI (http://maker.github.io/ratchet/) seems to be the best hat in the ring currently (one of the lead devs is one of the guys from Bootstrap and another is from Zurb); but the commitment to project leads me to believe even the founders aren't sure what they want out of it.

  • This looks pretty promising. I'm also very happy that they used LESS instead of SASS for their CSS pre-processing. I'm excited to see where this project goes.

  • Some of the Bootstrap v3 changes, like using class="glyphicon glyphicon-..." vs. just "icon-..." are things that seem inferior from a pure HTML standpoint, but were motivated by performance differences, especially on mobile devices. There's some hard learned lessons in the existing frameworks that shouldn't be thrown away lightly. (In static site it may just be a search & replace to change, but in a single page app such things could be much more complicated to change after the fact...)

  • This is not horrible. The architecture is pretty decent, and it seems a lot of thought went into categorizing the different aspects of the library. I, especially, like how each item is broken down into types, groups, states, and variation.

    The UI makes some interesting choices, but I'm sure this could be skinned with a bit of elbow grease.

    I'd say my only real complaint is the validation on forms - it seems specifically inefficient to declare an object in JS and pass in each form field and set it's rule as "empty". I would consider utilizing a data attribute and doing something like data-validate="empty". You could even accept a list of them with something like "data-validate="empty email" etc. The only downside would be figuring out a way to still accept custom messages - something like data-message="Please enter your first name." would be fine for one validation check, but passing in a multiple messages for multiple validation rules would get ugly fast.

  • Do I seriously have to click that little menu button to expand the left hand menu every time I want to look at a new element?

    I just want to click through and browse the different elements but its seriously laborious. Maybe I missed something but based on that I dont think Ill give this the time of day.

  • I must say: It looks awesome. I've been using it for a small project, and it's pretty ok. The docs are lacking though; I've been through them a few times, but if I have to go back to something I saw, the website doesn't really allow you to do so; the docs need to be better structured.

    As for the naming; it works, but the examples are lacking as well. Some don't have all the markup you need, leaving you to inspect the site, others have hidden constraints with accompanying tags that are required (tends to go wrong when you start mixing up stuff).

    It's a pretty cool looking project, but I'm not sure this is the way to go. My ideal framework would be bootstrap with some UI elements from here, with Foundation's grid system.

  • I'm all for semantics.

    http://betterfrontend.com/ is what I started a while ago but haven't been able to put time into.

    This is not a semantic framework. Just because the class names are more defined, they're still the same classes for the same purpose.

    A CSS framework that uses classes for decoration will never be a semantic framework.

    In order to achieve true semantics you have to have a complete separation of presentation from markup.

    Nonetheless, I like this framework, specifically the UI modules that are in place. We need a standardized set of modules like rating, and so on. Good job.

  • There is absolutely no hyperbole found in the title of this article, promise.

  • AFAIK, "three columns" is not semantic. It has to relate to the content, not the style. Otherwise one would have defined semantic as "using full words". As a CSS framework can't cover all the cases, you need to apply it in a semantic way. Some pseudo-LESS-code would be like:

        .introduction {
            .column;
            .one-of-three;
        }

  • Interesting, but I wonder how well it will do? Bootstrap is already very widespread and benefits from network effects. Foundation is a nice alternative to Bootstrap that appeals to people looking for such (I'm a Foundation user myself). But a third framework? Can it get traction?

  • I don't understand the marketing message of Semantic UI.

    "Semantic empowers designers and developers by creating a language for sharing UI."

    Very confusing and doesn't tell me what it is at all. "A better Bootstrap" or just "front-end/CSS framework" would have been better.

  • Bootstrap trades initial learning curve for huge expressibility. The column 'hieroglyphics' allow responsive behavior and column size to be declared in a single token. Semantic UI looks great, but the mud flinging tastes sour.

  • I love how they call it "Semantic"UI and then go and use an icon font.

  • How about browser support (e.g. IE8)? Couldn't find any info on semantic-ui.com.

  • This is pretty nice. Great start and thanks for posting this! :)

  • why LESS over SASS... again?!

  • Stopped reading at 'boasts support for modals'

  • The future:

        $ create "Website that has a homepage with a picture of dogs and a picture of me. Oh, and a little blog with a twitter feed. Make it look cute, idk, like pink and blue, but not bold, but that washed out water color that's in right now."
        ---> Making...
        ---> Looking for pictures of puppies...
        ---> Writing several blog posts for you...
        ---> Created! http://my-website-blah-blah.tld
    
    I will miss the control.