Meteor Community Logo

Meteor Community

Packosphere

undefined's Avatar

juliancwirko:s-grid

v1.0.0•Published 10 years ago

This package has not had recent updates. Please investigate it's current state before committing to using it in your project.

Stylus Flexbox grid system for Meteor

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

You will find 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

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.

Version 1.0.0 breaking 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.

Simple examples

(More complex documentation: http://s-grid.meteor.com)

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>

S-Grid functions and classes

(More complex documentation: http://s-grid.meteor.com)

Functions

  • rem-calc(value) - calculates rem units.
    • Usage example:
      • rem-calc(20)
      • rem-calc(20px)
  • grid(direction = 'row', cells-align = 'top', justify = '') Main grid function.
    • Params:
      • direction:
        • 'row' (default) - cells direction left to right
        • 'row-reverse' - cells direction right to left
        • 'column' - cells direction top to bottom
        • 'column-reverse' - cells direction bottom to top
      • cells-align (works only with row and row-reverse directions)
        • 'top'
        • 'bottom'
        • 'center'
        • 'stretch'
      • justify
        • 'start' - justify all content left or top
        • 'end' - justify all content right or bottom
        • 'center' - justify all content center
    • Usage examples:
      • grid()
      • grid('row')
      • grid('row-reverse', 'bottom')
      • grid(direction: 'column')
      • grid(direction: 'column', justify: 'end')
  • cell(i = 1, cols = columns, align = '', g = gutter)
    • Params:
      • i / cols - fraction
      • align:
        • 'top'
        • bottom'
        • 'center'
      • g - gutter
    • Usage examples:
      • cell(1, 2)
      • cell(15, 45, 'top', 30px)
      • cell(2, 3, g: 30)
  • cell-offset(i = 1, cols = columns, g = gutter)
    • Params:
      • i / cols - fraction
      • g - gutter
    • Usage examples:
      • cell-offset(1, 6)
  • Rupture media queries
    • Usage examples:
      • +above(rem-calc(breakpoints[lg]))
      • +below(rem-calc(768px))
      • +below(768px)

Helper classes

To use helper classes you need to import s-grid-classes.styl file. (Like shown above). You can change main classes name in settings. See how in 'Overwrite settings'.

Main grid classes:

  • .s-grid-top - align cells top
  • .s-grid-bottom - align cells bottom
  • .s-grid-center - align cells center (middle)
  • .s-grid-stretch - stretch cells
  • .s-grid-justify-center - justify content center
  • .s-grid-justify-start - justify content top or left
  • .s-grid-justify-end - justify content bottom or right
  • .s-grid-row - cells direction left to right
  • .s-grid-row-reverse - cells direction right to left
  • .s-grid-column - cells direction top to bottom
  • .s-grid-column-reverse - cells direction bottom to top

Main cell classes:

  • .s-grid-cell-top - single cell align top
  • .s-grid-cell-center - single cell align center (middle)
  • .s-grid-cell-bottom - single cell align bottom

You can also use autogenerated grid helper classes like those from Bootstrap or Foundation. By default you have 12 column based grid. You can change it in settings. See how in 'Overwrite settings'.

S-Grid generated helper classes:

  • Pattern: .{gridClass}-{breakpoint-symbol}-{number-of-columns} - use it on main grid container (block grid)
    • Usage examples:
      • .s-grid-sm-6
      • .s-grid-md-4
      • .s-grid-lg-3
  • Pattern: .{cellClass}-{breakpoint-symbol}-{number-of-columns} - use it on cell element (custom cell size)
    • Usage examples:
      • .s-grid-cell-sm-12
      • .s-grid-cell-xlg-3
      • .s-grid-cell-md-6
  • Pattern: .{cellClass}-offset-{breakpoint-symbol}-{number-of-columns} - use it on cell element (offset class)
    • Usage examples:
      • .s-grid-cell-offset-sm-2
      • .s-grid-cell-offset-lg-3

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..
// ...

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};

Inspired by:

License

MIT