Permalink
Please sign in to comment.
Showing
with
143 additions
and 0 deletions.
- +12 −0 .editorconfig
- +1 −0 .gitignore
- +1 −0 dist/grd.css
- +57 −0 index.html
- +24 −0 package.json
- +14 −0 readme.markdown
- +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" | ||
+ } | ||
+} |
@@ -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