mirror of
https://github.com/kristoferjoseph/flexboxgrid.git
synced 2026-01-24 23:16:48 +00:00
First pass at flexbox grid
This commit is contained in:
kristoferjoseph
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
node_modules/
|
||||
.DS_Store
|
||||
29
Gruntfile.js
Normal file
29
Gruntfile.js
Normal file
@@ -0,0 +1,29 @@
|
||||
/*global module:false*/
|
||||
module.exports = function(grunt) {
|
||||
|
||||
grunt.initConfig({
|
||||
autoprefixer: {
|
||||
compile: {
|
||||
src: 'src/grid.css',
|
||||
dest: 'css/flexgrid.css'
|
||||
}
|
||||
},
|
||||
cssmin: {
|
||||
minify: {
|
||||
expand: true,
|
||||
cwd: 'css',
|
||||
src: ['*.css', '!*.min.css'],
|
||||
dest: 'css',
|
||||
ext: '.min.css'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// These plugins provide necessary tasks.
|
||||
grunt.loadNpmTasks('grunt-contrib-cssmin');
|
||||
grunt.loadNpmTasks('grunt-autoprefixer');
|
||||
|
||||
// Default task.
|
||||
grunt.registerTask('default', ['autoprefixer', 'cssmin']);
|
||||
|
||||
};
|
||||
345
css/flexgrid.css
Normal file
345
css/flexgrid.css
Normal file
@@ -0,0 +1,345 @@
|
||||
.grid-margin {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 -1rem;
|
||||
}
|
||||
|
||||
.row.reverse {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: reverse;
|
||||
-webkit-flex-direction: row-reverse;
|
||||
-ms-flex-direction: row-reverse;
|
||||
flex-direction: row-reverse;
|
||||
-webkit-flex-wrap: row-reverse;
|
||||
-ms-flex-wrap: row-reverse;
|
||||
flex-wrap: row-reverse;
|
||||
}
|
||||
|
||||
.column {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.column.reverse {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: reverse;
|
||||
-webkit-flex-direction: column-reverse;
|
||||
-ms-flex-direction: column-reverse;
|
||||
flex-direction: column-reverse;
|
||||
-webkit-flex-wrap: column-reverse;
|
||||
-ms-flex-wrap: column-reverse;
|
||||
flex-wrap: column-reverse;
|
||||
}
|
||||
|
||||
.column--1,
|
||||
.column--2,
|
||||
.fourth,
|
||||
.column--3,
|
||||
.third,
|
||||
.column--4,
|
||||
.column--5,
|
||||
.half,
|
||||
.column--6,
|
||||
.column--7,
|
||||
.two-thirds,
|
||||
.column--8,
|
||||
.three-fourths,
|
||||
.column--9,
|
||||
.column--10,
|
||||
.column--11,
|
||||
.full,
|
||||
.column--12 {
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex: 1 0 100%;
|
||||
-ms-flex: 1 0 100%;
|
||||
flex: 1 0 100%;
|
||||
}
|
||||
|
||||
.offset--1,
|
||||
.offset--2,
|
||||
.offset--3,
|
||||
.offset--4,
|
||||
.offset--5,
|
||||
.offset--6,
|
||||
.offset--7,
|
||||
.offset--8,
|
||||
.offset--9,
|
||||
.offset--10,
|
||||
.offset--11,
|
||||
.offset--12 {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.row,
|
||||
.column,
|
||||
.auto,
|
||||
.column--1,
|
||||
.column--2,
|
||||
.fourth,
|
||||
.column--3,
|
||||
.third,
|
||||
.column--4,
|
||||
.column--5,
|
||||
.half,
|
||||
.column--6,
|
||||
.column--7,
|
||||
.two-thirds,
|
||||
.column--8,
|
||||
.three-fourths,
|
||||
.column--9,
|
||||
.column--10,
|
||||
.column--11,
|
||||
.full,
|
||||
.column--12,
|
||||
.offset--1,
|
||||
.offset--2,
|
||||
.offset--3,
|
||||
.offset--4,
|
||||
.offset--5,
|
||||
.offset--6,
|
||||
.offset--7,
|
||||
.offset--8,
|
||||
.offset--9,
|
||||
.offset--10,
|
||||
.offset--11,
|
||||
.offset--12 {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
.auto {
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.top,
|
||||
.start {
|
||||
-webkit-align-self: flex-start;
|
||||
-ms-flex-item-align: start;
|
||||
align-self: flex-start;
|
||||
-webkit-box-align: start;
|
||||
-webkit-align-items: flex-start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
text-align: start;
|
||||
-webkit-box-pack: start;
|
||||
-webkit-justify-content: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
.center {
|
||||
-webkit-align-self: center;
|
||||
-ms-flex-item-align: center;
|
||||
align-self: center;
|
||||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.bottom,
|
||||
.end {
|
||||
-webkit-align-self: flex-end;
|
||||
-ms-flex-item-align: end;
|
||||
align-self: flex-end;
|
||||
-webkit-box-align: end;
|
||||
-webkit-align-items: flex-end;
|
||||
-ms-flex-align: end;
|
||||
align-items: flex-end;
|
||||
text-align: end;
|
||||
-webkit-box-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.around {
|
||||
-webkit-justify-content: space-around;
|
||||
-ms-flex-pack: distribute;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.between {
|
||||
-webkit-box-pack: justify;
|
||||
-webkit-justify-content: space-between;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 33rem) {
|
||||
.column--1 {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 8.333%;
|
||||
-ms-flex: 0 0 8.333%;
|
||||
flex: 0 0 8.333%;
|
||||
}
|
||||
|
||||
.column--2 {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 16.666%;
|
||||
-ms-flex: 0 0 16.666%;
|
||||
flex: 0 0 16.666%;
|
||||
}
|
||||
|
||||
.fourth,
|
||||
.column--3 {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 25%;
|
||||
-ms-flex: 0 0 25%;
|
||||
flex: 0 0 25%;
|
||||
}
|
||||
|
||||
.third,
|
||||
.column--4 {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 33.333%;
|
||||
-ms-flex: 0 0 33.333%;
|
||||
flex: 0 0 33.333%;
|
||||
}
|
||||
|
||||
.column--5 {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 41.666%;
|
||||
-ms-flex: 0 0 41.666%;
|
||||
flex: 0 0 41.666%;
|
||||
}
|
||||
|
||||
.half,
|
||||
.column--6 {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 50%;
|
||||
-ms-flex: 0 0 50%;
|
||||
flex: 0 0 50%;
|
||||
}
|
||||
|
||||
.column--7 {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 58.333%;
|
||||
-ms-flex: 0 0 58.333%;
|
||||
flex: 0 0 58.333%;
|
||||
}
|
||||
|
||||
.two-thirds,
|
||||
.column--8 {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 66.666%;
|
||||
-ms-flex: 0 0 66.666%;
|
||||
flex: 0 0 66.666%;
|
||||
}
|
||||
|
||||
.three-fourths,
|
||||
.column--9 {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 75%;
|
||||
-ms-flex: 0 0 75%;
|
||||
flex: 0 0 75%;
|
||||
}
|
||||
|
||||
.column--10 {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 83.333%;
|
||||
-ms-flex: 0 0 83.333%;
|
||||
flex: 0 0 83.333%;
|
||||
}
|
||||
|
||||
.column--11 {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 91.666%;
|
||||
-ms-flex: 0 0 91.666%;
|
||||
flex: 0 0 91.666%;
|
||||
}
|
||||
|
||||
.full,
|
||||
.column--12 {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 100%;
|
||||
-ms-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
|
||||
.offset--1 {
|
||||
margin-left: 8.333%;
|
||||
}
|
||||
|
||||
.offset--2 {
|
||||
margin-left: 16.666%;
|
||||
}
|
||||
|
||||
.offset--3 {
|
||||
margin-left: 25%;
|
||||
}
|
||||
|
||||
.offset--4 {
|
||||
margin-left: 33.333%;
|
||||
}
|
||||
|
||||
.offset--5 {
|
||||
margin-left: 41.666%;
|
||||
}
|
||||
|
||||
.offset--6 {
|
||||
margin-left: 50%;
|
||||
}
|
||||
|
||||
.offset--7 {
|
||||
margin-left: 58.333%;
|
||||
}
|
||||
|
||||
.offset--8 {
|
||||
margin-left: 66.666%;
|
||||
}
|
||||
|
||||
.offset--9 {
|
||||
margin-left: 75%;
|
||||
}
|
||||
|
||||
.offset--10 {
|
||||
margin-left: 83.333%;
|
||||
}
|
||||
|
||||
.offset--11 {
|
||||
margin-left: 91.666%;
|
||||
}
|
||||
}
|
||||
1
css/flexgrid.min.css
vendored
Normal file
1
css/flexgrid.min.css
vendored
Normal file
@@ -0,0 +1 @@
|
||||
.grid-margin{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0 2rem}.row{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 -1rem}.row.reverse{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-flex-wrap:row-reverse;-ms-flex-wrap:row-reverse;flex-wrap:row-reverse}.column{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.column.reverse{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:reverse;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;-webkit-flex-wrap:column-reverse;-ms-flex-wrap:column-reverse;flex-wrap:column-reverse}.column--1,.column--10,.column--11,.column--12,.column--2,.column--3,.column--4,.column--5,.column--6,.column--7,.column--8,.column--9,.fourth,.full,.half,.third,.three-fourths,.two-thirds{-webkit-box-flex:1;-webkit-flex:1 0 100%;-ms-flex:1 0 100%;flex:1 0 100%}.offset--1,.offset--10,.offset--11,.offset--12,.offset--2,.offset--3,.offset--4,.offset--5,.offset--6,.offset--7,.offset--8,.offset--9{margin-left:0}.auto,.column,.column--1,.column--10,.column--11,.column--12,.column--2,.column--3,.column--4,.column--5,.column--6,.column--7,.column--8,.column--9,.fourth,.full,.half,.offset--1,.offset--10,.offset--11,.offset--12,.offset--2,.offset--3,.offset--4,.offset--5,.offset--6,.offset--7,.offset--8,.offset--9,.row,.third,.three-fourths,.two-thirds{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0 .5rem}.auto{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.start,.top{-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;text-align:start;-webkit-box-pack:start;-webkit-justify-content:start;-ms-flex-pack:start;justify-content:start}.center{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;text-align:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.bottom,.end{-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end;-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end;text-align:end;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end}.around{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.between{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}@media only screen and (min-width:33rem){.column--1{-webkit-box-flex:0;-webkit-flex:0 0 8.333%;-ms-flex:0 0 8.333%;flex:0 0 8.333%}.column--2{-webkit-box-flex:0;-webkit-flex:0 0 16.666%;-ms-flex:0 0 16.666%;flex:0 0 16.666%}.column--3,.fourth{-webkit-box-flex:0;-webkit-flex:0 0 25%;-ms-flex:0 0 25%;flex:0 0 25%}.column--4,.third{-webkit-box-flex:0;-webkit-flex:0 0 33.333%;-ms-flex:0 0 33.333%;flex:0 0 33.333%}.column--5{-webkit-box-flex:0;-webkit-flex:0 0 41.666%;-ms-flex:0 0 41.666%;flex:0 0 41.666%}.column--6,.half{-webkit-box-flex:0;-webkit-flex:0 0 50%;-ms-flex:0 0 50%;flex:0 0 50%}.column--7{-webkit-box-flex:0;-webkit-flex:0 0 58.333%;-ms-flex:0 0 58.333%;flex:0 0 58.333%}.column--8,.two-thirds{-webkit-box-flex:0;-webkit-flex:0 0 66.666%;-ms-flex:0 0 66.666%;flex:0 0 66.666%}.column--9,.three-fourths{-webkit-box-flex:0;-webkit-flex:0 0 75%;-ms-flex:0 0 75%;flex:0 0 75%}.column--10{-webkit-box-flex:0;-webkit-flex:0 0 83.333%;-ms-flex:0 0 83.333%;flex:0 0 83.333%}.column--11{-webkit-box-flex:0;-webkit-flex:0 0 91.666%;-ms-flex:0 0 91.666%;flex:0 0 91.666%}.column--12,.full{-webkit-box-flex:0;-webkit-flex:0 0 100%;-ms-flex:0 0 100%;flex:0 0 100%}.offset--1{margin-left:8.333%}.offset--2{margin-left:16.666%}.offset--3{margin-left:25%}.offset--4{margin-left:33.333%}.offset--5{margin-left:41.666%}.offset--6{margin-left:50%}.offset--7{margin-left:58.333%}.offset--8{margin-left:66.666%}.offset--9{margin-left:75%}.offset--10{margin-left:83.333%}.offset--11{margin-left:91.666%}}
|
||||
1
css/grid.min.css
vendored
Normal file
1
css/grid.min.css
vendored
Normal file
@@ -0,0 +1 @@
|
||||
.row{display:flex;flex-direction:row;flex-wrap:wrap}.row.reverse{display:flex;flex-direction:row-reverse;flex-wrap:row-reverse}.column{display:flex;flex-direction:column}.column.reverse{display:flex;flex-direction:column-reverse;flex-wrap:column-reverse}.column--1,.column--10,.column--11,.column--12,.column--2,.column--3,.column--4,.column--5,.column--6,.column--7,.column--8,.column--9,.fourth,.full,.half,.third,.three-fourths,.two-thirds{flex:1 0 100%}.offset--1,.offset--10,.offset--11,.offset--12,.offset--2,.offset--3,.offset--4,.offset--5,.offset--6,.offset--7,.offset--8,.offset--9{margin-left:0}.box{background:#c0f}.auto,.column,.column--1,.column--10,.column--11,.column--12,.column--2,.column--3,.column--4,.column--5,.column--6,.column--7,.column--8,.column--9,.fourth,.full,.grid,.half,.offset--1,.offset--10,.offset--11,.offset--12,.offset--2,.offset--3,.offset--4,.offset--5,.offset--6,.offset--7,.offset--8,.offset--9,.row,.third,.three-fourths,.two-thirds{box-sizing:border-box;padding:0 .5rem}.auto{flex:1}.start,.top{align-self:flex-start;align-items:flex-start;text-align:start;justify-content:start}.center{align-self:center;align-items:center;text-align:center;justify-content:center}.bottom,.end{align-self:flex-end;align-items:flex-end;text-align:end;justify-content:flex-end}.around{justify-content:space-around}.between{justify-content:space-between}@media only screen and (min-width:33rem){.column--1{flex:0 0 8.333%}.column--2{flex:0 0 16.666%}.column--3,.fourth{flex:0 0 25%}.column--4,.third{flex:0 0 33.333%}.column--5{flex:0 0 41.666%}.column--6,.half{flex:0 0 50%}.column--7{flex:0 0 58.333%}.column--8,.two-thirds{flex:0 0 66.666%}.column--9,.three-fourths{flex:0 0 75%}.column--10{flex:0 0 83.333%}.column--11{flex:0 0 91.666%}.column--12,.full{flex:0 0 100%}.offset--1{margin-left:8.333%}.offset--2{margin-left:16.666%}.offset--3{margin-left:25%}.offset--4{margin-left:33.333%}.offset--5{margin-left:41.666%}.offset--6{margin-left:50%}.offset--7{margin-left:58.333%}.offset--8{margin-left:66.666%}.offset--9{margin-left:75%}.offset--10{margin-left:83.333%}.offset--11{margin-left:91.666%}}
|
||||
41
css/index.css
Normal file
41
css/index.css
Normal file
@@ -0,0 +1,41 @@
|
||||
body {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||
font-weight: 500;
|
||||
background: #EEE;
|
||||
line-height: 1.4rem;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
padding: 0 0 0.2rem 0;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
border-bottom: 1px solid #007FFF;
|
||||
color: #007FFF;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
max-width: 75%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.box--first,
|
||||
.box {
|
||||
box-sizing: border-box;
|
||||
min-height: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem;
|
||||
background: #007FFF;
|
||||
border: 1px solid #FFF;
|
||||
border-radius: 2px;
|
||||
overflow: scroll;
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
.box--first {
|
||||
background: #CCC;
|
||||
}
|
||||
1
css/index.min.css
vendored
Normal file
1
css/index.min.css
vendored
Normal file
@@ -0,0 +1 @@
|
||||
body{box-sizing:border-box;padding:0;margin:0;font-size:16px;font-family:HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-weight:500;background:#EEE;line-height:1.4rem}a{text-decoration:none;color:#000;padding:0 0 .2rem}a:hover{border-bottom:1px solid #007FFF;color:#007FFF}.wrap{max-width:75%;margin:0 auto}.box,.box--first{box-sizing:border-box;min-height:1rem;margin-bottom:1rem;padding:.5rem;background:#007FFF;border:1px solid #FFF;border-radius:2px;overflow:scroll;text-align:center;color:#fff}.box--first{background:#CCC}
|
||||
142
index.html
Normal file
142
index.html
Normal file
@@ -0,0 +1,142 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Flexbox Grid</title>
|
||||
<link rel="stylesheet" href="vendor/normalize.css" media="screen"
|
||||
/>
|
||||
<link rel="stylesheet" href="css/index.css" media="screen" />
|
||||
<link rel="stylesheet" href="css/flexgrid.css" media="screen" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="wrap">
|
||||
<h1>Flexbox Grid</h1>
|
||||
|
||||
<div class="row between">
|
||||
<div class="column--1">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="column--1">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="column--1">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="column--1">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="column--1">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="column--1">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column--2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="column--2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="column--2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="column--2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="column--2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="column--2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column--3">
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
<div class="column--3">
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
<div class="column--3">
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
<div class="column--3">
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column--4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="column--4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="column--4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column--1">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="column--5">
|
||||
<div class="box">5</div>
|
||||
</div>
|
||||
<div class="column--5">
|
||||
<div class="box">5</div>
|
||||
</div>
|
||||
<div class="column--1">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column--6">
|
||||
<div class="box">6</div>
|
||||
</div>
|
||||
<div class="column--6">
|
||||
<div class="box">6</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row center">
|
||||
<div class="column--7">
|
||||
<div class="box">7</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row center">
|
||||
<div class="column--8">
|
||||
<div class="box">8</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row center">
|
||||
<div class="column--9">
|
||||
<div class="box">9</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row center">
|
||||
<div class="column--10">
|
||||
<div class="box">10</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row center">
|
||||
<div class="column--11">
|
||||
<div class="box">11</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column--12">
|
||||
<div class="box">12</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<a href="http://twitter.com/dam">
|
||||
@dam ♡s you
|
||||
</a>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
29
package.json
Normal file
29
package.json
Normal file
@@ -0,0 +1,29 @@
|
||||
{
|
||||
"name": "flexboxgrid",
|
||||
"version": "0.0.0",
|
||||
"description": "Grid based off of CSS3 flexbox specification",
|
||||
"main": "index.html",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/kristoferjoseph/flexboxgrid.git"
|
||||
},
|
||||
"keywords": [
|
||||
"flexbox",
|
||||
"grid",
|
||||
"css"
|
||||
],
|
||||
"author": "@dam",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/kristoferjoseph/flexboxgrid/issues"
|
||||
},
|
||||
"homepage": "https://github.com/kristoferjoseph/flexboxgrid",
|
||||
"devDependencies": {
|
||||
"grunt": "~0.4.2",
|
||||
"grunt-autoprefixer": "~0.5.0",
|
||||
"grunt-contrib-cssmin": "~0.7.0"
|
||||
}
|
||||
}
|
||||
207
src/grid.css
Normal file
207
src/grid.css
Normal file
@@ -0,0 +1,207 @@
|
||||
.grid-margin {
|
||||
box-sizing: border-box;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 -1rem;
|
||||
}
|
||||
.row.reverse {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
flex-wrap: row-reverse;
|
||||
}
|
||||
.column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.column.reverse {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
flex-wrap: column-reverse;
|
||||
}
|
||||
.column--1,
|
||||
.column--2,
|
||||
.fourth,
|
||||
.column--3,
|
||||
.third,
|
||||
.column--4,
|
||||
.column--5,
|
||||
.half,
|
||||
.column--6,
|
||||
.column--7,
|
||||
.two-thirds,
|
||||
.column--8,
|
||||
.three-fourths,
|
||||
.column--9,
|
||||
.column--10,
|
||||
.column--11,
|
||||
.full,
|
||||
.column--12 {
|
||||
flex: 1 0 100%;
|
||||
}
|
||||
|
||||
.offset--1,
|
||||
.offset--2,
|
||||
.offset--3,
|
||||
.offset--4,
|
||||
.offset--5,
|
||||
.offset--6,
|
||||
.offset--7,
|
||||
.offset--8,
|
||||
.offset--9,
|
||||
.offset--10,
|
||||
.offset--11,
|
||||
.offset--12 {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.row,
|
||||
.column,
|
||||
.auto,
|
||||
.column--1,
|
||||
.column--2,
|
||||
.fourth,
|
||||
.column--3,
|
||||
.third,
|
||||
.column--4,
|
||||
.column--5,
|
||||
.half,
|
||||
.column--6,
|
||||
.column--7,
|
||||
.two-thirds,
|
||||
.column--8,
|
||||
.three-fourths,
|
||||
.column--9,
|
||||
.column--10,
|
||||
.column--11,
|
||||
.full,
|
||||
.column--12,
|
||||
.offset--1,
|
||||
.offset--2,
|
||||
.offset--3,
|
||||
.offset--4,
|
||||
.offset--5,
|
||||
.offset--6,
|
||||
.offset--7,
|
||||
.offset--8,
|
||||
.offset--9,
|
||||
.offset--10,
|
||||
.offset--11,
|
||||
.offset--12 {
|
||||
box-sizing: border-box;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
.auto {
|
||||
flex: 1;
|
||||
}
|
||||
.top,
|
||||
.start {
|
||||
align-self: flex-start;
|
||||
align-items: flex-start;
|
||||
text-align: start;
|
||||
justify-content: start;
|
||||
}
|
||||
.center {
|
||||
align-self: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.bottom,
|
||||
.end {
|
||||
align-self: flex-end;
|
||||
align-items: flex-end;
|
||||
text-align: end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
.between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 33rem) {
|
||||
|
||||
.column--1 {
|
||||
flex: 0 0 8.333%;
|
||||
}
|
||||
.column--2 {
|
||||
flex: 0 0 16.666%;
|
||||
}
|
||||
.fourth,
|
||||
.column--3 {
|
||||
flex: 0 0 25%;
|
||||
}
|
||||
.third,
|
||||
.column--4 {
|
||||
flex: 0 0 33.333%;
|
||||
}
|
||||
.column--5 {
|
||||
flex: 0 0 41.666%;
|
||||
}
|
||||
.half,
|
||||
.column--6 {
|
||||
flex: 0 0 50%;
|
||||
}
|
||||
.column--7 {
|
||||
flex: 0 0 58.333%;
|
||||
}
|
||||
.two-thirds,
|
||||
.column--8 {
|
||||
flex: 0 0 66.666%;
|
||||
}
|
||||
.three-fourths,
|
||||
.column--9 {
|
||||
flex: 0 0 75%;
|
||||
}
|
||||
.column--10 {
|
||||
flex: 0 0 83.333%;
|
||||
}
|
||||
.column--11 {
|
||||
flex: 0 0 91.666%;
|
||||
}
|
||||
.full,
|
||||
.column--12 {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
|
||||
.offset--1 {
|
||||
margin-left: 8.333%;
|
||||
}
|
||||
.offset--2 {
|
||||
margin-left: 16.666%;
|
||||
}
|
||||
.offset--3 {
|
||||
margin-left: 25%;
|
||||
}
|
||||
.offset--4 {
|
||||
margin-left: 33.333%
|
||||
}
|
||||
.offset--5 {
|
||||
margin-left: 41.666%;
|
||||
}
|
||||
.offset--6 {
|
||||
margin-left: 50%;
|
||||
}
|
||||
.offset--7 {
|
||||
margin-left: 58.333%;
|
||||
}
|
||||
.offset--8 {
|
||||
margin-left: 66.666%;
|
||||
}
|
||||
.offset--9 {
|
||||
margin-left: 75%;
|
||||
}
|
||||
.offset--10 {
|
||||
margin-left: 83.333%;
|
||||
}
|
||||
.offset--11 {
|
||||
margin-left: 91.666%;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
407
vendor/normalize.css
vendored
Normal file
407
vendor/normalize.css
vendored
Normal file
@@ -0,0 +1,407 @@
|
||||
/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
|
||||
|
||||
/* ==========================================================================
|
||||
HTML5 display definitions
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Correct `block` display not defined in IE 8/9.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct `inline-block` display not defined in IE 8/9.
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent modern browsers from displaying `audio` without controls.
|
||||
* Remove excess height in iOS 5 devices.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `[hidden]` styling not present in IE 8/9.
|
||||
* Hide the `template` element in IE, Safari, and Firefox < 22.
|
||||
*/
|
||||
|
||||
[hidden],
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Base
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Set default font family to sans-serif.
|
||||
* 2. Prevent iOS text size adjust after orientation change, without disabling
|
||||
* user zoom.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-family: sans-serif; /* 1 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove default margin.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Links
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background color from active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `outline` inconsistency between Chrome and other browsers.
|
||||
*/
|
||||
|
||||
a:focus {
|
||||
outline: thin dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve readability when focused and also mouse hovered in all browsers.
|
||||
*/
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Typography
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address variable `h1` font-size and margin within `section` and `article`
|
||||
* contexts in Firefox 4+, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in Safari 5 and Chrome.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address differences between Firefox and other browsers.
|
||||
*/
|
||||
|
||||
hr {
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct font family set oddly in Safari 5 and Chrome.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, serif;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve readability of pre-formatted text in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set consistent quote types.
|
||||
*/
|
||||
|
||||
q {
|
||||
quotes: "\201C" "\201D" "\2018" "\2019";
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent and variable font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove border when inside `a` element in IE 8/9.
|
||||
*/
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct overflow displayed oddly in IE 9.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Figures
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address margin not present in IE 8/9 and Safari 5.
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Define consistent border, margin, and padding.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct `color` not being inherited in IE 8/9.
|
||||
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
||||
*/
|
||||
|
||||
legend {
|
||||
border: 0; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct font family not being inherited in all browsers.
|
||||
* 2. Correct font size not being inherited in all browsers.
|
||||
* 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 2 */
|
||||
margin: 0; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
||||
* the UA stylesheet.
|
||||
*/
|
||||
|
||||
button,
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||
* All other form control elements do not inherit `text-transform` values.
|
||||
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
|
||||
* Correct `select` style inheritance in Firefox 4+ and Opera.
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
* and `video` controls.
|
||||
* 2. Correct inability to style clickable `input` types in iOS.
|
||||
* 3. Improve usability and consistency of cursor style between image-type
|
||||
* `input` and others.
|
||||
*/
|
||||
|
||||
button,
|
||||
html input[type="button"], /* 1 */
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
cursor: pointer; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Re-set default cursor for disabled elements.
|
||||
*/
|
||||
|
||||
button[disabled],
|
||||
html input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Address box sizing set to `content-box` in IE 8/9/10.
|
||||
* 2. Remove excess padding in IE 8/9/10.
|
||||
*/
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
|
||||
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
|
||||
* (include `-moz` to future-proof).
|
||||
*/
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box; /* 2 */
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and search cancel button in Safari 5 and Chrome
|
||||
* on OS X.
|
||||
*/
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and border in Firefox 4+.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove default vertical scrollbar in IE 8/9.
|
||||
* 2. Improve readability and alignment in all browsers.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto; /* 1 */
|
||||
vertical-align: top; /* 2 */
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Tables
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove most spacing between table cells.
|
||||
*/
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user