Grid Element
Grid?
"There's an element for that"
This documentation is a work in progress
Contents
Introduction
Grid Element is:
Overview
<grid-element ga>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
</grid-element>
...
...
...
...
...
...
...
...
...
...
...
...
Installation
$ bower install --save grid-element
Usage
<!doctype html>
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js" async></script>
<link rel="import" href="bower_components/grid-element/grid-element.html">
</head>
<body>
<grid-element>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
</grid-element>
</body>
</html>
Running locally
$ npm install --global polyserve
$ polyserve
Public API
Grid Element can be customized both through its declared
properties
and through its Custom CSS Properties —
which are part of the element API — while remaining within the scope of the
element, without ever exposing the internal implementation.
On markup, declared properties are represented by attributes. An attribute may
be included with no value assigned to it. In this case, its corresponding Custom
CSS Property is used or, if not defined, default value is assumed instead.
Either can be overwritten by setting a value to the attribute.
CSS Custom Properties
| custom property |
initial value |
description |
--grid-gutter |
10px |
Gutter size. |
--grid-gutter-hi |
--grid-gutter |
Inner horizontal gutter size. |
--grid-gutter-ho |
--grid-gutter |
Outer horizontal gutter size. |
--grid-gutter-vi |
--grid-gutter |
Inner vertical gutter size. |
--grid-gutter-vo |
--grid-gutter |
Outer vertical gutter size. |
grid-element
| property |
type |
initial value |
description |
mq |
String |
'(min-width: 48em)' |
Media query. |
ga |
String |
--grid-gutter or 10px |
All gutters. Equivalent to ghi gho gvi gvo. |
gs |
String |
--grid-gutter or 10px |
Gutter size. Defines a common size for multiple gutter attributes. |
ghi |
String |
--grid-gutter-hi or --grid-gutter or 10px |
Inner horizontal gutter size. |
gho |
String |
--grid-gutter-ho or --grid-gutter or 10px |
Outer horizontal gutter size. |
gvi |
String |
--grid-gutter-vi or --grid-gutter or 10px |
Inner vertical gutter size. |
gvo |
String |
--grid-gutter-vo or --grid-gutter or 10px |
Outer vertical gutter size. |
start |
Boolean |
false |
Aligns columns in the top of the grid. |
center |
Boolean |
false |
Aligns columns in the center of the grid. |
end |
Boolean |
false |
Aligns columns in the bottom of the grid. |
grid-col
| property |
type |
initial value |
description |
s |
Number |
1 |
Column relative stretching factor. |
start |
Boolean |
false |
Aligns itself to the top of the grid. |
center |
Boolean |
false |
Aligns itself to the center of the grid. |
end |
Boolean |
false |
Aligns itself to the bottom of the grid. |
stretch |
Boolean |
true |
Default. Stretches itself to match the height of the grid. |
Infinite grid
<grid-element ga>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
</grid-element>
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
Nestable grids
<grid-element ga>
<grid-col>
<grid-element ga>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
</grid-element>
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
</grid-element>
...
...
...
...
<grid-element mq="(min-width: 35em)">
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
</grid-element>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima sed, dolore
a, minus esse officia fugiat? Officiis aspernatur nesciunt suscipit soluta
ut nulla ipsa similique impedit fugiat, et, alias officia vitae explicabo
quam illum magni voluptate architecto natus expedita. Aspernatur laboriosam
sed quam autem accusantium perferendis eligendi nihil natus commodi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate
delectus perspiciatis optio, ipsa accusamus laborum illo maiores eveniet,
vel recusandae enim sint, explicabo atque.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate
delectus perspiciatis optio, ipsa accusamus laborum illo maiores eveniet,
vel recusandae enim sint, explicabo atque.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate
delectus perspiciatis optio, ipsa accusamus laborum illo maiores eveniet,
vel recusandae enim sint, explicabo atque.
Column relative stretching factor
<grid-element>
<grid-col s="3">
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
</grid-element>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima sed, dolore
a, minus esse officia fugiat? Officiis aspernatur nesciunt suscipit soluta
ut nulla ipsa similique impedit fugiat, et, alias officia vitae explicabo
quam illum magni voluptate architecto natus expedita. Aspernatur laboriosam
sed quam autem accusantium perferendis eligendi nihil natus commodi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate
delectus perspiciatis optio, ipsa accusamus laborum illo maiores eveniet,
vel recusandae enim sint, explicabo atque.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate
delectus perspiciatis optio, ipsa accusamus laborum illo maiores eveniet,
vel recusandae enim sint, explicabo atque.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate
delectus perspiciatis optio, ipsa accusamus laborum illo maiores eveniet,
vel recusandae enim sint, explicabo atque.
Children alignment
<grid-element start>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
</grid-element>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima sed, dolore
a, minus esse officia fugiat? Officiis aspernatur nesciunt suscipit soluta
ut nulla ipsa similique impedit fugiat, et, alias officia vitae explicabo
quam illum magni voluptate architecto natus expedita. Aspernatur laboriosam
sed quam autem accusantium perferendis eligendi nihil natus commodi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate
delectus perspiciatis optio, ipsa accusamus laborum illo maiores eveniet,
vel recusandae enim sint, explicabo atque.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate
delectus perspiciatis optio, ipsa accusamus laborum illo maiores eveniet,
vel recusandae enim sint, explicabo atque.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate
delectus perspiciatis optio, ipsa accusamus laborum illo maiores eveniet,
vel recusandae enim sint, explicabo atque.
<grid-element center>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
</grid-element>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima sed, dolore
a, minus esse officia fugiat? Officiis aspernatur nesciunt suscipit soluta
ut nulla ipsa similique impedit fugiat, et, alias officia vitae explicabo
quam illum magni voluptate architecto natus expedita. Aspernatur laboriosam
sed quam autem accusantium perferendis eligendi nihil natus commodi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate
delectus perspiciatis optio, ipsa accusamus laborum illo maiores eveniet,
vel recusandae enim sint, explicabo atque.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate
delectus perspiciatis optio, ipsa accusamus laborum illo maiores eveniet,
vel recusandae enim sint, explicabo atque.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate
delectus perspiciatis optio, ipsa accusamus laborum illo maiores eveniet,
vel recusandae enim sint, explicabo atque.
<grid-element end>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
</grid-element>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima sed, dolore
a, minus esse officia fugiat? Officiis aspernatur nesciunt suscipit soluta
ut nulla ipsa similique impedit fugiat, et, alias officia vitae explicabo
quam illum magni voluptate architecto natus expedita. Aspernatur laboriosam
sed quam autem accusantium perferendis eligendi nihil natus commodi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate
delectus perspiciatis optio, ipsa accusamus laborum illo maiores eveniet,
vel recusandae enim sint, explicabo atque.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate
delectus perspiciatis optio, ipsa accusamus laborum illo maiores eveniet,
vel recusandae enim sint, explicabo atque.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate
delectus perspiciatis optio, ipsa accusamus laborum illo maiores eveniet,
vel recusandae enim sint, explicabo atque.
Individual alignment
<grid-element>
<grid-col>
...
</grid-col>
<grid-col start>
...
</grid-col>
<grid-col center>
...
</grid-col>
<grid-col end>
...
</grid-col>
<grid-col stretch>
...
</grid-col>
</grid-element>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima sed, dolore
a, minus esse officia fugiat? Officiis aspernatur nesciunt suscipit soluta
ut nulla ipsa similique impedit fugiat, et, alias officia vitae explicabo
quam illum magni voluptate architecto natus expedita. Aspernatur laboriosam
sed quam autem accusantium perferendis eligendi nihil natus commodi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate
delectus perspiciatis optio, ipsa accusamus laborum illo maiores eveniet,
vel recusandae enim sint, explicabo atque.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate
delectus perspiciatis optio, ipsa accusamus laborum illo maiores eveniet,
vel recusandae enim sint, explicabo atque.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate
delectus perspiciatis optio, ipsa accusamus laborum illo maiores eveniet,
vel recusandae enim sint, explicabo atque.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate
delectus perspiciatis optio, ipsa accusamus laborum illo maiores eveniet,
vel recusandae enim sint, explicabo atque.
Gutters
All gutters
<grid-element ga>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
</grid-element>
...
...
...
<grid-element ga="32px">
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
</grid-element>
...
...
...
Inner horizontal gutters
<grid-element ghi>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
</grid-element>
...
...
...
Outer horizontal gutters
<grid-element gho>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
</grid-element>
...
...
...
Inner vertical gutters
<grid-element gvi>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
</grid-element>
...
...
...
Outer vertical gutters
<grid-element gvo>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
</grid-element>
...
...
...
Example
<grid-element ghi gho>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
</grid-element>
...
...
...
Gutter size
<grid-element ghi gho gs="32px">
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
</grid-element>
...
...
...
Specific gutter size
<grid-element ghi="16px" gho="32px">
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
</grid-element>
...
...
...
Example
<grid-element ghi gho="50px" gvi gvo="5px" gs="25px">
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
<grid-col>
...
</grid-col>
</grid-element>
...
...
...
Browser support
- Chrome¹
- Firefox¹
- IE 11 / Edge¹
- Safari 8+
- Chrome for Android¹
- Safari for iOS 8.1+
¹ latest version (evergreen browser)