<|start_filename|>package.json<|end_filename|>
{
  "name": "topcoat-grid",
  "version": "0.1.0",
  "description": "simple grid built on css flex",
  "main": "Gruntfile.js",
  "style": "src/grid.css",
  "directories": {
    "example": "example"
  },
  "keywords": [
    "flex",
    "flexbox",
    "grid",
    "system"
  ],
  "author": {
    "name": "<NAME>",
    "twitter": "dam"
  },
  "license": "MIT, Apache2",
  "repository": {
    "type": "git",
    "url": "https://github.com/topcoat/topcoat-grid"
  },
  "dependencies": {
    "grunt": "~0.4.1"
  },
  "devDependencies": {
    "grunt-contrib-cssmin": "~0.6.2"
  }
}


<|start_filename|>example/index.html<|end_filename|>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Topcoat Grid</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="css/topcoat-mobile-light.min.css">
        <link rel="stylesheet" href="../css/grid.css">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>

        <header>
        <div class="topcoat-navigation-bar">
            <div class="topcoat-navigation-bar__item center full">
                <h1 class="topcoat-navigation-bar__title">Topcoat Grid</h1>
            </div>
        </div>
        </header>

        <div class="topcoat-grid">
            <h1>12 column grid</h1>
            <div class="topcoat-grid__row">
                <div class="topcoat-grid__column--1">
                    1 Column
                </div>
            </div>
            <div class="topcoat-grid__row">
                <div class="topcoat-grid__column--2">
                    2 Columns
                </div>
            </div>
            <div class="topcoat-grid__row">
                <div class="topcoat-grid__column--3">
                    3 Columns
                </div>
            </div>
            <div class="topcoat-grid__row">
                <div class="topcoat-grid__column--4">
                    4 Columns
                </div>
            </div>
            <div class="topcoat-grid__row">
                <div class="topcoat-grid__column--5">
                    5 Columns
                </div>
            </div>
            <div class="topcoat-grid__row">
                <div class="topcoat-grid__column--6">
                    6 Columns
                </div>
            </div>
            <div class="topcoat-grid__row">
                <div class="topcoat-grid__column--7">
                    7 Columns
                </div>
            </div>
            <div class="topcoat-grid__row">
                <div class="topcoat-grid__column--8">
                    8 Columns
                </div>
            </div>
            <div class="topcoat-grid__row">
                <div class="topcoat-grid__column--9">
                    9 Columns
                </div>
            </div>
            <div class="topcoat-grid__row">
                <div class="topcoat-grid__column--10">
                    10 Columns
                </div>
            </div>
            <div class="topcoat-grid__row">
                <div class="topcoat-grid__column--11">
                    11 Columns
                </div>
            </div>
            <div class="topcoat-grid__row">
                <div class="topcoat-grid__column--12">
                    12 Columns
                </div>
            </div>
            <h1>11 offset classes</h1>
            <div class="topcoat-grid__row">
                <div class="topcoat-grid__column--1 topcoat-grid__offset--1">
                    Offset 1
                </div>
            </div>
            <div class="topcoat-grid__row">
                <div class="topcoat-grid__column--1 topcoat-grid__offset--2">
                    Offset 2
                </div>
            </div>
            <div class="topcoat-grid__row">
                <div class="topcoat-grid__column--1 topcoat-grid__offset--3">
                   Offset 3
                </div>
            </div>
            <div class="topcoat-grid__row">
                <div class="topcoat-grid__column--1 topcoat-grid__offset--4">
                    Offset 4
                </div>
            </div>
            <div class="topcoat-grid__row">
                <div class="topcoat-grid__column--1 topcoat-grid__offset--5">
                    Offset 5
                </div>
            </div>
            <div class="topcoat-grid__row">
                <div class="topcoat-grid__column--1 topcoat-grid__offset--6">
                    Offset 6
                </div>
            </div>
            <div class="topcoat-grid__row">
                <div class="topcoat-grid__column--1 topcoat-grid__offset--7">
                    Offset 7
                </div>
            </div>
            <div class="topcoat-grid__row">
                <div class="topcoat-grid__column--1 topcoat-grid__offset--8">
                    Offset 8
                </div>
            </div>
            <div class="topcoat-grid__row">
                <div class="topcoat-grid__column--1 topcoat-grid__offset--9">
                    Offset 9
                </div>
            </div>
            <div class="topcoat-grid__row">
                <div class="topcoat-grid__column--1 topcoat-grid__offset--10">
                    Offset 10
                </div>
            </div>
            <div class="topcoat-grid__row">
                <div class="topcoat-grid__column--1 topcoat-grid__offset--11">
                    Offset 11
                </div>
            </div>
            <h1>Mix columns and offset</h1>
            <div class="topcoat-grid__row">
                <div class="topcoat-grid__column--2">
                    Column 2
                </div>
                <div class="topcoat-grid__column--3 topcoat-grid__offset--2">
                    Offset 2 Column 3
                </div>
                <div class="topcoat-grid__column--5">
                    Column 5
                </div>
            </div>
            <div class="topcoat-grid__row">
                <div class="topcoat-grid__column--3">
                    Column 3
                </div>
                <div class="topcoat-grid__column--4 topcoat-grid__offset--5">
                    Offset 5 Column 4
                </div>
            </div>
            <div class="topcoat-grid__row">
                <div class="topcoat-grid__column--4 topcoat-grid__offset--4">
                    Column 4 Offset 4
                </div>
            </div>
            <h1>Auto width columns</h1>
            <div class="topcoat-grid__row">
                <div class="topcoat-grid__column--auto">
                    Auto
                </div>
                <div class="topcoat-grid__column--auto">
                    Auto
                </div>
            </div>
            <div class="topcoat-grid__row">
                <div class="topcoat-grid__column--auto">
                    Auto
                </div>
                <div class="topcoat-grid__column--auto">
                    Auto
                </div>
                <div class="topcoat-grid__column--auto">
                    Auto
                </div>
            </div>
            <div class="topcoat-grid__row">
                <div class="topcoat-grid__column--auto">
                    Auto
                </div>
                <div class="topcoat-grid__column--auto">
                    Auto
                </div>
                <div class="topcoat-grid__column--auto">
                    Auto
                </div>
                <div class="topcoat-grid__column--auto">
                    Auto
                </div>
            </div>
            <div class="topcoat-grid__row">
                <div class="topcoat-grid__column--auto">
                    Auto
                </div>
                <div class="topcoat-grid__column--auto">
                    Auto
                </div>
                <div class="topcoat-grid__column--auto">
                    Auto
                </div>
                <div class="topcoat-grid__column--auto">
                    Auto
                </div>
                <div class="topcoat-grid__column--auto">
                    Auto
                </div>
            </div>
            <h1>Mix fixed and auto width columns</h1>
            <div class="topcoat-grid__row">
                <div class="topcoat-grid__column--2">
                    Column 2
                </div>
                <div class="topcoat-grid__column--auto">
                    Auto
                </div>
            </div>
            <div class="topcoat-grid__row">
                <div class="topcoat-grid__column--auto">
                    Auto
                </div>
                <div class="topcoat-grid__column--4">
                    Column 4
                </div>
                <div class="topcoat-grid__column--auto">
                    Auto
                </div>
            </div>
            <div class="topcoat-grid__row">
                <div class="topcoat-grid__column--4 topcoat-grid__offset--2">
                    Offset 2 Column 2
                </div>
                <div class="topcoat-grid__column--auto">
                    Auto
                </div>
            </div>
            <h1>Nesting</h1>
            <div class="topcoat-grid__row">
                <div class="topcoat-grid__column--12">
                    Column 12
                    <div class="topcoat-grid__row">
                        <div class="topcoat-grid__column--6">
                            Column 6
                            <div class="topcoat-grid__row">
                                <div class="topcoat-grid__column--auto">
                                    Auto
                                </div>
                                <div class="topcoat-grid__column--auto">
                                    Auto
                                    <div class="topcoat-grid__row">
                                        <div class="topcoat-grid__column--4">
                                            Colmn 4
                                        </div>
                                        <div class="topcoat-grid__column--4">
                                            Column 4
                                        </div>
                                        <div class="topcoat-grid__column--4">
                                            Column 4
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="topcoat-grid__column--6">
                            Column 6
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </body>
</html>


<|start_filename|>example/css/style.css<|end_filename|>
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-size: 16px;
  font-family: source-sans-pro, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.topcoat-grid {
    padding: 0 40px;
}

.topcoat-grid__column--auto,
.topcoat-grid__column--1,
.topcoat-grid__column--2,
.topcoat-grid__column--3,
.topcoat-grid__column--4,
.topcoat-grid__column--5,
.topcoat-grid__column--6,
.topcoat-grid__column--7,
.topcoat-grid__column--8,
.topcoat-grid__column--9,
.topcoat-grid__column--10,
.topcoat-grid__column--11,
.topcoat-grid__column--12 {
  border: 1px solid #a9a9a9;
  padding-top: 10px;
  padding-bottom: 10px;
  background: #dfe2e2;
  overflow: hidden;
}

.topcoat-grid__column--auto {
  background: lightblue;
}

