Skip to content
Browse files

Initial commit

  • Loading branch information...
0 parents commit 066472ba98404fcab5ebc344aa2b711dc774f971 @1000ch committed
Showing with 143 additions and 0 deletions.
  1. +12 −0 .editorconfig
  2. +1 −0 .gitignore
  3. +1 −0 dist/grd.css
  4. +57 −0 index.html
  5. +24 −0 package.json
  6. +14 −0 readme.markdown
  7. +34 −0 src/grd.css
12 .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
1 .gitignore
@@ -0,0 +1 @@
+node_modules
1 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%}
57 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>
24 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"
+ }
+}
14 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>
+```
34 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%; }

0 comments on commit 066472b

Please sign in to comment.
Something went wrong with that request. Please try again.