a-layout v0.0.1

A Layout

Reusable web components for grid layouts.\ For integrating this library into frameworks like Angular, React, Vue or Ember, follow this guide.

Getting started

Clone this repo to a new directory:

git clone git@github.com:Klickste/a-layout.git
cd a-layout

Install project dependencies and start the project:

npm install
npm start

Build components for production, auto-generate docs and format source code:

npm run build
npm run format

Usage

<!-- Simple 3-columns grid -->
<a-grid segments="3">
  <a-cell>Content</a-cell>
  <a-cell>Content</a-cell>
  <a-cell>Content</a-cell>
</a-grid>

<!-- Span definition -->
<a-grid>
  <a-cell span="1-3">Content</a-cell>
  <a-cell span="4-9">Content</a-cell>
  <a-cell span="10-12">Content</a-cell>
</a-grid>

<!-- Responsive span definition -->
<a-grid>
  <a-cell span="1-2/1-3/1-4">Content</a-cell>
  <a-cell span="3-10/4-9/5-8">Content</a-cell>
  <a-cell span="11-12/10-12/9-12">Content</a-cell>
</a-grid>

<!-- Responsive flow -->
<a-grid flow="stack/line">
  <a-cell>Content</a-cell>
  <a-cell>Content</a-cell>
  <a-cell>Content</a-cell>
</a-grid>

<!-- Responsive gutter -->
<a-grid gutter="sm/md/lg">
  <a-cell>Content</a-cell>
  <a-cell>Content</a-cell>
  <a-cell>Content</a-cell>
</a-grid>

<!-- All together -->
<a-grid segments="6" flow="stack/line" gutter="xs/md/xl">
  <a-cell span="1-1/1-2">Content</a-cell>
  <a-cell span="2-5/3-4">Content</a-cell>
  <a-cell span="6-6/5-6">Content</a-cell>
</a-grid>