diff --git a/Gruntfile.js b/Gruntfile.js index c437769..2c63d95 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -22,7 +22,7 @@ module.exports = function(grunt) { dist: { files: { - 'dist/gridle.css': 'grid/gridlecss.scss' + 'dist/css/gridle.css': 'sass/gridle.scss' } } }, @@ -30,15 +30,14 @@ module.exports = function(grunt) { postcss: { options: { map: false, + diff: true, processors: [ - require('autoprefixer-core')({ - browsers: ['last 5 versions', '> 15%', 'IE 10'] - }).postcss + require('autoprefixer') ({ browsers: ['last 5 versions', '> 15%', 'IE 10'] }) ] }, dist: { - src: ['dist/gridle.css'] + src: ['dist/css/gridle.css'] } }, @@ -49,31 +48,49 @@ module.exports = function(grunt) { dist: { files: { - 'dist/gridle.css': 'dist/gridle.css' + 'dist/css/gridle.css': 'dist/css/gridle.css' } } }, - cssbeautifier : { - files : ['dist/gridle.css'], - options : { - indent: ' ', - openbrace: 'end-of-line', - autosemicolon: true - } - }, - - cssmin: { - options: { - shorthandCompacting: false, - roundingPrecision: -1 + // cssbeautifier : { + // files : ['dist/css/gridle.css'], + // options : { + // indent: ' ', + // openbrace: 'end-of-line', + // autosemicolon: true + // } + // }, + + // cssmin: { + // options: { + // shorthandCompacting: false, + // roundingPrecision: -1 + // }, + + // target: { + // files: { + // 'dist/css/gridle.min.css': ['dist/css/gridle.css'] + // } + // } + // } + + copy: { + main: { + files: [ + // includes files within path + {expand: true, src: ['path/*'], dest: 'dest/', filter: 'isFile'}, + + // includes files within path and its sub-directories + {expand: true, src: ['path/**'], dest: 'dest/'}, + + // makes all src relative to cwd + {expand: true, cwd: 'path/', src: ['**'], dest: 'dest/'}, + + // flattens results to a single level + {expand: true, flatten: true, src: ['path/**'], dest: 'dest/', filter: 'isFile'}, + ], }, - - target: { - files: { - 'dist/gridle.min.css': ['dist/gridle.css'] - } - } } }); diff --git a/dist/css/gridle.css b/dist/css/gridle.css new file mode 100644 index 0000000..d840d12 --- /dev/null +++ b/dist/css/gridle.css @@ -0,0 +1,551 @@ +*, +*:before, +*:after { + box-sizing: border-box; } + +*, +*:before, +*:after { + box-sizing: border-box; } + +.grid, +.grid--fluid { + margin-left: auto; + margin-right: auto; + width: 100%; + height: 100%; } + +.row, +.column { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; } + +.row { + -webkit-box-flex: 0; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -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-left: 0; + margin-right: 0; } + .row--reverse { + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; } + +[class*="cell"] { + margin-left: 0; + margin-right: 0; + -webkit-flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; } + +.cell-sm, +.cell-sm-1, +.cell-sm-offset-1, +.cell-sm-2, +.cell-sm-offset-2, +.cell-sm-3, +.cell-sm-offset-3, +.cell-sm-4, +.cell-sm-offset-4, +.cell-sm-5, +.cell-sm-offset-5, +.cell-sm-6, +.cell-sm-offset-6, +.cell-sm-7, +.cell-sm-offset-7, +.cell-sm-8, +.cell-sm-offset-8, +.cell-sm-9, +.cell-sm-offset-9, +.cell-sm-10, +.cell-sm-offset-10, +.cell-sm-11, +.cell-sm-offset-11, +.cell-sm-12, +.cell-sm-offset-12, .cell-md, +.cell-md-1, +.cell-md-offset-1, +.cell-md-2, +.cell-md-offset-2, +.cell-md-3, +.cell-md-offset-3, +.cell-md-4, +.cell-md-offset-4, +.cell-md-5, +.cell-md-offset-5, +.cell-md-6, +.cell-md-offset-6, +.cell-md-7, +.cell-md-offset-7, +.cell-md-8, +.cell-md-offset-8, +.cell-md-9, +.cell-md-offset-9, +.cell-md-10, +.cell-md-offset-10, +.cell-md-11, +.cell-md-offset-11, +.cell-md-12, +.cell-md-offset-12, .cell-lg, +.cell-lg-1, +.cell-lg-offset-1, +.cell-lg-2, +.cell-lg-offset-2, +.cell-lg-3, +.cell-lg-offset-3, +.cell-lg-4, +.cell-lg-offset-4, +.cell-lg-5, +.cell-lg-offset-5, +.cell-lg-6, +.cell-lg-offset-6, +.cell-lg-7, +.cell-lg-offset-7, +.cell-lg-8, +.cell-lg-offset-8, +.cell-lg-9, +.cell-lg-offset-9, +.cell-lg-10, +.cell-lg-offset-10, +.cell-lg-11, +.cell-lg-offset-11, +.cell-lg-12, +.cell-lg-offset-12, .cell-xl, +.cell-xl-1, +.cell-xl-offset-1, +.cell-xl-2, +.cell-xl-offset-2, +.cell-xl-3, +.cell-xl-offset-3, +.cell-xl-4, +.cell-xl-offset-4, +.cell-xl-5, +.cell-xl-offset-5, +.cell-xl-6, +.cell-xl-offset-6, +.cell-xl-7, +.cell-xl-offset-7, +.cell-xl-8, +.cell-xl-offset-8, +.cell-xl-9, +.cell-xl-offset-9, +.cell-xl-10, +.cell-xl-offset-10, +.cell-xl-11, +.cell-xl-offset-11, +.cell-xl-12, +.cell-xl-offset-12 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; } + +@media (min-width: 40em) { + .grid { + width: 40em; } + .cell-sm-auto { + -webkit-box-flex: 0; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; } + .cell-sm-1 { + -webkit-flex-basis: 8.3333333333%; + -ms-flex-preferred-size: 8.3333333333%; + flex-basis: 8.3333333333%; + max-width: 8.3333333333%; } + .cell-sm-offset-1 { + margin-left: 8.3333333333%; } + .cell-sm-2 { + -webkit-flex-basis: 16.6666666667%; + -ms-flex-preferred-size: 16.6666666667%; + flex-basis: 16.6666666667%; + max-width: 16.6666666667%; } + .cell-sm-offset-2 { + margin-left: 16.6666666667%; } + .cell-sm-3 { + -webkit-flex-basis: 25%; + -ms-flex-preferred-size: 25%; + flex-basis: 25%; + max-width: 25%; } + .cell-sm-offset-3 { + margin-left: 25%; } + .cell-sm-4 { + -webkit-flex-basis: 33.3333333333%; + -ms-flex-preferred-size: 33.3333333333%; + flex-basis: 33.3333333333%; + max-width: 33.3333333333%; } + .cell-sm-offset-4 { + margin-left: 33.3333333333%; } + .cell-sm-5 { + -webkit-flex-basis: 41.6666666667%; + -ms-flex-preferred-size: 41.6666666667%; + flex-basis: 41.6666666667%; + max-width: 41.6666666667%; } + .cell-sm-offset-5 { + margin-left: 41.6666666667%; } + .cell-sm-6 { + -webkit-flex-basis: 50%; + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + max-width: 50%; } + .cell-sm-offset-6 { + margin-left: 50%; } + .cell-sm-7 { + -webkit-flex-basis: 58.3333333333%; + -ms-flex-preferred-size: 58.3333333333%; + flex-basis: 58.3333333333%; + max-width: 58.3333333333%; } + .cell-sm-offset-7 { + margin-left: 58.3333333333%; } + .cell-sm-8 { + -webkit-flex-basis: 66.6666666667%; + -ms-flex-preferred-size: 66.6666666667%; + flex-basis: 66.6666666667%; + max-width: 66.6666666667%; } + .cell-sm-offset-8 { + margin-left: 66.6666666667%; } + .cell-sm-9 { + -webkit-flex-basis: 75%; + -ms-flex-preferred-size: 75%; + flex-basis: 75%; + max-width: 75%; } + .cell-sm-offset-9 { + margin-left: 75%; } + .cell-sm-10 { + -webkit-flex-basis: 83.3333333333%; + -ms-flex-preferred-size: 83.3333333333%; + flex-basis: 83.3333333333%; + max-width: 83.3333333333%; } + .cell-sm-offset-10 { + margin-left: 83.3333333333%; } + .cell-sm-11 { + -webkit-flex-basis: 91.6666666667%; + -ms-flex-preferred-size: 91.6666666667%; + flex-basis: 91.6666666667%; + max-width: 91.6666666667%; } + .cell-sm-offset-11 { + margin-left: 91.6666666667%; } + .cell-sm-12 { + -webkit-flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; } + .cell-sm-offset-12 { + margin-left: 100%; } } + +@media (min-width: 64em) { + .grid { + width: 64em; } + .cell-md-auto { + -webkit-box-flex: 0; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; } + .cell-md-1 { + -webkit-flex-basis: 8.3333333333%; + -ms-flex-preferred-size: 8.3333333333%; + flex-basis: 8.3333333333%; + max-width: 8.3333333333%; } + .cell-md-offset-1 { + margin-left: 8.3333333333%; } + .cell-md-2 { + -webkit-flex-basis: 16.6666666667%; + -ms-flex-preferred-size: 16.6666666667%; + flex-basis: 16.6666666667%; + max-width: 16.6666666667%; } + .cell-md-offset-2 { + margin-left: 16.6666666667%; } + .cell-md-3 { + -webkit-flex-basis: 25%; + -ms-flex-preferred-size: 25%; + flex-basis: 25%; + max-width: 25%; } + .cell-md-offset-3 { + margin-left: 25%; } + .cell-md-4 { + -webkit-flex-basis: 33.3333333333%; + -ms-flex-preferred-size: 33.3333333333%; + flex-basis: 33.3333333333%; + max-width: 33.3333333333%; } + .cell-md-offset-4 { + margin-left: 33.3333333333%; } + .cell-md-5 { + -webkit-flex-basis: 41.6666666667%; + -ms-flex-preferred-size: 41.6666666667%; + flex-basis: 41.6666666667%; + max-width: 41.6666666667%; } + .cell-md-offset-5 { + margin-left: 41.6666666667%; } + .cell-md-6 { + -webkit-flex-basis: 50%; + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + max-width: 50%; } + .cell-md-offset-6 { + margin-left: 50%; } + .cell-md-7 { + -webkit-flex-basis: 58.3333333333%; + -ms-flex-preferred-size: 58.3333333333%; + flex-basis: 58.3333333333%; + max-width: 58.3333333333%; } + .cell-md-offset-7 { + margin-left: 58.3333333333%; } + .cell-md-8 { + -webkit-flex-basis: 66.6666666667%; + -ms-flex-preferred-size: 66.6666666667%; + flex-basis: 66.6666666667%; + max-width: 66.6666666667%; } + .cell-md-offset-8 { + margin-left: 66.6666666667%; } + .cell-md-9 { + -webkit-flex-basis: 75%; + -ms-flex-preferred-size: 75%; + flex-basis: 75%; + max-width: 75%; } + .cell-md-offset-9 { + margin-left: 75%; } + .cell-md-10 { + -webkit-flex-basis: 83.3333333333%; + -ms-flex-preferred-size: 83.3333333333%; + flex-basis: 83.3333333333%; + max-width: 83.3333333333%; } + .cell-md-offset-10 { + margin-left: 83.3333333333%; } + .cell-md-11 { + -webkit-flex-basis: 91.6666666667%; + -ms-flex-preferred-size: 91.6666666667%; + flex-basis: 91.6666666667%; + max-width: 91.6666666667%; } + .cell-md-offset-11 { + margin-left: 91.6666666667%; } + .cell-md-12 { + -webkit-flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; } + .cell-md-offset-12 { + margin-left: 100%; } } + +@media (min-width: 90em) { + .grid { + width: 90em; } + .cell-lg-auto { + -webkit-box-flex: 0; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; } + .cell-lg-1 { + -webkit-flex-basis: 8.3333333333%; + -ms-flex-preferred-size: 8.3333333333%; + flex-basis: 8.3333333333%; + max-width: 8.3333333333%; } + .cell-lg-offset-1 { + margin-left: 8.3333333333%; } + .cell-lg-2 { + -webkit-flex-basis: 16.6666666667%; + -ms-flex-preferred-size: 16.6666666667%; + flex-basis: 16.6666666667%; + max-width: 16.6666666667%; } + .cell-lg-offset-2 { + margin-left: 16.6666666667%; } + .cell-lg-3 { + -webkit-flex-basis: 25%; + -ms-flex-preferred-size: 25%; + flex-basis: 25%; + max-width: 25%; } + .cell-lg-offset-3 { + margin-left: 25%; } + .cell-lg-4 { + -webkit-flex-basis: 33.3333333333%; + -ms-flex-preferred-size: 33.3333333333%; + flex-basis: 33.3333333333%; + max-width: 33.3333333333%; } + .cell-lg-offset-4 { + margin-left: 33.3333333333%; } + .cell-lg-5 { + -webkit-flex-basis: 41.6666666667%; + -ms-flex-preferred-size: 41.6666666667%; + flex-basis: 41.6666666667%; + max-width: 41.6666666667%; } + .cell-lg-offset-5 { + margin-left: 41.6666666667%; } + .cell-lg-6 { + -webkit-flex-basis: 50%; + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + max-width: 50%; } + .cell-lg-offset-6 { + margin-left: 50%; } + .cell-lg-7 { + -webkit-flex-basis: 58.3333333333%; + -ms-flex-preferred-size: 58.3333333333%; + flex-basis: 58.3333333333%; + max-width: 58.3333333333%; } + .cell-lg-offset-7 { + margin-left: 58.3333333333%; } + .cell-lg-8 { + -webkit-flex-basis: 66.6666666667%; + -ms-flex-preferred-size: 66.6666666667%; + flex-basis: 66.6666666667%; + max-width: 66.6666666667%; } + .cell-lg-offset-8 { + margin-left: 66.6666666667%; } + .cell-lg-9 { + -webkit-flex-basis: 75%; + -ms-flex-preferred-size: 75%; + flex-basis: 75%; + max-width: 75%; } + .cell-lg-offset-9 { + margin-left: 75%; } + .cell-lg-10 { + -webkit-flex-basis: 83.3333333333%; + -ms-flex-preferred-size: 83.3333333333%; + flex-basis: 83.3333333333%; + max-width: 83.3333333333%; } + .cell-lg-offset-10 { + margin-left: 83.3333333333%; } + .cell-lg-11 { + -webkit-flex-basis: 91.6666666667%; + -ms-flex-preferred-size: 91.6666666667%; + flex-basis: 91.6666666667%; + max-width: 91.6666666667%; } + .cell-lg-offset-11 { + margin-left: 91.6666666667%; } + .cell-lg-12 { + -webkit-flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; } + .cell-lg-offset-12 { + margin-left: 100%; } } + +@media (min-width: 120em) { + .grid { + width: 120em; } + .cell-xl-auto { + -webkit-box-flex: 0; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; } + .cell-xl-1 { + -webkit-flex-basis: 8.3333333333%; + -ms-flex-preferred-size: 8.3333333333%; + flex-basis: 8.3333333333%; + max-width: 8.3333333333%; } + .cell-xl-offset-1 { + margin-left: 8.3333333333%; } + .cell-xl-2 { + -webkit-flex-basis: 16.6666666667%; + -ms-flex-preferred-size: 16.6666666667%; + flex-basis: 16.6666666667%; + max-width: 16.6666666667%; } + .cell-xl-offset-2 { + margin-left: 16.6666666667%; } + .cell-xl-3 { + -webkit-flex-basis: 25%; + -ms-flex-preferred-size: 25%; + flex-basis: 25%; + max-width: 25%; } + .cell-xl-offset-3 { + margin-left: 25%; } + .cell-xl-4 { + -webkit-flex-basis: 33.3333333333%; + -ms-flex-preferred-size: 33.3333333333%; + flex-basis: 33.3333333333%; + max-width: 33.3333333333%; } + .cell-xl-offset-4 { + margin-left: 33.3333333333%; } + .cell-xl-5 { + -webkit-flex-basis: 41.6666666667%; + -ms-flex-preferred-size: 41.6666666667%; + flex-basis: 41.6666666667%; + max-width: 41.6666666667%; } + .cell-xl-offset-5 { + margin-left: 41.6666666667%; } + .cell-xl-6 { + -webkit-flex-basis: 50%; + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + max-width: 50%; } + .cell-xl-offset-6 { + margin-left: 50%; } + .cell-xl-7 { + -webkit-flex-basis: 58.3333333333%; + -ms-flex-preferred-size: 58.3333333333%; + flex-basis: 58.3333333333%; + max-width: 58.3333333333%; } + .cell-xl-offset-7 { + margin-left: 58.3333333333%; } + .cell-xl-8 { + -webkit-flex-basis: 66.6666666667%; + -ms-flex-preferred-size: 66.6666666667%; + flex-basis: 66.6666666667%; + max-width: 66.6666666667%; } + .cell-xl-offset-8 { + margin-left: 66.6666666667%; } + .cell-xl-9 { + -webkit-flex-basis: 75%; + -ms-flex-preferred-size: 75%; + flex-basis: 75%; + max-width: 75%; } + .cell-xl-offset-9 { + margin-left: 75%; } + .cell-xl-10 { + -webkit-flex-basis: 83.3333333333%; + -ms-flex-preferred-size: 83.3333333333%; + flex-basis: 83.3333333333%; + max-width: 83.3333333333%; } + .cell-xl-offset-10 { + margin-left: 83.3333333333%; } + .cell-xl-11 { + -webkit-flex-basis: 91.6666666667%; + -ms-flex-preferred-size: 91.6666666667%; + flex-basis: 91.6666666667%; + max-width: 91.6666666667%; } + .cell-xl-offset-11 { + margin-left: 91.6666666667%; } + .cell-xl-12 { + -webkit-flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; } + .cell-xl-offset-12 { + margin-left: 100%; } } + +.row, .column, [class*="cell"] { + padding: 1em; + background-color: #888888; + background-color: rgba(136, 136, 136, 0.3); + border-radius: 3px; } + +.cell-content { + border: 1px solid red; } + +html, body { + width: 100%; + height: 100%; + padding: 0; + margin: 0; } \ No newline at end of file diff --git a/dist/css/gridle.css.diff b/dist/css/gridle.css.diff new file mode 100644 index 0000000..f3a8ee5 --- /dev/null +++ b/dist/css/gridle.css.diff @@ -0,0 +1,506 @@ +Index: dist/css/gridle.css +=================================================================== +--- dist/css/gridle.css ++++ dist/css/gridle.css +@@ -16,23 +16,41 @@ + height: 100%; } + + .row, + .column { ++ display: -webkit-box; ++ display: -webkit-flex; ++ display: -ms-flexbox; + display: flex; } + + .row { +- flex: 0 1 auto; +- flex-direction: row; +- flex-wrap: wrap; ++ -webkit-box-flex: 0; ++ -webkit-flex: 0 1 auto; ++ -ms-flex: 0 1 auto; ++ flex: 0 1 auto; ++ -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-left: 0; + margin-right: 0; } + .row--reverse { +- flex-direction: row-reverse; } ++ -webkit-box-orient: horizontal; ++ -webkit-box-direction: reverse; ++ -webkit-flex-direction: row-reverse; ++ -ms-flex-direction: row-reverse; ++ flex-direction: row-reverse; } + + [class*="cell"] { + margin-left: 0; + margin-right: 0; +- flex-basis: 100%; ++ -webkit-flex-basis: 100%; ++ -ms-flex-preferred-size: 100%; ++ flex-basis: 100%; + max-width: 100%; } + + .cell-sm, + .cell-sm-1, +@@ -130,272 +148,390 @@ + .cell-xl-11, + .cell-xl-offset-11, + .cell-xl-12, + .cell-xl-offset-12 { ++ display: -webkit-box; ++ display: -webkit-flex; ++ display: -ms-flexbox; + display: flex; +- flex: 1 0 auto; +- flex-direction: column; } ++ -webkit-box-flex: 1; ++ -webkit-flex: 1 0 auto; ++ -ms-flex: 1 0 auto; ++ flex: 1 0 auto; ++ -webkit-box-orient: vertical; ++ -webkit-box-direction: normal; ++ -webkit-flex-direction: column; ++ -ms-flex-direction: column; ++ flex-direction: column; } + + @media (min-width: 40em) { + .grid { + width: 40em; } + .cell-sm-auto { +- flex: 0 1 auto; } ++ -webkit-box-flex: 0; ++ -webkit-flex: 0 1 auto; ++ -ms-flex: 0 1 auto; ++ flex: 0 1 auto; } + .cell-sm-1 { +- flex-basis: 8.3333333333%; ++ -webkit-flex-basis: 8.3333333333%; ++ -ms-flex-preferred-size: 8.3333333333%; ++ flex-basis: 8.3333333333%; + max-width: 8.3333333333%; } + .cell-sm-offset-1 { + margin-left: 8.3333333333%; } + .cell-sm-2 { +- flex-basis: 16.6666666667%; ++ -webkit-flex-basis: 16.6666666667%; ++ -ms-flex-preferred-size: 16.6666666667%; ++ flex-basis: 16.6666666667%; + max-width: 16.6666666667%; } + .cell-sm-offset-2 { + margin-left: 16.6666666667%; } + .cell-sm-3 { +- flex-basis: 25%; ++ -webkit-flex-basis: 25%; ++ -ms-flex-preferred-size: 25%; ++ flex-basis: 25%; + max-width: 25%; } + .cell-sm-offset-3 { + margin-left: 25%; } + .cell-sm-4 { +- flex-basis: 33.3333333333%; ++ -webkit-flex-basis: 33.3333333333%; ++ -ms-flex-preferred-size: 33.3333333333%; ++ flex-basis: 33.3333333333%; + max-width: 33.3333333333%; } + .cell-sm-offset-4 { + margin-left: 33.3333333333%; } + .cell-sm-5 { +- flex-basis: 41.6666666667%; ++ -webkit-flex-basis: 41.6666666667%; ++ -ms-flex-preferred-size: 41.6666666667%; ++ flex-basis: 41.6666666667%; + max-width: 41.6666666667%; } + .cell-sm-offset-5 { + margin-left: 41.6666666667%; } + .cell-sm-6 { +- flex-basis: 50%; ++ -webkit-flex-basis: 50%; ++ -ms-flex-preferred-size: 50%; ++ flex-basis: 50%; + max-width: 50%; } + .cell-sm-offset-6 { + margin-left: 50%; } + .cell-sm-7 { +- flex-basis: 58.3333333333%; ++ -webkit-flex-basis: 58.3333333333%; ++ -ms-flex-preferred-size: 58.3333333333%; ++ flex-basis: 58.3333333333%; + max-width: 58.3333333333%; } + .cell-sm-offset-7 { + margin-left: 58.3333333333%; } + .cell-sm-8 { +- flex-basis: 66.6666666667%; ++ -webkit-flex-basis: 66.6666666667%; ++ -ms-flex-preferred-size: 66.6666666667%; ++ flex-basis: 66.6666666667%; + max-width: 66.6666666667%; } + .cell-sm-offset-8 { + margin-left: 66.6666666667%; } + .cell-sm-9 { +- flex-basis: 75%; ++ -webkit-flex-basis: 75%; ++ -ms-flex-preferred-size: 75%; ++ flex-basis: 75%; + max-width: 75%; } + .cell-sm-offset-9 { + margin-left: 75%; } + .cell-sm-10 { +- flex-basis: 83.3333333333%; ++ -webkit-flex-basis: 83.3333333333%; ++ -ms-flex-preferred-size: 83.3333333333%; ++ flex-basis: 83.3333333333%; + max-width: 83.3333333333%; } + .cell-sm-offset-10 { + margin-left: 83.3333333333%; } + .cell-sm-11 { +- flex-basis: 91.6666666667%; ++ -webkit-flex-basis: 91.6666666667%; ++ -ms-flex-preferred-size: 91.6666666667%; ++ flex-basis: 91.6666666667%; + max-width: 91.6666666667%; } + .cell-sm-offset-11 { + margin-left: 91.6666666667%; } + .cell-sm-12 { +- flex-basis: 100%; ++ -webkit-flex-basis: 100%; ++ -ms-flex-preferred-size: 100%; ++ flex-basis: 100%; + max-width: 100%; } + .cell-sm-offset-12 { + margin-left: 100%; } } + + @media (min-width: 64em) { + .grid { + width: 64em; } + .cell-md-auto { +- flex: 0 1 auto; } ++ -webkit-box-flex: 0; ++ -webkit-flex: 0 1 auto; ++ -ms-flex: 0 1 auto; ++ flex: 0 1 auto; } + .cell-md-1 { +- flex-basis: 8.3333333333%; ++ -webkit-flex-basis: 8.3333333333%; ++ -ms-flex-preferred-size: 8.3333333333%; ++ flex-basis: 8.3333333333%; + max-width: 8.3333333333%; } + .cell-md-offset-1 { + margin-left: 8.3333333333%; } + .cell-md-2 { +- flex-basis: 16.6666666667%; ++ -webkit-flex-basis: 16.6666666667%; ++ -ms-flex-preferred-size: 16.6666666667%; ++ flex-basis: 16.6666666667%; + max-width: 16.6666666667%; } + .cell-md-offset-2 { + margin-left: 16.6666666667%; } + .cell-md-3 { +- flex-basis: 25%; ++ -webkit-flex-basis: 25%; ++ -ms-flex-preferred-size: 25%; ++ flex-basis: 25%; + max-width: 25%; } + .cell-md-offset-3 { + margin-left: 25%; } + .cell-md-4 { +- flex-basis: 33.3333333333%; ++ -webkit-flex-basis: 33.3333333333%; ++ -ms-flex-preferred-size: 33.3333333333%; ++ flex-basis: 33.3333333333%; + max-width: 33.3333333333%; } + .cell-md-offset-4 { + margin-left: 33.3333333333%; } + .cell-md-5 { +- flex-basis: 41.6666666667%; ++ -webkit-flex-basis: 41.6666666667%; ++ -ms-flex-preferred-size: 41.6666666667%; ++ flex-basis: 41.6666666667%; + max-width: 41.6666666667%; } + .cell-md-offset-5 { + margin-left: 41.6666666667%; } + .cell-md-6 { +- flex-basis: 50%; ++ -webkit-flex-basis: 50%; ++ -ms-flex-preferred-size: 50%; ++ flex-basis: 50%; + max-width: 50%; } + .cell-md-offset-6 { + margin-left: 50%; } + .cell-md-7 { +- flex-basis: 58.3333333333%; ++ -webkit-flex-basis: 58.3333333333%; ++ -ms-flex-preferred-size: 58.3333333333%; ++ flex-basis: 58.3333333333%; + max-width: 58.3333333333%; } + .cell-md-offset-7 { + margin-left: 58.3333333333%; } + .cell-md-8 { +- flex-basis: 66.6666666667%; ++ -webkit-flex-basis: 66.6666666667%; ++ -ms-flex-preferred-size: 66.6666666667%; ++ flex-basis: 66.6666666667%; + max-width: 66.6666666667%; } + .cell-md-offset-8 { + margin-left: 66.6666666667%; } + .cell-md-9 { +- flex-basis: 75%; ++ -webkit-flex-basis: 75%; ++ -ms-flex-preferred-size: 75%; ++ flex-basis: 75%; + max-width: 75%; } + .cell-md-offset-9 { + margin-left: 75%; } + .cell-md-10 { +- flex-basis: 83.3333333333%; ++ -webkit-flex-basis: 83.3333333333%; ++ -ms-flex-preferred-size: 83.3333333333%; ++ flex-basis: 83.3333333333%; + max-width: 83.3333333333%; } + .cell-md-offset-10 { + margin-left: 83.3333333333%; } + .cell-md-11 { +- flex-basis: 91.6666666667%; ++ -webkit-flex-basis: 91.6666666667%; ++ -ms-flex-preferred-size: 91.6666666667%; ++ flex-basis: 91.6666666667%; + max-width: 91.6666666667%; } + .cell-md-offset-11 { + margin-left: 91.6666666667%; } + .cell-md-12 { +- flex-basis: 100%; ++ -webkit-flex-basis: 100%; ++ -ms-flex-preferred-size: 100%; ++ flex-basis: 100%; + max-width: 100%; } + .cell-md-offset-12 { + margin-left: 100%; } } + + @media (min-width: 90em) { + .grid { + width: 90em; } + .cell-lg-auto { +- flex: 0 1 auto; } ++ -webkit-box-flex: 0; ++ -webkit-flex: 0 1 auto; ++ -ms-flex: 0 1 auto; ++ flex: 0 1 auto; } + .cell-lg-1 { +- flex-basis: 8.3333333333%; ++ -webkit-flex-basis: 8.3333333333%; ++ -ms-flex-preferred-size: 8.3333333333%; ++ flex-basis: 8.3333333333%; + max-width: 8.3333333333%; } + .cell-lg-offset-1 { + margin-left: 8.3333333333%; } + .cell-lg-2 { +- flex-basis: 16.6666666667%; ++ -webkit-flex-basis: 16.6666666667%; ++ -ms-flex-preferred-size: 16.6666666667%; ++ flex-basis: 16.6666666667%; + max-width: 16.6666666667%; } + .cell-lg-offset-2 { + margin-left: 16.6666666667%; } + .cell-lg-3 { +- flex-basis: 25%; ++ -webkit-flex-basis: 25%; ++ -ms-flex-preferred-size: 25%; ++ flex-basis: 25%; + max-width: 25%; } + .cell-lg-offset-3 { + margin-left: 25%; } + .cell-lg-4 { +- flex-basis: 33.3333333333%; ++ -webkit-flex-basis: 33.3333333333%; ++ -ms-flex-preferred-size: 33.3333333333%; ++ flex-basis: 33.3333333333%; + max-width: 33.3333333333%; } + .cell-lg-offset-4 { + margin-left: 33.3333333333%; } + .cell-lg-5 { +- flex-basis: 41.6666666667%; ++ -webkit-flex-basis: 41.6666666667%; ++ -ms-flex-preferred-size: 41.6666666667%; ++ flex-basis: 41.6666666667%; + max-width: 41.6666666667%; } + .cell-lg-offset-5 { + margin-left: 41.6666666667%; } + .cell-lg-6 { +- flex-basis: 50%; ++ -webkit-flex-basis: 50%; ++ -ms-flex-preferred-size: 50%; ++ flex-basis: 50%; + max-width: 50%; } + .cell-lg-offset-6 { + margin-left: 50%; } + .cell-lg-7 { +- flex-basis: 58.3333333333%; ++ -webkit-flex-basis: 58.3333333333%; ++ -ms-flex-preferred-size: 58.3333333333%; ++ flex-basis: 58.3333333333%; + max-width: 58.3333333333%; } + .cell-lg-offset-7 { + margin-left: 58.3333333333%; } + .cell-lg-8 { +- flex-basis: 66.6666666667%; ++ -webkit-flex-basis: 66.6666666667%; ++ -ms-flex-preferred-size: 66.6666666667%; ++ flex-basis: 66.6666666667%; + max-width: 66.6666666667%; } + .cell-lg-offset-8 { + margin-left: 66.6666666667%; } + .cell-lg-9 { +- flex-basis: 75%; ++ -webkit-flex-basis: 75%; ++ -ms-flex-preferred-size: 75%; ++ flex-basis: 75%; + max-width: 75%; } + .cell-lg-offset-9 { + margin-left: 75%; } + .cell-lg-10 { +- flex-basis: 83.3333333333%; ++ -webkit-flex-basis: 83.3333333333%; ++ -ms-flex-preferred-size: 83.3333333333%; ++ flex-basis: 83.3333333333%; + max-width: 83.3333333333%; } + .cell-lg-offset-10 { + margin-left: 83.3333333333%; } + .cell-lg-11 { +- flex-basis: 91.6666666667%; ++ -webkit-flex-basis: 91.6666666667%; ++ -ms-flex-preferred-size: 91.6666666667%; ++ flex-basis: 91.6666666667%; + max-width: 91.6666666667%; } + .cell-lg-offset-11 { + margin-left: 91.6666666667%; } + .cell-lg-12 { +- flex-basis: 100%; ++ -webkit-flex-basis: 100%; ++ -ms-flex-preferred-size: 100%; ++ flex-basis: 100%; + max-width: 100%; } + .cell-lg-offset-12 { + margin-left: 100%; } } + + @media (min-width: 120em) { + .grid { + width: 120em; } + .cell-xl-auto { +- flex: 0 1 auto; } ++ -webkit-box-flex: 0; ++ -webkit-flex: 0 1 auto; ++ -ms-flex: 0 1 auto; ++ flex: 0 1 auto; } + .cell-xl-1 { +- flex-basis: 8.3333333333%; ++ -webkit-flex-basis: 8.3333333333%; ++ -ms-flex-preferred-size: 8.3333333333%; ++ flex-basis: 8.3333333333%; + max-width: 8.3333333333%; } + .cell-xl-offset-1 { + margin-left: 8.3333333333%; } + .cell-xl-2 { +- flex-basis: 16.6666666667%; ++ -webkit-flex-basis: 16.6666666667%; ++ -ms-flex-preferred-size: 16.6666666667%; ++ flex-basis: 16.6666666667%; + max-width: 16.6666666667%; } + .cell-xl-offset-2 { + margin-left: 16.6666666667%; } + .cell-xl-3 { +- flex-basis: 25%; ++ -webkit-flex-basis: 25%; ++ -ms-flex-preferred-size: 25%; ++ flex-basis: 25%; + max-width: 25%; } + .cell-xl-offset-3 { + margin-left: 25%; } + .cell-xl-4 { +- flex-basis: 33.3333333333%; ++ -webkit-flex-basis: 33.3333333333%; ++ -ms-flex-preferred-size: 33.3333333333%; ++ flex-basis: 33.3333333333%; + max-width: 33.3333333333%; } + .cell-xl-offset-4 { + margin-left: 33.3333333333%; } + .cell-xl-5 { +- flex-basis: 41.6666666667%; ++ -webkit-flex-basis: 41.6666666667%; ++ -ms-flex-preferred-size: 41.6666666667%; ++ flex-basis: 41.6666666667%; + max-width: 41.6666666667%; } + .cell-xl-offset-5 { + margin-left: 41.6666666667%; } + .cell-xl-6 { +- flex-basis: 50%; ++ -webkit-flex-basis: 50%; ++ -ms-flex-preferred-size: 50%; ++ flex-basis: 50%; + max-width: 50%; } + .cell-xl-offset-6 { + margin-left: 50%; } + .cell-xl-7 { +- flex-basis: 58.3333333333%; ++ -webkit-flex-basis: 58.3333333333%; ++ -ms-flex-preferred-size: 58.3333333333%; ++ flex-basis: 58.3333333333%; + max-width: 58.3333333333%; } + .cell-xl-offset-7 { + margin-left: 58.3333333333%; } + .cell-xl-8 { +- flex-basis: 66.6666666667%; ++ -webkit-flex-basis: 66.6666666667%; ++ -ms-flex-preferred-size: 66.6666666667%; ++ flex-basis: 66.6666666667%; + max-width: 66.6666666667%; } + .cell-xl-offset-8 { + margin-left: 66.6666666667%; } + .cell-xl-9 { +- flex-basis: 75%; ++ -webkit-flex-basis: 75%; ++ -ms-flex-preferred-size: 75%; ++ flex-basis: 75%; + max-width: 75%; } + .cell-xl-offset-9 { + margin-left: 75%; } + .cell-xl-10 { +- flex-basis: 83.3333333333%; ++ -webkit-flex-basis: 83.3333333333%; ++ -ms-flex-preferred-size: 83.3333333333%; ++ flex-basis: 83.3333333333%; + max-width: 83.3333333333%; } + .cell-xl-offset-10 { + margin-left: 83.3333333333%; } + .cell-xl-11 { +- flex-basis: 91.6666666667%; ++ -webkit-flex-basis: 91.6666666667%; ++ -ms-flex-preferred-size: 91.6666666667%; ++ flex-basis: 91.6666666667%; + max-width: 91.6666666667%; } + .cell-xl-offset-11 { + margin-left: 91.6666666667%; } + .cell-xl-12 { +- flex-basis: 100%; ++ -webkit-flex-basis: 100%; ++ -ms-flex-preferred-size: 100%; ++ flex-basis: 100%; + max-width: 100%; } + .cell-xl-offset-12 { + margin-left: 100%; } } + +@@ -410,7 +546,5 @@ + html, body { + width: 100%; + height: 100%; + padding: 0; +- margin: 0; } +- +-/*# sourceMappingURL=gridle.css.map */ +\ No newline at end of file ++ margin: 0; } diff --git a/dist/css/gridle.css.map b/dist/css/gridle.css.map new file mode 100644 index 0000000..26c4fad --- /dev/null +++ b/dist/css/gridle.css.map @@ -0,0 +1,12 @@ +{ + "version": 3, + "file": "gridle.css", + "sources": [ + "../../sass/gridle.scss", + "../../sass/config.scss", + "../../sass/gridlecss/mixins.scss", + "../../sass/gridlecss/_media.scss" + ], + "mappings": "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", + "names": [] +} \ No newline at end of file diff --git a/dist/gridle.css b/dist/gridle.css deleted file mode 100644 index 9963f62..0000000 --- a/dist/gridle.css +++ /dev/null @@ -1,580 +0,0 @@ -:root { - --grid-sm-container: calc( 768px); - --grid-md-container: calc( 982px); - --grid-lg-container: calc( 1200px); - --grid-gutter: 0; - --grid-gutter-calc: calc( var(--grid-gutter) / 2); } - -*, -*:before, -*:after { - box-sizing: border-box; } - -.grid, -.grid--fluid { - margin-left: auto; - margin-right: auto; - width: 100%; - height: 100%; } - -.row, -.column { - display: flex; } - -.row { - flex: 0 1 auto; - flex-direction: row; - flex-wrap: wrap; - margin-left: -var(--grid-gutter-calc); - margin-right: -var(--grid-gutter-calc); } - .row--reverse { - flex-direction: row-reverse; } - -.column { - flex-direction: column; } - .column--reverse { - flex-direction: column-reverse; } - -.distribute-around { - justify-content: space-around; } - -.distribute-between { - justify-content: space-between; } - -.align-center { - justify-content: center; - text-align: center; } - -.align-right { - justify-content: flex-end; - text-align: flex-end; } - -.align-top { - align-items: flex-start; } - -.align-middle { - align-items: center; } - -.align-bottom { - align-items: flex-end; } - -.align-baseline { - align-items: baseline; } - -.align-stretch { - align-items: stretch; } - -.cell { - margin-left: var(--grid-gutter-calc); - margin-right: var(--grid-gutter-calc); - flex-basis: 100%; - max-width: 100%; } - .cell-order--first { - order: -1; } - .cell-order--last { - order: 1; } - .cell-align--center { - align-self: center; } - .cell-align--right { - align-self: flex-end; } - .cell-align--top { - align-self: flex-start; } - .cell-align--middle { - align-self: center; } - .cell-align--bottom { - align-self: flex-end; } - .cell-align--baseline { - align-self: baseline; } - .cell-align--stretch { - align-self: stretch; } - -.cell-xs, -.cell-xs-1, -.cell-xs-offset-1, .cell-xs-2, -.cell-xs-offset-2, .cell-xs-3, -.cell-xs-offset-3, .cell-xs-4, -.cell-xs-offset-4, .cell-xs-5, -.cell-xs-offset-5, .cell-xs-6, -.cell-xs-offset-6, .cell-xs-7, -.cell-xs-offset-7, .cell-xs-8, -.cell-xs-offset-8, .cell-xs-9, -.cell-xs-offset-9, .cell-xs-10, -.cell-xs-offset-10, .cell-xs-11, -.cell-xs-offset-11, .cell-xs-12, -.cell-xs-offset-12, .cell-sm, -.cell-sm-1, -.cell-sm-offset-1, .cell-sm-2, -.cell-sm-offset-2, .cell-sm-3, -.cell-sm-offset-3, .cell-sm-4, -.cell-sm-offset-4, .cell-sm-5, -.cell-sm-offset-5, .cell-sm-6, -.cell-sm-offset-6, .cell-sm-7, -.cell-sm-offset-7, .cell-sm-8, -.cell-sm-offset-8, .cell-sm-9, -.cell-sm-offset-9, .cell-sm-10, -.cell-sm-offset-10, .cell-sm-11, -.cell-sm-offset-11, .cell-sm-12, -.cell-sm-offset-12, .cell-md, -.cell-md-1, -.cell-md-offset-1, .cell-md-2, -.cell-md-offset-2, .cell-md-3, -.cell-md-offset-3, .cell-md-4, -.cell-md-offset-4, .cell-md-5, -.cell-md-offset-5, .cell-md-6, -.cell-md-offset-6, .cell-md-7, -.cell-md-offset-7, .cell-md-8, -.cell-md-offset-8, .cell-md-9, -.cell-md-offset-9, .cell-md-10, -.cell-md-offset-10, .cell-md-11, -.cell-md-offset-11, .cell-md-12, -.cell-md-offset-12, .cell-lg, -.cell-lg-1, -.cell-lg-offset-1, .cell-lg-2, -.cell-lg-offset-2, .cell-lg-3, -.cell-lg-offset-3, .cell-lg-4, -.cell-lg-offset-4, .cell-lg-5, -.cell-lg-offset-5, .cell-lg-6, -.cell-lg-offset-6, .cell-lg-7, -.cell-lg-offset-7, .cell-lg-8, -.cell-lg-offset-8, .cell-lg-9, -.cell-lg-offset-9, .cell-lg-10, -.cell-lg-offset-10, .cell-lg-11, -.cell-lg-offset-11, .cell-lg-12, -.cell-lg-offset-12 { - display: flex; - flex: 1 0 auto; - flex-direction: column; } - -@media only screen { - .grid { - width: var(--grid-xs-container); } - .distribute-xs-around { - justify-content: space-around; } - .distribute-xs-between { - justify-content: space-between; } - .align-xs-center { - justify-content: center; - text-align: center; } - .align-xs-right { - justify-content: flex-end; - text-align: flex-end; } - .align-xs-top { - align-items: flex-start; } - .align-xs-middle { - align-items: center; } - .align-xs-bottom { - align-items: flex-end; } - .align-xs-baseline { - align-items: baseline; } - .align-xs-stretch { - align-items: stretch; } - .cell-xs { - flex: 1 0; - flex-basis: 0; - max-width: 100%; } - .cell-xs-order--first { - order: -1; } - .cell-xs-order--last { - order: 1; } - .cell-xs-offset { - margin-left: 0 !important; } - .cell-xs-align--center { - align-self: center; } - .cell-xs-align--right { - align-self: flex-end; } - .cell-xs-align--top { - align-self: flex-start; } - .cell-xs-align--middle { - align-self: center; } - .cell-xs-align--bottom { - align-self: flex-end; } - .cell-xs-align--baseline { - align-self: baseline; } - .cell-xs-align--stretch { - align-self: stretch; } - .cell-xs-1 { - flex-basis: 8.3333333333%; - max-width: 8.3333333333%; } - .cell-xs-offset-1 { - margin-left: 8.3333333333% !important; } - .cell-xs-2 { - flex-basis: 16.6666666667%; - max-width: 16.6666666667%; } - .cell-xs-offset-2 { - margin-left: 16.6666666667% !important; } - .cell-xs-3 { - flex-basis: 25%; - max-width: 25%; } - .cell-xs-offset-3 { - margin-left: 25% !important; } - .cell-xs-4 { - flex-basis: 33.3333333333%; - max-width: 33.3333333333%; } - .cell-xs-offset-4 { - margin-left: 33.3333333333% !important; } - .cell-xs-5 { - flex-basis: 41.6666666667%; - max-width: 41.6666666667%; } - .cell-xs-offset-5 { - margin-left: 41.6666666667% !important; } - .cell-xs-6 { - flex-basis: 50%; - max-width: 50%; } - .cell-xs-offset-6 { - margin-left: 50% !important; } - .cell-xs-7 { - flex-basis: 58.3333333333%; - max-width: 58.3333333333%; } - .cell-xs-offset-7 { - margin-left: 58.3333333333% !important; } - .cell-xs-8 { - flex-basis: 66.6666666667%; - max-width: 66.6666666667%; } - .cell-xs-offset-8 { - margin-left: 66.6666666667% !important; } - .cell-xs-9 { - flex-basis: 75%; - max-width: 75%; } - .cell-xs-offset-9 { - margin-left: 75% !important; } - .cell-xs-10 { - flex-basis: 83.3333333333%; - max-width: 83.3333333333%; } - .cell-xs-offset-10 { - margin-left: 83.3333333333% !important; } - .cell-xs-11 { - flex-basis: 91.6666666667%; - max-width: 91.6666666667%; } - .cell-xs-offset-11 { - margin-left: 91.6666666667% !important; } - .cell-xs-12 { - flex-basis: 100%; - max-width: 100%; } - .cell-xs-offset-12 { - margin-left: 100% !important; } } - -@media only screen and (min-width: 768px) { - .grid { - width: var(--grid-sm-container); } - .distribute-sm-around { - justify-content: space-around; } - .distribute-sm-between { - justify-content: space-between; } - .align-sm-center { - justify-content: center; - text-align: center; } - .align-sm-right { - justify-content: flex-end; - text-align: flex-end; } - .align-sm-top { - align-items: flex-start; } - .align-sm-middle { - align-items: center; } - .align-sm-bottom { - align-items: flex-end; } - .align-sm-baseline { - align-items: baseline; } - .align-sm-stretch { - align-items: stretch; } - .cell-sm { - flex: 1 0; - flex-basis: 0; - max-width: 100%; } - .cell-sm-order--first { - order: -1; } - .cell-sm-order--last { - order: 1; } - .cell-sm-offset { - margin-left: 0 !important; } - .cell-sm-align--center { - align-self: center; } - .cell-sm-align--right { - align-self: flex-end; } - .cell-sm-align--top { - align-self: flex-start; } - .cell-sm-align--middle { - align-self: center; } - .cell-sm-align--bottom { - align-self: flex-end; } - .cell-sm-align--baseline { - align-self: baseline; } - .cell-sm-align--stretch { - align-self: stretch; } - .cell-sm-1 { - flex-basis: 8.3333333333%; - max-width: 8.3333333333%; } - .cell-sm-offset-1 { - margin-left: 8.3333333333% !important; } - .cell-sm-2 { - flex-basis: 16.6666666667%; - max-width: 16.6666666667%; } - .cell-sm-offset-2 { - margin-left: 16.6666666667% !important; } - .cell-sm-3 { - flex-basis: 25%; - max-width: 25%; } - .cell-sm-offset-3 { - margin-left: 25% !important; } - .cell-sm-4 { - flex-basis: 33.3333333333%; - max-width: 33.3333333333%; } - .cell-sm-offset-4 { - margin-left: 33.3333333333% !important; } - .cell-sm-5 { - flex-basis: 41.6666666667%; - max-width: 41.6666666667%; } - .cell-sm-offset-5 { - margin-left: 41.6666666667% !important; } - .cell-sm-6 { - flex-basis: 50%; - max-width: 50%; } - .cell-sm-offset-6 { - margin-left: 50% !important; } - .cell-sm-7 { - flex-basis: 58.3333333333%; - max-width: 58.3333333333%; } - .cell-sm-offset-7 { - margin-left: 58.3333333333% !important; } - .cell-sm-8 { - flex-basis: 66.6666666667%; - max-width: 66.6666666667%; } - .cell-sm-offset-8 { - margin-left: 66.6666666667% !important; } - .cell-sm-9 { - flex-basis: 75%; - max-width: 75%; } - .cell-sm-offset-9 { - margin-left: 75% !important; } - .cell-sm-10 { - flex-basis: 83.3333333333%; - max-width: 83.3333333333%; } - .cell-sm-offset-10 { - margin-left: 83.3333333333% !important; } - .cell-sm-11 { - flex-basis: 91.6666666667%; - max-width: 91.6666666667%; } - .cell-sm-offset-11 { - margin-left: 91.6666666667% !important; } - .cell-sm-12 { - flex-basis: 100%; - max-width: 100%; } - .cell-sm-offset-12 { - margin-left: 100% !important; } } - -@media only screen and (min-width: 982px) { - .grid { - width: var(--grid-md-container); } - .distribute-md-around { - justify-content: space-around; } - .distribute-md-between { - justify-content: space-between; } - .align-md-center { - justify-content: center; - text-align: center; } - .align-md-right { - justify-content: flex-end; - text-align: flex-end; } - .align-md-top { - align-items: flex-start; } - .align-md-middle { - align-items: center; } - .align-md-bottom { - align-items: flex-end; } - .align-md-baseline { - align-items: baseline; } - .align-md-stretch { - align-items: stretch; } - .cell-md { - flex: 1 0; - flex-basis: 0; - max-width: 100%; } - .cell-md-order--first { - order: -1; } - .cell-md-order--last { - order: 1; } - .cell-md-offset { - margin-left: 0 !important; } - .cell-md-align--center { - align-self: center; } - .cell-md-align--right { - align-self: flex-end; } - .cell-md-align--top { - align-self: flex-start; } - .cell-md-align--middle { - align-self: center; } - .cell-md-align--bottom { - align-self: flex-end; } - .cell-md-align--baseline { - align-self: baseline; } - .cell-md-align--stretch { - align-self: stretch; } - .cell-md-1 { - flex-basis: 8.3333333333%; - max-width: 8.3333333333%; } - .cell-md-offset-1 { - margin-left: 8.3333333333% !important; } - .cell-md-2 { - flex-basis: 16.6666666667%; - max-width: 16.6666666667%; } - .cell-md-offset-2 { - margin-left: 16.6666666667% !important; } - .cell-md-3 { - flex-basis: 25%; - max-width: 25%; } - .cell-md-offset-3 { - margin-left: 25% !important; } - .cell-md-4 { - flex-basis: 33.3333333333%; - max-width: 33.3333333333%; } - .cell-md-offset-4 { - margin-left: 33.3333333333% !important; } - .cell-md-5 { - flex-basis: 41.6666666667%; - max-width: 41.6666666667%; } - .cell-md-offset-5 { - margin-left: 41.6666666667% !important; } - .cell-md-6 { - flex-basis: 50%; - max-width: 50%; } - .cell-md-offset-6 { - margin-left: 50% !important; } - .cell-md-7 { - flex-basis: 58.3333333333%; - max-width: 58.3333333333%; } - .cell-md-offset-7 { - margin-left: 58.3333333333% !important; } - .cell-md-8 { - flex-basis: 66.6666666667%; - max-width: 66.6666666667%; } - .cell-md-offset-8 { - margin-left: 66.6666666667% !important; } - .cell-md-9 { - flex-basis: 75%; - max-width: 75%; } - .cell-md-offset-9 { - margin-left: 75% !important; } - .cell-md-10 { - flex-basis: 83.3333333333%; - max-width: 83.3333333333%; } - .cell-md-offset-10 { - margin-left: 83.3333333333% !important; } - .cell-md-11 { - flex-basis: 91.6666666667%; - max-width: 91.6666666667%; } - .cell-md-offset-11 { - margin-left: 91.6666666667% !important; } - .cell-md-12 { - flex-basis: 100%; - max-width: 100%; } - .cell-md-offset-12 { - margin-left: 100% !important; } } - -@media only screen and (min-width: 1200px) { - .grid { - width: var(--grid-lg-container); } - .distribute-lg-around { - justify-content: space-around; } - .distribute-lg-between { - justify-content: space-between; } - .align-lg-center { - justify-content: center; - text-align: center; } - .align-lg-right { - justify-content: flex-end; - text-align: flex-end; } - .align-lg-top { - align-items: flex-start; } - .align-lg-middle { - align-items: center; } - .align-lg-bottom { - align-items: flex-end; } - .align-lg-baseline { - align-items: baseline; } - .align-lg-stretch { - align-items: stretch; } - .cell-lg { - flex: 1 0; - flex-basis: 0; - max-width: 100%; } - .cell-lg-order--first { - order: -1; } - .cell-lg-order--last { - order: 1; } - .cell-lg-offset { - margin-left: 0 !important; } - .cell-lg-align--center { - align-self: center; } - .cell-lg-align--right { - align-self: flex-end; } - .cell-lg-align--top { - align-self: flex-start; } - .cell-lg-align--middle { - align-self: center; } - .cell-lg-align--bottom { - align-self: flex-end; } - .cell-lg-align--baseline { - align-self: baseline; } - .cell-lg-align--stretch { - align-self: stretch; } - .cell-lg-1 { - flex-basis: 8.3333333333%; - max-width: 8.3333333333%; } - .cell-lg-offset-1 { - margin-left: 8.3333333333% !important; } - .cell-lg-2 { - flex-basis: 16.6666666667%; - max-width: 16.6666666667%; } - .cell-lg-offset-2 { - margin-left: 16.6666666667% !important; } - .cell-lg-3 { - flex-basis: 25%; - max-width: 25%; } - .cell-lg-offset-3 { - margin-left: 25% !important; } - .cell-lg-4 { - flex-basis: 33.3333333333%; - max-width: 33.3333333333%; } - .cell-lg-offset-4 { - margin-left: 33.3333333333% !important; } - .cell-lg-5 { - flex-basis: 41.6666666667%; - max-width: 41.6666666667%; } - .cell-lg-offset-5 { - margin-left: 41.6666666667% !important; } - .cell-lg-6 { - flex-basis: 50%; - max-width: 50%; } - .cell-lg-offset-6 { - margin-left: 50% !important; } - .cell-lg-7 { - flex-basis: 58.3333333333%; - max-width: 58.3333333333%; } - .cell-lg-offset-7 { - margin-left: 58.3333333333% !important; } - .cell-lg-8 { - flex-basis: 66.6666666667%; - max-width: 66.6666666667%; } - .cell-lg-offset-8 { - margin-left: 66.6666666667% !important; } - .cell-lg-9 { - flex-basis: 75%; - max-width: 75%; } - .cell-lg-offset-9 { - margin-left: 75% !important; } - .cell-lg-10 { - flex-basis: 83.3333333333%; - max-width: 83.3333333333%; } - .cell-lg-offset-10 { - margin-left: 83.3333333333% !important; } - .cell-lg-11 { - flex-basis: 91.6666666667%; - max-width: 91.6666666667%; } - .cell-lg-offset-11 { - margin-left: 91.6666666667% !important; } - .cell-lg-12 { - flex-basis: 100%; - max-width: 100%; } - .cell-lg-offset-12 { - margin-left: 100% !important; } } - -/*# sourceMappingURL=gridle.css.map */ \ No newline at end of file diff --git a/dist/gridle.css.map b/dist/gridle.css.map deleted file mode 100644 index 77e62fd..0000000 --- a/dist/gridle.css.map +++ /dev/null @@ -1,12 +0,0 @@ -{ - "version": 3, - "file": "gridle.css", - "sources": [ - "../grid/gridlecss.scss", - "../grid/config.scss", - "../grid/gridlecss/mixins.scss" - ], - "sourcesContent": [], - "mappings": "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", - "names": [] -} \ No newline at end of file diff --git a/docs/.bowerrc b/docs/.bowerrc new file mode 100644 index 0000000..44491d3 --- /dev/null +++ b/docs/.bowerrc @@ -0,0 +1,3 @@ +{ + "directory": "bower_components" +} diff --git a/docs/Gruntfile.js b/docs/Gruntfile.js new file mode 100644 index 0000000..3976324 --- /dev/null +++ b/docs/Gruntfile.js @@ -0,0 +1,268 @@ +module.exports = function(grunt) { + + var appConfig = { + host: 'localhost', + port: 1338, + src_dir: '', + dist_dir: 'dist/' + }; + + require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks); + + grunt.initConfig({ + pkg: grunt.file.readJSON('package.json'), + appConfig: appConfig, + + watch: { + grunt: { + files: 'Gruntfile.js' + }, + sass: { + files: ['<%= appConfig.src_dir %>css/**/*.scss'], + tasks: ['sass', 'postcss', 'cssnext'] + }, + uglify: { + files: ['<%= appConfig.src_dir %>js/**/*.js'], + tasks: ['uglify'] + }, + jade: { + files: ['<%= appConfig.src_dir %>**/*.jade'], + tasks: ['jade'] + } + }, + + browserSync: { + dev: { + bsFiles: { + src: [ + '<%= appConfig.dist_dir %>css/*.css', + '<%= appConfig.dist_dir %>js/*.js', + '<%= appConfig.dist_dir %>*.html', + '<%= appConfig.dist_dir %>img/*.jpg', + '<%= appConfig.dist_dir %>img/*.png', + ], + }, + + options: { + watchTask: true, + server: { + baseDir: appConfig.dist_dir + }, + debugInfo: true, + logConnections: true, + notify: true, + plugins: [ + { + module: 'bs-html-injector', + options: { + files: '<%= appConfig.dist_dir %>*.html' + } + } + ], + ghostMode: { + scroll: true, + links: true, + forms: true + } + }, + + bsReload: { + all: { + reload: true + } + } + } + }, + + clean: { + options: { + dot: true + }, + + dist: { + src: ['<%= appConfig.dist_dir %>'] + } + }, + + copy: { + src: { + files: [{ + expand: true, + dot: true, + flatten: true, + src: ['bower_components/font-awesome/fonts/*', '<%= appConfig.src_dir %>fonts/*'], + dest: '<%= appConfig.dist_dir %>fonts/', + filter: 'isFile' + }] + } + }, + + sass: { + options: { + sourceMap: true + }, + + dist: { + files: { + '<%= appConfig.dist_dir %>css/main.min.css': '<%= appConfig.src_dir %>css/main.scss' + } + } + }, + + postcss: { + options: { + map: false, + processors: [ + require('autoprefixer-core')({ + browsers: ['last 5 versions', '> 15%', 'IE 10'] + }) + ] + }, + + dist: { + src: ['<%= appConfig.dist_dir %>css/main.min.css'] + } + }, + + cssnext: { + options: { + sourcemap: false + }, + + dist: { + files: { + '<%= appConfig.dist_dir %>css/main.min.css': '<%= appConfig.dist_dir %>css/main.min.css' + } + } + }, + + cssbeautifier : { + files : ['<%= appConfig.dist_dir %>css/main.min.css'], + options : { + indent: ' ', + openbrace: 'end-of-line', + autosemicolon: true + } + }, + + cssmin: { + options: { + shorthandCompacting: false, + roundingPrecision: -1 + }, + + target: { + files: { + '<%= appConfig.dist_dir %>css/main.min.css': ['<%= appConfig.dist_dir %>css/main.min.css'], + } + } + }, + + uglify: { + dist: { + options: { + beautify: true + }, + + files: { + '<%= appConfig.dist_dir %>js/main.min.js': ['<%= appConfig.src_dir %>js/**/*.js'] + } + } + }, + + jade: { + html: { + files: { + '<%= appConfig.dist_dir %>': ['<%= appConfig.src_dir %>*.jade'] + }, + + options: { + client: false, + pretty: true + } + } + }, + + imagemin: { + png: { + options: { + optimizationLevel: 7 + }, + files: [ + { + expand: true, + cwd: '<%= appConfig.src_dir %>img/', + src: ['**/*.png'], + dest: '<%= appConfig.dist_dir %>img/', + ext: '.png' + } + ] + }, + + jpg: { + options: { + progressive: true + }, + files: [ + { + expand: true, + cwd: '<%= appConfig.src_dir %>img/', + src: ['**/*.jpg'], + dest: '<%= appConfig.dist_dir %>img/', + ext: '.jpg' + } + ] + } + }, + + svgmin: { + options: { + plugins: [ + { collapseGroups: false }, + { removeUnknownsAndDefaults: false } + ] + }, + dist: { + files: [{ + expand: true, + cwd: '<%= appConfig.src_dir %>img', + src: '{,*/}*.svg', + dest: '<%= appConfig.dist_dir %>img' + }] + } + } + }); + + grunt.registerTask('compile-css', [ + 'sass', + 'postcss', + 'cssnext', + 'imagemin', + 'svgmin', + // 'copy' + ]); + + grunt.registerTask('compile-js', [ + 'uglify' + ]); + + grunt.registerTask('compile-html', [ + 'jade' + ]); + + grunt.registerTask('compile-theme', ['compile-css', 'compile-js', 'compile-html']); + + grunt.registerTask('prettify', [ + 'cssbeautifier', + 'cssmin' + ]); + + grunt.registerTask('preview', [ + 'compile-theme', + 'browserSync', + 'watch' + ]); + + grunt.registerTask('default', ['preview']); + grunt.registerTask('prepare', ['compile-theme', 'prettify']); +} diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 0000000..2ce7104 --- /dev/null +++ b/docs/README.md @@ -0,0 +1,52 @@ +## GridleCSS Theme + +http://studio51.github.io/gridlecss/ + +A `test` theme for GridleCSS in order to test all the frameworks components. +This theme relies, heavily, on GridleCSS. Any changes, if any, made on the +framework will affect this theme. + +### Installation + +``` bash +$ git clone git@github.com:studio51/gridlecss.git +$ cd web +$ npm install +``` + +We use [Grunt.JS] as our Task Runner in order to compile the SASS files. +If you haven't used Grunt before, be sure to check out the Getting Started +guide, as it explains how to create a Gruntfile as well as install and use Grunt +plugins. + +`$ grunt` + +This is the default task which will `clean` the `dist` folder and `compile` the +all the theme files, such SASS, JS and JADE. + +It will also launch a server on `localhost:1337` so make sure the port is not in +use by any other service. The server comes with livereload in order to see +updates as they happen in your browser. + +`$ grunt compile` + +This will `clean` the `dist` folder and `compile` the all the theme files, such +SASS, JS and JADE. + +`$ grunt ship` + +If you make any changes to GridleCSS Theme and whish to make a pull request or +use it, use this task which will `clean`, `compile`, and `prettify` all the +resources used by the theme. + +### Open for pull requests + +Before making any pull requests, make sure the Theme looks as it should by using +the `$ grunt` task. + +### License + +MIT © [Studio51] + +[Studio51]:http://creative-studio51.co.uk +[Grunt.JS]:http://gruntjs.com diff --git a/docs/bower.json b/docs/bower.json new file mode 100644 index 0000000..291b176 --- /dev/null +++ b/docs/bower.json @@ -0,0 +1,21 @@ +{ + "name": "GridleCSS", + "version": "1.0.0", + "homepage": "https://github.com/studio51/framework-gridlex", + "authors": [ + "Vlad Radulescu " + ], + "description": "''", + "license": "MIT", + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests" + ], + "devDependencies": { + "font-awesome": "~4.4.0", + "gridlecss": "*" + } +} diff --git a/docs/css/components/_buttons.scss b/docs/css/components/_buttons.scss new file mode 100644 index 0000000..1b91f4a --- /dev/null +++ b/docs/css/components/_buttons.scss @@ -0,0 +1,33 @@ +$buttons: green, blue, orange, yellow, red; +$color: $green, $blue, $orange, $yellow, $red; +$darker: $darkgreen, $darkblue, $darkorange, $darkyellow, $darkred; + +@mixin btn-shadow($color) { + box-shadow: 0 2px 0 rgba($color, .8); +} + +.btn { + border-radius: $theme-border--radius; + color: #fff; + display: inline-flex; + font-weight: 300; + line-height: $theme-spacing; + padding: ( $theme-spacing / 2 ) $theme-spacing; + + &--outline { + border: $theme-border--size solid $theme-border--color; + } + + @for $i from 1 through length($buttons) { + + &-#{ nth($buttons, $i )} { + background-color: saturate(nth($color, $i), 10%); + + @include btn-shadow(nth($darker, $i)); + + &:hover { + background-color: nth($color, $i); + } + } + } +} diff --git a/docs/css/config.scss b/docs/css/config.scss new file mode 100644 index 0000000..f1ecc8b --- /dev/null +++ b/docs/css/config.scss @@ -0,0 +1,77 @@ +////////////////////////////////////// +// +// Author: Vladut Radulescu @ Studio51 +// MIT LICENSE © 2015 Studio51 + +// Enable Bootstrap OR Foundation as your additional framework in order to +// provide a fallback for older browsers that don't support flexbox. +// Please note that this will change the way you write your grid, so please read +// the documentation before enabling any of these +// +// Options: [true / false] +// +// $grid-bootstrap: false; +// $grid-foundation: false; +// +// Milestone v2.0 + +// Grid gutters +// +// (!) *giggle* Your gutter will be automatically halfed once compiled. +// $grid-gutter: 10px will compile a gutter of 5px +// +$grid-gutter: 0 !default; + +// In order to minimze the compiled CSS, we've left out some rules that are +// default. +// If you experience any issues with the grid please let us know by opening an +// issue on Github and enable the following variable. +// +// Options: [true / false] +// +$grid-minimal: true !default; + +// The number of columns the grid will have +// GridleCSS supports up to 24 columns. Beyond that, it's up to you to make it +// work +// +// Options: [12 / 24] +// +$grid-columns: 12 !default; + +$breakpoints: ( + xs: 0, + sm: 40em, + md: 64em, + lg: 90em, + xl: 120em +) !default; + +$columns: 12 !default; +$gutter: 0 !default; + +$mq-base-font-size: 16px !default; +$mq-responsive: true !default; +$mq-breakpoints: ( + sm: 40em, + md: 64em, + lg: 90em, + xl: 120em + +) !default; + +$mq-static-breakpoint: desktop !default; +$mq-show-breakpoints: () !default; +$mq-media-type: all !default; + +// Distribute the cells spacing around or between them +// +$flex-distribution: true !default; +$flex-distributions: "around" "between"; + +// Alignments for main axis (x): left, center, right +// Alignments for cross axis (y): top, middle, bottom, baseline +// +$flex-alignment: true !default; +$flex-alignments: "x" ("center"("center"), "right"("flex-end")), + "y" ("top"("flex-start"), "middle"("center"), "bottom"("flex-end"), "baseline"("baseline"), "stretch"("stretch")); diff --git a/grid/gridlecss.scss b/docs/css/gridle.scss similarity index 70% rename from grid/gridlecss.scss rename to docs/css/gridle.scss index be5d6fc..daf5224 100644 --- a/grid/gridlecss.scss +++ b/docs/css/gridle.scss @@ -1,15 +1,7 @@ @import "config"; -:root { - --grid-xs-container: 100%; - --grid-sm-container: calc( #{ $grid-sm-min + $grid-gutter }); - --grid-md-container: calc( #{ $grid-md-min + $grid-gutter }); - --grid-lg-container: calc( #{ $grid-lg-min + $grid-gutter }); - --grid-gutter: $grid-gutter; - --grid-gutter-calc: calc( var(--grid-gutter) / 2); -} - @import "gridlecss/mixins"; +@import "gridlecss/media"; *, *:before, @@ -25,23 +17,31 @@ height: 100%; } - .row, - .column { - display: flex; - } +.row, +.column { + display: flex; +} .row { flex: 0 1 auto; flex-direction: row; flex-wrap: wrap; - margin-left: -( var(--grid-gutter-calc)); - margin-right: -( var(--grid-gutter-calc)); + + margin-left: 0; + margin-right: 0; &--reverse { flex-direction: row-reverse; } } + [class*="cell"] { + margin-left: 0; + margin-right: 0; + flex-basis: 100%; + max-width: 100%; + } + .column { flex-direction: column; @@ -66,10 +66,6 @@ } .cell { - margin-left: var(--grid-gutter-calc); - margin-right: var(--grid-gutter-calc); - flex-basis: 100%; - max-width: 100%; &-order { &--first { @@ -98,17 +94,63 @@ flex-direction: column; } -@each $breakpoint in $grid-breakpoints { +.cell-auto { + flex: 0 1 auto; +} + +%default { + display: flex; + flex: 1 0 auto; + flex-direction: column; +} + +@each $breakpoint in $mq-breakpoints { - @include media("screen", $breakpoint) { + $size: nth($breakpoint, 1); + $break: nth($breakpoint, 2); + + @include mq($from: $size) { .grid { - width: var(--grid-#{ $breakpoint }-container); + width: $break; + } + + .cell-#{ $size }-auto { + flex: 0 1 auto; + } + + @for $i from 1 through $grid-columns { + + .cell-#{ $size }, + .cell-#{ $size }-#{ $i }, + .cell-#{ $size }-offset-#{ $i } { + @extend %default; + } + } + + @for $i from 1 through $grid-columns { + $grid-column-width: (( 100 / $grid-columns ) * $i ) * 1%; + $grid-gutter-calc: $grid-gutter / ( $grid-gutter * 0 + 1 ); + + // Compiles: cell-*-# for each viewport + // + .cell-#{ $size }-#{ $i } { + flex-basis: $grid-column-width; + max-width: $grid-column-width; + } + + // Compiles: cell-*-offset-# for each viewport + // + .cell-#{ $size }-offset-#{ $i } { + margin-left: $grid-column-width; + } } + + // Compiles: distribute-* for each viewport // - .distribute-#{ $breakpoint } { + .distribute-#{ $size } { @if $flex-distribution { @each $distribution-option in $flex-distributions { @@ -122,7 +164,7 @@ // Compiles: align-* for each viewport // - .align-#{ $breakpoint } { + .align-#{ $size } { @if $flex-alignment { @each $align-option in $flex-alignments { @@ -135,16 +177,23 @@ // @for $i from 1 through $grid-columns { - .cell-#{ $breakpoint }, - .cell-#{ $breakpoint }-#{ $i }, - .cell-#{ $breakpoint }-offset-#{ $i } { - @extend %cell-styles; + .cell-#{ $size }, + .cell-#{ $size }-#{ $i }, + .cell-#{ $size }-offset-#{ $i } { + // @extend %cell-styles; + display: flex; + flex: 1 0 auto; + flex-direction: column; + } + + .cell-#{ $size }-auto { + flex: 0 1 auto; } } // Compiles: cell-* for each viewport // - .cell-#{ $breakpoint } { + .cell-#{ $size } { flex: 1 0; flex-basis: 0; max-width: 100%; @@ -174,22 +223,5 @@ } } - @for $i from 1 through $grid-columns { - $grid-column-width: (( 100 / $grid-columns ) * $i ) * 1%; - $grid-gutter-calc: $grid-gutter / ( $grid-gutter * 0 + 1 ); - - // Compiles: cell-*-# for each viewport - // - .cell-#{ $breakpoint }-#{ $i } { - flex-basis: $grid-column-width - $grid-gutter-calc; - max-width: $grid-column-width; - } - - // Compiles: cell-*-offset-# for each viewport - // - .cell-#{ $breakpoint }-offset-#{ $i } { - margin-left: $grid-column-width !important; - } - } } } diff --git a/docs/css/gridlecss/_media.scss b/docs/css/gridlecss/_media.scss new file mode 100644 index 0000000..658c8cf --- /dev/null +++ b/docs/css/gridlecss/_media.scss @@ -0,0 +1,106 @@ +@charset "UTF-8"; // https://github.com/sass-mq/sass-mq/blob/master/_mq.scss + +@function mq-px2em($px, $base-font-size: $mq-base-font-size) { + @if unitless($px) { + @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels."; + @return mq-px2em($px * 1px, $base-font-size); + } + @else if unit($px) == em { + @return $px; + } + @return $px / $base-font-size * 1em; +} + +@function mq-get-breakpoint-width($name, $breakpoints: $mq-breakpoints) { + @if map-has-key($breakpoints, $name) { + @return map-get($breakpoints, $name); + } + @else { + @warn "Breakpoint #{$name} wasn't found in $breakpoints."; + } +} + +@mixin mq($from: false, $until: false, $and: false, $media-type: $mq-media-type, $breakpoints: $mq-breakpoints, $responsive: $mq-responsive, $static-breakpoint: $mq-static-breakpoint) { + $min-width: 0; + $max-width: 0; + $media-query: ""; + // From: this breakpoint (inclusive) + @if $from { + @if type-of($from) == number { + $min-width: mq-px2em($from); + } + @else { + $min-width: mq-px2em(mq-get-breakpoint-width($from, $breakpoints)); + } + } + // Until: that breakpoint (exclusive) + @if $until { + @if type-of($until) == number { + $max-width: mq-px2em($until); + } + @else { + $max-width: mq-px2em(mq-get-breakpoint-width($until, $breakpoints)) - 0.01em; + } + } + // Responsive support is disabled, rasterize the output outside @media blocks + // The browser will rely on the cascade itself. + @if $responsive == false { + $static-breakpoint-width: mq-get-breakpoint-width($static-breakpoint, $breakpoints); + $target-width: mq-px2em($static-breakpoint-width); + // Output only rules that start at or span our target width + @if $and == false and $min-width <= $target-width and ($until == false or $max-width >= $target-width) { + @content; + } + } + @else { + @if $min-width != 0 { + $media-query: "#{$media-query} and (min-width: #{$min-width})"; + } + @if $max-width != 0 { + $media-query: "#{$media-query} and (max-width: #{$max-width})"; + } + @if $and { + $media-query: "#{$media-query} and #{$and}"; + } + // Remove unnecessary media query prefix 'all and ' + @if $media-type == "all" and $media-query != "" { + $media-type: ""; + $media-query: str-slice(unquote($media-query), 6); + } + @media #{$media-type + $media-query} { + @content; + } + } +} + +@mixin mq-add-breakpoint($name, $width) { + $new-breakpoint: ($name: $width); + $mq-breakpoints: map-merge($mq-breakpoints, $new-breakpoint) !global; +} + +@mixin mq-show-breakpoints($show-breakpoints: $mq-show-breakpoints, $breakpoints: $mq-breakpoints) { + body:before { + background-color: #FCF8E3; + border-bottom: 1px solid #FBEED5; + border-left: 1px solid #FBEED5; + color: #C09853; + font: small-caption; + padding: 3px 6px; + pointer-events: none; + position: fixed; + right: 0; + top: 0; + z-index: 100; + // Loop through the breakpoints that should be shown + @each $show-breakpoint in $show-breakpoints { + $width: mq-get-breakpoint-width($show-breakpoint, $breakpoints); + @include mq($show-breakpoint, $breakpoints: $breakpoints) { + content: "#{$show-breakpoint} ≥ #{$width} (#{mq-px2em($width)})"; + } + } + } +} + +@if length($mq-show-breakpoints) > 0 { + @include mq-show-breakpoints; +} diff --git a/docs/css/gridlecss/mixins.scss b/docs/css/gridlecss/mixins.scss new file mode 100644 index 0000000..dd77dad --- /dev/null +++ b/docs/css/gridlecss/mixins.scss @@ -0,0 +1,30 @@ +// Generate Flex Alignments +// +@mixin flex-alignments( $parent, $axis, $class, $requester ) { + + @each $element in $class { + + $selector: nth($element, 1); + $rule: unquote(nth($element, 2)); + + #{ $parent }#{ $selector } { + + @if $axis == "x" { + + justify-content: $rule; + text-align: $rule; + + } @else if $axis == "y" { + + @if $requester == "parent" { + + align-items: $rule; + + } @else { + + align-self: $rule; + } + } + } + } +} diff --git a/docs/css/helpers/_animations.scss b/docs/css/helpers/_animations.scss new file mode 100644 index 0000000..3f04042 --- /dev/null +++ b/docs/css/helpers/_animations.scss @@ -0,0 +1,61 @@ +@keyframes rotate { + 0% { + background-position: 0% 18%; + } + + 50% { + background-position: 100% 83%; + } + + 100% { + background-position: 0% 18%; + } +} + +@keyframes bounceInDown { + 0%, 60%, 75%, 90%, 100% { + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + + 0% { + opacity: 0; + transform: translate3d(0, -3000px, 0); + } + + 60% { + opacity: 1; + transform: translate3d(0, 25px, 0); + } + + 75% { + transform: translate3d(0, -10px, 0); + } + + 90% { + transform: translate3d(0, 5px, 0); + } + + 100% { + transform: none; + } +} + +@keyframes bounce { + 0%, 20%, 40%, 60%, 80%, 100% { + transform: translate3d(0, 0, 0); + } + + 10%, 30%, 50%, 70%, 90% { + transform: translate3d(0, 15px, 0); + } +} + +.bounce { + animation-name: bounce; +} + +@mixin animated($animation-duration, $animation-iteration) { + animation-duration: $animation-duration; + animation-iteration-count: $animation-iteration; + animation-fill-mode: both; +} diff --git a/docs/css/helpers/_reset.scss b/docs/css/helpers/_reset.scss new file mode 100644 index 0000000..3c582a4 --- /dev/null +++ b/docs/css/helpers/_reset.scss @@ -0,0 +1,276 @@ +/*! sanitize.css | CC0 Public Domain | github.com/jonathantneal/sanitize.css */ + +$root-box-sizing: border-box !default; +$root-cursor: default !default; +$root-font-family: sans-serif !default; +$root-font-size: 16px !default; +$root-line-height: 1.5 !default; +$root-text-rendering: optimizeLegibility !default; + +$html-background-color: #FFFFFF !default; +$anchor-text-decoration: none !default; +$form-element-background-color: transparent !default; +$form-element-min-height: if(unitless($root-line-height), #{$root-line-height}em, if(unit($root-line-height) != '%', $root-line-height, null)) !default; +$media-element-vertical-align: middle !default; +$monospace-font-family: monospace !default; +$nav-list-style: none !default; +$selection-background-color: #B3D4FC !default; +$selection-text-shadow: none !default; +$small-font-size: 75% !default; +$table-border-collapse: collapse !default; +$table-border-spacing: 0 !default; +$textarea-resize: vertical !default; + +/* + * Normalization + */ + +/* + + [0] IE11+ + [1] All browsers without overlaying scrollbars + [2] iOS8+ + [3] Chrome 40+, iOS 8+, Safari 8+ + [4] Firefox 36+, Internet Explorer 11+, Windows Phone 8.1+ + +*/ + +:root { + -ms-overflow-style: -ms-autohiding-scrollbar; /* [0] */ + overflow-y: scroll; /* [1] */ + text-size-adjust: 100%; /* [2] */ +} + +audio:not([controls]) { display: none; /* [3] */ } + +details, /* Android 4.3-, Internet Explorer 11+, Windows Phone 8.1+ */ +main, /* Firefox 36+, Internet Explorer 11+, Windows Phone 8.1+ */ +summary /* */ { + // display: block; +} + +details { display: block; /* [4] */ } + +input { + &[type="number"] { + width: auto; // Firefox 36+ + } + + &[type="search"] { + -webkit-appearance: textfield; // Safari 8+ + + &::-webkit-search-cancel-button, + &::-webkit-search-decoration { + -webkit-appearance: none; // Safari 8+ + } + } +} + +pre { + overflow: auto; // Internet Explorer 11+ +} + +progress { + display: inline-block; // Internet Explorer 11+, Windows Phone 8.1+ +} + +small { + font-size: $small-font-size; // All browsers +} + +template { + display: none; // Android 4.3-, Internet Explorer 11+, iOS 7-, Safari 7-, Windows Phone 8.1+ +} + +textarea { + overflow: auto; // Internet Explorer 11+ +} + +[hidden] { + display: none; // Internet Explorer 10- +} + +[unselectable] { + user-select: none; // Android 4.4+, Chrome 40+, Firefox 36+, iOS 8+, Safari 8+ +} + + + +/* + * Universal inheritance + */ + +*, +::before, +::after { + box-sizing: inherit; +} + +* { + // font-size: inherit; + line-height: inherit; +} + +::before, +::after { + text-decoration: inherit; + vertical-align: inherit; +} + + + +/* + * Opinionated defaults + */ + +// specify solid border style of all elements + +*, +::before, +::after { + border-style: solid; + border-width: 0; +} + +// remove margin and padding of all elements + +* { + margin: 0; + padding: 0; +} + +// specify the root styles of the document + +:root { + box-sizing: $root-box-sizing; + cursor: $root-cursor; + font: #{$root-font-size}/#{$root-line-height} $root-font-family; + text-rendering: $root-text-rendering; +} + +// specify the html background color + +html { + background-color: $html-background-color; +} + +// specify the text decoration of anchors + +a { + text-decoration: $anchor-text-decoration; +} + +// specify media element style + +audio, +canvas, +iframe, +img, +svg, +video { + vertical-align: $media-element-vertical-align; +} + +// specify the background color of form elements + +button, +input, +select, +textarea { + background-color: $form-element-background-color; +} + +// specify inheritance of form elements + +button, +input, +select, +textarea { + color: inherit; + font-family: inherit; + font-style: inherit; + font-weight: inherit; +} + +// specify the minimum height of form elements + +button, +input, +select, +textarea { + min-height: $form-element-min-height; +} + +// specify the font family of code elements + +code, +kbd, +pre, +samp { + font-family: $monospace-font-family, monospace; +} + +// specify the list style of nav lists + +nav ol, +nav ul { + list-style: $nav-list-style; +} + +// style select like a standard input + +select { + -moz-appearance: none; // Firefox 36+ + -webkit-appearance: none; // Chrome 41+ + + &::-ms-expand { + display: none; // Internet Explorer 11+ + } + + &::-ms-value { + color: currentColor; // Internet Explorer 11+ + } +} + +// specify the border styles of tables + +table { + border-collapse: $table-border-collapse; + border-spacing: $table-border-spacing; +} + +// specify textarea resizability + +textarea { + resize: $textarea-resize; +} + +// specify text selection background color and omit drop shadow + +::selection { + background-color: $selection-background-color; // required when declaring ::selection + text-shadow: $selection-text-shadow; +} + +// hide content from screens but not screenreaders + +@media screen { + [hidden~="screen"] { + display: inherit; + } + + [hidden~="screen"]:not(:active):not(:focus):not(:target) { + clip: rect(0 0 0 0) !important; + position: absolute !important; + } +} + +// a:not(.btn), +// li a { +// color: $blue; +// font-weight: 400; + +// &:hover { +// color: $darkblue; +// } +// } diff --git a/docs/css/helpers/_variables.scss b/docs/css/helpers/_variables.scss new file mode 100644 index 0000000..87f99da --- /dev/null +++ b/docs/css/helpers/_variables.scss @@ -0,0 +1,39 @@ +$green: #A0D468; +$lightgreen: #D5E1A3; +$darkgreen: #8CC152; +$blue: #42A2DC; +$lightblue: #4FC1E9; +$darkblue: #10689A; +$red: #DA564A; +$lightred: #ED5565; +$darkred: #DA4453; +$yellow: #FFCE54; +$darkyellow: #FCBB42; +$orange: #FC6E51; +$darkorange: #E9573F; +$purple: #AC92EC; +$darkpurple: #967ADC; +$white: #FFFFFF; +$gray: #F0F0F0; +$lightgray: #E5E5E5; +$darkgray: #999999; +$black: #333333; + +$color-facebook: #3b5998; +$color-twitter: #55acee; +$color-googleplus: #dd4b39; +$color-reddit: #ff4500; +$color-digg: #000000; +$color-pinterest: #cc2127; + +$animation-duration: 3s; + +$theme-border--color: $darkgray; +$theme-border--radius: 2px; +$theme-border--size: 3px; + +$theme-background-color: $gray; +$theme-box-color: $white; +$theme-box-shadow-color: #555555; + +$theme-spacing: 16px; diff --git a/docs/css/helpers/_visibility.scss b/docs/css/helpers/_visibility.scss new file mode 100644 index 0000000..a59a497 --- /dev/null +++ b/docs/css/helpers/_visibility.scss @@ -0,0 +1,43 @@ +// @include media('screen', 'xs') { +// .visible-sm, +// .visible-md, +// .visible-lg { display: none !important; } +// .visible-xs { +// display: block !important; +// } + +// .hidden-xs { +// display: none !important; +// } +// } + +// @include media('screen', 'sm') { +// .visible-xs, +// .visible-md, +// .visible-lg { display: none !important; } +// .visible-sm { +// display: block !important; +// } + +// .hidden-xs { +// display: block!important; +// } +// } + +// @include media('screen', 'md') { +// .visible-xs, +// .visible-sm, +// .visible-lg { display: none !important; } +// .visible-md { display: block !important; } + +// } + +// @include media('screen', 'lg') { + +// .visible-xs, +// .visible-sm, +// .visible-md { display: none !important; } +// .visible-lg { display: block !important; } + + +// } diff --git a/docs/css/main.scss b/docs/css/main.scss new file mode 100644 index 0000000..5411499 --- /dev/null +++ b/docs/css/main.scss @@ -0,0 +1,116 @@ +/* + + GridleCSS Theme v1.0.0 + + Author : Vlad Radulescu + Twitter : @pacMakaveli90 + Github : pacMakaveli90 + + Author URL : http://creative-studio51.co.uk/ + Project URL : https://github.com/studio51/gridlecss/tree/gh-pages + +*/ + +@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,700,200italic,400italic,700italic); + +// GridleCSS + +$grid-gutter: 2px !default; + +// @import './bower_components/font-awesome/scss/font-awesome'; +// @import './bower_components/gridlecss/grid/gridlecss'; + +// Variables + +@import 'helpers/variables'; + +// Helpers + +@import 'helpers/reset'; + +@import 'helpers/animations'; +@import 'helpers/visibility'; + +html, body { + height: 100%; +} + + body { + background-color: $theme-background-color; + font-family: 'Source Sans Pro', sans-serif; + font-size: 100%; + } + +// Components + +@import 'components/buttons'; + +// Theme Partials + +@import 'partials/header'; +@import 'partials/navigation'; +@import 'partials/device'; + +@import 'partials/theme'; +@import 'partials/footer'; + +/* + + Just for showcasing GridleCSS Alignments features + +*/ + +#grid-alignment.css { + + .demo-alignment .row { + height: 10em; + + span { + border-bottom: 1px dotted rgba($black, .4); + } + } + + .demo-baseline { + &-1 { + span { + font-size: 10em; + } + } + + &-2 { + span { + font-size: 15em; + } + } + } +} + +.text-center { + text-align: center; +} + + +.module-section { + +} + +.module-title { + font-family: 'Source Sans Pro', sans-serif; + font-weight: 400; +} + +.margin { + display: block; + width: 1px; + height: 1px; +} + +.mh16 { + margin-bottom: $theme-spacing; + margin-top: $theme-spacing; +} + +.mv16 { + margin-left: $theme-spacing; + margin-right: $theme-spacing; +} diff --git a/docs/css/partials/_demos.scss b/docs/css/partials/_demos.scss new file mode 100644 index 0000000..96c65ca --- /dev/null +++ b/docs/css/partials/_demos.scss @@ -0,0 +1,74 @@ +.device { + &-demo { + &--content { + @extend .row; + + margin: 0; + width: 100%; + } + + &--side { + &-a, + &-b { + @extend .cell; + @extend .cell-xs-12; + @extend .cell-sm-6; + + @extend .align-center; + @extend .align-middle; + + margin: 0; + + .btn { + @include animated(15s, infinite); + @extend .bounce; + + border-radius: 100%; + color: #fff; + padding: 15px; + overflow: hidden; + text-align: center; + + .fa { + font-size: 2em; + position: relative; + width: 40px; + z-index: 1; + + &::after { + content: ""; + width: 74px; + height: 74px; + position: absolute; + top: 5px; + left: 10px; + z-index: -1; + } + } + } + + p { + color: #fff; + font-weight: 300; + margin-top: $theme-spacing * 2; + } + } + + &-a { + background-color: $yellow; + + .btn { + background-color: $darkyellow; + } + } + + &-b { + background-color: $purple; + + .btn { + background-color: $darkpurple; + } + } + } + } +} diff --git a/docs/css/partials/_device.scss b/docs/css/partials/_device.scss new file mode 100644 index 0000000..52feb9f --- /dev/null +++ b/docs/css/partials/_device.scss @@ -0,0 +1,383 @@ +// .device { +// @extend .cell-xs; + +// position: relative; + +// &-frame { + +// &--outter { +// background-color: #fff; +// border: 2px solid rgba(#C9CDC0, 1); +// border-bottom: none; +// border-top-left-radius: 38px; +// border-top-right-radius: 38px; +// display: flex; +// flex: 1; +// flex-direction: column; +// padding-left: 10px; +// padding-right: 10px; + +// @include media("screen", "sm") { +// padding-left: 25px; +// padding-right: 25px; +// } + +// @include media("screen", "md") { +// background-color: #000; +// padding-left: 50px; +// padding-right: 50px; +// } + +// @include media("screen", "lg") { +// border: none; +// } +// } + +// &--inner { +// background-color: #fff; +// border: 1px solid rgba(#C9CDC0, 1); +// border-bottom: none; +// border-top-left-radius: 2px; +// border-top-right-radius: 2px; +// display: flex; +// flex: 1; +// height: 100%; +// overflow: auto; +// position: relative; + +// @include media("screen", "md") { +// border: none; +// border-top-left-radius: 0; +// border-top-right-radius: 0; +// } +// } +// } + +// &-camera { +// align-self: center; +// background-color: #C9CDC0; +// border-radius: 100%; +// height: 6px; +// margin-top: 1em; +// width: 6px; + +// @include media("screen", "sm") { +// display: none; +// } + +// @include media("screen", "md") { +// background-color: rgba($green, 1); +// display: block; +// margin-bottom: 1.5em; +// margin-top: 1.5em; +// } + +// @include media("screen", "lg") { +// margin-bottom: 2em; +// margin-top: 1em; +// } +// } + +// &-speaker { +// align-self: center; +// background-color: #C9CDC0; +// border-radius: 50px; +// height: 4px; +// margin-bottom: 2.5em; +// margin-top: 1em; +// position: relative; +// width: 45px; + +// @include media("screen", "sm") { +// height: 10px; +// margin-bottom: 2em; +// margin-top: 2em; +// width: 10px; +// } + +// @include media("screen", "md") { +// display: none; +// } + +// &:before { +// background: #C9CDC0; +// border-radius: 100%; +// content: ''; +// height: 10px; +// left: -25px; +// position: absolute; +// top: -3px; +// width: 10px; + +// @include media("screen", "sm") { +// height: 5px; +// width: 5px; +// top: 2.5px; +// left: -15px; +// } +// } +// } +// } + +.column { + + // display: flex; + // justify-content: flex-end; + // align-items: flex-end; + justify-content: flex-end; +} + +.pca-hold { + width: 100%; +} + +.pca-hold .pca-main { + display: block; + background-color: #e7e7e7; + position: relative; + height: 100%; +} + + +// @include media("screen", "xs") { +// .pca-hold .pca-main { +// border: 15px solid #1d2d2d; +// border-top: 115px solid #1d2d2d; +// border-bottom: 118px solid #1d2d2d; +// border-radius: 56.5px; +// box-shadow: 0 0 0 5px #C6C7CA; +// } +// .pca-hold .pca-main:after { +// content: ''; +// position: absolute; +// top: -65px; +// left: 55%; +// transform: translate(-50%,0); +// width: 15px; +// height: 15px; +// background-color: #959595; +// border-radius: 100%; +// transform: translate(-90px,0); +// } +// .pca-hold .pca-main:before { +// content: ""; +// position: absolute; +// top: -25px; +// left: 55%; +// opacity: 1; +// width: 100px; +// height: 5px; +// transform: translate(-45px,-37.5px); +// border-radius: 5px; +// background-color: #959595; +// } +// .pca-hold .pca-inner { +// display: block; +// } +// .pca-hold .pca-sub { +// display: block; +// text-align: center; +// position: relative; +// height: 0; +// } +// .pca-hold .pca-sub .pca-bot { +// border-radius: 100%; +// width: 70px; +// height: 70px; +// display: block; +// margin: 0 auto; +// background-color: transparent; +// z-index: 2; +// box-shadow: 0 0 0 5.5px #636670; +// transform: translate(0,-94px); +// } +// } +// @include media("screen", "sm") { + +// .pca-hold .pca-main { +// border: 35px solid #1d2d2d; +// border-bottom: 50px solid #1d2d2d; +// border-radius: 25px; +// // height: 620px; +// } +// .pca-hold .pca-main:after { +// content: ''; +// position: absolute; +// top: -12px; +// left: 50%; +// transform: translate(-50%,0); +// width: 5.5px; +// height: 5.5px; +// background-color: #959595; +// border-radius: 100%; +// } +// .pca-hold .pca-inner { +// display: block; +// } +// .pca-hold .pca-sub { +// display: block; +// text-align: center; +// position: relative; +// height: 0; +// } +// .pca-hold .pca-sub .pca-bot { +// border-radius: 100%; +// width: 30px; +// height: 30px; +// display: block; +// background-color: transparent; +// z-index: 2; +// margin: -10px auto 0 auto; +// box-shadow: 0 0 0 1px rgba(255,255,255,0.6); +// transform: translate(0,-100%); +// } + +// } + +// // @include media("screen", "md") { +// // .pca-hold { +// // // margin: 0 62.5px; +// // width: 70%; +// // margin: 0 auto; +// // } +// // .pca-hold .pca-main { +// // border: 15px solid #2d2d2d; +// // // height: 100%; +// // border-top-left-radius: 15px; +// // border-top-right-radius: 15px; +// // } +// // .pca-hold .pca-main:after { +// // content: ''; +// // position: absolute; +// // top: -12px; +// // left: 50%; +// // transform: translate(-50%,0); +// // width: 5px; +// // height: 5px; +// // background-color: #959595; +// // border-radius: 100%; +// // } +// // .pca-hold .pca-inner { +// // display: block; +// // } +// // .pca-hold .pca-sub { +// // display: block; +// // text-align: center; +// // position: relative; +// // height: 25px; +// // } +// // .pca-hold .pca-sub .pca-top { +// // position: absolute; +// // bottom: 0; +// // left: -62.5px; +// // display: block; +// // width: calc(100% + ( 62.5px * 2 )); +// // height: 25px; +// // border-bottom-left-radius: 55px; +// // border-bottom-right-radius: 55px; +// // background-color: #e8e8e8; +// // opacity: 1; +// // z-index: 2; +// // } +// // .pca-hold .pca-sub .pca-bot { +// // display: block; +// // width: 200px; +// // height: 15px; +// // position: absolute; +// // top: 0; +// // left: 50%; +// // background-color: #B1B1B1; +// // border-radius: 0 0 225px 225px; +// // opacity: 1; +// // z-index: 2; +// // transform: translate(-50%,0); +// // } + +// // } + +// // @include media("screen", "lg") { +// // .pca-hold { +// // width: 70%; +// // } +// // .pca-hold .pca-main { +// // background-color: #dcdcdc; +// // // height: 100%; +// // border: 18px solid #2d2d2d; +// // border-radius: 0; +// // border-top-left-radius: 12px; +// // border-top-right-radius: 12px; +// // } +// // .pca-hold .pca-main:after { +// // content: ''; +// // position: absolute; +// // top: -13.5px; +// // left: 50%; +// // transform: translate(-50%,0); +// // width: 9.5px; +// // height: 9.5px; +// // background-color: #959595; +// // border-radius: 100%; +// // } +// // .pca-hold .pca-main:before { +// // content: ''; +// // opacity: 0; +// // } +// // .pca-hold .pca-inner { +// // display: block; +// // } +// // .pca-hold .pca-sub { +// // display: block; +// // text-align: center; +// // } +// // .pca-hold .pca-sub .pca-top { +// // position: relative; +// // display: block; +// // width: 100%; +// // left: 0; +// // height: 40px; +// // background-color: #e8e8e8; +// // border-bottom-left-radius: 12px; +// // border-bottom-right-radius: 12px; +// // opacity: 1; +// // z-index: 2; +// // } +// // .pca-hold .pca-sub .pca-top:after { +// // content: ''; +// // position: absolute; +// // width: 20px; +// // height: 20px; +// // top: 50%; +// // left: 50%; +// // transform: translate(-50%,-50%); +// // background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoBAMAAAB+0KVeAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAeUExURQAAADAsLiYiIycjJColJysmKC0mKjMtLykkJiMfIJJeh/oAAAAJdFJOUwAq68uOQmUTrzcLkcAAAADuSURBVCjPbZI7DwFREIVn41mugkSn8NpuEwnZTqskRHQqiQ6JfkMhSruI829Z99rMNXOKW3yZx5mZS8RUOpNQKUok3CKVgcBdwANwE3ACjAWMlJKVABcJ0f0D9SlRjfab6S5n3gkY+jQPgPaO9QX65+xFx7IquNYsMFf4G4/pZYoWHBib7BVniW/8OCWfJrAccWj3VAw4bFmoGPqzHmqRPa3mQ+tuT+f6tOY/5+YaGdh0YKotBN1vgbILk+/xPRfefWXzN61TrAz6M0qR3DLRTGY7pvJsM2ky4B8kCw3QXlLjitRn3+64yEb2Foa9AZ6l7piHRtOVAAAAAElFTkSuQmCC); +// // background-size: cover; +// // } +// // .pca-hold .pca-sub .pca-mid { +// // display: block; +// // text-align: center; +// // height: 40px; +// // width: 100%; +// // position: relative; +// // z-index: 1; +// // } +// // .pca-hold .pca-sub .pca-mid .pca-part { +// // display: block; +// // margin: 0 auto; +// // border-bottom: 50px solid #cdcdcd; +// // border-left: 25px solid transparent; +// // border-right: 25px solid transparent; +// // height: 0; +// // width: 150px; +// // } +// // .pca-hold .pca-sub .pca-bot { +// // position: relative; +// // display: block; +// // width: 200px; +// // height: 15px; +// // margin: 0 auto; +// // background-color: #e8e8e8; +// // border-radius: 10px 10px 0 0; +// // opacity: 1; +// // z-index: 2; +// // } +// // } diff --git a/docs/css/partials/_footer.scss b/docs/css/partials/_footer.scss new file mode 100644 index 0000000..d74f039 --- /dev/null +++ b/docs/css/partials/_footer.scss @@ -0,0 +1,53 @@ +.footer { + background-color: #fff; + color: $darkgray; + padding: ( $theme-spacing * 2 ) 0; + margin-top: $theme-spacing; + text-align: center; + + &-links { + display: flex; + flex: 1; + margin-left: -( $theme-spacing / 2 ); + margin-right: -( $theme-spacing / 2 ); + + li { + display: flex; + flex: 1 0 auto; + margin: 0 ( $theme-spacing / 2 ); + text-align: center; + + // @include media("screen", "sm") { + // flex: 0 1 auto; + // margin-right: $theme-spacing * 2; + // text-align: left; + // } + + a { + padding: $theme-spacing 0; + width: 100%; + } + } + } + + hr { + border: $theme-border--size solid $gray; + margin-bottom: $theme-spacing * 2; + margin-top: $theme-spacing; + } + + p { + font-weight: 300; + margin-bottom: ( $theme-spacing / 3 ); + } + + span { + color: $red; + margin: 0 3px; + } + + // @include media("screen", "sm") { + // &-copyright { text-align: left; } + // &-credits { text-align: right; } + // } +} diff --git a/docs/css/partials/_header.scss b/docs/css/partials/_header.scss new file mode 100644 index 0000000..a8247ec --- /dev/null +++ b/docs/css/partials/_header.scss @@ -0,0 +1,40 @@ +@mixin background-animation($color-list, $duration) { + + $size: 200 * length($color-list); + $size: unquote("#{ $size }%"); + + background: linear-gradient(105deg, $color-list); + background-size: $size $size; + animation: rotate #{ $duration }s ease infinite; +} + +.header { + @include background-animation( ($blue, $green, $yellow), 30 ); + + height: 100%; + overflow: hidden; + + .column { + height: 100%; + padding: $theme-spacing; + } + + .brand { + color: #fff; + font-size: 80%; + line-height: 1; + padding: $theme-spacing 0; + + // @include media('screen', 'sm') { font-size: 100%; } + + &-name { + margin-bottom: $theme-spacing / 4; + + &--pronunciation { + font-size: .7em; + font-weight: 100; + margin-left: $theme-spacing / 2; + } + } + } +} diff --git a/docs/css/partials/_navigation.scss b/docs/css/partials/_navigation.scss new file mode 100644 index 0000000..9630001 --- /dev/null +++ b/docs/css/partials/_navigation.scss @@ -0,0 +1,26 @@ +.nav-menu { + display: flex; +} + +.list-header { + display: flex; + padding: 16px 0 8px 0; + font-weight: 600; + color: #fff; + font-size: 1em; +} + +.list-item { + display: inline-flex; + + margin: 0 !important; + padding: 16px 32px; + background-color: #fff; + border-bottom: 1px solid #efefef; + font-size: .8em; + border-radius: 3px; +} + +.list-item:last-child { + border: none; +} diff --git a/docs/css/partials/_social.scss b/docs/css/partials/_social.scss new file mode 100644 index 0000000..3cd6b0a --- /dev/null +++ b/docs/css/partials/_social.scss @@ -0,0 +1,104 @@ +.row--social { + background-color: #fff; + box-shadow: 0 0 30px 0 rgba($black, .4); + padding: $theme-spacing 0; + position: relative; + z-index: 1; + + // @include media("screen", "md") { padding: ( $theme-spacing * 2 ) 0; } + + > .cell { + @extend .cell-align--center; + } + + &:before, + &:after { + background-color: #fff; + content: ''; + height: 100%; + position: absolute; + top: 0; + width: 100%; + } + + &:before { left: -100%; } + &:after { right: -100%; } + + ul { + @extend .row; + } +} + +.social { + + &-btn { + flex: 1; + margin-left: $theme-spacing / 2; + + .btn { + padding: 0; + width: 100%; + justify-content: center; + + /* TODO: Fix media queries to only apply to current viewport */ + + // @include media("screen", "sm") { padding: 10px; } + // @include media("screen", "lg") { padding: 0; } + + .fa { + align-self: center; + min-width: 40px; + text-align: center; + + &-googleplus:before { content: "\f0d5"; } + } + + $social-media-list: "facebook", "twitter", "googleplus", "pinterest", "reddit", "digg"; + $social-media-colors: $color-facebook, $color-twitter, $color-googleplus, $color-pinterest, $color-reddit, $color-digg; + + @for $i from 1 through length($social-media-list) { + + &--#{ nth($social-media-list, $i) } { + border-color: nth($social-media-colors, $i); + + .social-counter { background-color: nth($social-media-colors, $i); } + .fa { color: nth($social-media-colors, $i); } + + &:hover { + + .social-counter { + &:before { border-right-color: nth($social-media-colors, $i); } + } + } + } + } + } + } + + &-counter { + border-radius: 100%; + flex: 1; + font-size: .5em; + justify-content: center; + margin: $theme-spacing / 2; + padding: 3px 0; + position: relative; + text-align: center; + + /* TODO: Fix media queries to only apply to current viewport */ + + // @include media("screen", "sm") { display: none; } + // @include media("screen", "lg") { display: flex; } + + &:before { + border-bottom: 5px dashed transparent; + border-left: 5px dashed transparent; + border-right: 5px dashed transparent; + border-top: 5px dashed transparent; + content: ''; + left: -8px; + position: absolute; + top: 5px; + } + } +} diff --git a/docs/css/partials/_theme.scss b/docs/css/partials/_theme.scss new file mode 100644 index 0000000..ded2d5b --- /dev/null +++ b/docs/css/partials/_theme.scss @@ -0,0 +1,71 @@ +.main .cell:not(.unstyled) { + background-color: rgba($darkgray, .1); + font-size: 80%; + margin-top: 1px; + margin-bottom: 1px; + padding: $theme-spacing / 2; +} + +.cells-container { + padding: $theme-spacing / 2; + background-color: rgba($darkgray, .1); + border-radius: $theme-border--size; +} + +.module { + $module-box-shadow--size: 25px; + + &-content { + background-color: #fff; + padding: $theme-spacing * 2; + border-left: 1px solid rgba($darkgray, .15); + border-right: 1px solid rgba($darkgray, .15); + border-radius: $theme-border--size; + box-shadow: 0 $module-box-shadow--size 0 0 #fff, + 0 ( -$module-box-shadow--size ) 0 0 #fff, + 0 0 ( $module-box-shadow--size * 2 ) 0 rgba($darkgray, .1); + margin-bottom: $theme-spacing; + } + + &-section { + } + + &-title { + margin-bottom: $theme-spacing; + font-weight: 300 !important; + } + + &-description { + background-color: rgba($lightblue, 0.05); + border-radius: $theme-border--size; + border-left: $theme-border--size solid rgba($lightblue, 0.5); + color: #666; + font-size: 90%; + font-weight: 200; + line-height: 1.3; + margin-bottom: $theme-spacing; + padding: $theme-spacing; + + &::before { + border: $theme-border--size solid rgba($lightblue, 0.5); + border-radius: 100%; + color: rgba($lightblue, 0.5); + content: '\f129'; + display: inline-block; + font-family: 'FontAwesome'; + font-size: 80%; + margin-right: $theme-spacing / 2; + padding: ( $theme-spacing / 4 ) ( $theme-spacing / 2 + 2px ); + } + } +} + +.demo { + + &-alignment { + + &-cross { + height: 150px; + } + } +} diff --git a/docs/dictionary.jade b/docs/dictionary.jade new file mode 100644 index 0000000..9116cc9 --- /dev/null +++ b/docs/dictionary.jade @@ -0,0 +1,53 @@ +- var name = 'GridleCSS' +- var description = 'Yet another flex grid framework!' +- var version = '1.0.rc1' + +- var basic = 'GridleCSS' +- var basic_description = 'GridleCSS in all it\'s glory! Flexible cells, viewport specific rules and more..' + +- var responsive = 'Responsive' +- var responsive_description = 'Responsive modifiers enable specifing different column sizes, offsets alignment and distribution at certain viewport widths.' + +- var fluid = 'Fluid Layout' +- var fluid_description = 'Percent based widths allow fluid resizing of columns and rows' + +- var offset = 'Offsets' +- var offset_description = '' +- var offset_viewport = 'Offsets by viewport' +- var offset_viewport_description = 'You can also specify on which viewport the offset should apply' + +- var nested = 'Gridcellceptional!' +- var nested_description = 'A cell, inside a row, inside a cell, inside a row.. oh you get it!' + +- var auto = 'Auto GridleCSS' +- var auto_additional = 'Auto Width' +- var auto_additional_two = 'Auto Width on Viewport' +- var auto_description = '' +- var auto_additional_description = 'Add any number of auto sizing cells to a row. Let the grid figure it out' +- var auto_additional_two_description = 'You can also specify on which viewport the grid should figure it out whether or not it should apply it.' + +- var alignment = 'Alignments' +- var alignment_description = '' +- var alignment_additional = 'Alignments on Parent elements' +- var alignment_additional_description = 'This defines the alignment along the main axis. It helps distribute extra free space left over when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size.' +- var alignment_additional_two = '' +- var alignment_additional_two_description = 'Similar to the above except you can specify the behaviour of how flex-items are laid out along the cross axis, instead of main axis, of the current line.' +- var alignment_additional_three = 'Alignments on Child elements' +- var alignment_additional_three_description = 'This property will allow the default alignment, or the one specified on the parent to be overridden for indvidual flex items' +- var alignment_additional_four = 'Alignment by Viewport' +- var alignment_additional_four_description = 'You can also specify what alignment rule should be considered depending on the viewport by adding the viewport class' + +- var distribution = 'Distribution' +- var distribution_description = '' +- var distribution_between = '' +- var distribution_between_description = 'Flex items are displayed with equal spacing between them, first and last flex items are aligned to the edges of the flex container' +- var distribution_around = '' +- var distribution_around_description = 'Flex items are displayed with equal spacing around every flex item, even the first and the last flex items' +- var distribution_viewport = 'Distribution by Viewport' +- var distribution_viewport_description = 'You can also specify what distribution rule should be considered depending on the viewport by adding the viewport class' + +- var reversed = 'Reversing' +- var reversed_description = 'Add classes to reverse cells direction' + +- var reordered = 'Reordering' +- var reordered_description = 'Add classes to reorder cells' diff --git a/docs/dist/css/main.min.css b/docs/dist/css/main.min.css new file mode 100644 index 0000000..2e95df1 --- /dev/null +++ b/docs/dist/css/main.min.css @@ -0,0 +1,514 @@ + +@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,700,200italic,400italic,700italic); + +/* + + GridleCSS Theme v1.0.0 + + Author : Vlad Radulescu + Twitter : @pacMakaveli90 + Github : pacMakaveli90 + + Author URL : http://creative-studio51.co.uk/ + Project URL : https://github.com/studio51/gridlecss/tree/gh-pages + +*/ +/*! sanitize.css | CC0 Public Domain | github.com/jonathantneal/sanitize.css */ +/* + * Normalization + */ +/* + + [0] IE11+ + [1] All browsers without overlaying scrollbars + [2] iOS8+ + [3] Chrome 40+, iOS 8+, Safari 8+ + [4] Firefox 36+, Internet Explorer 11+, Windows Phone 8.1+ + +*/ +:root { + -ms-overflow-style: -ms-autohiding-scrollbar; + /* [0] */ + overflow-y: scroll; + /* [1] */ + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; + text-size-adjust: 100%; + /* [2] */ } + +audio:not([controls]) { + display: none; + /* [3] */ } + +details { + display: block; + /* [4] */ } + +input[type="number"] { + width: auto; } + +input[type="search"] { + -webkit-appearance: textfield; } + input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; } + +pre { + overflow: auto; } + +progress { + display: inline-block; } + +small { + font-size: 75%; } + +template { + display: none; } + +textarea { + overflow: auto; } + +[hidden] { + display: none; } + +[unselectable] { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } + +/* + * Universal inheritance + */ +*, +:before, +:after { + box-sizing: inherit; } + +* { + line-height: inherit; } + +:before, +:after { + text-decoration: inherit; + vertical-align: inherit; } + +/* + * Opinionated defaults + */ +*, +:before, +:after { + border-style: solid; + border-width: 0; } + +* { + margin: 0; + padding: 0; } + +:root { + box-sizing: border-box; + cursor: default; + font: 16px / 1.5 sans-serif; + text-rendering: optimizeLegibility; } + +html { + background-color: #FFFFFF; } + +a { + text-decoration: none; } + +audio, +canvas, +iframe, +img, +svg, +video { + vertical-align: middle; } + +button, +input, +select, +textarea { + background-color: transparent; } + +button, +input, +select, +textarea { + color: inherit; + font-family: inherit; + font-style: inherit; + font-weight: inherit; } + +button, +input, +select, +textarea { + min-height: 1.5em; } + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; } + +nav ol, +nav ul { + list-style: none; } + +select { + -moz-appearance: none; + -webkit-appearance: none; } + select::-ms-expand { + display: none; } + select::-ms-value { + color: currentColor; } + +table { + border-collapse: collapse; + border-spacing: 0; } + +textarea { + resize: vertical; } + +::-moz-selection { + background-color: #B3D4FC; + text-shadow: none; } + +::selection { + background-color: #B3D4FC; + text-shadow: none; } + +@media screen { + [hidden~="screen"] { + display: inherit; } + [hidden~="screen"]:not(:active):not(:focus):not(:target) { + clip: rect(0 0 0 0) !important; + position: absolute !important; } } + +@-webkit-keyframes rotate { + 0% { + background-position: 0% 18%; } + 50% { + background-position: 100% 83%; } + 100% { + background-position: 0% 18%; } } + +@keyframes rotate { + 0% { + background-position: 0% 18%; } + 50% { + background-position: 100% 83%; } + 100% { + background-position: 0% 18%; } } + +@-webkit-keyframes bounceInDown { + 0%, 60%, 75%, 90%, 100% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } + 0% { + opacity: 0; + -webkit-transform: translate3d(0, -3000px, 0); + transform: translate3d(0, -3000px, 0); } + 60% { + opacity: 1; + -webkit-transform: translate3d(0, 25px, 0); + transform: translate3d(0, 25px, 0); } + 75% { + -webkit-transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0); } + 90% { + -webkit-transform: translate3d(0, 5px, 0); + transform: translate3d(0, 5px, 0); } + 100% { + -webkit-transform: none; + transform: none; } } + +@keyframes bounceInDown { + 0%, 60%, 75%, 90%, 100% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } + 0% { + opacity: 0; + -webkit-transform: translate3d(0, -3000px, 0); + transform: translate3d(0, -3000px, 0); } + 60% { + opacity: 1; + -webkit-transform: translate3d(0, 25px, 0); + transform: translate3d(0, 25px, 0); } + 75% { + -webkit-transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0); } + 90% { + -webkit-transform: translate3d(0, 5px, 0); + transform: translate3d(0, 5px, 0); } + 100% { + -webkit-transform: none; + transform: none; } } + +@-webkit-keyframes bounce { + 0%, 20%, 40%, 60%, 80%, 100% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } + 10%, 30%, 50%, 70%, 90% { + -webkit-transform: translate3d(0, 15px, 0); + transform: translate3d(0, 15px, 0); } } + +@keyframes bounce { + 0%, 20%, 40%, 60%, 80%, 100% { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } + 10%, 30%, 50%, 70%, 90% { + -webkit-transform: translate3d(0, 15px, 0); + transform: translate3d(0, 15px, 0); } } + +.bounce { + -webkit-animation-name: bounce; + animation-name: bounce; } + +html, body { + height: 100%; } + +body { + background-color: #F0F0F0; + font-family: 'Source Sans Pro', sans-serif; + font-size: 100%; } + +.btn { + border-radius: 2px; + color: #fff; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-weight: 300; + line-height: 16px; + padding: 8px 16px; } + .btn--outline { + border: 3px solid #999999; } + .btn-green { + background-color: #a0de5e; + box-shadow: 0 2px 0 rgba(140, 193, 82, 0.8); } + .btn-green:hover { + background-color: #A0D468; } + .btn-blue { + background-color: #37a5e7; + box-shadow: 0 2px 0 rgba(16, 104, 154, 0.8); } + .btn-blue:hover { + background-color: #42A2DC; } + .btn-orange { + background-color: #ff6c4e; + box-shadow: 0 2px 0 rgba(233, 87, 63, 0.8); } + .btn-orange:hover { + background-color: #FC6E51; } + .btn-yellow { + background-color: #ffce54; + box-shadow: 0 2px 0 rgba(252, 187, 66, 0.8); } + .btn-yellow:hover { + background-color: #FFCE54; } + .btn-red { + background-color: #e54d3f; + box-shadow: 0 2px 0 rgba(218, 68, 83, 0.8); } + .btn-red:hover { + background-color: #DA564A; } + +.header { + background: -webkit-linear-gradient(345deg, #42A2DC, #A0D468, #FFCE54); + background: linear-gradient(105deg, #42A2DC, #A0D468, #FFCE54); + background-size: 600% 600%; + -webkit-animation: rotate 30s ease infinite; + animation: rotate 30s ease infinite; + height: 100%; + overflow: hidden; } + .header .column { + height: 100%; + padding: 16px; } + .header .brand { + color: #fff; + font-size: 80%; + line-height: 1; + padding: 16px 0; } + .header .brand-name { + margin-bottom: 4px; } + .header .brand-name--pronunciation { + font-size: .7em; + font-weight: 100; + margin-left: 8px; } + +.nav-menu { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; } + +.list-header { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 16px 0 8px 0; + font-weight: 600; + color: #fff; + font-size: 1em; } + +.list-item { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + margin: 0 !important; + padding: 16px 32px; + background-color: #fff; + border-bottom: 1px solid #efefef; + font-size: .8em; + border-radius: 3px; } + +.list-item:last-child { + border: none; } + +.column { + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; } + +.pca-hold { + width: 100%; } + +.pca-hold .pca-main { + display: block; + background-color: #e7e7e7; + position: relative; + height: 100%; } + +.main .cell:not(.unstyled) { + background-color: #999999; + background-color: rgba(153, 153, 153, 0.1); + font-size: 80%; + margin-top: 1px; + margin-bottom: 1px; + padding: 8px; } + +.cells-container { + padding: 8px; + background-color: #999999; + background-color: rgba(153, 153, 153, 0.1); + border-radius: 3px; } + +.module-content { + background-color: #fff; + padding: 32px; + border-left: 1px solid rgba(153, 153, 153, 0.15); + border-right: 1px solid rgba(153, 153, 153, 0.15); + border-radius: 3px; + box-shadow: 0 25px 0 0 #fff, 0 -25px 0 0 #fff, 0 0 50px 0 rgba(153, 153, 153, 0.1); + margin-bottom: 16px; } + +.module-title { + margin-bottom: 16px; + font-weight: 300 !important; } + +.module-description { + background-color: #4FC1E9; + background-color: rgba(79, 193, 233, 0.05); + border-radius: 3px; + border-left: 3px solid rgba(79, 193, 233, 0.5); + color: #666; + font-size: 90%; + font-weight: 200; + line-height: 1.3; + margin-bottom: 16px; + padding: 16px; } + .module-description:before { + border: 3px solid #4FC1E9; + border: 3px solid rgba(79, 193, 233, 0.5); + border-radius: 100%; + color: #4FC1E9; + color: rgba(79, 193, 233, 0.5); + content: '\f129'; + display: inline-block; + font-family: 'FontAwesome'; + font-size: 80%; + margin-right: 8px; + padding: 4px 10px; } + +.demo-alignment-cross { + height: 150px; } + +.footer { + background-color: #fff; + color: #999999; + padding: 32px 0; + margin-top: 16px; + text-align: center; } + .footer-links { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + margin-left: -8px; + margin-right: -8px; } + .footer-links li { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + margin: 0 8px; + text-align: center; } + .footer-links li a { + padding: 16px 0; + width: 100%; } + .footer hr { + border: 3px solid #F0F0F0; + margin-bottom: 32px; + margin-top: 16px; } + .footer p { + font-weight: 300; + margin-bottom: 5.3333333333px; } + .footer span { + color: #DA564A; + margin: 0 3px; } + +/* + + Just for showcasing GridleCSS Alignments features + +*/ +#grid-alignment.css .demo-alignment .row { + height: 10em; } + #grid-alignment.css .demo-alignment .row span { + border-bottom: 1px dotted rgba(51, 51, 51, 0.4); } + +#grid-alignment.css .demo-baseline-1 span { + font-size: 10em; } + +#grid-alignment.css .demo-baseline-2 span { + font-size: 15em; } + +.text-center { + text-align: center; } + +.module-title { + font-family: 'Source Sans Pro', sans-serif; + font-weight: 400; } + +.margin { + display: block; + width: 1px; + height: 1px; } + +.mh16 { + margin-bottom: 16px; + margin-top: 16px; } + +.mv16 { + margin-left: 16px; + margin-right: 16px; } \ No newline at end of file diff --git a/docs/dist/css/main.min.css.map b/docs/dist/css/main.min.css.map new file mode 100644 index 0000000..381106d --- /dev/null +++ b/docs/dist/css/main.min.css.map @@ -0,0 +1,19 @@ +{ + "version": 3, + "file": "main.min.css", + "sources": [ + "../../css/main.scss", + "../../css/helpers/_variables.scss", + "../../css/helpers/_reset.scss", + "../../css/helpers/_animations.scss", + "../../css/helpers/_visibility.scss", + "../../css/components/_buttons.scss", + "../../css/partials/_header.scss", + "../../css/partials/_navigation.scss", + "../../css/partials/_device.scss", + "../../css/partials/_theme.scss", + "../../css/partials/_footer.scss" + ], + "mappings": "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", + "names": [] +} \ No newline at end of file diff --git a/docs/dist/dictionary.html b/docs/dist/dictionary.html new file mode 100644 index 0000000..e69de29 diff --git a/docs/dist/index.html b/docs/dist/index.html new file mode 100644 index 0000000..5c88ec7 --- /dev/null +++ b/docs/dist/index.html @@ -0,0 +1,356 @@ + + + + + + GridleCSS | Yet another flex grid framework! + + + + + +
+
+
+

Module: The Grid

+
+
+
+
+
+
+

GridleCSS

+

GridleCSS in all it's glory! Flexible cells, viewport specific rules and more..

+
+
+
+
+
auto-xs
+
auto-xscell-sm-3cell-md-7auto-lg
+
auto-xs
+
+
+
cell-xs-9cell-sm-7cell-md-5cell-lg-3
+
auto
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos + blanditiis odit et ratione, id laboriosam sapiente consequuntur + laborum officia, impedit eligendi natus quisquam dolor in at + aliquam, tempore maiores est. +
+
+
+
xs-auto
+
cell-xs-3
+
xs-auto
+
cel-xs-1
+
+
+
cell-xs-4
+
cell-xs-3
+
cell-xs-4
+
cell-xs-1
+
+
+
cell-xs-2
+
cell-xs-2
+
cell-xs-2
+
cell-xs-2
+
cell-xs-2
+
cell-xs-2
+
+
+
cell-xs-1
+
cell-xs-1
+
cell-xs-1
+
cell-xs-1
+
cell-xs-1
+
cell-xs-1
+
cell-xs-1
+
cell-xs-1
+
cell-xs-1
+
cell-xs-1
+
cell-xs-1
+
cell-xs-1
+
+
+
cell-xs-12
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Responsive

+

Responsive modifiers enable specifing different column sizes, offsets alignment and distribution at certain viewport widths.

+
+
+
+
+
cell-xs-5cell-sm-4cell-md-3cell-lg-2
+
cell-xs-2cell-sm-4cell-md-6cell-lg-8
+
cell-xs-5cell-sm-4cell-md-3cell-lg-2
+
+
+
cell-xs-3cell-sm-3cell-md-2cell-lg-2
+
cell-xs-9cell-sm-6cell-md-2cell-lg-2
+
cell-xscell-sm-3cell-md-8cell-lg
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Fluid Layout

+

Percent based widths allow fluid resizing of columns and rows

+
+
+
+
+
auto-xs
+
+
+
cell-xs-1
+
cell-xs-11
+
+
+
cell-xs-2
+
cell-xs-10
+
+
+
cell-xs-3
+
cell-xs-9
+
+
+
cell-xs-4
+
cell-xs-8
+
+
+
cell-xs-5
+
cell-xs-7
+
+
+
cell-xs-6
+
cell-xs-6
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Reversing

+

Add classes to reverse cells direction

+
+
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
+
+
+
+
+
+
+
+
+
+
+
+

Reordering

+

Add classes to reorder cells

+
+
+
+
+
1
+
2
+
3
+
4
+
5
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Auto Width

+

Add any number of auto sizing cells to a row. Let the grid figure it out

+
+
+
+
+
auto
+
auto
+
auto
+
auto
+
+
+
cell-xs-3
+
auto
+
cell-xs-2
+
auto
+
+
+
+
+
+
+
+
+
+
+

Auto Width on Viewport

+

You can also specify on which viewport the grid should figure it out whether or not it should apply it.

+
+
+
+
+
full-xsauto-smcell-md-3auto-lg
+
full-xsauto-smauto-mdauto-lg
+
full-xsauto-smcell-md-2auto-lg
+
full-xsauto-smauto-mdauto-lg
+
+
+
+
+
+
+
+
+
+
+
+
+

Gridcellceptional!

+

A cell, inside a row, inside a cell, inside a row.. oh you get it!

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/docs/dist/js/main.min.js b/docs/dist/js/main.min.js new file mode 100644 index 0000000..553e9be --- /dev/null +++ b/docs/dist/js/main.min.js @@ -0,0 +1,347 @@ +$(document).ready(function() { + var a, b, c, d, e = 1e3; + a = setTimeout(function() { + $("#animated .pca-anim-wrap").addClass("macbook"); + }, 1 * e), b = setTimeout(function() { + $("#animated .pca-anim-wrap").addClass("ipad"); + }, 2 * e), c = setTimeout(function() { + $("#animated .pca-anim-wrap").addClass("iphone"); + }, 3 * e), d = setTimeout(function() { + $("#animated .pca-anim-wrap").removeClass("macbook ipad iphone"), responsiveAnimationTransform(); + }, 4 * e), $(".nav-menu a.btn").on("click", function(a) { + a.preventDefault(); + var b = $(this).data("target"); + $("html, body").stop().animate({ + scrollTop: $(b).offset().top + }, 1e3); + }), $(".show-css").on("click", function(a) { + a.preventDefault(); + var b = $(this).attr("href"), c = $("section" + b); + c.toggleClass("css"); + }), $(".social-buttons--container ul").sharegg({ + data: { + url: "http://studio51.github.io/gridlecss", + title: "GridleCSS, yet another flexbox grid!" + }, + buttons: { + googleplus: { + show: !0, + count: !0 + }, + twitter: { + show: !0, + count: !0 + }, + digg: { + show: !0, + count: !0 + } + } + }), $("#toggle-menu").on("click", function(a) { + a.preventDefault(), openItemInfo($(this).attr("href")); + var b = $(".nav-menu"); + $(b).toggleClass("open"), $(this).toggleClass("close"); + }); +}), function(a) { + "use strict"; + function b(a, b) { + var c = a.toString(); + return Object.keys(b).forEach(function(a) { + var d = new RegExp("\\{" + a + "\\}", "gm"); + c = c.replace(d, b[a]); + }), c; + } + function c(a) { + return /\/$/.test(a) ? a : a + "/"; + } + function d(b, d, e) { + a.ajax({ + url: c(a.fn.sharegg.defaults.apiUrl) + "stats/" + b + "?url=" + encodeURIComponent(d), + dataType: "json", + type: "GET" + }).complete(function(a) { + 200 === a.status ? e(a.responseJSON) : e(); + }); + } + function e(a, b, c) { + d(a, b, function(b) { + c("reddit" === a ? b ? b.score : 0 : "stumbleupon" === a ? b ? b.views : 0 : "pocket" === a || "vkontakte" === a ? b ? b.count : 0 : b ? b.shares : 0); + }); + } + function f(a) { + var b = l[a]; + if (!b) throw new Error("Invalid service name: " + a); + return b; + } + function g(a) { + return void 0 !== l[a]; + } + function h(a) { + var b = m[a]; + return b || (b = m.en_US, console.warn("Invalid locale: " + a)), b; + } + function i(c) { + var d = a(c), g = d.data("service-name"), h = f(g), i = d.closest(".sharegg-widget"), j = encodeURIComponent(i.data("url")), k = encodeURIComponent(i.data("title")), l = encodeURIComponent(i.data("description")), m = encodeURIComponent(i.data("image")), n = window.open(b(h.url, { + url: j, + title: k, + description: l, + image: m + }), "sharegg", b("width={width}, height={height}, resizable=1, scrollbars=1, top=0, left=0", h.screenSize)), o = setInterval(function() { + n.closed && (clearInterval(o), e(g, j, function(a) { + d.find("span").text(a); + })); + }, 600); + } + function j(b) { + var c; + c = b ? b.find("li.social-btn") : a("li.social-btn"), a.each(c, function() { + var b = a(this).find("a"); + e(b.data("service-name"), b.closest(".sharegg-widget").data("url"), function(a) { + b.find("span").text(a); + }); + }); + } + function k(b, c) { + c = a.extend({}, a.fn.sharegg.defaults, c), a.each(c.buttons, function(a) { + if (this.show === !0) { + var c = a.toString(); + if (!g(c)) throw new Error("Invalid service name: " + c); + var d = h("en_US").messages[c].title; + b.append('
    • '); + var e = b.find("." + c + "-btn"); + this.count === !0 ? e.parent().append('0') : e.addClass("social-no-counter"); + } + }); + } + var l = { + buffer: { + url: "https://bufferapp.com/add?url={url}&title={description}&source=button", + supportCount: !0, + screenSize: { + height: 350, + width: 800 + } + }, + delicious: { + url: "http://www.delicious.com/save?v=5&noui&jump=close&url={url}&title={title}", + supportCount: !1, + screenSize: { + height: 650, + width: 1024 + } + }, + digg: { + url: "http://digg.com/submit?url={url}", + supportCount: !1, + screenSize: { + height: 650, + width: 1024 + } + }, + facebook: { + url: "https://www.facebook.com/sharer/sharer.php?u={url}&display=popup&ref=plugin", + supportCount: !0, + screenSize: { + height: 306, + width: 650 + } + }, + googleplus: { + url: "https://plus.google.com/share?url={url}", + supportCount: !0, + screenSize: { + height: 620, + width: 620 + } + }, + linkedin: { + url: "http://www.linkedin.com/shareArticle?url={url}&title={title}&summary={description}&source=sharegg", + supportCount: !0, + screenSize: { + height: 650, + width: 1024 + } + }, + pinterest: { + url: "https://pinterest.com/pin/create/bookmarklet/?url={url}&description={description}&media={image}", + supportCount: !0, + screenSize: { + height: 650, + width: 1024 + } + }, + pocket: { + url: "https://getpocket.com/save?url={url}&title={title}", + supportCount: !1, + screenSize: { + height: 360, + width: 576 + } + }, + reddit: { + url: "http://reddit.com/submit?url={url}&title={title}", + supportCount: !0, + screenSize: { + height: 650, + width: 1024 + } + }, + stumbleupon: { + url: "http://www.stumbleupon.com/badge/?url={url}", + supportCount: !0, + screenSize: { + height: 602, + width: 480 + } + }, + tumblr: { + url: "http://www.tumblr.com/share/link?url={url}&name={title}&description={description}", + supportCount: !1, + screenSize: { + height: 650, + width: 1024 + } + }, + twitter: { + url: "https://twitter.com/share?url={url}&text={title}", + supportCount: !0, + screenSize: { + height: 420, + width: 550 + } + }, + vkontakte: { + url: "https://vk.com/share.php?url={url}", + supportCount: !0, + screenSize: { + height: 445, + width: 642 + } + } + }, m = { + en_US: { + name: "English (United States)", + alias: [ "en", "en-US" ], + messages: { + buffer: { + title: "Share on Buffer" + }, + delicious: { + title: "Share on Delicious" + }, + digg: { + title: "Share on Digg" + }, + facebook: { + title: "Share on Facebook" + }, + googleplus: { + title: "Share on Google Plus" + }, + linkedin: { + title: "Share on Linkedin" + }, + pinterest: { + title: "Share on Pinterest" + }, + pocket: { + title: "Share on Pocket" + }, + reddit: { + title: "Share on Reddit" + }, + stumbleupon: { + title: "Share on StumbleUpon" + }, + tumblr: { + title: "Share on Tumblr" + }, + twitter: { + title: "Share on Twitter" + }, + vkontakte: { + title: "Share on VK" + } + } + } + }; + a.fn.sharegg = function() { + var b; + if (0 === arguments.length) b = a.fn.sharegg.defaults; else { + if (1 !== arguments.length) throw new Error("Invalid number of arguments: " + arguments.length); + if ("string" == typeof arguments[0]) { + if ("count" === arguments[0]) return this.each(function() { + j(a(this)); + }); + throw new Error("Invalid arguments value: " + arguments[0]); + } + b = arguments[0]; + } + return this.each(function() { + var c = a(this); + c.addClass("sharegg-widget"), void 0 === c.data("url") && c.data("url", void 0 !== b.data && b.data.url ? b.data.url : "http://www.sharegg.org"), + void 0 === c.data("title") && c.data("title", void 0 !== b.data && b.data.title ? b.data.title : "Sharegg"), + void 0 === c.data("description") && c.data("description", void 0 !== b.data && b.data.description ? b.data.description : ""), + void 0 === c.data("image") && c.data("image", void 0 !== b.data && b.data.image ? b.data.image : ""), + k(a(".social-buttons--container ul"), b), j(c); + }); + }, a.fn.sharegg.defaults = { + apiUrl: "http://api.sharegg.org/", + buttons: { + buffer: { + show: !0, + count: !0 + }, + delicious: { + show: !0, + count: !0 + }, + digg: { + show: !0, + count: !0 + }, + facebook: { + show: !0, + count: !0 + }, + googleplus: { + show: !0, + count: !0 + }, + linkedin: { + show: !0, + count: !0 + }, + pinterest: { + show: !0, + count: !0 + }, + pocket: { + show: !0, + count: !0 + }, + reddit: { + show: !0, + count: !0 + }, + stumbleupon: { + show: !0, + count: !0 + }, + tumblr: { + show: !0, + count: !0 + }, + twitter: { + show: !0, + count: !0 + }, + vkontakte: { + show: !0, + count: !0 + } + } + }, window.sharegg = { + popup: i + }; +}(jQuery); \ No newline at end of file diff --git a/docs/index.jade b/docs/index.jade new file mode 100644 index 0000000..990a436 --- /dev/null +++ b/docs/index.jade @@ -0,0 +1,88 @@ +!!! 5 + +include dictionary + +html(lang="en") + head + + meta(charset='utf-8') + meta(http-equiv='X-UA-Compatible', content='IE=edge') + + title #{ name } | #{ description } + + meta(name='description', content='A simple to use 12/24 columns Grid created with CSS Flex in SASS. Crafted with love by Vlad Radulescu @ Studio51') + meta(name='viewport', content='width=device-width, initial-scale=1') + + link(rel='stylesheet', href='css/main.min.css') + + body.body + + //- header.header + + //- .grid + //- .row + //- .cell.cell-xs-10 + + //- .brand + //- h1.brand-name #{ name } + //- span.brand-name--pronunciation /ɡrɪd.lɛx/ + + //- p.brand-motto #{ description } + + //- .cell.cell-xs-2 + + //- .social-buttons--container + //- ul.social-buttons + + //- .row.column + //- .cell + + //- .pca-hold + //- .pca-main + //- .pca-inner + + //- include templates/device-content.jade + + //- .pca-sub + //- .pca-top + //- .pca-mid + //- .pca-part + + //- .pca-bot + + main.main + .grid + + include templates/module-grid.jade + //- include templates/module-offsets.jade + //- include templates/module-alignment.jade + //- include templates/module-distribution.jade + + footer.footer + + .grid + .row + .cell.cell-xs-12.cell-sm-3 + + ul.list-unstyled.footer-links + li + a(href="//github.com/studio51/gridlecss/blob/master/DOCUMENTATION.md") Documentation + li + a(href="//github.com/studio51/gridlecss/blob/master/CHANGELOG.md") Changelog + li + a(href="//github.com/studio51/gridlecss/releases/tag/v#{version}") #{ name } v#{version} + + .cell.cell-xs.cell-sm + + .row + .cell + +

    Crafted with ♥ by Vlad Radulescu and maintained by Studio51 + + .cell + + p.footer-copyright + © #{ name } 2015 + + script(src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js') + script(src='js/main.min.js') diff --git a/docs/js/main.js b/docs/js/main.js new file mode 100644 index 0000000..58a1f99 --- /dev/null +++ b/docs/js/main.js @@ -0,0 +1,72 @@ +$(document).ready(function() { + + + // var responsiveAnimationTransform = function() { + var macbook, ipad, iphone, imac; + var animTime = 1000; + + macbook = setTimeout(function() { + $('#animated .pca-anim-wrap').addClass('macbook'); + }, animTime * 1); + ipad = setTimeout(function() { + $('#animated .pca-anim-wrap').addClass('ipad'); + }, animTime * 2); + iphone = setTimeout(function() { + $('#animated .pca-anim-wrap').addClass('iphone'); + }, animTime * 3); + imac = setTimeout(function() { + $('#animated .pca-anim-wrap').removeClass('macbook ipad iphone'); + responsiveAnimationTransform(); + }, animTime * 4); + // }; + // responsiveAnimationTransform(); + + $('.nav-menu a.btn').on('click', function(e) { + e.preventDefault(); + var target = $(this).data('target'); + $('html, body').stop().animate({ + scrollTop: $(target).offset().top + }, 1000); + }); + + $('.show-css').on('click', function(e) { + e.preventDefault(); + + var target = $(this).attr('href'), + parent = $('section' + target); + + parent.toggleClass('css'); + }); + + $('.social-buttons--container ul').sharegg({ + data: { + url: 'http://studio51.github.io/gridlecss', + title: 'GridleCSS, yet another flexbox grid!' + }, + buttons: { + googleplus: { + show: true, + count: true + }, + twitter: { + show: true, + count: true + }, + digg: { + show: true, + count: true + } + } + }); + + /* open folding content */ + $('#toggle-menu').on('click', function(event){ + event.preventDefault(); + openItemInfo($(this).attr('href')); + var menu = $('.nav-menu'); + + $(menu).toggleClass('open'); + $(this).toggleClass('close'); + + }); +}); diff --git a/docs/js/sharegg.js b/docs/js/sharegg.js new file mode 100644 index 0000000..4053e72 --- /dev/null +++ b/docs/js/sharegg.js @@ -0,0 +1,398 @@ +// Slightly modified to support custom Theme styles and use FontAwesome social +// icons instead of old pngs +// + +(function($) { + "use strict"; + var services = { + buffer: { + url: 'https://bufferapp.com/add?url={url}&title={description}&source=button', + supportCount: true, + screenSize: { + height: 350, + width: 800 + } + }, + delicious: { + url: 'http://www.delicious.com/save?v=5&noui&jump=close&url={url}&title={title}', + supportCount: false, + screenSize: { + height: 650, + width: 1024 + } + }, + digg: { + url: 'http://digg.com/submit?url={url}', + supportCount: false, + screenSize: { + height: 650, + width: 1024 + } + }, + facebook: { + url: 'https://www.facebook.com/sharer/sharer.php?u={url}&display=popup&ref=plugin', + supportCount: true, + screenSize: { + height: 306, + width: 650 + } + }, + googleplus: { + url: 'https://plus.google.com/share?url={url}', + supportCount: true, + screenSize: { + height: 620, + width: 620 + } + }, + linkedin: { + url: 'http://www.linkedin.com/shareArticle?url={url}&title={title}&summary={description}&source=sharegg', + supportCount: true, + screenSize: { + height: 650, + width: 1024 + } + }, + pinterest: { + url: 'https://pinterest.com/pin/create/bookmarklet/?url={url}&description={description}&media={image}', + supportCount: true, + screenSize: { + height: 650, + width: 1024 + } + }, + pocket: { + url: 'https://getpocket.com/save?url={url}&title={title}', + supportCount: false, + screenSize: { + height: 360, + width: 576 + } + }, + reddit: { + url: 'http://reddit.com/submit?url={url}&title={title}', + supportCount: true, + screenSize: { + height: 650, + width: 1024 + } + }, + stumbleupon: { + url: 'http://www.stumbleupon.com/badge/?url={url}', + supportCount: true, + screenSize: { + height: 602, + width: 480 + } + }, + tumblr: { + url: 'http://www.tumblr.com/share/link?url={url}&name={title}&description={description}', + //url: 'http://www.tumblr.com/share/quote?quote={description}&source={url}', + //url: 'http://www.tumblr.com/share/photo?source={image}&clickthru={url}&caption={description}', + //url: 'http://www.tumblr.com/share/video?embed={url}&caption={description}', + supportCount: false, + screenSize: { + height: 650, + width: 1024 + } + }, + twitter: { + url: 'https://twitter.com/share?url={url}&text={title}', + supportCount: true, + screenSize: { + height: 420, + width: 550 + } + }, + vkontakte: { + url: 'https://vk.com/share.php?url={url}', + supportCount: true, + screenSize: { + height: 445, + width: 642 + } + } + }, + locales = { + 'en_US': { + name: 'English (United States)', + alias: ['en', 'en-US'], + messages: { + buffer: { + title: 'Share on Buffer' + }, + delicious: { + title: 'Share on Delicious' + }, + digg: { + title: 'Share on Digg' + }, + facebook: { + title: 'Share on Facebook' + }, + googleplus: { + title: 'Share on Google Plus' + }, + linkedin: { + title: 'Share on Linkedin' + }, + pinterest: { + title: 'Share on Pinterest' + }, + pocket: { + title: 'Share on Pocket' + }, + reddit: { + title: 'Share on Reddit' + }, + stumbleupon: { + title: 'Share on StumbleUpon' + }, + tumblr: { + title: 'Share on Tumblr' + }, + twitter: { + title: 'Share on Twitter' + }, + vkontakte: { + title: 'Share on VK' + } + } + } + }; + + function fmt(str, args) { + var s = str.toString(); + Object.keys(args).forEach(function(k) { + var re = new RegExp('\\{' + k + '\\}', 'gm'); + s = s.replace(re, args[k]); + }); + return s; + } + + function slash(url) { + if (!(/\/$/.test(url))) { + return url + '/'; + } + return url; + } + + function getStats(serviceName, url, callback) { + $.ajax({ + url: slash($.fn.sharegg.defaults.apiUrl) + 'stats/' + serviceName + '?url=' + encodeURIComponent(url), + dataType: 'json', + type: 'GET' + }).complete(function(xhr) { + if (xhr.status === 200) { + callback(xhr.responseJSON); + } else { + callback(); + } + }); + } + + function getShareCount(serviceName, url, callback) { + getStats(serviceName, url, function(data) { + if (serviceName === 'reddit') { + callback(data ? data.score : 0); + } else if (serviceName === 'stumbleupon') { + callback(data ? data.views : 0); + } else if (serviceName === 'pocket' || serviceName === 'vkontakte') { + callback(data ? data.count : 0); + } else { + callback(data ? data.shares : 0); + } + }); + } + + function getService(serviceName) { + var s = services[serviceName]; + if (!s) { + throw new Error('Invalid service name: ' + serviceName); + } + return s; + } + + function serviceExists(serviceName) { + return services[serviceName] !== undefined; + } + + function getLocale(locale) { + var l = locales[locale]; + if (!l) { + l = locales.en_US; + console.warn('Invalid locale: ' + locale); + } + return l; + } + + function registerLocale(id, info) { + locales[id] = info; + } + + function popup(elem) { + var e = $(elem), + serviceName = e.data('service-name'), + service = getService(serviceName), + parent = e.closest('.sharegg-widget'), + url = encodeURIComponent(parent.data('url')), + title = encodeURIComponent(parent.data('title')), + description = encodeURIComponent(parent.data('description')), + image = encodeURIComponent(parent.data('image')); + var w = window.open(fmt(service.url, { + url: url, + title: title, + description: description, + image: image + }), 'sharegg', fmt('width={width}, height={height}, resizable=1, scrollbars=1, top=0, left=0', service.screenSize)); + // FIX-ME: Find a better way to do this. + var timer = setInterval(function() { + if (w.closed) { + clearInterval(timer); + getShareCount(serviceName, url, function(count) { + e.find('span').text(count); + }); + } + }, 600); + } + + function loadCount(elem) { + var buttons; + if (elem) { + buttons = elem.find('li.social-btn'); + } else { + buttons = $('li.social-btn'); + } + $.each(buttons, function() { + var e = $(this).find('a'); + getShareCount(e.data('service-name'), e.closest('.sharegg-widget').data('url'), function(count) { + e.find('span').text(count); + }); + }); + } + + function createShareButtons(elem, opt) { + opt = $.extend({}, $.fn.sharegg.defaults, opt); + $.each(opt.buttons, function(item) { + if (this.show === true) { + var serviceName = item.toString(); + if (!serviceExists(serviceName)) { + throw new Error('Invalid service name: ' + serviceName); + } + var title = getLocale('en_US').messages[serviceName].title; + /* jshint multistr: true */ + elem.append('

  • \ + \ + \ + \ +
    • '); + var icon = elem.find('.' + serviceName + '-btn'); + if (this.count === true) { + icon.parent().append('0'); + } else { + icon.addClass('social-no-counter'); + } + } + }); + } + $.fn.sharegg = function() { + var opt; + if (arguments.length === 0) { + opt = $.fn.sharegg.defaults; + } else if (arguments.length === 1) { + if (typeof arguments[0] === 'string') { + if (arguments[0] === 'count') { + return this.each(function() { + loadCount($(this)); + }); + } + throw new Error('Invalid arguments value: ' + arguments[0]); + } + opt = arguments[0]; + } else { + throw new Error('Invalid number of arguments: ' + arguments.length); + } + return this.each(function() { + var e = $(this); + e.addClass('sharegg-widget'); + if (e.data('url') === undefined) { + e.data('url', (opt.data !== undefined && opt.data.url) ? opt.data.url : 'http://www.sharegg.org'); + } + if (e.data('title') === undefined) { + e.data('title', (opt.data !== undefined && opt.data.title) ? opt.data.title : 'Sharegg'); + } + if (e.data('description') === undefined) { + e.data('description', (opt.data !== undefined && opt.data.description) ? opt.data.description : ''); + } + if (e.data('image') === undefined) { + e.data('image', (opt.data !== undefined && opt.data.image) ? opt.data.image : ''); + } + createShareButtons($('.social-buttons--container ul'), opt); + loadCount(e); + }); + }; + $.fn.sharegg.defaults = { + apiUrl: 'http://api.sharegg.org/', + buttons: { + buffer: { + show: true, + count: true, + }, + delicious: { + show: true, + count: true, + }, + digg: { + show: true, + count: true, + }, + facebook: { + show: true, + count: true, + }, + googleplus: { + show: true, + count: true, + }, + linkedin: { + show: true, + count: true, + }, + pinterest: { + show: true, + count: true, + }, + pocket: { + show: true, + count: true, + }, + reddit: { + show: true, + count: true, + }, + stumbleupon: { + show: true, + count: true, + }, + tumblr: { + show: true, + count: true, + }, + twitter: { + show: true, + count: true, + }, + vkontakte: { + show: true, + count: true, + } + } + }; + window.sharegg = { + popup: popup + }; +}(jQuery)); diff --git a/docs/package.json b/docs/package.json new file mode 100644 index 0000000..65b49c5 --- /dev/null +++ b/docs/package.json @@ -0,0 +1,43 @@ +{ + "name": "GridleCSS-Theme", + "version": "1.0.0", + "description": "Yet another flexbox framework", + "repository": { + "type": "git", + "url": "https://github.com/studio51/gridlecss.git" + }, + "keywords": [ + "CSS", + "Grid", + "Flexbox", + "SASS", + "NPM" + ], + "author": "Vlad Radulescu", + "license": "MIT", + "bugs": { + "url": "https://github.com/studio51/gridlecss/issues" + }, + "homepage": "https://studio51.github.io/gridlecss", + "devDependencies": { + "autoprefixer-core": "^5.1.11", + "bower": "^1.4.1", + "bs-html-injector": "^2.0.4", + "cssnext": "^1.4.0", + "grunt": "^0.4.5", + "grunt-browser-sync": "^2.1.3", + "grunt-contrib-clean": "^0.6.0", + "grunt-contrib-cssmin": "^0.12.3", + "grunt-contrib-imagemin": "^0.9.4", + "grunt-contrib-uglify": "^0.9.1", + "grunt-contrib-watch": "^0.6.1", + "grunt-copy": "^0.1.0", + "grunt-cssbeautifier": "^0.1.2", + "grunt-cssnext": "^1.0.0", + "grunt-jade": "^0.5.1", + "grunt-postcss": "^0.4.0", + "grunt-sass": "^1.0.0", + "grunt-svgmin": "^2.0.1", + "matchdep": "^0.3.0" + } +} diff --git a/docs/templates/device-content.jade b/docs/templates/device-content.jade new file mode 100644 index 0000000..45984d8 --- /dev/null +++ b/docs/templates/device-content.jade @@ -0,0 +1,30 @@ +.grid + .row + .cell + + nav.nav-menu(role='navigation') + ul.list-unstyled + + - var nav_items = ['basic', 'responsive', 'fluid', 'offset', 'nested', 'auto', 'alignment', 'distribution', 'reversed', 'reordered'] + - var i = 1 + + each val in nav_items + + li(class="list-item animated-#{i++}") + a.btn.btn-sm.list-item-link(href="#", data-target="#grid-#{val}") #{val} + + .cell + + .device-demo--container + .device-demo--content.device-demo--side_a + a.btn.btn-round.btn-yellow(href="", title="Check out some Demos") + i.fa.fa-lightbulb-o + + p + | More demos will be made available soon. + + .device-demo--side.device-demo--side_b + a.btn.btn-round.btn-purple(href="https://github.com/studio51/gridlecss/archive/v#{version}.zip", title="GridleCSS v#{version}") + i.fa.fa-arrow-down + p + | Download GridleCSS v#{version} diff --git a/docs/templates/module-alignment.jade b/docs/templates/module-alignment.jade new file mode 100644 index 0000000..14a9326 --- /dev/null +++ b/docs/templates/module-alignment.jade @@ -0,0 +1,62 @@ +.module + h1.module-title Module: Aligments + + section.module-content#grid-alignment + + .row + .cell.cell-md.unstyled + + .row + .cell.unstyled + + section.module-section + header + h3.module-title #{alignment_additional} + p.module-description #{alignment_additional_description} + + article + + include modules/alignment-main + + .margin.mh16 + + .cell.unstyled + + section.module-section + header + //- h3.module-title #{alignment_additional_two} + p.module-description #{alignment_additional_two_description} + + article + + include modules/alignment-cross + + .margin.mv16 + + .cell.cell-md.unstyled + + .row + .cell.unstyled + + section.module-section + header + h3.module-title #{alignment_additional_three} + p.module-description #{alignment_additional_three_description} + + article + + include modules/alignment-child + + .margin.mh16 + + .cell.unstyled + + section.module-section + header + h3.module-title #{alignment_additional_four} + p.module-description #{alignment_additional_four_description} + + article + + include modules/alignment-viewport + diff --git a/docs/templates/module-distribution.jade b/docs/templates/module-distribution.jade new file mode 100644 index 0000000..3efb0c4 --- /dev/null +++ b/docs/templates/module-distribution.jade @@ -0,0 +1,43 @@ +.module + h1.module-title Module: Distribution + + section.module-content#grid-distribution + + .row + .cell.cell-sm.unstyled + + section.module-section + header + //- h3.module-title #{distribution_between} + p.module-description #{distribution_between_description} + + article + + include modules/distribution-between + + .margin.mv16 + + .cell.cell-sm.unstyled + + section.module-section + header + //- h3.module-title #{distribution_around} + p.module-description #{distribution_around_description} + + article + + include modules/distribution-around + + .margin.mh16 + + .row + .cell.unstyled + + section.module-section + header + h3.module-title #{distribution_viewport} + p.module-description #{distribution_viewport_description} + + article + + include modules/distribution-viewport diff --git a/docs/templates/module-grid.jade b/docs/templates/module-grid.jade new file mode 100644 index 0000000..eaea250 --- /dev/null +++ b/docs/templates/module-grid.jade @@ -0,0 +1,126 @@ +.module + h1.module-title Module: The Grid + section.module-content + + .row + .cell.cell-sm.unstyled + + #grid-basic + + section.module-section + header + h3.module-title #{basic} + p.module-description #{basic_description} + + article + + include modules/grid-gridlecss.jade + + .margin.mh16 + + .row + .cell.cell-sm.unstyled + + #grid-responsive + + section.module-section + header + h3.module-title #{responsive} + p.module-description #{responsive_description} + + article + + include modules/grid-responsive.jade + + .margin.mh16 + + .row + .cell.cell-sm.unstyled + + #grid-fluid + + section.module-section + header + h3.module-title #{fluid} + p.module-description #{fluid_description} + + article + + include modules/grid-fluid.jade + + .margin.mh16 + + .row + .cell.cell-sm.unstyled + + #grid-reversed + + section.module-section + header + h3.module-title #{reversed} + p.module-description #{reversed_description} + + article + + include modules/grid-reversed.jade + + .margin.mv16 + + .cell.cell-sm-5.unstyled + + #grid-reordered + + section.module-section + header + h3.module-title #{reordered} + p.module-description #{reordered_description} + + article + + include modules/grid-reordered.jade + + .margin.mh16 + + .row + .cell.cell-sm.unstyled + + #grid-auto + + section.module-section + header + h3.module-title #{auto_additional} + p.module-description #{auto_additional_description} + + article + + include modules/grid-auto.jade + + .margin.mv16 + + .cell.cell-sm.unstyled + + section.module-section + header + h3.module-title #{auto_additional_two} + p.module-description #{auto_additional_two_description} + + article + + include modules/grid-auto-viewport.jade + + .margin.mh16 + + .row + .cell.cell-sm.unstyled + + #grid-nested + + section.module-section + + header + h2.module-title #{nested} + p.module-description #{nested_description} + + article + + include modules/grid-nested.jade diff --git a/docs/templates/module-offsets.jade b/docs/templates/module-offsets.jade new file mode 100644 index 0000000..c2e6a3f --- /dev/null +++ b/docs/templates/module-offsets.jade @@ -0,0 +1,25 @@ +.module + h1.module-title Module: Offsets + + section.module-content#grid-offset + + .row + .cell.cell-sm.unstyled + + section.module-section + article + + include modules/offsets-offsets + + .margin.mv16 + + .cell.cell-sm-6.cell-md-5.unstyled + + section.module-section + header + h3.module-title #{offset_viewport} + p.module-description #{offset_viewport_description} + + article + + include modules/offsets-viewport diff --git a/docs/templates/modules/alignment-child.jade b/docs/templates/modules/alignment-child.jade new file mode 100644 index 0000000..de30bf2 --- /dev/null +++ b/docs/templates/modules/alignment-child.jade @@ -0,0 +1,6 @@ +.cells-container.text-center + .row.demo-alignment-cross + .cell.cell-xs.cell-align--top cell-align--top + .cell.cell-xs.cell-align--middle cell-align--middle + .cell.cell-xs.cell-align--bottom cell-align--bottom + .cell.cell-xs.cell-align--stretch cell-align--stretch diff --git a/docs/templates/modules/alignment-cross.jade b/docs/templates/modules/alignment-cross.jade new file mode 100644 index 0000000..720ab25 --- /dev/null +++ b/docs/templates/modules/alignment-cross.jade @@ -0,0 +1,48 @@ +.cells-container.text-center + .row + .cell.cell-xs.unstyled + .row.demo-alignment-cross + .cell align-stretch + + .cell.cell-xs.unstyled + .row.align-top.demo-alignment-cross + .cell .align-top + + .cell.cell-xs.unstyled + .row.align-middle.demo-alignment-cross + .cell align-middle + + .cell.cell-xs.unstyled + .row.align-bottom.demo-alignment-cross + .cell align-bottom + + .row + .cell.unstyled + .row.demo-alignment-baseline + .cell.cell-xs.demo-alignment-baseline-1 + span baseline + .cell.cell-xs.demo-alignment-baseline-2 + span baseline + .cell.cell-xs + span baseline + + .row + .cell.unstyled + .row.align-sm-top.align-md-middle.align-lg-bottom + .cell.cell-xs + | Lorem ipsum dolor sit amet, consectetur adipisicing elit. + | Saepe, reprehenderit ipsum atque distinctio ad, nihil + | repudiandae ut omnis dignissimos suscipit non quos debitis + | inventore fuga alias. Quod ut nesciunt aut. + + .cell.cell-xs-3 + .visible-xs stretch + .visible-sm align-sm-top + .visible-md align-md-middle + .visible-lg align-lg-bottom + + .cell.cell-xs-3 + .visible-xs stretch + .visible-sm align-sm-top + .visible-md align-md-middle + .visible-lg align-lg-bottom diff --git a/docs/templates/modules/alignment-main.jade b/docs/templates/modules/alignment-main.jade new file mode 100644 index 0000000..219ebbc --- /dev/null +++ b/docs/templates/modules/alignment-main.jade @@ -0,0 +1,13 @@ +.cells-container.text-center + .row + .cell.cell-xs.unstyled + .row.align-left + .cell.cell-xs-7 align-left + + .cell.cell-xs.unstyled + .row.align-center + .cell.cell-xs-7 align-center + + .cell.cell-xs.unstyled + .row.align-right + .cell.cell-xs-7 align-right diff --git a/docs/templates/modules/alignment-viewport.jade b/docs/templates/modules/alignment-viewport.jade new file mode 100644 index 0000000..a551e02 --- /dev/null +++ b/docs/templates/modules/alignment-viewport.jade @@ -0,0 +1,25 @@ +.cells-container.text-center + .row.demo-alignment-cross + .cell.cell-xs.cell-xs-align--stretch.cell-sm-align--middle.cell-md-align--stretch.cell-lg-align--top + .visible-xs cell-xs-align--stretch + .visible-sm cell-sm-align--middle + .visible-md cell-md-align--stretch + .visible-lg cell-lg-align--top + + .cell.cell-xs.cell-xs-align--stretch.cell-sm-align--middle.cell-md-align--bottom.cell-lg-align--middle + .visible-xs cell-xs-align--stretch + .visible-sm cell-sm-align--middle + .visible-md cell-md-align--bottom + .visible-lg cell-lg-align--middle + + .cell.cell-xs.cell-xs-align--stretch.cell-sm-align--middle.cell-md-align--middle.cell-lg-align--bottom + .visible-xs cell-xs-align--stretch + .visible-sm cell-sm-align--middle + .visible-md cell-md-align--middle + .visible-lg cell-lg-align--bottom + + .cell.cell-xs.cell-xs-align--stretch.cell-sm-align--middle.cell-md-align--top.cell-lg-align--stretch + .visible-xs cell-xs-align--stretch + .visible-sm cell-sm-align--middle + .visible-md cell-md-align--top + .visible-lg cell-lg-align--stretch diff --git a/docs/templates/modules/distribution-around.jade b/docs/templates/modules/distribution-around.jade new file mode 100644 index 0000000..d8c264d --- /dev/null +++ b/docs/templates/modules/distribution-around.jade @@ -0,0 +1,5 @@ +.cells-container.text-center + .row.distribute-around + .cell.cell-xs-3 distribute-around + .cell.cell-xs-3 distribute-around + .cell.cell-xs-3 distribute-around diff --git a/docs/templates/modules/distribution-between.jade b/docs/templates/modules/distribution-between.jade new file mode 100644 index 0000000..be18dfd --- /dev/null +++ b/docs/templates/modules/distribution-between.jade @@ -0,0 +1,5 @@ +.cells-container.text-center + .row.distribute-between + .cell.cell-xs-3 distribute-between + .cell.cell-xs-3 distribute-between + .cell.cell-xs-3 distribute-between diff --git a/docs/templates/modules/distribution-viewport.jade b/docs/templates/modules/distribution-viewport.jade new file mode 100644 index 0000000..fd655a6 --- /dev/null +++ b/docs/templates/modules/distribution-viewport.jade @@ -0,0 +1,19 @@ +.cells-container.text-center + .row.distribute-around.distribute-sm-between.distribute-md-around.distribute-lg-between + .cell.cell-xs-3 + .visible-xs distribute-xs-around + .visible-sm distribute-sm-between + .visible-md distribute-md-around + .visible-lg distribute-lg-between + + .cell.cell-xs-3 + .visible-xs distribute-xs-around + .visible-sm distribute-sm-between + .visible-md distribute-md-around + .visible-lg distribute-lg-between + + .cell.cell-xs-3 + .visible-xs distribute-xs-around + .visible-sm distribute-sm-between + .visible-md distribute-md-around + .visible-lg distribute-lg-between diff --git a/docs/templates/modules/grid-auto-viewport.jade b/docs/templates/modules/grid-auto-viewport.jade new file mode 100644 index 0000000..8d457c4 --- /dev/null +++ b/docs/templates/modules/grid-auto-viewport.jade @@ -0,0 +1,25 @@ +.cells-container + .row + .cell.cell-sm.cell-md-3.cell-lg + span.visible-xs full-xs + span.visible-sm auto-sm + span.visible-md cell-md-3 + span.visible-lg auto-lg + + .cell.cell-sm.cell-md.cell-lg + span.visible-xs full-xs + span.visible-sm auto-sm + span.visible-md auto-md + span.visible-lg auto-lg + + .cell.cell-sm.cell-md-2.cell-lg + span.visible-xs full-xs + span.visible-sm auto-sm + span.visible-md cell-md-2 + span.visible-lg auto-lg + + .cell.cell-sm.cell-md.cell-lg + span.visible-xs full-xs + span.visible-sm auto-sm + span.visible-md auto-md + span.visible-lg auto-lg diff --git a/docs/templates/modules/grid-auto.jade b/docs/templates/modules/grid-auto.jade new file mode 100644 index 0000000..6069b45 --- /dev/null +++ b/docs/templates/modules/grid-auto.jade @@ -0,0 +1,12 @@ +.cells-container + .row + + - for( var i = 0; i < 4; ++i ) + + .cell.cell-xs auto + + .row + .cell.cell-xs-3 cell-xs-3 + .cell.cell-xs auto + .cell.cell-xs-2 cell-xs-2 + .cell.cell-xs auto diff --git a/docs/templates/modules/grid-fluid.jade b/docs/templates/modules/grid-fluid.jade new file mode 100644 index 0000000..f7afa0b --- /dev/null +++ b/docs/templates/modules/grid-fluid.jade @@ -0,0 +1,27 @@ +.cells-container + .row + .cell.cell-lg auto-xs + + .row + .cell.cell-xs-1 cell-xs-1 + .cell.cell-xs-11 cell-xs-11 + + .row + .cell.cell-xs-2 cell-xs-2 + .cell.cell-xs-10 cell-xs-10 + + .row + .cell.cell-xs-3 cell-xs-3 + .cell.cell-xs-9 cell-xs-9 + + .row + .cell.cell-xs-4 cell-xs-4 + .cell.cell-xs-8 cell-xs-8 + + .row + .cell.cell-xs-5 cell-xs-5 + .cell.cell-xs-7 cell-xs-7 + + .row + .cell.cell-xs-6 cell-xs-6 + .cell.cell-xs-6 cell-xs-6 diff --git a/docs/templates/modules/grid-gridlecss.jade b/docs/templates/modules/grid-gridlecss.jade new file mode 100644 index 0000000..62910ab --- /dev/null +++ b/docs/templates/modules/grid-gridlecss.jade @@ -0,0 +1,52 @@ +.cells-container + .row + .cell.cell-xs auto-xs + .cell.cell-xs.cell-sm-3.cell-md-7.cell-lg + span.visible-xs auto-xs + span.visible-sm cell-sm-3 + span.visible-md cell-md-7 + span.visible-lg auto-lg + + .cell.cell-xs auto-xs + + .row + .cell.cell-xs-9.cell-sm-7.cell-md-5.cell-lg-3 + span.visible-xs cell-xs-9 + span.visible-sm cell-sm-7 + span.visible-md cell-md-5 + span.visible-lg cell-lg-3 + + .cell.cell-xs auto + + .row + .cell.cell-xs + | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos + | blanditiis odit et ratione, id laboriosam sapiente consequuntur + | laborum officia, impedit eligendi natus quisquam dolor in at + | aliquam, tempore maiores est. + + .cell.cell-sm-10 + .row + .cell.cell-xs xs-auto + .cell.cell-xs-3 cell-xs-3 + .cell.cell-xs xs-auto + .cell.cell-xs-1 cel-xs-1 + + .row + .cell.cell-xs-4 cell-xs-4 + .cell.cell-xs-3 cell-xs-3 + .cell.cell-xs-4 cell-xs-4 + .cell.cell-xs-1 cell-xs-1 + + .row + + - for( var i = 0; i < 6; ++i ) + .cell.cell-xs-2 cell-xs-2 + + .row + + - for( var i = 0; i < 12; ++i ) + .cell.cell-xs-1 cell-xs-1 + + .row + .cell.cell-xs-12 cell-xs-12 diff --git a/docs/templates/modules/grid-nested.jade b/docs/templates/modules/grid-nested.jade new file mode 100644 index 0000000..1244f4b --- /dev/null +++ b/docs/templates/modules/grid-nested.jade @@ -0,0 +1,26 @@ +.cells-container + .row + .cell.cell-sm + + .row + .cell + + .row + + - for( var na = 0; na < 4; na++ ) + + .cell.cell-xs + .row + + - for( var nb = 0; nb < 3; nb++ ) + + .cell.cell-xs + + .cell.cell-sm + + .row + .cell + .row + .cell + .row + .cell diff --git a/docs/templates/modules/grid-reordered.jade b/docs/templates/modules/grid-reordered.jade new file mode 100644 index 0000000..793ce4b --- /dev/null +++ b/docs/templates/modules/grid-reordered.jade @@ -0,0 +1,7 @@ +.cells-container + .row + .cell.cell-xs.cell-order--last 1 + .cell.cell-xs 2 + .cell.cell-xs.cell-order--first 3 + .cell.cell-xs 4 + .cell.cell-xs 5 diff --git a/docs/templates/modules/grid-responsive.jade b/docs/templates/modules/grid-responsive.jade new file mode 100644 index 0000000..db1be66 --- /dev/null +++ b/docs/templates/modules/grid-responsive.jade @@ -0,0 +1,38 @@ +.cells-container + .row + .cell.cell-xs-5.cell-sm-4.cell-md-3.cell-lg-2 + span.visible-xs cell-xs-5 + span.visible-sm cell-sm-4 + span.visible-md cell-md-3 + span.visible-lg cell-lg-2 + + .cell.cell-xs-2.cell-sm-4.cell-md-6.cell-lg-8 + span.visible-xs cell-xs-2 + span.visible-sm cell-sm-4 + span.visible-md cell-md-6 + span.visible-lg cell-lg-8 + + .cell.cell-xs-5.cell-sm-4.cell-md-3.cell-lg-2 + span.visible-xs cell-xs-5 + span.visible-sm cell-sm-4 + span.visible-md cell-md-3 + span.visible-lg cell-lg-2 + + .row + .cell.cell-xs-3.cell-sm-3.cell-md-2.cell-lg-2 + span.visible-xs cell-xs-3 + span.visible-sm cell-sm-3 + span.visible-md cell-md-2 + span.visible-lg cell-lg-2 + + .cell.cell-xs-9.cell-sm-6.cell-md-2.cell-lg-2 + span.visible-xs cell-xs-9 + span.visible-sm cell-sm-6 + span.visible-md cell-md-2 + span.visible-lg cell-lg-2 + + .cell.cell-xs.cell-sm-3.cell-md-8.cell-lg + span.visible-xs cell-xs + span.visible-sm cell-sm-3 + span.visible-md cell-md-8 + span.visible-lg cell-lg diff --git a/docs/templates/modules/grid-reversed.jade b/docs/templates/modules/grid-reversed.jade new file mode 100644 index 0000000..7443cb8 --- /dev/null +++ b/docs/templates/modules/grid-reversed.jade @@ -0,0 +1,6 @@ +.cells-container + .row.row--reverse + + - for( var i = 1; i < 13; ++i ) + + .cell.cell-xs #{i} diff --git a/docs/templates/modules/offsets-offsets.jade b/docs/templates/modules/offsets-offsets.jade new file mode 100644 index 0000000..d90e660 --- /dev/null +++ b/docs/templates/modules/offsets-offsets.jade @@ -0,0 +1,10 @@ +.cells-container + + - for( var i = 1; i < 12; ++i ) + - var offset = (i - 12) + + .row + div(class="cell cell-xs-offset#{offset} cell-xs-#{i}") offset#{offset} + + .row + .cell.cell-xs-12 no-offset diff --git a/docs/templates/modules/offsets-viewport.jade b/docs/templates/modules/offsets-viewport.jade new file mode 100644 index 0000000..a5e4114 --- /dev/null +++ b/docs/templates/modules/offsets-viewport.jade @@ -0,0 +1,28 @@ +.cells-container.text-center + .row + .cell.cell-xs-3.cell-sm-offset-9.cell-md-4.cell-md-offset-4.cell-lg-2.cell-lg-offset-4 + span.visible-xs xs, cell-xs-3 + span.visible-sm sm, cell-xs-3 cell-sm-offset-9 + span.visible-md md, cell-md-4 cell-md-offset-4 + span.visible-lg lg, cell-lg-2 cell-lg-offset-4 + + .row + .cell.cell-xs-3.cell-xs-offset-3.cell-sm-offset-6.cell-md-4.cell-md-offset-4.cell-lg-2.cell-lg-offset-5 + span.visible-xs xs, cell-xs-3 cell-xs-offset-3 + span.visible-sm sm, cell-xs-3 cell-sm-offset-6 + span.visible-md md, cell-md-4 cell-md-offset-4 + span.visible-lg lg, cell-lg-2 cell-lg-offset-5 + + .row + .cell.cell-xs-3.cell-xs-offset-6.cell-sm-offset-3.cell-md-4.cell-md-offset-4.cell-lg-2.cell-lg-offset-6 + span.visible-xs xs, cell-xs-3 cell-xs-offset-6 + span.visible-sm sm, cell-xs-3 cell-sm-offset-3 + span.visible-md md, cell-md-4 cell-md-offset-4 + span.visible-lg lg, cell-lg-2 cell-lg-offset-6 + + .row + .cell.cell-xs-3.cell-xs-offset-9.cell-sm-offset.cell-md-4.cell-md-offset-4.cell-lg-2.cell-lg-offset-7 + span.visible-xs xs, cell-xs-3 cell-xs-offset-9 + span.visible-sm sm, cell-xs-3 cell-sm-offset + span.visible-md md, cell-md-4 cell-md-offset-4 + span.visible-lg lg, cell-lg-2 cell-lg-offset-7 diff --git a/grid/gridlecss/mixins.scss b/grid/gridlecss/mixins.scss deleted file mode 100644 index 738aa1b..0000000 --- a/grid/gridlecss/mixins.scss +++ /dev/null @@ -1,56 +0,0 @@ -// Conditional Media Query -// -// http://codepen.io/dsheiko/pen/KeLGy -// -@function translate-media-condition( $condition ) { - $map: ( - "screen": "only screen", - "xs": " ", - "sm": " and (min-width: #{$grid-sm-min})", - "md": " and (min-width: #{$grid-md-min})", - "lg": " and (min-width: #{$grid-lg-min})" - ); - - @return map-get( $map, $condition ); -} - -@mixin media($args...) { - $query: ""; - - @each $arg in $args { - $query: $query + translate-media-condition($arg); - } - - @media #{ $query } { @content; } -} - -// Generate Flex Alignments -// -@mixin flex-alignments( $parent, $axis, $class, $requester ) { - - @each $element in $class { - - $selector: nth($element, 1); - $rule: unquote(nth($element, 2)); - - #{ $parent }#{ $selector } { - - @if $axis == "x" { - - justify-content: $rule; - text-align: $rule; - - } @else if $axis == "y" { - - @if $requester == "parent" { - - align-items: $rule; - - } @else { - - align-self: $rule; - } - } - } - } -} diff --git a/package.json b/package.json index c9f4d60..87dab06 100644 --- a/package.json +++ b/package.json @@ -20,15 +20,13 @@ }, "homepage": "https://studio51.github.io/gridlecss", "devDependencies": { - "autoprefixer-core": "^5.1.11", - "cssnext": "^1.4.0", + "autoprefixer": "^6.1.0", "grunt": "^0.4.5", - "grunt-contrib-clean": "^0.6.0", - "grunt-contrib-cssmin": "^0.12.3", - "grunt-cssbeautifier": "^0.1.2", + "grunt-contrib-clean": "^0.7.0", + "grunt-contrib-copy": "^0.8.2", "grunt-cssnext": "^1.0.0", - "grunt-postcss": "^0.4.0", - "grunt-sass": "^1.0.0", - "matchdep": "^0.3.0" + "grunt-postcss": "^0.7.1", + "grunt-sass": "^1.1.0", + "matchdep": "^1.0.0" } } diff --git a/grid/config.scss b/sass/config.scss similarity index 81% rename from grid/config.scss rename to sass/config.scss index 03d198f..01ed365 100644 --- a/grid/config.scss +++ b/sass/config.scss @@ -39,24 +39,19 @@ $grid-minimal: true !default; // $grid-columns: 12 !default; -// Grid breakpoints -// -// Options: [xs sm md lg] -// -$grid-breakpoints: "xs" "sm" "md" "lg"; +$mq-base-font-size: 16px !default; +$mq-responsive: true !default; +$mq-breakpoints: ( + sm: 40em, + md: 64em, + lg: 90em, + xl: 120em -// Grid breakpoints -// If you want to add more, just make sure you respect the naming convention: -// -// $grid-#{key}-min: #{value}; -// -// $grid-sm-min: 40.063em; -// $grid-md-min: 64.063em; -// $grid-lg-min: 90.063em; -// -$grid-sm-min: 768px; -$grid-md-min: 982px; -$grid-lg-min: 1200px; +) !default; + +$mq-static-breakpoint: desktop !default; +$mq-show-breakpoints: () !default; +$mq-media-type: all !default; // Distribute the cells spacing around or between them // diff --git a/sass/gridle.scss b/sass/gridle.scss new file mode 100644 index 0000000..de907cf --- /dev/null +++ b/sass/gridle.scss @@ -0,0 +1,253 @@ +@import "config"; + +@import "gridlecss/mixins"; +@import "gridlecss/media"; + +*, +*:before, +*:after { + box-sizing: border-box; +} + +.grid, +.grid--fluid { + margin-left: auto; + margin-right: auto; + width: 100%; + height: 100%; +} + +.row, +.column { + display: flex; +} + + .row { + flex: 0 1 auto; + flex-direction: row; + flex-wrap: wrap; + + margin-left: 0; + margin-right: 0; + + &--reverse { + flex-direction: row-reverse; + } + } + + [class*="cell"] { + margin-left: 0; + margin-right: 0; + flex-basis: 100%; + max-width: 100%; + } + +// .column { +// flex-direction: column; + +// &--reverse { +// flex-direction: column-reverse; +// } +// } + +// @if $flex-distribution { +// @each $distribution in $flex-distributions { + +// .distribute-#{ $distribution } { +// justify-content: space-#{ $distribution }; +// } +// } +// } + +// @if $flex-alignment { +// @each $alignment in $flex-alignments { +// @include flex-alignments( ".align-", nth($alignment, 1), nth($alignment, 2), "parent"); +// } +// } + +// .cell { + +// &-order { +// &--first { +// order: -1; +// } + +// &--last { +// order: 1; +// } +// } + +// @if $flex-alignment { + +// &-align { + +// @each $alignment in $flex-alignments { +// @include flex-alignments( "&--", "y", nth($alignment, 2), "child"); +// } +// } +// } +// } + +// %cell-styles { +// display: flex; +// flex: 1 0 auto; +// flex-direction: column; +// } + +// .cell-auto { +// flex: 0 1 auto; +// } + +%default { + display: flex; + flex: 1 0 auto; + flex-direction: column; +} + +@each $breakpoint in $mq-breakpoints { + + $size: nth($breakpoint, 1); + $break: nth($breakpoint, 2); + + @include mq($from: $size) { + + .grid { + width: $break; + } + + .cell-#{ $size }-auto { + flex: 0 1 auto; + } + + @for $i from 1 through $grid-columns { + + .cell-#{ $size }, + .cell-#{ $size }-#{ $i }, + .cell-#{ $size }-offset-#{ $i } { + @extend %default; + } + } + + @for $i from 1 through $grid-columns { + $grid-column-width: (( 100 / $grid-columns ) * $i ) * 1%; + $grid-gutter-calc: $grid-gutter / ( $grid-gutter * 0 + 1 ); + + // Compiles: cell-*-# for each viewport + // + .cell-#{ $size }-#{ $i } { + flex-basis: $grid-column-width; + max-width: $grid-column-width; + } + + // Compiles: cell-*-offset-# for each viewport + // + .cell-#{ $size }-offset-#{ $i } { + margin-left: $grid-column-width; + } + } + } +} + + +// // Compiles: distribute-* for each viewport +// // +// .distribute-#{ $breakpoint } { + +// @if $flex-distribution { +// @each $distribution-option in $flex-distributions { + +// &-#{ $distribution-option } { +// justify-content: space-#{ $distribution-option }; +// } +// } +// } +// } + +// // Compiles: align-* for each viewport +// // +// .align-#{ $breakpoint } { + +// @if $flex-alignment { +// @each $align-option in $flex-alignments { +// @include flex-alignments( "&-", nth($align-option, 1), nth($align-option, 2), "parent"); +// } +// } +// } + +// // Compiles: cell-*, cell-*-# and cell-*-offset-# for each viewport +// // +// @for $i from 1 through $grid-columns { + +// .cell-#{ $breakpoint }, +// .cell-#{ $breakpoint }-#{ $i }, +// .cell-#{ $breakpoint }-offset-#{ $i } { +// // @extend %cell-styles; +// display: flex; +// flex: 1 0 auto; +// flex-direction: column; +// } + +// .cell-#{ $breakpoint }-auto { +// flex: 0 1 auto; +// } +// } + +// // Compiles: cell-* for each viewport +// // +// .cell-#{ $breakpoint } { +// flex: 1 0; +// flex-basis: 0; +// max-width: 100%; + +// &-order { +// &--first { +// order: -1; +// } + +// &--last { +// order: 1; +// } +// } + +// &-offset { +// margin-left: $grid-gutter !important; +// } + +// @if $flex-alignment { + +// &-align { + +// @each $alignment in $flex-alignments { +// @include flex-alignments( "&--", "y", nth($alignment, 2), "child"); +// } +// } +// } +// } + + + // } +// } + + + + + + +//////////// + +.row, .column, [class*="cell"] { + padding: 1em; + background-color: rgba(136, 136, 136, .3); + border-radius: 3px; +} + +.cell-content { + border: 1px solid red; +} + +html, body { + width: 100%; + height: 100%; + padding: 0; + margin: 0; +} diff --git a/sass/gridlecss/_media.scss b/sass/gridlecss/_media.scss new file mode 100644 index 0000000..658c8cf --- /dev/null +++ b/sass/gridlecss/_media.scss @@ -0,0 +1,106 @@ +@charset "UTF-8"; // https://github.com/sass-mq/sass-mq/blob/master/_mq.scss + +@function mq-px2em($px, $base-font-size: $mq-base-font-size) { + @if unitless($px) { + @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels."; + @return mq-px2em($px * 1px, $base-font-size); + } + @else if unit($px) == em { + @return $px; + } + @return $px / $base-font-size * 1em; +} + +@function mq-get-breakpoint-width($name, $breakpoints: $mq-breakpoints) { + @if map-has-key($breakpoints, $name) { + @return map-get($breakpoints, $name); + } + @else { + @warn "Breakpoint #{$name} wasn't found in $breakpoints."; + } +} + +@mixin mq($from: false, $until: false, $and: false, $media-type: $mq-media-type, $breakpoints: $mq-breakpoints, $responsive: $mq-responsive, $static-breakpoint: $mq-static-breakpoint) { + $min-width: 0; + $max-width: 0; + $media-query: ""; + // From: this breakpoint (inclusive) + @if $from { + @if type-of($from) == number { + $min-width: mq-px2em($from); + } + @else { + $min-width: mq-px2em(mq-get-breakpoint-width($from, $breakpoints)); + } + } + // Until: that breakpoint (exclusive) + @if $until { + @if type-of($until) == number { + $max-width: mq-px2em($until); + } + @else { + $max-width: mq-px2em(mq-get-breakpoint-width($until, $breakpoints)) - 0.01em; + } + } + // Responsive support is disabled, rasterize the output outside @media blocks + // The browser will rely on the cascade itself. + @if $responsive == false { + $static-breakpoint-width: mq-get-breakpoint-width($static-breakpoint, $breakpoints); + $target-width: mq-px2em($static-breakpoint-width); + // Output only rules that start at or span our target width + @if $and == false and $min-width <= $target-width and ($until == false or $max-width >= $target-width) { + @content; + } + } + @else { + @if $min-width != 0 { + $media-query: "#{$media-query} and (min-width: #{$min-width})"; + } + @if $max-width != 0 { + $media-query: "#{$media-query} and (max-width: #{$max-width})"; + } + @if $and { + $media-query: "#{$media-query} and #{$and}"; + } + // Remove unnecessary media query prefix 'all and ' + @if $media-type == "all" and $media-query != "" { + $media-type: ""; + $media-query: str-slice(unquote($media-query), 6); + } + @media #{$media-type + $media-query} { + @content; + } + } +} + +@mixin mq-add-breakpoint($name, $width) { + $new-breakpoint: ($name: $width); + $mq-breakpoints: map-merge($mq-breakpoints, $new-breakpoint) !global; +} + +@mixin mq-show-breakpoints($show-breakpoints: $mq-show-breakpoints, $breakpoints: $mq-breakpoints) { + body:before { + background-color: #FCF8E3; + border-bottom: 1px solid #FBEED5; + border-left: 1px solid #FBEED5; + color: #C09853; + font: small-caption; + padding: 3px 6px; + pointer-events: none; + position: fixed; + right: 0; + top: 0; + z-index: 100; + // Loop through the breakpoints that should be shown + @each $show-breakpoint in $show-breakpoints { + $width: mq-get-breakpoint-width($show-breakpoint, $breakpoints); + @include mq($show-breakpoint, $breakpoints: $breakpoints) { + content: "#{$show-breakpoint} ≥ #{$width} (#{mq-px2em($width)})"; + } + } + } +} + +@if length($mq-show-breakpoints) > 0 { + @include mq-show-breakpoints; +} diff --git a/sass/gridlecss/mixins.scss b/sass/gridlecss/mixins.scss new file mode 100644 index 0000000..dd77dad --- /dev/null +++ b/sass/gridlecss/mixins.scss @@ -0,0 +1,30 @@ +// Generate Flex Alignments +// +@mixin flex-alignments( $parent, $axis, $class, $requester ) { + + @each $element in $class { + + $selector: nth($element, 1); + $rule: unquote(nth($element, 2)); + + #{ $parent }#{ $selector } { + + @if $axis == "x" { + + justify-content: $rule; + text-align: $rule; + + } @else if $axis == "y" { + + @if $requester == "parent" { + + align-items: $rule; + + } @else { + + align-self: $rule; + } + } + } + } +}