https://github.com/benignware/jquery-vgrd

Enhance horizontal grids with a vertical pattern
https://github.com/benignware/jquery-vgrd

Last synced: 11 months ago
JSON representation

Enhance horizontal grids with a vertical pattern

• Host: GitHub
• URL: https://github.com/benignware/jquery-vgrd
• Owner: benignware
• License: mit
• Created: 2014-11-25T13:44:17.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2015-07-05T20:45:26.000Z (almost 11 years ago)
• Last Synced: 2023-08-12T18:37:45.555Z (almost 3 years ago)
• Language: JavaScript
• Homepage:
• Size: 206 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
jquery-vgrd

===========

> Enhance horizontal grids with a vertical pattern.

[Demo](http://benignware.github.io/jquery-vgrd)

## Usage

Include dependencies.

```html

```

Setup a grid with Bootstrap:

```html



  


    
Lorem ipsum

    
Lorem ipsum

  

  


    
Lorem ipsum

    
Lorem ipsum

  

  


    
Lorem ipsum

    
Lorem ipsum

  



```


```css

.row.vgrd {

  margin-top: -15px;

  margin-bottom: -15px;

}

.row *[class*='vg-'] {

  padding-top: 15px;

  padding-bottom: 15px;

}

.box {

  height: 100%;

  padding: 15px;

  background: lightblue;

}

```

Initialize the plugin

```js

$('.vgrd').vgrd({

  // aspect-ratio container-width

  unitRatio: 0.04751461988304

});

```

Options

-------

  

    OptionTypeDescription

  

  

    bindResize

    Boolean

    

      Specify whether to trigger layout automatically on window resize. Call `$('.vgrd').vgrd()` to resize manually. Default: `true` 

    

  

  

    breakpoints

    Array

    

      Specifies breakpoint detection keys. Default: `['xs','sm','md','lg']`

    

  

  

    computeHeight

    Function

    

      Hook into the calculation routine by returning a height. Arguments: `element`, `calculatedHeight`, `containerWidth`, `unitRatio`, `patternValue`.

    

  

  

    container

    String

    

      Provide parent container class. Defaults to `.row`.

    

  

  

    cssPrefix

    String

    

      Specifies the prefix for vertical selector. Default: `vg-`

    

  

  

    helperPrefix

    String

    

      Specifies the prefix for the breakpoint-helper selector prefix. Default: `visible-`

    

  

  

    unitRatio

    Float

    

      Provides the measurement unit for vertical grid selector as proportion of container width. Default: `0.1`