Gridion CSS
CSS Plugins Plugins 

Gridion – Responsive Bootstrap Portfolio Grid CSS

SONHLAB , , , , ,

Gridion CSS is a responsive grid layout that is based on famous Bootstrap framework. This simple plugin is used to create portfolios, image galleries with smooth lightboxes to show various contents from images to mix HTML contents. It is also included a lots of CSS animation effects to show/hide contents.

 

Buy Now

 

 

Demos:

  1. Column Styles:
  2. Card Styles:

 

Gridion CSS Features:

  • Based on Responsive Bootstrap framework v4.
  • Supports normal column and modern card styles.
  • 4 styles of Lightbox/Panel.
  • Supports various contents with CSS animation effects.
  • Simple HTML Structure.

 

Change Logs:

Nov 2018: Ver 1.1

  • Improved Card style to display better.

Dec 2017: First Version.

 

Credits:

 

Table of Contents:

  1. Installing Gridion CSS plugin.
  2. Gridion HTML Structure.
  3. CSS3 Animations and Lightbox Style Classes.

 

Section 1: Installing Gridion CSS Plugin.

First of all, to ensure everything works correctly, please use <!DOCTYPE html>.

Include the following code into HEAD section of the page.

Include CSS files:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" type="text/css" />

<!-- CSS3 Animation -->
<link rel="stylesheet" href="css/animate.css" type="text/css" />

<!-- Linear Icons (Option) -->
<link rel="stylesheet" href="css/linearicons.css" type="text/css" />

<!-- Sonhlab Styles (Option) -->
<link rel="stylesheet" href="css/sonhlab-base.css" type="text/css" />

<!-- Gridion CSS Pack -->
<link rel="stylesheet" href="css/gridion.css" type="text/css" />

If you are using Bootstrap version 3.x then you need to include one more CSS file for compatibility:

<!-- Bootstrap v3 fix -->
<link rel="stylesheet" href="css/gridion-bootstrap-v3-fix.css" type="text/css" />

When working with the Bootstrap version 3.x the design may be slightly different but the features will work well. For the best experience, you should use the version 4.x of Bootstrap framework.

 

Installation is done and the plugin has already been to use.

 

Section 2: Gridion HTML Structure.

This section should be read along with the example files are also included in the download package.

A simple Gridion CSS Structure has two main parts: Gridion Item Holder and Gridion Content Holder:

<!-- START GRIDION -->
<ul class="gridion">

  <!-- Start Gridion Item Holder -->
  <div class="gridion-item-holder">

    <!-- Start an Item -->
    <div class="gridion-item">
      <label for="lightbox-id" class="gridion-item-frame">
        ...
      </label>
    </div>
    <!-- End an Item -->

  </div>
  <!-- End Gridion Item Holder -->

  <!-- Start Gridion Content Holder -->
  <div class="gridion-content-holder">

    <!-- Start a lightbox -->
    <input type="checkbox" name="gridion-switch" id="lightbox-id" class="gridion-none">
    <div class="gridion-content">
      ...
    </div>
    <!-- End a lightbox -->

  </div>
  <!-- End Gridion Content Holder -->

</ul>
<!-- END GRIDION -->

 

Gridion Item Holder is the place that contains all items in the grid.

Gridion Content Holder is the place that contains contents that will be displayed when grid items are clicked. If you don’t need to show content lightboxes you can remove this part freely.

If you want to make a clickable item to show lightbox, you need to add a hidden checkbox to control the lightbox content. When a label with [for=”content-id”] is clicked the hidden checkbox [id=”content-id”] will be checked then a lightbox that is controlled by the checkbox will be displayed.

To create hidden checkboxes you just create normal checkboxes then adding name="gridion-switch" and class="gridion-none" into the checkboxes.

To make a lightbox automatically displays you just add “checked” into the hidden checkbox of the lightbox.

 

 

Section 3: CSS3 Animations and Lightbox Style Classes.

 

Lightbox Style Classes:

The plugin has 4 styles of lightbox, including 3 styles for mix contents and 1 for the only one image.

When you want to show mix contents you can use one of these classes:

gridion-content-style-center
gridion-content-style-left
gridion-content-style-right

When you want to show only one image/photo you should use this class for the best perfomance:

gridion-content-style-photo

 

Showing Animation Effects:

These classes can be used with the lightbox style classes above to play animation effects

gridion-effect-fade
gridion-effect-bounce
gridion-effect-bounceIn
gridion-effect-bounceLeft
gridion-effect-bounceRight
gridion-effect-bounceUp
gridion-effect-bounceDown
gridion-effect-pulse
gridion-effect-flash
gridion-effect-rubberBand
gridion-effect-shake
gridion-effect-swing
gridion-effect-tada
gridion-effect-wobble
gridion-effect-jello
gridion-effect-lightSpeed
gridion-effect-rotate
gridion-effect-rotateUpLeft
gridion-effect-rotateDownLeft
gridion-effect-rotateUpRight
gridion-effect-rotateDownRight
gridion-effect-rollIn
gridion-effect-slideUp
gridion-effect-slideDown
gridion-effect-slideLeft
gridion-effect-slideRight
gridion-effect-jackBox
gridion-effect-zoom
gridion-effect-zoomLeft
gridion-effect-zoomRight
gridion-effect-zoomUp
gridion-effect-zoomDown

 

Hiding Animation Effeccts:

These classes can be used with the lightbox style classes above to play animation effects

fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
lightSpeedOut
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
rollOut
slideOutUp
slideOutDown
slideOutLeft
slideOutRight
zoomOut
zoomOutLeft
zoomOutRight
zoomOutUp
zoomOutDown
hinge

 

[endedwords product=””]http://talk.sonhlab.com/room/gridion-css-plugin[/endedwords]

 

Same plugin that you may be interested in: