Permalink
Please sign in to comment.
Browse files
Initial commit
- Loading branch information...
0 parents
commit 066472ba98404fcab5ebc344aa2b711dc774f971
1000ch
committed
1000ch
committed
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