material-responsive-grid

A grid system that adheres to the responsive UI standards outlined for Google's Material Design.

Showing:

Popularity

Downloads/wk

116

GitHub Stars

7

Maintenance

Last Commit

3yrs ago

Contributors

2

Package

Dependencies

0

Size (min+gzip)

3.0KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

Material Responsive Grid

A grid system that adheres to the responsive UI standards outlined for Google's Material Design. The source consists of PostCSS stylesheets that are imported in a specific order and built using postcss-cli.

Installation

npm i material-responsive-grid --save

Grid System

There are three basic elements of this grid system: grids, rows, and columns.

  • Rows must be contained by a grid
  • Columns must be contained by a row

Breakpoints

This grid system supports six screen sizes:

  • Extra-small (4 columns)
  • Extra-small (8 columns)
  • Small (8 columns)
  • Small
  • Medium
  • Large
  • Extra-Large

This follows Google's recommendation for responsive UI breakpoints:

  • With the exception of the first three, screen sizes have 12 columns.
  • The gutter is either 16 px or 24 px. A 24 px gutter is applied when both screen dimensions are greater than or equal to 600 px.
  • Grids will fill the viewport until 1600 px. At this point, the grid can either: continue to fill the viewport or remain 1600 px wide (left aligned or centered).

Classes

Most classes apply to a particular screen size. This relationship is designated by the inclusion of the screen size's abbreviation in the class name:

  • Extra-small (4 columns): xs4
  • Extra-small (8 columns): xs8
  • Small (8 columns): sm8
  • Small: sm12 or sm
  • Medium: md12 or md
  • Large: lg12 or lg
  • Extra-large: xl12 or xl

For screen sizes with twelve columns, a duplicate set of classes has been provided that does not include the number of columns in the screen size's abbreviation.

Grids

Grids have the following classes:

  • .grid - The main element that contains rows. It has a margin applied that will absorb the row's negative left and right margins.
  • .marginless - Eliminates the outer padding that prevents a row's content from spanning edge to edge.
  • .fixed-left - Starting at 1600 px, the grid will be fixed width and left aligned in the viewport.
  • .fixed-center - Starting at 1600 px, the grid will be fixed width and centered horizontally in the viewport.
  • .grid-fixed-left - Deprecated, see .fixed-left
  • .grid-fixed-center - Deprecated, see .fixed-center

The default behavior for a grid will be to fill the viewport and preserve outer padding on edge-adjacent columns.

Rows

Rows must be contained by a Grid and have the following classes:

  • .row - The element that contains columns. It uses a negative margin that negates the outer gutter of the first and last columns.
  • .reverse - Reverse direction of this row.
  • .start-{size} - Justify content to the start for the specified sizes (based on direction).
  • .center-{size} - Center content within this row for the specified sizes.
  • .end-{size} - Justify content to the end for the specified sizes (based on direction).
  • .top-{size} - Vertically align content to top for the specified sizes.
  • .middle-{size} - Vertically align content to middle for the specified sizes.
  • .bottom-{size} - Vertically align content to bottom for the specified sizes.
  • .around-{size} - Evenly distribute unused space around columns for the specified sizes.
  • .between-{size} - Evenly distribute unused space between columns for the specified sizes.

Columns

Columns must be contained by a Row and have the following classes:

  • .col-quarter-row - Consumes a quarter of a row for all screen sizes
  • .col-half-row - Consumes half of a row for all screen sizes
  • .col-three-quarter-row - Consumes three-quarters of a row for all screen sizes
  • .col-full-row - Consumes the full row for all screen sizes
  • .col-{size}-{integer, 1-max column count} - Number of columns to consume for a particular screen size
  • .col-{size}-offset-{integer, 0-max column count-1} - Number of columns to offset this column for a particular screen size
  • .first-{size} - Present this column first for a particular screen size (based on row direction)
  • .last-{size} - Present this column last for a particular screen size (based on row direction)
  • .hidden-{size}-only - This column will be hidden for a particular screen size
  • .hidden-{size}-down - This column will be hidden for screens as wide as or narrower than a particular screen size
  • .hidden-{size}-up - This column will be hidden for screens as wide as or wider than a particular screen size

Example

<div class="grid">
   <div class="row">
      <div class="col-xs4-4 col-lg-6">
         <p>This column consumes the entire row for extra-small,
         small, and medium screens.  For large and extra-large
         screens, it consumes half of the row.</p>
      </div>
      <div class="hidden-md-down col-half-row">
         <p>This column isn't visible for extra-small, small, 
         and medium screens, but is visible for large and 
         extra-large screens.  It consumes half of the row.</p>
      </div>
      <div class="hidden-sm-down hidden-up-xl col-md-12">
         <p>This column is only visible for medium and large
         screens and consumes the entire row.</p>
      </div>
      <div class="hidden-sm8-only hidden-sm-only hidden-lg-only col-full-row">
         <p>This column is hidden for small and large screens
         and consumes the entire row.</p>
      </div>
   </div>
</div>

Inspiration

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial