You are here

README.txt in Views Fluid Grid 6

Same filename and directory in other branches
  1. 7.3 README.txt
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Views Fluid Grid
;;
;; Original author: markus_petrux (http://drupal.org/user/39593)
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

CONTENTS OF THIS FILE
=====================
* OVERVIEW
* VIEWS INTEGRATION
* REQUIREMENTS
* INSTALLATION
* CUSTOMIZATION
  * TEMPLATES
  * STYLESHEETS
  * ADVANCED


OVERVIEW
========

This module provides the Fluid Grid style plugin for Views. This plugin displays
the view as a fluid grid using an HTML list element.

The plugin settings form provides options to define the width and height of the
elements in the grid. But it also provides advanced layout options implemented
in separate CSS classes that allow you to define item margins, alignment and a
couple of CSS3 properties (box-shadow and border-radius).


VIEWS INTEGRATION
=================

A fluid grid style plugin could be included in Views in the future. For further
information, please see the following issue in the Views queue:

http://drupal.org/node/377574


REQUIREMENTS
============

- Views.
  http://drupal.org/project/views


INSTALLATION
============

- Be sure to install all dependent modules.

- Copy all contents of this package to your modules directory preserving
  subdirectory structure.

- Go to Administer -> Site building -> Modules to install module.

- You can now start using the Fluid grid style plugin in your views.


CUSTOMIZATION - TEMPLATES
=========================

Please, see the "Theme: Information" option in Views UI. Information about
the template used by this style plugin is available under the "Style output"
entry.

The template shipped with the module is views-fluid-grid-plugin-style.tpl.php
located under the theme subdirectory of the package.


CUSTOMIZATION - STYLESHEETS
===========================

The following stylesheets are provided:

- views_fluid_grid.base.css

  It contains the base CSS classes to style the fluid grid.

- views_fluid_grid.size.css

  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 ADVANCED section below.

- views_fluid_grid.advanced.css

  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.


CUSTOMIZATION - ADVANCED
========================

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 settings.php file.


// 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',
);
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 css/views_fluid_grid.size.css. Note that dots in $conf['views_fluid_grid_plugin_style_margins'] will be converted to dashes. See examples in css/views_fluid_grid.advanced.css. Examples:

/* 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; }

File

README.txt
View source
  1. ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
  2. ;; Views Fluid Grid
  3. ;;
  4. ;; Original author: markus_petrux (http://drupal.org/user/39593)
  5. ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
  6. CONTENTS OF THIS FILE
  7. =====================
  8. * OVERVIEW
  9. * VIEWS INTEGRATION
  10. * REQUIREMENTS
  11. * INSTALLATION
  12. * CUSTOMIZATION
  13. * TEMPLATES
  14. * STYLESHEETS
  15. * ADVANCED
  16. OVERVIEW
  17. ========
  18. This module provides the Fluid Grid style plugin for Views. This plugin displays
  19. the view as a fluid grid using an HTML list element.
  20. The plugin settings form provides options to define the width and height of the
  21. elements in the grid. But it also provides advanced layout options implemented
  22. in separate CSS classes that allow you to define item margins, alignment and a
  23. couple of CSS3 properties (box-shadow and border-radius).
  24. VIEWS INTEGRATION
  25. =================
  26. A fluid grid style plugin could be included in Views in the future. For further
  27. information, please see the following issue in the Views queue:
  28. http://drupal.org/node/377574
  29. REQUIREMENTS
  30. ============
  31. - Views.
  32. http://drupal.org/project/views
  33. INSTALLATION
  34. ============
  35. - Be sure to install all dependent modules.
  36. - Copy all contents of this package to your modules directory preserving
  37. subdirectory structure.
  38. - Go to Administer -> Site building -> Modules to install module.
  39. - You can now start using the Fluid grid style plugin in your views.
  40. CUSTOMIZATION - TEMPLATES
  41. =========================
  42. Please, see the "Theme: Information" option in Views UI. Information about
  43. the template used by this style plugin is available under the "Style output"
  44. entry.
  45. The template shipped with the module is views-fluid-grid-plugin-style.tpl.php
  46. located under the theme subdirectory of the package.
  47. CUSTOMIZATION - STYLESHEETS
  48. ===========================
  49. The following stylesheets are provided:
  50. - views_fluid_grid.base.css
  51. It contains the base CSS classes to style the fluid grid.
  52. - views_fluid_grid.size.css
  53. It contains additional CSS classes that are used to define the width and
  54. height of the items in the grid. These sizes are defined for each option
  55. in the settings form of the style plugin. If you need to add more sizes to
  56. the list, please see ADVANCED section below.
  57. - views_fluid_grid.advanced.css
  58. If contains additional CSS classes to implement the advanced layout options
  59. available from the settings form of the style plugin. This file is loaded
  60. only if any of these advanced options are really used.
  61. CUSTOMIZATION - ADVANCED
  62. ========================
  63. You may want to use a different set of values for a few style plugin options.
  64. To do so, you need to add the proper entries to your settings.php file.
  65. @code
  66. // Custom options for Views Fluid Grid style plugin.
  67. $conf['views_fluid_grid_plugin_style_widths'] = array(100, 150, 180, 200, 250, 300, 350, 400, 450, 500);
  68. $conf['views_fluid_grid_plugin_style_heights'] = array(100, 150, 200, 250, 300, 350, 400, 450, 500);
  69. $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');
  70. @endcode
  71. You can add more items to any of these variables to suit your needs. Then, you
  72. also need to provide the proper CSS classes. See the stylesheets shipped with
  73. this module to find out how these values match CSS classes. See examples for
  74. classes used for width and height in css/views_fluid_grid.size.css.
  75. Note that dots in $conf['views_fluid_grid_plugin_style_margins'] will be
  76. converted to dashes. See examples in css/views_fluid_grid.advanced.css.
  77. Examples:
  78. @code
  79. /* This class is used for width 120. */
  80. ul.views-fluid-grid-items-width-120 li.views-fluid-grid-item { width: 120px; }
  81. /* This class is used for horizontal margin 0.6em. */
  82. ul.views-fluid-grid-items-h-margin-0-6em li.views-fluid-grid-item { margin-left: 0.6em; margin-right: 0.6em; }
  83. @endcode