What is the best CSS Framework or Grid System integrated with Meteor?


#1

I’m curious about what CSS Framework(BootStrap, Foundation, Semantic UI, …) or grid system(e.x. susy, flexbox, …) is the best to integrate with meteor. I haven’t learned less, sass, scss, jss yet. I seek members advice.


#2

This is a matter of opinion. It has official support for twitter bootstrap and materialize, zurb foundation has community made packages. The html and css in meteor is no different than the html and css that’s used on different frameworks. The great thing about these frameworks is that you don’t have to write any css, less, sass, etc. if you don’t want to. I am personally used to and comfortable with twitter bootstrap but that’s not to say that the other frameworks aren’t great as well.


#3

I realy like to work with Stylus and my simple flexbox grid :slight_smile: http://s-grid.meteor.com

Stylus is very good, very elastic with great javascript API. You can adjust your build plugin as you want, like I did it here: https://github.com/juliancwirko/meteor-s-grid/blob/master/plugin/compile-stylus.js

I also work with Foundation and great Scss package: https://atmospherejs.com/fourseven/scss used in my zf5 package: https://atmospherejs.com/juliancwirko/zf5 It is quite ok if you need some ready to use UI components. But I prefer Stylus and only grid. Also I don’t like Bootstrap :wink:
But of course it is up to you what you decide to choose :wink:


#4

If you are going to have unique elements design (for buttons, tables, headers, etc) - you will probably want to take only the grid (+ normalize) and write the css by yourself.

If you will use the default elements from frameworks - grab the framework with the visual style you like. I suggest you to look at bootstrap / semantic ui / foundation.

As for the grid, I really like the bootstrap grid and I’ve used a lot of grids. Recently I wrote a flex grid for myself, which is like in bootstrap, but uses css flex property. I’ve made a package https://github.com/VladShcherbin/flexbox-grid-meteor and will soon add a readme on how to use it, the syntax is like in bootstrap.

As for the less/sass/etc. Use scss, it’s easy, almost all projects have scss versions of files. More and more users change less to scss, and very few users use/want stylus. The major frameworks (like foundation and later bootstrap 4) also use scss. So, scss is the best option.


#5

“Stylus has the power of Sass, with the accessibility of LESS”

Nice article: http://webdesign.tutsplus.com/articles/why-i-choose-stylus-and-you-should-too--webdesign-18412


#6

@khamoud @juliancwirko @shcherbin I’m going to take the advice.Thank you very much guys!


#7

The more I work with CSS frameworks, the more I realise only the grid and normalise are essentially. Something like sass is a must. I ditched scss and added modenizer.