style-fluid-grid.html in Views Fluid Grid 7.3

File

help/style-fluid-grid.html

The <strong>fluid grid</strong> style will display each row of your view within a fluid grid based on an HTML list element. You may customize the width and height of the items.

You may also customize advanced layout options such as vertical and horizontal margins, several alignment options and a couple of CSS3 style properties (box-shadow and border-radius) for the items in the grid.

A fluid grid looks like this:

<div class="help-box" style="text-align:center">
<a href="path:images/views_fluid_grid-large.png"><img src="path:images/views_fluid_grid.png" /></a>
<em>Fluid grid example output</em>
</div>

Note however that the CSS3 style properties do not work on all browsers.

<h3>Stylesheets</h3>
The following stylesheets are provided:
<ul>
  <li><strong>views_fluid_grid.base.css:</strong> It contains the base CSS classes to style the fluid grid.</li>
  <li><strong>views_fluid_grid.size.css:</strong> It contains additional CSS classes that are used to define the width and height of the items in the grid. These sizes are defined for each option in the settings form of the style plugin. If you need to add more sizes to the list, please see <em>Advanced</em> section below.</li>
  <li><strong>views_fluid_grid.advanced.css:</strong> If contains additional CSS classes to implement the advanced layout options available from the settings form of the style plugin. This file is loaded only if any of these advanced options are really used.</li>
</ul>

<h3>Advanced</h3>
You may want to use a different set of values for a few style plugin options. To do so, you need to add the proper entries to your <strong>settings.php</strong> file.

<pre>// Custom options for Views Fluid Grid style plugin.
$conf['views_fluid_grid_plugin_style_widths']  = array(
  100, 150, 180, 200, 250, 300, 350, 400, 450, 500,
);
$conf['views_fluid_grid_plugin_style_heights'] = array(
  100, 150, 200, 250, 300, 350, 400, 450, 500,
);
$conf['views_fluid_grid_plugin_style_margins'] = array(
  '0', '2px', '4px', '6px', '8px', '10px',
  '0.2em', '0.5em', '0.8em', '1em', '1.2em', '1.5em', '1.8em', '2em'
);
</pre>

You can add more items to any of these variables to suit your needs. Then, you also need to provide the proper CSS classes. See the stylesheets shipped with this module to find out how these values match CSS classes. See examples for classes used for width and height in <strong>css/views_fluid_grid.size.css</strong>.

Note that dots in <strong>$conf['views_fluid_grid_plugin_style_margins']</strong> will be converted to dashes. See examples in <strong>css/views_fluid_grid.advanced.css</strong>.

Examples:

<pre>/* This class is used for width 120. */
ul.views-fluid-grid-items-width-120 li.views-fluid-grid-item {
  width: 120px;
}

/* This class is used for horizontal margin 0.6em. */
ul.views-fluid-grid-items-h-margin-0-6em li.views-fluid-grid-item {
  margin-left: 0.6em;
  margin-right: 0.6em;
}
</pre>