Ghost Themes
SimpleChat.Support - Open Source Live Chat App
Meteor.js without Bootstrap
words - read.

Meteor.js without Bootstrap

Jeet to the rescue!

When you work with Meteor, Twitter Bootstrap will be everywhere. Bootstrap is great, but for me, who prefers Foundation over Bootstrap, it is a pain to work with especially with Less.

I was trying to use Foundation 5 with Meteor and it works well (..on Libsass Scss), you can even check my package on Atmosphere: juliancwirko:zf5
But working with it isn't as smooth as with Bootstrap.

Then I realized that I don't need all these UI components and other Css classes. With Meteor, I want to use some custom components.
But I need a very good responsive grid and I love working with Stylus, so the decision was very simple. I just need to wrap the Jeet Grid System with Meteor.

Why Jeet? It is very simple to use and has a very clean grid system based on Stylus (actually on Scss too) and with Meteor, Stylus is the best choice. I think you will find great tutorials about Jeet somewhere on the Internet and on its website I will not explain here how it works but I will show you how to start with it and Meteor.

First of all, it is good to know that the Meteor team maintains the official Stylus package. You can use it but not with the Jeet package which I will describe here. The reason is simple. This Jeet package for Meteor has absorbed the official Stylus package so it is not necessary here. The Jeet package I use is the 's-jeet' which you can find here: juliancwirko:s-jeet

$ meteor add juliancwirko:s-jeet

Just add it and you are ready to use Stylus and Jeet. You can also use Rupture and Autoprefixer for Stylus which will be running there as well, so you don't need to worry about all those css prefixes. You don't need to configure it all. It will be ready to work.

One thing you should do is to include 'jeet' and 'rupture' (and also 'nib' if you want) in your main '.styl' file like:

@import 'nib'
@import 'jeet'
@import 'rupture'

If you want to use nib, it’s ok to use it with Autoprefixer because it removes unused prefixes generated by nib and nib itself is sometimes helpful with its mixins and features.

Also checkout:


comments powered by Disqus