So I found 3 contestants: Toast, Simple Grid and Concrete.
None of these have Meteor packages so I’ll make one once I’ve made up my mind.
Have you got any experience with any grid-only frameworks?
3 Likes
I don’t have any great ideas, but I’m also interested in the result. Material UI is great but doesn’t help at all with layout, so it needs to be paired with a grid system.
Materialize has a grid system, not sure if that helps.
Purecss is a modular and very lean CSS framework that can be used with other frameworks. It is based on normalize and a modular structure where you can take only what you need. For example just the grid. You can mix and match it with components from (e.g.) bootstrap.
It also comes with a grunt plugin that creates an old-ie version of your css which you can probably prepackage for meteor.
1 Like
Have you tried new Famous Engine? It has the most amazing concept of sizing. It’s great for static layouts, you don’t even have to do any 3D stuff. The new Engine has a nested-DOM structure for DOM elements. Here’s a grid made with famous-views:
HTML:
<template name="grid">
{{#Scene}}
{{#famousEach itemsWithIndexes}} <!-- Reactively iterate over a collection of items, each item has an index assigned on the JavaScript side. -->
{{#Node size=cellSize position=gridPosition}}
{{#DOMElement}}
<h1>Hello Famous.</h1>
{{/DOMElement}}
{{/Node}}
{{/famousEach}}
{{/Scene}}
</template>
JavaScript:
var gridWidthCells = 10 // how many cells wide?
Template.grid.helpers({
itemsWithIndexes: function() {
return ItemsCollection.find().map(function(item, index) {
item.index = index
let cellWidth = 50
let cellHeight = 50
// Famous absolute sizing in pixels for X and Y, axes separated by commas
// (Z axis leftout since we don't care about it in this case).
item.cellSize = `[ absolute: ${cellWidth}, absolute: ${cellHeight} ]` // ES6 template string
// X and Y position of the item (no Z axis since we dont't care about it
// in this case).
let row = index % gridWidthCells
let column = Math.floor(index / gridWidthCells)
item.gridPosition = `[ ${cellWidth * row}, ${cellHeight * column} ]` // ES6 template string
return item
})
}
})
(Not tested, but that should work. And apparently the syntax formatting of these forums is weird, hence the weird alignment. 
)
Now, once you have that grid, you can go ahead and put any Material UI items that you want into the {{#DOMElement}}. 
Also, since that grid is in Famous, you can easily add animation so that the items fly into the grid, or something…
thanks for the intro @trusktr I am actually interested in using it some day soon. At the moment however it’s way overkill as I would use like 1% of the capabilities and it requires too much time to learn for my current project.
Unfortunately Materialize doesn’t have a good time picker, which I need badly. Plus, I’m actually using react, which Material-UI is made very well for. great match. Apart from the missing grid systen then 
I’ll be checking this out.
1 Like
There is this package from atmosphere which allows you to customize the parts of bootstrap that you want to use. You can configure it to use only the grid framework.
https://atmospherejs.com/nemo64/bootstrap
Or, you could use the bootstrap customizer to get just the files you need to use only the grid system
http://getbootstrap.com/customize/
Here’s with added animation. Each item flies into the grid and fades to full opacity:
HTML:
<template name="grid">
{{#Scene}}
{{#famousEach itemsWithIndexes}} <!-- Reactively iterate over a collection of items, each item has an index assigned on the JavaScript side. -->
{{#Node size=cellSize position=gridPosition}}
{{> animatedTile}}
{{/Node}}
{{/famousEach}}
{{/Scene}}
</template>
<template name="animatedTile">
{{#Node id="animatedTileNode"}}
{{#DOMElement}}
<h1>Hello Famous.</h1>
{{/DOMElement}}
{{/Node}}
</template>
JavaScript:
var gridWidthCells = 10 // how many cells wide?
Template.grid.helpers({
itemsWithIndexes: function() {
return ItemsCollection.find().map(function(item, index) {
item.index = index
let cellWidth = 50
let cellHeight = 50
// Famous absolute sizing in pixels for X and Y, axes separated by commas
// (Z axis leftout since we don't care about it in this case).
item.cellSize = `[ absolute: ${cellWidth}, absolute: ${cellHeight} ]` // ES6 template string
// X and Y position of the item (no Z axis since we dont't care about it
// in this case).
let row = index % gridWidthCells
let column = Math.floor(index / gridWidthCells)
item.gridPosition = `[ ${cellWidth * row}, ${cellHeight * column} ]` // ES6 template string
return item
})
}
})
Template.animatedTile.onRendered(function() {
let Transitionable = famous.transitions.Transitionable
let Opacity = famous.components.Opacity
let Position = famous.components.Position
let transition = new Transitionable(100)
let node = FView.byId('animatedTileNode').node
// go to Position 0 in 2 seconds with a nice easing curve.
let positionComponent = new Position(node) // defaults to 0,0,0
positionComponent.set(100, 100, 100, {duration: 0}) // starting position.
positionComponent.set(0, 0, 0, {duration: 2000, curve: 'easeOutExpo'})
// Also animate the opacity to 1 in 2 secs.
let opacityComponent = new Opacity(node) // defaults to opacity of 1.0
positionComponent.set(0, {duration: 0}) // starting opacity.
opacityComponent.set(1.0, {duration: 2000, curve: 'easeOutExpo'})
})
If you are looking for pure grid functionality, I have found Susy Grid to be exactly that. No additional framework pieces involved, just a grid system. I also used to use Neat, which I created into a Meteor package as well, which is another option Neat Meteor Pkg Github
what about ungrid? is very small and simple.
uu, this seems pretty good indeed.
Looking good.
only evenly-sized cols supported. not good enough.
calc() is not supported in android 4.3 at all. not good enough.
I’d also like to strongly recommend Susy. It does absolutely best job of providing you with what you precisely need, and nothing more. You can shape up your own grid system as you like and let it take care of the math. Requires sass.
http://neat.bourbon.io and http://tylertate.github.io/semantic.gs are nice. If you’re a fan of Stylus, you could always check out our grid http://clocklimited.github.io/responsive-grid
1 Like
SemanticGS looks nice! I might have to give that a try.
When IE compatibility is not required I would mention flexbox. ( free video course )
Possibility to also reorder items in “container” based on media query sold it for me.
But default option for me is usually grid system from bootstrap, most people know it and you can comment out all other subsystems in LESS version.
Thera are a lot of grid system in the internet such as Singularity, Susy or the grid only packages from Bootstrap. However, I abandoned this libraries and I switched to Flex properties. It solves a lot of problems such rows clear, centered alignment and others.
@KristerV I just stumbled upon this which seems to satisfy your requirements https://ghinda.net/gridlayout/
you can use the sass mixins