Materialize Grid List v1.0.3

This plugin adds a grid-list feature to the "Materialize CSS" framework.

Table of Contents

1. Install
   • NPM
   • Manually
   • Requirements
2. CSS
   • Grid List
   • Cell and Tile
   • CSS Classes
3. Javascript
   • Usage
   • Configuration
4. Complete Example
5. Material Guideline Comparison
6. Changelog
7. Copyright and license

Install

NPM

npm i materialize-grid-list

Manually

Download the files from the css and js folder, add them to your project and include the files in your html. Example :

<link href="css/materialize-grid-list.css" type="text/css" rel="stylesheet"/>
<script src="js/materialize-grid-list.js"></script>

Requirements

The grid list is based on the Materialize CSS framework. Check the install guidelines on their Website.

CSS

Grid List

The .grid-list class is the wrapper that surrounds all the cells from the list.

<div class="grid-list">
...
</div>

The Materialize Grid List supports lists with 2 to 5 columns. If you manually render the grid list, just add one of the following classes to your gridlist. If you render your list with javascript, the javascript part will add the class depending on the screensize and maxcolumns setting.

• .grid-list-5 ( 20% width )
• .grid-list-4 ( 25% width )
• .grid-list-3 ( 33.333333% width )
• .grid-list-2 ( 50% width )

<div class="grid-list grid-list-5">
...
</div>

Cell and Tile

A grid list consists of 1-n cells arrayed vertically and horizontally within the grid list. The tile lies within the cell and holds the content.

Tile primary content and secondary content

The primary content is an image and the secondary content can be an action and/or text.

Tile with image only

<div class="grid-cell">
  <div class="grid-tile">
    <a href="#!"><img class="responsive-img" src="img/1.png"/></a>
  </div>
</div>

Tile with single line secondary content

<div class="grid-cell">
  <div class="grid-tile">
    <a href="#!"><img class="responsive-img" src="img/1.png"/></a>
    <div class="grid-secondary-content single-line">
      <p class="truncate">First Line Lorem Ipsum Dolorem Ibram<br>Second Line</p>
      <a href="#!" class="grid-secondary-content-action"><i class="material-icons">star_border</i></a>
    </div>
  </div>
</div>

Tile with two lines secondary content

<div class="grid-cell">
  <div class="grid-tile">
    <a href="#!"><img class="responsive-img" src="img/1.png"/></a>
    <div class="grid-secondary-content two-line">
      <p class="truncate">First Line Lorem Ipsum Dolorem Ibram<br>Second Line</p>
      <a href="#!" class="grid-secondary-content-action"><i class="material-icons">star_border</i></a>
    </div>
  </div>
</div>

Tile with single line secondary content on top

<div class="grid-cell">
  <div class="grid-tile">
    <a href="#!"><img class="responsive-img" src="img/1.png"/></a>
    <div class="grid-secondary-content single-line top">
      <p class="truncate">First Line Lorem Ipsum Dolorem Ibram<br>Second Line</p>
      <a href="#!" class="grid-secondary-content-action"><i class="material-icons">star_border</i></a>
    </div>
  </div>
</div>

Tile with two lines secondary content on top

<div class="grid-cell">
  <div class="grid-tile">
    <a href="#!"><img class="responsive-img" src="img/1.png"/></a>
    <div class="grid-secondary-content two-line top">
      <p class="truncate">First Line Lorem Ipsum Dolorem Ibram<br>Second Line</p>
      <a href="#!" class="grid-secondary-content-action"><i class="material-icons">star_border</i></a>
    </div>
  </div>
</div>

CSS Classes

• .grid-list
• .grid-list-5
• .grid-list-4
• .grid-list-3
• .grid-list-2
• .grid-cell.grid-cell
• .grid-secondary-content
• .grid-secondary-content.two-line
• .grid-secondary-content.single-line
• .grid-secondary-content.two-line.top
• .grid-secondary-content.single-line.top
• .grid-secondary-content p
• .grid-secondary-content-action
• .two-line .grid-secondary-content-action
• .single-line .grid-secondary-content-action
• .grid-tile img
• .cell-push-1-3
• .cell-push-2-3
• .cell-push-1-4
• .cell-push-2-4
• .cell-push-3-4
• .cell-push-1-5
• .cell-push-2-5
• .cell-push-3-5
• .cell-push-4-5

Javascript

The Javascript part orders the gridlist in the right order and reorders the list on pageresizing.

Usage

$('.grid-list').materialGrid();

Configuration

| Key | Type | Description | Default | Additional Information | | --------|---------|-------|-------|-------| | debug | boolean | Triggers logging to the console. | false | | | maxcolumns | int | The amount of maximum columns for the grid list | 5 | Maximun = 5 | | sorting | string | The sorting direction | bidirectional | Possible values : bidirectional, monodirectional |

Configuration Example

$('.grid-list').materialGrid({
        debug: true,
        maxcolumns: 5,
	sorting: "bidirectional".
    }
);

Complete Example

HTML and Javascript

This example shows how to initials an image only grid list. In the HTML part, we define a "grid-list" div that wrapps all cells. The javascript part will then define the columns and their size, reorder the list and print it. After that, it checks regularly whether the width of the grid list changes and adjusts the number of columns if necessary.

<div class="grid-list">
    <div class="grid-cell">
        <div class="grid-tile">
            <a href="#!"><img class="responsive-img" src="img/1.png"/></a>
	</div>
    </div>
    <div class="grid-cell">
        <div class="grid-tile">
            <a href="#!"><img class="responsive-img" src="img/2.png"/></a>
	</div>
    </div>
    <div class="grid-cell">
        <div class="grid-tile">
            <a href="#!"><img class="responsive-img" src="img/3.png"/></a>
	</div>
    </div>
    <div class="grid-cell">
        <div class="grid-tile">
            <a href="#!"><img class="responsive-img" src="img/4.png"/></a>
	</div>
    </div>
    <div class="grid-cell">
        <div class="grid-tile">
            <a href="#!"><img class="responsive-img" src="img/5.png"/></a>
	</div>
    </div>
    <div class="grid-cell">
        <div class="grid-tile">
            <a href="#!"><img class="responsive-img" src="img/6.png"/></a>
	</div>
    </div>
    <div class="grid-cell">
        <div class="grid-tile">
            <a href="#!"><img class="responsive-img" src="img/7.png"/></a>
	</div>
    </div>
    <div class="grid-cell">
        <div class="grid-tile">
            <a href="#!"><img class="responsive-img" src="img/8.png"/></a>
	</div>
    </div>
</div>

$('.grid-list').materialGrid();

Output

<div class="grid-list grid-list-3">
   <div class="grid-cell">
      <div class="grid-tile">
         <a href="#!"><img class="responsive-img" src="img/1.png"></a>
      </div>
   </div>
   <div class="grid-cell">
      <div class="grid-tile">
         <a href="#!"><img class="responsive-img" src="img/2.png"></a>
      </div>
   </div>
   <div class="grid-cell">
      <div class="grid-tile">
         <a href="#!"><img class="responsive-img" src="img/3.png"></a>
      </div>
   </div>
   <div class="grid-cell">
      <div class="grid-tile">
         <a href="#!"><img class="responsive-img" src="img/6.png"></a>
      </div>
   </div>
   <div class="grid-cell">
      <div class="grid-tile">
         <a href="#!"><img class="responsive-img" src="img/5.png"></a>
      </div>
   </div>
   <div class="grid-cell">
      <div class="grid-tile">
         <a href="#!"><img class="responsive-img" src="img/4.png"></a>
      </div>
   </div>
   <div class="grid-cell">
      <div class="grid-tile">
         <a href="#!"><img class="responsive-img" src="img/7.png"></a>
      </div>
   </div>
   <div class="grid-cell">
      <div class="grid-tile">
         <a href="#!"><img class="responsive-img" src="img/8.png"></a>
      </div>
   </div>
</div>

Material Guideline Comparison

| Feature | Supported | | --------|---------| | Left to right, right to left order | X | | Tile Image-only | X | | Tile Single Line | X | | Tile Two Line | X | | Secondary Content Top | X | | Secondary Content Bottom | X | | Tile span multiple cells | | | Resizing | X | | Responsive Design | X |

Changelog

Version 1.0.3 (2017-08-08)

• Release

Copyright and license

MIT License

Copyright (c) 2017 Ephenodrom

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.