Stylus Flexbox grid system for Meteor
It is now ready for Meteor 1.2 (use version 1.1.1 for older Meteor projects)
Important note: From version 2.0.0 problematic sgrid.json config file is removed. New Meteor build plugin is better.
Instalation
Install it:
$ meteor add juliancwirko:s-grid
Then in your main *.styl file import:
@import 's-grid-settings' @import 's-grid-functions' @import 's-grid-classes' // optional - only if you want to use helper classes
Usage
You don't need to install the Meteor Stylus package because it is absorbed by s-grid. If you have it installed just uninstall it and install only the s-grid package.
If you want to preview s-grid code You will find the grid files in the standalone npm package: https://www.npmjs.com/package/s-grid
You may also want to use the GruntJS based project scaffold with S-Grid and some useful Grunt tasks like usemin, wiredep, livereload etc: https://www.npmjs.com/package/s-grid-grunt
Simple examples
With only functions
Stylus code:
1section 2 grid() 3 div 4 padding rem-calc(15) 5 cell(1, 4) 6 &.other-cell 7 cell(2, 4, 'bottom') 8 &.different-cell 9 cell(1, 3, g: 30px)
HTML code:
1<section> 2 <div>Lorem ipsum</div> 3 <div>Lorem ipsum</div> 4 <div class="other-cell">Lorem ipsum</div> 5 <div>Lorem ipsum</div> 6 <div class="different-cell">Lorem ipsum</div> 7</section>
With only helper classes
HTML code:
<section class="s-grid-top"> <div class="s-grid-cell s-grid-cell-md-6">Lorem ipsum</div> <div class="s-grid-cell s-grid-cell-md-6">Lorem ipsum</div> <div class="s-grid-cell s-grid-cell-bottom s-grid-cell-md-12">Lorem ipsum</div> <div class="s-grid-cell s-grid-cell-md-6">Lorem ipsum</div> <div class="s-grid-cell s-grid-cell-center s-grid-cell-md-4 s-grid-cell-offset-md-4">Lorem ipsum</div> </section>
Overwrite settings
You can overwrite the settings (from s-grid-settings.styl file), just place your settings after s-grid-settings
import. Do something like this:
// main s-grid settings file: @import 's-grid-settings' // my new settings goes here: base-font-size = 16 // base font size it is 16px by default it is used to calculate rem sizes gutter = 20px // gutters size columns = 12 // how many columns you need in your grid (usage with helper classes) gridClassName = 's-grid' // main grid wraper class name (usage with helper classes) cellClassName = 's-grid-cell' // main grid cell class name (usage with helper classes) breakpoints = { // media queries breakpoints sm: 0, md: 640px, lg: 1200px, xlg: 1440px, xxlg: 1920px } // s-grid imports: @import 's-grid-functions' @import 's-grid-classes' // ... // my app styles here.. // ...
Grid website and docs
Sortable (drag and drop) js plugins integration
There is a default test config with jQuery UI Sortable and RubaXa Sortable here:
http://sortable-test.s-grid.meteor.com/
It definitely needs more tests. I want to play with masonry layouts too. Based on Flexbox and also in cooperation with other masonry like js plugins.
1Template.test1.rendered = function () { 2 this.$(".grid").sortable({ 3 items: "> .item", 4 cursor: "move" 5 }); 6}; 7 8Template.test2.rendered = function () { 9 var el = this.find('#rubaxaSortable'); 10 var sortable = Sortable.create(el); 11};
Grid Inspired by:
- Cory Simmons: (Creator of Jeet grid system and many other grid tools) https://github.com/corysimmons
- Philip Walton (Solved by Flexbox): http://philipwalton.github.io/solved-by-flexbox/demos/grids/
- CSS tricks: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
- Foundation for Apps grid http://foundation.zurb.com/apps/docs/#!/grid
License
MIT
Changelog
v2.0.2
- sGrid update
v2.0.1
- sGrid update
- autoprefixer update
v2.0.0
- Stylus compiler update - package is ready for Meteor 1.2
v1.1.1
- Stylus and Autoprefixer updates
v1.1.0
- fix related with wrong paths for additional plugins
- autoprefixer update
v1.0.1_2
- some updates
- stylus config file
v1.0.1
- better rem-calc() function
- update stylus version
v1.0.0
- refactor and api changes
- cols() is now cell()
- Grid helper classes is optional. You can import s-grid-classes.styl file if you need it.
- Functions parameters order is changed. See below.. you can use named parameters too.