From 066472ba98404fcab5ebc344aa2b711dc774f971 Mon Sep 17 00:00:00 2001
From: 1000ch <shogo.sensui@gmail.com>
Date: Thu, 10 Mar 2016 13:23:06 +0900
Subject: [PATCH] Initial commit

---
 .editorconfig   | 12 ++++++++++++
 .gitignore      |  1 +
 dist/grd.css    |  1 +
 index.html      | 57 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 package.json    | 24 ++++++++++++++++++++++++
 readme.markdown | 14 ++++++++++++++
 src/grd.css     | 34 ++++++++++++++++++++++++++++++++++
 7 files changed, 143 insertions(+)
 create mode 100644 .editorconfig
 create mode 100644 .gitignore
 create mode 100644 dist/grd.css
 create mode 100644 index.html
 create mode 100644 package.json
 create mode 100644 readme.markdown
 create mode 100644 src/grd.css

diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..4a7ea30
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..3c3629e
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/dist/grd.css b/dist/grd.css
new file mode 100644
index 0000000..5713bad
--- /dev/null
+++ b/dist/grd.css
@@ -0,0 +1 @@
+:root{--gutter:2rem}.Grid{display:flex;justify-content:flex-start;flex-wrap:wrap}.Grid.--top{align-items:flex-start}.Grid.--middle{align-items:center}.Grid.--bottom{align-items:flex-end}.Grid.--left{justify-content:flex-start}.Grid.--center{justify-content:center}.Grid.--right{justify-content:flex-end}.Cell{box-sizing:border-box;flex-shrink:0}.Cell.--fill{width:0;min-width:0;flex-grow:1}.Cell.--1of12{width:8.33333%}.Cell.--2of12{width:16.66667%}.Cell.--3of12{width:25%}.Cell.--4of12{width:33.33333%}.Cell.--5of12{width:41.66667%}.Cell.--6of12{width:50%}.Cell.--7of12{width:58.33333%}.Cell.--8of12{width:66.66667%}.Cell.--9of12{width:75%}.Cell.--10of12{width:83.33333%}.Cell.--11of12{width:91.66667%}.Cell.--12of12{width:100%}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..a5e31bf
--- /dev/null
+++ b/index.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Grd</title>
+    <link rel="stylesheet" href="dist/grd.css">
+    <style>
+      html {
+        font-size: 62.5%;
+      }
+      .container {
+        margin: auto;
+        max-width: 960px;
+        font-size: 1.6rem;
+      }
+      .Grid > div {
+        padding: 1rem;
+        border: 1px dashed #ccc;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>Grd</h1>
+      <section>
+        <h2>4/12 + 8/12</h2>
+        <div class="Grid">
+          <div class="Cell --4of12">4of12</div>
+          <div class="Cell --8of12">8of12</div>
+        </div>
+      </section>
+      <section>
+        <h2>align right + 6/12</h2>
+        <div class="Grid --right">
+          <div class="Cell --6of12">6of12</div>
+        </div>
+      </section>
+      <section>
+        <h2>2/12 + fill + 1/12</h2>
+        <div class="Grid">
+          <div class="Cell --2of12">2of12</div>
+          <div class="Cell --fill">fill</div>
+          <div class="Cell --1of12">1of12</div>
+        </div>
+      </section>
+      <section>
+        <h2>3/12 + 9/12 + 9/12 + 3/12</h2>
+        <div class="Grid">
+          <div class="Cell --3of12">3of12</div>
+          <div class="Cell --9of12">9of12</div>
+          <div class="Cell --9of12">9of12</div>
+          <div class="Cell --3of12">3of12</div>
+        </div>
+      </section>
+    </div>
+  </body>
+</html>
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..99c7481
--- /dev/null
+++ b/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "grd",
+  "version": "1.0.0",
+  "description": "A CSS grid framework using Flexbox.",
+  "scripts": {
+    "build": "postcss --use postcss-apply --use cssnano --output dist/grd.css src/grd.css"
+  },
+  "keywords": [
+    "css",
+    "grid"
+  ],
+  "repository": "1000ch/grd",
+  "author": {
+    "name": "Shogo Sensui",
+    "email": "shogo.sensui@gmail.com",
+    "url": "https://github.com/1000ch"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "cssnano": "^3.5.2",
+    "postcss-apply": "^0.1.0",
+    "postcss-cli": "^2.5.1"
+  }
+}
diff --git a/readme.markdown b/readme.markdown
new file mode 100644
index 0000000..c5117e8
--- /dev/null
+++ b/readme.markdown
@@ -0,0 +1,14 @@
+# Grd
+
+A CSS grid framework using Flexbox.
+
+## Usage
+
+Grd provides 2 classes as base, `.Grid` and `.Cell`.
+
+```html
+<div class="Grid">
+  <div class="Cell --3of12">3of12</div>
+  <div class="Cell --9of12">9of12</div>
+</div>
+```
diff --git a/src/grd.css b/src/grd.css
new file mode 100644
index 0000000..46e16d9
--- /dev/null
+++ b/src/grd.css
@@ -0,0 +1,34 @@
+:root {
+  --grid {
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+  }
+  --cell {
+    box-sizing: border-box;
+    flex-shrink: 0;
+  }
+}
+
+.Grid          { @apply --grid; }
+.Grid.--top    { align-items: flex-start; }
+.Grid.--middle { align-items: center; }
+.Grid.--bottom { align-items: flex-end; }
+.Grid.--left   { justify-content: flex-start; }
+.Grid.--center { justify-content: center; }
+.Grid.--right  { justify-content: flex-end; }
+
+.Cell          { @apply --cell; }
+.Cell.--fill   { width: 0; min-width: 0; flex-grow: 1; }
+.Cell.--1of12  { width: calc(100% * 1 / 12); }
+.Cell.--2of12  { width: calc(100% * 2 / 12); }
+.Cell.--3of12  { width: calc(100% * 3 / 12); }
+.Cell.--4of12  { width: calc(100% * 4 / 12); }
+.Cell.--5of12  { width: calc(100% * 5 / 12); }
+.Cell.--6of12  { width: calc(100% * 6 / 12); }
+.Cell.--7of12  { width: calc(100% * 7 / 12); }
+.Cell.--8of12  { width: calc(100% * 8 / 12); }
+.Cell.--9of12  { width: calc(100% * 9 / 12); }
+.Cell.--10of12 { width: calc(100% * 10 / 12); }
+.Cell.--11of12 { width: calc(100% * 11 / 12); }
+.Cell.--12of12 { width: 100%; }
