Semantic UI
181–190 of 257 posts
Re: Semantic UI
#182Please 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…
(p.s. this is a joke! no need to actually DM me except for coffee)
Re: Semantic UI
#183Earlier 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…
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
#184Earlier 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?
Re: Semantic UI
#185I 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…
Re: Semantic UI
#186> 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.
Sometimes you just want some quick JS for your one dropdown component that comes with the framework you're already using.
Re: Semantic UI
#187Earlier 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.
Re: Semantic UI
#188I'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…
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
#189Earlier 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?
Re: Semantic UI
#190Earlier 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 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.