Grid Layout Shock

Show multiple posts in a pinterest-like grid layout

Documentation contents


What is Grid layout shock

Grid layout Shock is a plugin for WordPress and jQuery. This plugin is based on the Pinterest idea, and allows to show multiple posts in a Pinterest-like grid layout presentation.


Advantages against other grid layout plugins

Among other advantages, we remark the following ones:

Responsiveness
Boxes will adapt to any screen size, so grid will look good in any device.
External content
Embed youtube or vimeo videos, or embed your own videos from video tag.
Box adjustment:
Boxes adjust responsively thanks to Masonry JS plugin.
Customizable:
Create your own themes, include more fonts, etc.

Requirements for use

To have a proper performance of the plugin these are the minimum requirements.

Any of the following browsers are recommended:


Installation process

Include the files in your document head.


Getting Started

Create a section or div with an id. This will be the container for the grid

Create the next structure into a div or section.

Structure

  1. div: Container for your brick content.
  2. h1 - h6: content title
  3. img, video, iframe, or audio tags: You can use multimedia or embed youtube, vimeo videos.
  4. span: Here goes your content text. You can create links in this zone, change font style or font color.
  5. a: Used for show the read more button or text that you want.

Initialization


Plugin Options

mainClass
Assign a class to all grid elements. It's necessary for the grid. Default is article
contentClass
this option assign a class to the span tag. Default is content
masonry
Enable or disable auto-adjust in boxes. Default is true
boxWidth
Can be set in pixels only. Enter the number of pixels you want each box to occupy.
boxMargin
Set the margin between boxes. Use an integer value for px or percentage (0 - 100%). Default is 10px.
boxPadding
Set the padding into boxes. Use an integer value for px or percentage (0 - 100%). Default is 10px.
border
Insert border radius to your boxes. Use values in px, percentage (%), inherit or auto. Default is auto.
boxStyle (Available in Premium Version)
Themes for your grid boxes. Admitted values: base, ninja, bonsai, dark, blue, orange, deepblue, stone, white, soft. Default is base. You can create your own themes into gls.style.css file using 'style' suffix.
buttonTxt (Available in Premium Version)
Write the text that will appear into read more button.
buttonStyle (Available in Premium Version)
Show the style in the read more button. Admitted values: info, warning, alert, success, default, primary, danger, inverse, link. Default value is default
buttonSize
Admitted values: small, large, mini, default, block
containerWidth
Assign a width to main div. Only available if masonry is deactive 'false'
contentColor
Enter value in HEX, RGB, HSL or name Color.
imgWidth
Use values in px or percentage (%).
imgRadius
Use values in px or percentage (%).
fontType (Available in Premium Version)
Include amazing fonts in your content. Admitted values: 'arial', 'Wire One', 'Yesteryear', 'Yellowtail', 'Yanone Kaffeesatz', 'Volkhov', 'Varela', 'Ultra', 'Ubuntu', 'Syncopate', 'Sarina', 'Rokkitt', 'Monoton'
fontSize
Use value in px.
fontTitle (Available in Premium Version)
Change the font in your title. Admitted values: 'arial', 'Wire One', 'Yesteryear', 'Yellowtail', 'Yanone Kaffeesatz', 'Volkhov', 'Varela', 'Ultra', 'Ubuntu', 'Syncopate', 'Sarina', 'Rokkitt', 'Monoton'
titleColor
Enter value in HEX, RGB, HSL or name Color.
showTitle
Enable or Disable title. Type: boolean
showImg
Enable or Disable Images. Type: boolean
showContent
Enable or Disable content. Type: boolean
showButton
Enable or Disable Read more button. Type: boolean
theme
New themes have been included into plugin ics, iphone, gothic, modern, statusfive, folk, dragees, forest, labyrinth, fabric.

About Grid Layout Shock

Grid Layout Shock is created by the WordPress themes Shock team in January 2013.