Is anyone using semantic-ui with emberjs? - css

Question

Just wondering if there is anyone out there who has tried to use semantic-ui with emberjs?
Were there any major pitfalls? semantic-ui looks nice and regular ... which for a relative novice to browser development, looks like a big plus vs the other 'all-inclusive' css frameworks ...

Answer 1

I haven't used Semantic UI with Ember but I've implemented and built individual jQuery plugins and css frameworks with Ember.
CSS & HTML
The css in Semantic UI doesn't affect Ember because Ember is a javascript framework and it's css classes all have the 'ember-' prefix. Though, it's worth noting that the css wildcard selector [class*='input'] would still target .ember-input. Thus, make sure Semantic UI's framework's selectors are efficient and non-invasive. You could probably make Semantic UI's pre-given class names easier to work with by extending Ember views or using components with tagNames and classNames set in the views/components. Alternatively, you could use register Handlebars helper that return html. For example:
Em.Handlebars.helper('button', function(unescapedText) {
var type = Handlebars.Utils.escapeExpression(unescapedText);
buttonString = '<button class="semantic-ui-button">' + text + '</button>';
return new Handlebars.SafeString(buttonString);
});
Obviously, this is a very simplified answer. You could get more complex and use block handlebars helpers with content in it (e.g. a dropdown list component with any number of different LIs in it). You could even create an Ember object which contains a key-value-pair map for all the Semantic UI classes to look up the class, tagName, and more of each Semantic UI component. For example:
App.SemanticUi = Em.Object.create({
components: [
button: {
class: 'semantic-ui-button',
tagName: 'button',
}
],
});
App.Handlebars.helper('button', function() {
// Some logic ...
var class = App.SemanticUi.get('components')[button];
// Some more logic...
});
This is just a theoretical use case.
Javascript
As for the javascript, you could optimize Semantic UI's js files for Ember by rebuilding them as components. However, I would not recommend this because it will be hard to maintain as Semantic UI releases new builds and features. Your best option is probably to load the plugins with your Ember App and then run additional customizable functions (like those found in Semantic UI's examples directory) on didInsertElement like so:
App.HomeView = Em.View.extend({
customFunctions: function() {
// Custom Semantic UI logic with DOM targeting here
$('.ui.dropdown').dropdown({
// Dropdown stuff, etc
});
}.on('didInsertElement'),
});
If you come across issues with Semantic UI not adding module functions correctly, I would look at the order in which the plugin and the elements in the DOM are loading and interacting with one another. Also, if you're running your Ember Apps on Rails or Yeoman, or a similar setup, the asset pipeline might interfere here.
If you're planning on using semantic UI just for the CSS then you shouldn't have any issues. Otherwise, I hope someone can give you a more specific answer with regards to the javascript modules.