sGrid / Documentation

Grid

You can use it without helper classes (like s-grid-cell-sm-4 etc.) and with helper classes which is good if you want a quick prototype of something.

Functions (Stylus)

You can extend custom classes and use the grid() and cell() functions to create your custom styles. It is a very clean and simple usage case. It is also a recommended one because you will keep your html code clean and you can structure your styles as you want.

These are main Stylus functions used in sGrid. You will find more examples below.

• 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)
• center(width, padding) - centers main container with specified width and padding value
  • Usage examples:
    • center(1000px)
    • center(breakpoints[md])
    • center(12.5rem)
    • center(75%)
    • center(1200px, 15px)
    • center(1200px, 10%)
• stack() - shortcut for cell(1, 1) - makes full width columns
  • Usage examples:
    • stack()

Helper classes

To use helper classes you need to import s-grid-classes.styl file. You can change main classes names in settings. If you remember Bootstrap or Foundation grid classes and you know how to use it you will understand exactly what to do. It is very similar to other CSS grids usage but here we use Flexbox.

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

Examples

With only functions

Stylus code:

section
    grid()
    div
        padding rem-calc(15)
        cell(1, 4)
        &.other-cell
            cell(2, 4, 'bottom')
        &.different-cell
            cell(1, 3, g: 30px)

HTML code:

<section>
    <div>Lorem ipsum</div>
    <div>Lorem ipsum</div>
    <div class="other-cell">Lorem ipsum</div>
    <div>Lorem ipsum</div>
    <div class="different-cell">Lorem ipsum</div>
</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-8">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>

Effect:

Overwrite settings

You can overwrite the settings (from s-grid-settings.styl file), just place your settings after s-grid-settings import. In your main .styl file 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..
// ...