I find that I spend a good 75%+ of my time fixing nuisances in my layouts (centering, etc…). I think by now we should be able to easily fix these kinds of things with minimal markup. Im aware of some of the helper classes like right/pull-right in frameworks like Foundation/Bootstrap (most of which just apply simple floats…) but these either dont work as an “easy all-in-one” solution or simply dont work as intended without an ideal markup layout.
Theres also LESS/Sass mixins, where i guess you could write a mixin for every type of centering for any issue, but i’d like to know if there is any existing libraries that obscure all these details and allow you to simply apply a class or two and have everything layed out properly?
Flexbox makes it a bit easier, and is somewhat similar to the grid systems in css frameworks (apart from flexbox’s ability to resize your items), but it still requires a bit of tinkering.
If anyone has a definitive answer to this I’m very interested in hearing it.
Until then… I can say that the combination of having accumulated a really good understanding of how to do things in CSS plus using Semantic UI is working decently well for me. Much better than Bootstrap or Foundation ever did (not having used the latter very much though!).
It’s still not “Enlightenment Level” of getting rid of all CSS issues (like vertical centering… just kill me now!! (j/k)), but decent.
I can’t dump and offer my CSS experience for download, but maybe Semantic UI will also work a bit better for you than the other options.
I tried using Semantic in my new project, did not like it. It has plenty of features, but integration with meteor is far more complicated then it should be for that package, and the docs dont even provide example code for many of the components…which defeats the purpose of having docs lol.
With Bootstrap I always have to tweak a lot of things. With Semantic UI I only have 1 css file with a couple of lines (background image, body width, and a few others), that’s it.
Well, sir, then you’ve been doing it wrong All it takes is adding the semantic:ui-css package (official integration), opening up the complete docs that also do contain examples for everything, though it does take a little bit of getting-used-to initially, because the sample code is there, but you often need to click an additional button to see it. OK, it’s not a “button”, it’s this funky little “< >” element in the top right on every item in the docs.
Also consider using jade as template language when using Semantic UI. It makes things (ie template code) even more concise. Package would be mquandalle:jade and it has good docs on Github as well (here).
The good thing about Semantic is that a) the html is relatively minimal and so b) you can much more easily apply custom styles to these elements and use them more like you want to, instead of carrying a ludicrous amount of markup around (and having to now write overriding styles for all of that).
What’d be great for us Meteor devs is some form of component layer around SUI so that it’s easier and more natural have the functionality integrated with the JS-side of our apps, like changing and tracking UI components state, form handling and validation rules. I think I may try my hand at creating a component-wrapper around SUI once Angular2 is (close to being) released, or maybe as web components with Polymer…
But the gist of this being that Semantic UI really is “semantic”, i.e. its terminology is useful and makes sense – even if you abstract away the implementation detail of how exactly that is implemented and used at this point. It’s come the closest that I have seen yet to writing components in plain (minimal) html.
(I hope that was interesting and made sense to some of you reading this thread, despite not being fully on topic!)
EDIT: And @orbyt, because I forgot to ask specifically: If you care to post some of the things you found were far too complicated in integration SUI with Meteor, please do. I’d be happy to give specific help, and if there’s a real issue or opportunity for making something easier I’m sure there’s something we can do about it. But that’s only if SUI actually does speak to you and you would indeed ideally like to use it, if integration were as simple as it should be – if not, then that’s alright as well!
@seeekr I tried the semantic:ui package (the one with theming). Adding semantic:ui doesnt do a complete install for this package. IIRC, you have to make a couple files, and let them auto-generate content. It creates a few seperate files, of which can trigger generation of the actual framework. To even use components, you have to turn them on individually. Disabling and changing to a new theme is a bit of a pain as well.
For the docs, take a look at the Sidebar component. There are no examples on how to use any of the animations or transitions. I’ve posted an issue and the maintainer acknowledged the problem.
It looks like the framework is getting updated regularly so I cant wait to see what comes of it, but for now I wont be using it.
I am also looking for that kind of stuff.
Thinking about learning Polymer and using these flex, center-justified, self-center etc.
And as these are directly paramaters for html elements, seems like ideal for Meteor.
Compared to the seamless nature and ease of use of Meteor, the state of UI frameworks right now is pretty terrible. Which is probably why Meteor didn’t pick any particular CSS library or set of UI components to (really) integrate with.
Bootstrap and MaterializeCSS both have refused to use Flexbox, citing the ~3% IE market that doesn’t support it properly. The Bootstrap boilerplate code you have to add around everything never made sense to me, and I always had to copy the code for any form elements from the docs.
I’ve reviewed over 30 UI components libraries and so far it seems that Webix is the best choice for picking one library for a complex app, and being done with the selection process: it’s fast, has a Material Design theme, brings almost all the components you want (grids, trees, treegrids, accordions, tabs, carousel, charts, uploader, windows, tag autocomplete, calendar, forms, color picker, master-detail etc.), is open source yet supported commercially (MIT license in the works), and their team has built the core of a Meteor integration. It’s also relatively small (128KB minified for all the 50+ components and ~135k for the Material Design CSS). By comparison, MateralizeCSS is 258k and it needs jQuery too.
The code is very concise and expressive. Check out this demo:
Designing layouts in Webix is similar to using the flexbox model (there’s a gravity property that’s equivalent to growth). Adding a resizer between two components/panels is only one line of code. A visual designer is planned for September.
@dandv pretty sure Materialize does use flexbox. I havent checked the code but :
Webix looks interesting, thanks for the link.
Yup, Im utilizing flexbox in my latest app. Are prefixes even needed anyway? It looks like its supported by almost everything now: http://caniuse.com/#search=flexbox
Yes, prefixes are needed. The latest Safari and iOS Safari still need the -webkit prefix. And IE 10 also needs it. With an autoprefixer it isn’t more work anyway. https://github.com/postcss/autoprefixer
(j/k)), but decent.
All it takes is adding the 
