What's up with Semantic-UI?


looking at atmosphere the installations of Semantic UI seem to go drastically down: https://atmospherejs.com/semantic

Is there something wrong using it? I thought it might be a good idea to support this interesting project by using it but it also looks very confusing to me. While the release of each part of Semantic-UI as a single package might seem interesting performance wise i think it’s totally confusing and hard to overlook.

May this be the reason why people don’t use it? Also here in the forums people seem to have a hard time getting answers to Semantic-UI questions.

still trying to figure out which packages to install to get a working Layout in user-accounts :slight_smile:

1 Like

I don’t think you can read the package graph as an indication of anything, for example take the same for flow-router at https://atmospherejs.com/kadira, it has a similar trend to semantic even though it has recently been blessed.

1 Like

I installed semantic:ui-css and semantic:ui-icon packages to get the useraccounts:semantic-ui working.
You can have a look at my current boilerplate https://github.com/guidouil/marmite

1 Like

thanks for the hing - i prefer the less package but haven’t seen the requirements. After running through the initial setup it is working for user-accounts now.

The Semantic-ui framework is the best I’ve come across, and I use it in most of my projects. I wouldn’t rely on the statistics, it is a lot more usable and sensible than most other css frameworks out there in my experience.


The Atmosphere graphs sadly say nothing and people have hard time getting answers to Semantic-UI questions here because of the kind of questions they ask. I mean, do people seriously think this forum is the best place to ask questions about CSS Frameworks? What will be next, how to install Linux?

The best thing about Semantic UI is the great comfort of using in templates/components, especially when combined with Jade. It just feels like a natural template language.

On the other hand, its grid is pretty basic, even if it’s flexbox. For bigger projects my recommended solution is a combination of Semantic UI with grid taken from Foundation For Apps.

1 Like

My experience with Semantic UI has been awesome so far, especially with Meteor package https://atmospherejs.com/semantic/ui. It’s really easy to enable/disable certain components. The other benefit with the meteor SUI package is the ability to easily enable/disable themes at a global level, but also at the individual component level. So for example, I want my menus to be style this way, but I want my buttons to be styles another way. Awesomely implemented in the meteor package.

I’m no CSS experts, but it appears to be easy to create themes within SUI. I just was wish there was a bigger selection of themes to choose from. As adoption increase, I’m sure the themes ecosystem will as well.

1 Like

Yeah the themes ecosystem for Semantic UI is non-existent and I can’t really understand it. There’s lots of people using this stuff so there should be some additional themes made by the community.

I’m slowly getting friends with Semantic UI but still struggle with forms. Seems i can’t get the dropdowns working. I copied over some examples from semantic-ui.com to be sure to make it right but they keep greyed out for me still after removing the hidden attribute.

As the dropdown isn’t made of simple html dropdowns but made with divs and animated with jquery i think this may have to do with the js side that somehow isn’t working or started in meteor. I’m curious if i have to had stuff to my code to make it working. I couldn’t find any hints on https://atmospherejs.com/semantic/ui or on the semantic website. Guess i just have overlooked this?

Any hints?

EDIT: looks like i should have looked closer http://semantic-ui.com/modules/dropdown.html#usage and here in the forums Use .onRendered globally?

1 Like

@brajt could you write a bit more how the grid (or rather the missing grid) is a problem when using Semantic-UI?

I’m just about to start with frontend development (I’m coming from the backend) and I’m not fully aware what big difference the grid would make (apart from making sure that all objects are lined up exactly right, that’s my limited understanding).

@a4xrbj1 Semantic-UI has a pretty nice, flexbox grid. There’s nothing wrong with it. But it was designed for casual websites, just like Boostrap was. It’s a good solution for a simple webapp too. I do like Semantic UI and I use it.

But if your design is a complex one (let’s say similar to this: http://foundation.zurb.com/apps/app-templates/chat/#!/), with many independent templates that need to behave differently, you will have hard time to make it fully responsive, looking good on each possible size and behaving the way you want it to - for example telling your app that when horizontal elements stack vertically in different size, you want the latter to appear above instead of below the first one. You will end up writing your own CSS for particular elements, to make sure they always stay at the right place. Well, at least you can use flexbox to make it happen, unlike with Bootstrap 3.

It’s all matter of how complex your actual design is and what features it actually needs. Think of your optimal design, then chose the right tool for it. Don’t change it just so it can be done with your favorite CSS Framework.

But it’s not something you will have to worry about for your first few front-end projects, I believe.

1 Like

I’m having trouble getting the package to work unless I use the default option and enable all features, in which case the generated .css file is biiiiiiiiiig.

If I try to single out ‘buttons’ and a few others I get:

=> Errors prevented startup:                  
   While processing files with flemay:less-autoprefixer (for target web.browser):
   client/lib/semantic-ui/theme.import.less:20: Unknown import: themes/default/globals/site.variables.import.less

Any help much appreciated.

Edit: I found this thread but it’s all greek to me:

For interconnectedness sake: https://github.com/Semantic-Org/Semantic-UI-Meteor/issues/78

Also: adding site and reset to the definitions list fixes the problem.