From 55ae4c2db5a34148e20cba64b4eb2ffa5b920483 Mon Sep 17 00:00:00 2001 From: Dave Mc Nicoll Date: Tue, 17 Oct 2023 20:42:01 -0400 Subject: [PATCH] - Fixed flexboxgrid references files --- asset/flexboxgrid/.gitignore | 2 + asset/flexboxgrid/CNAME | 1 + asset/flexboxgrid/Gruntfile.js | 108 ++ asset/flexboxgrid/LICENSE | 13 + asset/flexboxgrid/README.md | 37 + asset/flexboxgrid/bower.json | 25 + asset/flexboxgrid/css/flexboxgrid.css | 1117 +++++++++++++++++ asset/flexboxgrid/css/flexboxgrid.min.css | 1 + asset/flexboxgrid/css/index.css | 1 + asset/flexboxgrid/css/index.min.css | 1 + .../design/flexboxgrid-template.sketch | Bin 0 -> 81920 bytes asset/flexboxgrid/dist/flexboxgrid.css | 960 ++++++++++++++ asset/flexboxgrid/dist/flexboxgrid.min.css | 1 + asset/flexboxgrid/img/menu.svg | 11 + asset/flexboxgrid/index.html | 202 +++ asset/flexboxgrid/package.json | 36 + asset/flexboxgrid/src/css/flexboxgrid.css | 824 ++++++++++++ asset/flexboxgrid/src/css/style.css | 290 +++++ asset/flexboxgrid/src/index.html | 774 ++++++++++++ asset/flexboxgrid/src/js/index.js | 13 + asset/flexboxgrid/vendor/css/normalize.css | 407 ++++++ .../vendor/js/modernizr.flexbox.js | 4 + 22 files changed, 4828 insertions(+) create mode 100644 asset/flexboxgrid/.gitignore create mode 100644 asset/flexboxgrid/CNAME create mode 100644 asset/flexboxgrid/Gruntfile.js create mode 100644 asset/flexboxgrid/LICENSE create mode 100644 asset/flexboxgrid/README.md create mode 100644 asset/flexboxgrid/bower.json create mode 100644 asset/flexboxgrid/css/flexboxgrid.css create mode 100644 asset/flexboxgrid/css/flexboxgrid.min.css create mode 100644 asset/flexboxgrid/css/index.css create mode 100644 asset/flexboxgrid/css/index.min.css create mode 100644 asset/flexboxgrid/design/flexboxgrid-template.sketch create mode 100644 asset/flexboxgrid/dist/flexboxgrid.css create mode 100644 asset/flexboxgrid/dist/flexboxgrid.min.css create mode 100644 asset/flexboxgrid/img/menu.svg create mode 100644 asset/flexboxgrid/index.html create mode 100644 asset/flexboxgrid/package.json create mode 100644 asset/flexboxgrid/src/css/flexboxgrid.css create mode 100644 asset/flexboxgrid/src/css/style.css create mode 100644 asset/flexboxgrid/src/index.html create mode 100644 asset/flexboxgrid/src/js/index.js create mode 100644 asset/flexboxgrid/vendor/css/normalize.css create mode 100644 asset/flexboxgrid/vendor/js/modernizr.flexbox.js diff --git a/asset/flexboxgrid/.gitignore b/asset/flexboxgrid/.gitignore new file mode 100644 index 0000000..2752eb9 --- /dev/null +++ b/asset/flexboxgrid/.gitignore @@ -0,0 +1,2 @@ +node_modules/ +.DS_Store diff --git a/asset/flexboxgrid/CNAME b/asset/flexboxgrid/CNAME new file mode 100644 index 0000000..64aa0f1 --- /dev/null +++ b/asset/flexboxgrid/CNAME @@ -0,0 +1 @@ +flexboxgrid.com diff --git a/asset/flexboxgrid/Gruntfile.js b/asset/flexboxgrid/Gruntfile.js new file mode 100644 index 0000000..d9773b2 --- /dev/null +++ b/asset/flexboxgrid/Gruntfile.js @@ -0,0 +1,108 @@ +/*global module:false*/ + +module.exports = function(grunt) { + + grunt.initConfig({ + myth: { + compile: { + expand: true, + cwd: 'css', + src: ['*.css', '!*.min.css'], + dest: 'css', + ext: '.css' + }, + release: { + files: { + 'dist/flexboxgrid.css': 'src/css/flexboxgrid.css' + } + } + }, + cssmin: { + concat: { + files: { + 'css/index.css': ['vendor/css/normalize.css', 'src/css/style.css', 'dist/flexboxgrid.css'] + } + }, + minify: { + expand: true, + cwd: 'css', + src: ['*.css', '!*.min.css'], + dest: 'css', + ext: '.min.css' + }, + release: { + expand: true, + cwd: 'dist', + src: ['*.css', '!*.min.css'], + dest: 'dist', + ext: '.min.css' + } + }, + uglify: { + release: { + files: { + 'js/index.js': 'src/js/index.js' + } + } + }, + processhtml: { + dist: { + options: { + process: true + }, + files: { + 'index.html': ['src/index.html'] + } + } + }, + htmlmin: { + dist: { + options: { + removeComments: true, + collapseWhitespace: true + }, + files: { + 'index.html': ['index.html'] + } + } + }, + watch: { + css: { + files: 'src/**/*', + tasks: ['default'], + }, + livereload: { + options: { + livereload: true, + }, + files: [ + 'index.html', + 'css/*.css', + 'js/*.js', + 'img/*' + ] + } + } + }); + + // These plugins provide necessary tasks. + grunt.loadNpmTasks('grunt-myth'); + grunt.loadNpmTasks('grunt-contrib-cssmin'); + grunt.loadNpmTasks('grunt-contrib-uglify'); + grunt.loadNpmTasks('grunt-contrib-watch'); + grunt.loadNpmTasks('grunt-processhtml'); + grunt.loadNpmTasks('grunt-contrib-htmlmin'); + + // Default task. + grunt.registerTask('default', [ + 'myth', + 'cssmin:concat', + 'cssmin:minify', + 'cssmin:release', + 'uglify', + 'processhtml', + 'htmlmin' + ]); + grunt.registerTask('reload', ['watch']); + +}; diff --git a/asset/flexboxgrid/LICENSE b/asset/flexboxgrid/LICENSE new file mode 100644 index 0000000..b873e99 --- /dev/null +++ b/asset/flexboxgrid/LICENSE @@ -0,0 +1,13 @@ +Copyright 2013 Kristofer Joseph + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. diff --git a/asset/flexboxgrid/README.md b/asset/flexboxgrid/README.md new file mode 100644 index 0000000..c401f70 --- /dev/null +++ b/asset/flexboxgrid/README.md @@ -0,0 +1,37 @@ +Flexbox Grid +=========== + +[flexboxgrid.com](http://flexboxgrid.com) + +Grid based on the `flex` display property. + +Install +--------- +### npm +`npm i flexboxgrid --save` + +### bower +`bower install flexboxgrid` + +### cdn +``` + +``` + +### css +* [Development](https://raw.githubusercontent.com/kristoferjoseph/flexboxgrid/master/dist/flexboxgrid.css) +* [Production](https://raw.githubusercontent.com/kristoferjoseph/flexboxgrid/master/dist/flexboxgrid.min.css) + +Add the `flexboxgrid.css` __development__ or `flexboxgrid.min.css` __production__ to your html page. + +``` + +``` +Inspiration +----------- +- [topcoat-grid](https://github.com/topcoat/grid) +- [flexbox-grid by @zeMicro](https://github.com/zeMirco/flexbox-grid) +- [ptb2.me/flexgrid](http://ptb2.me/flexgrid/) +- [codepen.io/marcolago/pen/lqGFb](http://codepen.io/marcolago/pen/lqGFb) +- [philipwalton.github.io/solved-by-flexbox/demos/grids](http://philipwalton.github.io/solved-by-flexbox/demos/grids/) +- [davidwalsh.name/stylus-grid](http://davidwalsh.name/stylus-grid) diff --git a/asset/flexboxgrid/bower.json b/asset/flexboxgrid/bower.json new file mode 100644 index 0000000..2f8a8e4 --- /dev/null +++ b/asset/flexboxgrid/bower.json @@ -0,0 +1,25 @@ +{ + "name": "flexboxgrid", + "version": "6.3.1", + "license": "Apache 2", + "homepage": "https://github.com/kristoferjoseph/flexboxgrid", + "authors": [ + "@dam" + ], + "description": "Grid based on the flex display property.", + "main": "dist/flexboxgrid.css", + "keywords": [ + "browser", + "flexbox", + "grid", + "css" + ], + "license": "Apache 2", + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests" + ] +} diff --git a/asset/flexboxgrid/css/flexboxgrid.css b/asset/flexboxgrid/css/flexboxgrid.css new file mode 100644 index 0000000..eebf9ff --- /dev/null +++ b/asset/flexboxgrid/css/flexboxgrid.css @@ -0,0 +1,1117 @@ +/* Uncomment and set these variables to customize the grid. */ + +.container-fluid { + margin-right: auto; + margin-left: auto; + padding-right: 2rem; + padding-left: 2rem; +} + +.row { + box-sizing: border-box; + display: -ms-flexbox; + display: -webkit-box; + display: flex; + -ms-flex: 0 1 auto; + -webkit-box-flex: 0; + flex: 0 1 auto; + -ms-flex-direction: row; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + flex-direction: row; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -1rem; + margin-left: -1rem; +} + +.row.collapse { + margin-left: 0; + margin-right: 0; +} + +.row.collapse > *[class*="col"] { + padding: 0; +} + +.row.reverse { + -ms-flex-direction: row-reverse; + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + flex-direction: row-reverse; +} + +[class*='col-'] { + -ms-flex-preferred-size: 100; + flex-basis: 100%; + max-width: 100%; + padding-right: 1rem; + padding-left: 1rem; +} + +[class*='col-'].reverse { + -ms-flex-direction: column-reverse; + -webkit-box-orient: vertical; + -webkit-box-direction: reverse; + flex-direction: column-reverse; +} + +.col-xs, +.col-xs-1, +.col-xs-2, +.col-xs-3, +.col-xs-4, +.col-xs-5, +.col-xs-6, +.col-xs-7, +.col-xs-8, +.col-xs-9, +.col-xs-10, +.col-xs-11, +.col-xs-12 { + box-sizing: border-box; + -ms-flex: 0 0 auto; + -webkit-box-flex: 0; + flex: 0 0 auto; +} + +.col-xs { + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + -webkit-box-flex: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100%; +} + +.col-xs-1 { + -ms-flex-preferred-size: 8.333%; + flex-basis: 8.333%; + max-width: 8.333%; +} + +.col-xs-2 { + -ms-flex-preferred-size: 16.66666%; + flex-basis: 16.66666%; + max-width: 16.66666%; +} + +.col-xs-3 { + -ms-flex-preferred-size: 25%; + flex-basis: 25%; + max-width: 25%; +} + +.col-xs-4 { + -ms-flex-preferred-size: 33.333%; + flex-basis: 33.333%; + max-width: 33.333%; +} + +.col-xs-5 { + -ms-flex-preferred-size: 41.66666%; + flex-basis: 41.66666%; + max-width: 41.66666%; +} + +.col-xs-6 { + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + max-width: 50%; +} + +.col-xs-7 { + -ms-flex-preferred-size: 58.333%; + flex-basis: 58.333%; + max-width: 58.333%; +} + +.col-xs-8 { + -ms-flex-preferred-size: 66.66666%; + flex-basis: 66.66666%; + max-width: 66.66666%; +} + +.col-xs-9 { + -ms-flex-preferred-size: 75%; + flex-basis: 75%; + max-width: 75%; +} + +.col-xs-10 { + -ms-flex-preferred-size: 83.333%; + flex-basis: 83.333%; + max-width: 83.333%; +} + +.col-xs-11 { + -ms-flex-preferred-size: 91.66666%; + flex-basis: 91.66666%; + max-width: 91.66666%; +} + +.col-xs-12 { + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; +} + +.col-xs-offset-1 { + margin-left: 8.333%; +} + +.col-xs-offset-2 { + margin-left: 16.66666%; +} + +.col-xs-offset-3 { + margin-left: 25%; +} + +.col-xs-offset-4 { + margin-left: 33.333%; +} + +.col-xs-offset-5 { + margin-left: 41.66666%; +} + +.col-xs-offset-6 { + margin-left: 50%; +} + +.col-xs-offset-7 { + margin-left: 58.333%; +} + +.col-xs-offset-8 { + margin-left: 66.66666%; +} + +.col-xs-offset-9 { + margin-left: 75%; +} + +.col-xs-offset-10 { + margin-left: 83.333%; +} + +.col-xs-offset-11 { + margin-left: 91.66666%; +} + +.start-xs { + -ms-flex-pack: start; + -webkit-box-pack: start; + justify-content: flex-start; + text-align: start; +} + +.center-xs { + -ms-flex-pack: center; + -webkit-box-pack: center; + justify-content: center; + text-align: center; +} + +.end-xs { + -ms-flex-pack: end; + -webkit-box-pack: end; + justify-content: flex-end; + text-align: end; +} + +.top-xs { + -ms-flex-align: start; + -webkit-box-align: start; + align-items: flex-start; +} + +.middle-xs { + -ms-flex-align: center; + -webkit-box-align: center; + align-items: center; +} + +.bottom-xs { + -ms-flex-align: end; + -webkit-box-align: end; + align-items: flex-end; +} + +.around-xs { + -ms-flex-pack: distribute; + justify-content: space-around; +} + +.between-xs { + -ms-flex-pack: justify; + -webkit-box-pack: justify; + justify-content: space-between; +} + +.first-xs { + -ms-flex-order: -1; + -webkit-box-ordinal-group: 0; + order: -1; +} + +.last-xs { + -ms-flex-order: 1; + -webkit-box-ordinal-group: 2; + order: 1; +} + +@media only screen and (min-width: 48em) { + .container { + width: 46rem; + } + + .col-sm, + .col-sm-1, + .col-sm-2, + .col-sm-3, + .col-sm-4, + .col-sm-5, + .col-sm-6, + .col-sm-7, + .col-sm-8, + .col-sm-9, + .col-sm-10, + .col-sm-11, + .col-sm-12 { + box-sizing: border-box; + -ms-flex: 0 0 auto; + -webkit-box-flex: 0; + flex: 0 0 auto; + } + + .col-sm { + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + -webkit-box-flex: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100%; + } + + .col-sm-1 { + -ms-flex-preferred-size: 8.333%; + flex-basis: 8.333%; + max-width: 8.333%; + } + + .col-sm-2 { + -ms-flex-preferred-size: 16.66666%; + flex-basis: 16.66666%; + max-width: 16.66666%; + } + + .col-sm-3 { + -ms-flex-preferred-size: 25%; + flex-basis: 25%; + max-width: 25%; + } + + .col-sm-4 { + -ms-flex-preferred-size: 33.333%; + flex-basis: 33.333%; + max-width: 33.333%; + } + + .col-sm-5 { + -ms-flex-preferred-size: 41.66666%; + flex-basis: 41.66666%; + max-width: 41.66666%; + } + + .col-sm-6 { + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + max-width: 50%; + } + + .col-sm-7 { + -ms-flex-preferred-size: 58.333%; + flex-basis: 58.333%; + max-width: 58.333%; + } + + .col-sm-8 { + -ms-flex-preferred-size: 66.66666%; + flex-basis: 66.66666%; + max-width: 66.66666%; + } + + .col-sm-9 { + -ms-flex-preferred-size: 75%; + flex-basis: 75%; + max-width: 75%; + } + + .col-sm-10 { + -ms-flex-preferred-size: 83.333%; + flex-basis: 83.333%; + max-width: 83.333%; + } + + .col-sm-11 { + -ms-flex-preferred-size: 91.66666%; + flex-basis: 91.66666%; + max-width: 91.66666%; + } + + .col-sm-12 { + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; + } + + .col-sm-offset-1 { + margin-left: 8.333%; + } + + .col-sm-offset-2 { + margin-left: 16.66666%; + } + + .col-sm-offset-3 { + margin-left: 25%; + } + + .col-sm-offset-4 { + margin-left: 33.333%; + } + + .col-sm-offset-5 { + margin-left: 41.66666%; + } + + .col-sm-offset-6 { + margin-left: 50%; + } + + .col-sm-offset-7 { + margin-left: 58.333%; + } + + .col-sm-offset-8 { + margin-left: 66.66666%; + } + + .col-sm-offset-9 { + margin-left: 75%; + } + + .col-sm-offset-10 { + margin-left: 83.333%; + } + + .col-sm-offset-11 { + margin-left: 91.66666%; + } + + .start-sm { + -ms-flex-pack: start; + -webkit-box-pack: start; + justify-content: flex-start; + text-align: start; + } + + .center-sm { + -ms-flex-pack: center; + -webkit-box-pack: center; + justify-content: center; + text-align: center; + } + + .end-sm { + -ms-flex-pack: end; + -webkit-box-pack: end; + justify-content: flex-end; + text-align: end; + } + + .top-sm { + -ms-flex-align: start; + -webkit-box-align: start; + align-items: flex-start; + } + + .middle-sm { + -ms-flex-align: center; + -webkit-box-align: center; + align-items: center; + } + + .bottom-sm { + -ms-flex-align: end; + -webkit-box-align: end; + align-items: flex-end; + } + + .around-sm { + -ms-flex-pack: distribute; + justify-content: space-around; + } + + .between-sm { + -ms-flex-pack: justify; + -webkit-box-pack: justify; + justify-content: space-between; + } + + .first-sm { + -ms-flex-order: -1; + -webkit-box-ordinal-group: 0; + order: -1; + } + + .last-sm { + -ms-flex-order: 1; + -webkit-box-ordinal-group: 2; + order: 1; + } +} + +@media only screen and (min-width: 62em) { + .container { + width: 61rem; + } + + .col-md, + .col-md-1, + .col-md-2, + .col-md-3, + .col-md-4, + .col-md-5, + .col-md-6, + .col-md-7, + .col-md-8, + .col-md-9, + .col-md-10, + .col-md-11, + .col-md-12 { + box-sizing: border-box; + -ms-flex: 0 0 auto; + -webkit-box-flex: 0; + flex: 0 0 auto; + } + + .col-md { + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + -webkit-box-flex: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100%; + } + + .col-md-1 { + -ms-flex-preferred-size: 8.333%; + flex-basis: 8.333%; + max-width: 8.333%; + } + + .col-md-2 { + -ms-flex-preferred-size: 16.66666%; + flex-basis: 16.66666%; + max-width: 16.66666%; + } + + .col-md-3 { + -ms-flex-preferred-size: 25%; + flex-basis: 25%; + max-width: 25%; + } + + .col-md-4 { + -ms-flex-preferred-size: 33.333%; + flex-basis: 33.333%; + max-width: 33.333%; + } + + .col-md-5 { + -ms-flex-preferred-size: 41.66666%; + flex-basis: 41.66666%; + max-width: 41.66666%; + } + + .col-md-6 { + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + max-width: 50%; + } + + .col-md-7 { + -ms-flex-preferred-size: 58.333%; + flex-basis: 58.333%; + max-width: 58.333%; + } + + .col-md-8 { + -ms-flex-preferred-size: 66.66666%; + flex-basis: 66.66666%; + max-width: 66.66666%; + } + + .col-md-9 { + -ms-flex-preferred-size: 75%; + flex-basis: 75%; + max-width: 75%; + } + + .col-md-10 { + -ms-flex-preferred-size: 83.333%; + flex-basis: 83.333%; + max-width: 83.333%; + } + + .col-md-11 { + -ms-flex-preferred-size: 91.66666%; + flex-basis: 91.66666%; + max-width: 91.66666%; + } + + .col-md-12 { + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; + } + + .col-md-offset-1 { + margin-left: 8.333%; + } + + .col-md-offset-2 { + margin-left: 16.66666%; + } + + .col-md-offset-3 { + margin-left: 25%; + } + + .col-md-offset-4 { + margin-left: 33.333%; + } + + .col-md-offset-5 { + margin-left: 41.66666%; + } + + .col-md-offset-6 { + margin-left: 50%; + } + + .col-md-offset-7 { + margin-left: 58.333%; + } + + .col-md-offset-8 { + margin-left: 66.66666%; + } + + .col-md-offset-9 { + margin-left: 75%; + } + + .col-md-offset-10 { + margin-left: 83.333%; + } + + .col-md-offset-11 { + margin-left: 91.66666%; + } + + .start-md { + -ms-flex-pack: start; + -webkit-box-pack: start; + justify-content: flex-start; + text-align: start; + } + + .center-md { + -ms-flex-pack: center; + -webkit-box-pack: center; + justify-content: center; + text-align: center; + } + + .end-md { + -ms-flex-pack: end; + -webkit-box-pack: end; + justify-content: flex-end; + text-align: end; + } + + .top-md { + -ms-flex-align: start; + -webkit-box-align: start; + align-items: flex-start; + } + + .middle-md { + -ms-flex-align: center; + -webkit-box-align: center; + align-items: center; + } + + .bottom-md { + -ms-flex-align: end; + -webkit-box-align: end; + align-items: flex-end; + } + + .around-md { + -ms-flex-pack: distribute; + justify-content: space-around; + } + + .between-md { + -ms-flex-pack: justify; + -webkit-box-pack: justify; + justify-content: space-between; + } + + .first-md { + -ms-flex-order: -1; + -webkit-box-ordinal-group: 0; + order: -1; + } + + .last-md { + -ms-flex-order: 1; + -webkit-box-ordinal-group: 2; + order: 1; + } +} + +@media only screen and (min-width: 75em) { + .container { + width: 71rem; + } + + .col-lg, + .col-lg-1, + .col-lg-2, + .col-lg-3, + .col-lg-4, + .col-lg-5, + .col-lg-6, + .col-lg-7, + .col-lg-8, + .col-lg-9, + .col-lg-10, + .col-lg-11, + .col-lg-12 { + box-sizing: border-box; + -ms-flex: 0 0 auto; + -webkit-box-flex: 0; + flex: 0 0 auto; + } + + .col-lg { + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + -webkit-box-flex: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100%; + } + + .col-lg-1 { + -ms-flex-preferred-size: 8.333%; + flex-basis: 8.333%; + max-width: 8.333%; + } + + .col-lg-2 { + -ms-flex-preferred-size: 16.66666%; + flex-basis: 16.66666%; + max-width: 16.66666%; + } + + .col-lg-3 { + -ms-flex-preferred-size: 25%; + flex-basis: 25%; + max-width: 25%; + } + + .col-lg-4 { + -ms-flex-preferred-size: 33.333%; + flex-basis: 33.333%; + max-width: 33.333%; + } + + .col-lg-5 { + -ms-flex-preferred-size: 41.66666%; + flex-basis: 41.66666%; + max-width: 41.66666%; + } + + .col-lg-6 { + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + max-width: 50%; + } + + .col-lg-7 { + -ms-flex-preferred-size: 58.333%; + flex-basis: 58.333%; + max-width: 58.333%; + } + + .col-lg-8 { + -ms-flex-preferred-size: 66.66666%; + flex-basis: 66.66666%; + max-width: 66.66666%; + } + + .col-lg-9 { + -ms-flex-preferred-size: 75%; + flex-basis: 75%; + max-width: 75%; + } + + .col-lg-10 { + -ms-flex-preferred-size: 83.333%; + flex-basis: 83.333%; + max-width: 83.333%; + } + + .col-lg-11 { + -ms-flex-preferred-size: 91.66666%; + flex-basis: 91.66666%; + max-width: 91.66666%; + } + + .col-lg-12 { + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; + } + + .col-lg-offset-1 { + margin-left: 8.333%; + } + + .col-lg-offset-2 { + margin-left: 16.66666%; + } + + .col-lg-offset-3 { + margin-left: 25%; + } + + .col-lg-offset-4 { + margin-left: 33.333%; + } + + .col-lg-offset-5 { + margin-left: 41.66666%; + } + + .col-lg-offset-6 { + margin-left: 50%; + } + + .col-lg-offset-7 { + margin-left: 58.333%; + } + + .col-lg-offset-8 { + margin-left: 66.66666%; + } + + .col-lg-offset-9 { + margin-left: 75%; + } + + .col-lg-offset-10 { + margin-left: 83.333%; + } + + .col-lg-offset-11 { + margin-left: 91.66666%; + } + + .start-lg { + -ms-flex-pack: start; + -webkit-box-pack: start; + justify-content: flex-start; + text-align: start; + } + + .center-lg { + -ms-flex-pack: center; + -webkit-box-pack: center; + justify-content: center; + text-align: center; + } + + .end-lg { + -ms-flex-pack: end; + -webkit-box-pack: end; + justify-content: flex-end; + text-align: end; + } + + .top-lg { + -ms-flex-align: start; + -webkit-box-align: start; + align-items: flex-start; + } + + .middle-lg { + -ms-flex-align: center; + -webkit-box-align: center; + align-items: center; + } + + .bottom-lg { + -ms-flex-align: end; + -webkit-box-align: end; + align-items: flex-end; + } + + .around-lg { + -ms-flex-pack: distribute; + justify-content: space-around; + } + + .between-lg { + -ms-flex-pack: justify; + -webkit-box-pack: justify; + justify-content: space-between; + } + + .first-lg { + -ms-flex-order: -1; + -webkit-box-ordinal-group: 0; + order: -1; + } + + .last-lg { + -ms-flex-order: 1; + -webkit-box-ordinal-group: 2; + order: 1; + } +} + + +@media only screen and (min-width: 90em) { + .container { + width: 90rem; + } + + .col-xl, + .col-xl-1, + .col-xl-2, + .col-xl-3, + .col-xl-4, + .col-xl-5, + .col-xl-6, + .col-xl-7, + .col-xl-8, + .col-xl-9, + .col-xl-10, + .col-xl-11, + .col-xl-12 { + box-sizing: border-box; + -ms-flex: 0 0 auto; + -webkit-box-flex: 0; + flex: 0 0 auto; + } + + .col-xl { + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + -webkit-box-flex: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100%; + } + + .col-xl-1 { + -ms-flex-preferred-size: 8.333%; + flex-basis: 8.333%; + max-width: 8.333%; + } + + .col-xl-2 { + -ms-flex-preferred-size: 16.66666%; + flex-basis: 16.66666%; + max-width: 16.66666%; + } + + .col-xl-3 { + -ms-flex-preferred-size: 25%; + flex-basis: 25%; + max-width: 25%; + } + + .col-xl-4 { + -ms-flex-preferred-size: 33.333%; + flex-basis: 33.333%; + max-width: 33.333%; + } + + .col-xl-5 { + -ms-flex-preferred-size: 41.66666%; + flex-basis: 41.66666%; + max-width: 41.66666%; + } + + .col-xl-6 { + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + max-width: 50%; + } + + .col-xl-7 { + -ms-flex-preferred-size: 58.333%; + flex-basis: 58.333%; + max-width: 58.333%; + } + + .col-xl-8 { + -ms-flex-preferred-size: 66.66666%; + flex-basis: 66.66666%; + max-width: 66.66666%; + } + + .col-xl-9 { + -ms-flex-preferred-size: 75%; + flex-basis: 75%; + max-width: 75%; + } + + .col-xl-10 { + -ms-flex-preferred-size: 83.333%; + flex-basis: 83.333%; + max-width: 83.333%; + } + + .col-xl-11 { + -ms-flex-preferred-size: 91.66666%; + flex-basis: 91.66666%; + max-width: 91.66666%; + } + + .col-xl-12 { + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; + } + + .col-xl-offset-1 { + margin-left: 8.333%; + } + + .col-xl-offset-2 { + margin-left: 16.66666%; + } + + .col-xl-offset-3 { + margin-left: 25%; + } + + .col-xl-offset-4 { + margin-left: 33.333%; + } + + .col-xl-offset-5 { + margin-left: 41.66666%; + } + + .col-xl-offset-6 { + margin-left: 50%; + } + + .col-xl-offset-7 { + margin-left: 58.333%; + } + + .col-xl-offset-8 { + margin-left: 66.66666%; + } + + .col-xl-offset-9 { + margin-left: 75%; + } + + .col-xl-offset-10 { + margin-left: 83.333%; + } + + .col-xl-offset-11 { + margin-left: 91.66666%; + } + + .start-xl { + -ms-flex-pack: start; + -webkit-box-pack: start; + justify-content: flex-start; + text-align: start; + } + + .center-xl { + -ms-flex-pack: center; + -webkit-box-pack: center; + justify-content: center; + text-align: center; + } + + .end-xl { + -ms-flex-pack: end; + -webkit-box-pack: end; + justify-content: flex-end; + text-align: end; + } + + .top-xl { + -ms-flex-align: start; + -webkit-box-align: start; + align-items: flex-start; + } + + .middle-xl { + -ms-flex-align: center; + -webkit-box-align: center; + align-items: center; + } + + .bottom-xl { + -ms-flex-align: end; + -webkit-box-align: end; + align-items: flex-end; + } + + .around-xl { + -ms-flex-pack: distribute; + justify-content: space-around; + } + + .between-xl { + -ms-flex-pack: justify; + -webkit-box-pack: justify; + justify-content: space-between; + } + + .first-xl { + -ms-flex-order: -1; + -webkit-box-ordinal-group: 0; + order: -1; + } + + .last-xl { + -ms-flex-order: 1; + -webkit-box-ordinal-group: 2; + order: 1; + } +} \ No newline at end of file diff --git a/asset/flexboxgrid/css/flexboxgrid.min.css b/asset/flexboxgrid/css/flexboxgrid.min.css new file mode 100644 index 0000000..bfeb9bf --- /dev/null +++ b/asset/flexboxgrid/css/flexboxgrid.min.css @@ -0,0 +1 @@ +.container-fluid{margin-right:auto;margin-left:auto;padding-right:2rem;padding-left:2rem}.row{box-sizing:border-box;display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex:0 1 auto;-webkit-box-flex:0;flex:0 1 auto;-ms-flex-direction:row;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-1rem;margin-left:-1rem}.row.reverse{-ms-flex-direction:row-reverse;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;flex-direction:row-reverse}.col.reverse{-ms-flex-direction:column-reverse;-webkit-box-orient:vertical;-webkit-box-direction:reverse;flex-direction:column-reverse}.col-xs,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{box-sizing:border-box;-ms-flex:0 0 auto;-webkit-box-flex:0;flex:0 0 auto;padding-right:1rem;padding-left:1rem}.col-xs{-webkit-flex-grow:1;-ms-flex-positive:1;-webkit-box-flex:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-xs-1{-ms-flex-preferred-size:8.333%;flex-basis:8.333%;max-width:8.333%}.col-xs-2{-ms-flex-preferred-size:16.667%;flex-basis:16.667%;max-width:16.667%}.col-xs-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-xs-4{-ms-flex-preferred-size:33.333%;flex-basis:33.333%;max-width:33.333%}.col-xs-5{-ms-flex-preferred-size:41.667%;flex-basis:41.667%;max-width:41.667%}.col-xs-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-xs-7{-ms-flex-preferred-size:58.333%;flex-basis:58.333%;max-width:58.333%}.col-xs-8{-ms-flex-preferred-size:66.667%;flex-basis:66.667%;max-width:66.667%}.col-xs-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-xs-10{-ms-flex-preferred-size:83.333%;flex-basis:83.333%;max-width:83.333%}.col-xs-11{-ms-flex-preferred-size:91.667%;flex-basis:91.667%;max-width:91.667%}.col-xs-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-xs-offset-1{margin-left:8.333%}.col-xs-offset-2{margin-left:16.667%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-4{margin-left:33.333%}.col-xs-offset-5{margin-left:41.667%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-7{margin-left:58.333%}.col-xs-offset-8{margin-left:66.667%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-10{margin-left:83.333%}.col-xs-offset-11{margin-left:91.667%}.start-xs{-ms-flex-pack:start;-webkit-box-pack:start;justify-content:flex-start;text-align:start}.center-xs{-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center;text-align:center}.end-xs{-ms-flex-pack:end;-webkit-box-pack:end;justify-content:flex-end;text-align:end}.top-xs{-ms-flex-align:start;-webkit-box-align:start;align-items:flex-start}.middle-xs{-ms-flex-align:center;-webkit-box-align:center;align-items:center}.bottom-xs{-ms-flex-align:end;-webkit-box-align:end;align-items:flex-end}.around-xs{-ms-flex-pack:distribute;justify-content:space-around}.between-xs{-ms-flex-pack:justify;-webkit-box-pack:justify;justify-content:space-between}.first-xs{-ms-flex-order:-1;-webkit-box-ordinal-group:0;order:-1}.last-xs{-ms-flex-order:1;-webkit-box-ordinal-group:2;order:1}@media only screen and (min-width:48em){.container{width:46rem}.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9{box-sizing:border-box;-ms-flex:0 0 auto;-webkit-box-flex:0;flex:0 0 auto;padding-right:1rem;padding-left:1rem}.col-sm{-webkit-flex-grow:1;-ms-flex-positive:1;-webkit-box-flex:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-sm-1{-ms-flex-preferred-size:8.333%;flex-basis:8.333%;max-width:8.333%}.col-sm-2{-ms-flex-preferred-size:16.667%;flex-basis:16.667%;max-width:16.667%}.col-sm-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-sm-4{-ms-flex-preferred-size:33.333%;flex-basis:33.333%;max-width:33.333%}.col-sm-5{-ms-flex-preferred-size:41.667%;flex-basis:41.667%;max-width:41.667%}.col-sm-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-sm-7{-ms-flex-preferred-size:58.333%;flex-basis:58.333%;max-width:58.333%}.col-sm-8{-ms-flex-preferred-size:66.667%;flex-basis:66.667%;max-width:66.667%}.col-sm-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-sm-10{-ms-flex-preferred-size:83.333%;flex-basis:83.333%;max-width:83.333%}.col-sm-11{-ms-flex-preferred-size:91.667%;flex-basis:91.667%;max-width:91.667%}.col-sm-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-sm-offset-1{margin-left:8.333%}.col-sm-offset-2{margin-left:16.667%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-4{margin-left:33.333%}.col-sm-offset-5{margin-left:41.667%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-7{margin-left:58.333%}.col-sm-offset-8{margin-left:66.667%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-10{margin-left:83.333%}.col-sm-offset-11{margin-left:91.667%}.start-sm{-ms-flex-pack:start;-webkit-box-pack:start;justify-content:flex-start;text-align:start}.center-sm{-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center;text-align:center}.end-sm{-ms-flex-pack:end;-webkit-box-pack:end;justify-content:flex-end;text-align:end}.top-sm{-ms-flex-align:start;-webkit-box-align:start;align-items:flex-start}.middle-sm{-ms-flex-align:center;-webkit-box-align:center;align-items:center}.bottom-sm{-ms-flex-align:end;-webkit-box-align:end;align-items:flex-end}.around-sm{-ms-flex-pack:distribute;justify-content:space-around}.between-sm{-ms-flex-pack:justify;-webkit-box-pack:justify;justify-content:space-between}.first-sm{-ms-flex-order:-1;-webkit-box-ordinal-group:0;order:-1}.last-sm{-ms-flex-order:1;-webkit-box-ordinal-group:2;order:1}}@media only screen and (min-width:62em){.container{width:61rem}.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{box-sizing:border-box;-ms-flex:0 0 auto;-webkit-box-flex:0;flex:0 0 auto;padding-right:1rem;padding-left:1rem}.col-md{-webkit-flex-grow:1;-ms-flex-positive:1;-webkit-box-flex:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-md-1{-ms-flex-preferred-size:8.333%;flex-basis:8.333%;max-width:8.333%}.col-md-2{-ms-flex-preferred-size:16.667%;flex-basis:16.667%;max-width:16.667%}.col-md-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-md-4{-ms-flex-preferred-size:33.333%;flex-basis:33.333%;max-width:33.333%}.col-md-5{-ms-flex-preferred-size:41.667%;flex-basis:41.667%;max-width:41.667%}.col-md-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-md-7{-ms-flex-preferred-size:58.333%;flex-basis:58.333%;max-width:58.333%}.col-md-8{-ms-flex-preferred-size:66.667%;flex-basis:66.667%;max-width:66.667%}.col-md-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-md-10{-ms-flex-preferred-size:83.333%;flex-basis:83.333%;max-width:83.333%}.col-md-11{-ms-flex-preferred-size:91.667%;flex-basis:91.667%;max-width:91.667%}.col-md-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-md-offset-1{margin-left:8.333%}.col-md-offset-2{margin-left:16.667%}.col-md-offset-3{margin-left:25%}.col-md-offset-4{margin-left:33.333%}.col-md-offset-5{margin-left:41.667%}.col-md-offset-6{margin-left:50%}.col-md-offset-7{margin-left:58.333%}.col-md-offset-8{margin-left:66.667%}.col-md-offset-9{margin-left:75%}.col-md-offset-10{margin-left:83.333%}.col-md-offset-11{margin-left:91.667%}.start-md{-ms-flex-pack:start;-webkit-box-pack:start;justify-content:flex-start;text-align:start}.center-md{-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center;text-align:center}.end-md{-ms-flex-pack:end;-webkit-box-pack:end;justify-content:flex-end;text-align:end}.top-md{-ms-flex-align:start;-webkit-box-align:start;align-items:flex-start}.middle-md{-ms-flex-align:center;-webkit-box-align:center;align-items:center}.bottom-md{-ms-flex-align:end;-webkit-box-align:end;align-items:flex-end}.around-md{-ms-flex-pack:distribute;justify-content:space-around}.between-md{-ms-flex-pack:justify;-webkit-box-pack:justify;justify-content:space-between}.first-md{-ms-flex-order:-1;-webkit-box-ordinal-group:0;order:-1}.last-md{-ms-flex-order:1;-webkit-box-ordinal-group:2;order:1}}@media only screen and (min-width:75em){.container{width:71rem}.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{box-sizing:border-box;-ms-flex:0 0 auto;-webkit-box-flex:0;flex:0 0 auto;padding-right:1rem;padding-left:1rem}.col-lg{-webkit-flex-grow:1;-ms-flex-positive:1;-webkit-box-flex:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-lg-1{-ms-flex-preferred-size:8.333%;flex-basis:8.333%;max-width:8.333%}.col-lg-2{-ms-flex-preferred-size:16.667%;flex-basis:16.667%;max-width:16.667%}.col-lg-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-lg-4{-ms-flex-preferred-size:33.333%;flex-basis:33.333%;max-width:33.333%}.col-lg-5{-ms-flex-preferred-size:41.667%;flex-basis:41.667%;max-width:41.667%}.col-lg-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-lg-7{-ms-flex-preferred-size:58.333%;flex-basis:58.333%;max-width:58.333%}.col-lg-8{-ms-flex-preferred-size:66.667%;flex-basis:66.667%;max-width:66.667%}.col-lg-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-lg-10{-ms-flex-preferred-size:83.333%;flex-basis:83.333%;max-width:83.333%}.col-lg-11{-ms-flex-preferred-size:91.667%;flex-basis:91.667%;max-width:91.667%}.col-lg-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-lg-offset-1{margin-left:8.333%}.col-lg-offset-2{margin-left:16.667%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-4{margin-left:33.333%}.col-lg-offset-5{margin-left:41.667%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-7{margin-left:58.333%}.col-lg-offset-8{margin-left:66.667%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-10{margin-left:83.333%}.col-lg-offset-11{margin-left:91.667%}.start-lg{-ms-flex-pack:start;-webkit-box-pack:start;justify-content:flex-start;text-align:start}.center-lg{-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center;text-align:center}.end-lg{-ms-flex-pack:end;-webkit-box-pack:end;justify-content:flex-end;text-align:end}.top-lg{-ms-flex-align:start;-webkit-box-align:start;align-items:flex-start}.middle-lg{-ms-flex-align:center;-webkit-box-align:center;align-items:center}.bottom-lg{-ms-flex-align:end;-webkit-box-align:end;align-items:flex-end}.around-lg{-ms-flex-pack:distribute;justify-content:space-around}.between-lg{-ms-flex-pack:justify;-webkit-box-pack:justify;justify-content:space-between}.first-lg{-ms-flex-order:-1;-webkit-box-ordinal-group:0;order:-1}.last-lg{-ms-flex-order:1;-webkit-box-ordinal-group:2;order:1}} \ No newline at end of file diff --git a/asset/flexboxgrid/css/index.css b/asset/flexboxgrid/css/index.css new file mode 100644 index 0000000..c546d93 --- /dev/null +++ b/asset/flexboxgrid/css/index.css @@ -0,0 +1 @@ +/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:0 0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}body{box-sizing:border-box;padding:0;margin:0;font-size:18px;font-family:HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-weight:400;background:#EEE;line-height:1.4rem}h1,h2,h3,h4,h5,h6{font-family:Gibson,HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;color:#001A33}h2{font-size:2rem;margin:1rem 0}:focus{outline-color:transparent;outline-style:none}h2+p{margin:0 0 2rem}a{text-decoration:none;color:#007FFF;padding:0 0 .2rem;font-weight:700}a:hover{color:#007FFF}pre{overflow-x:auto;padding:1.25em;border:1px solid #e6e6e6;border-left-width:5px;margin:1.6em 0;font-size:.875em;background:#fcfcfc;white-space:pre;word-wrap:normal}code{color:#007FFF}.layout{display:flex;min-height:100vh;flex-direction:column}.page-nav{box-sizing:border-box;position:fixed;padding:.5rem;width:100%;background:0 0}.page{z-index:0;background:#EEE}.wrap{box-sizing:border-box;max-width:1200px;margin:0 auto}.page-section{padding-top:3rem;margin-bottom:3rem}.page-features{width:100%;background:#001a33;overflow:scroll}.menu-button{position:fixed;top:.75rem;right:.75rem;z-index:1;box-sizing:border-box;padding:.45rem;height:3rem;width:3rem;background:#FFF;border:1px solid transparent;user-select:none}.menu-button:hover{border:1px solid #007FFF;border-radius:2px}.menu-button:active{background:#EEE;border:1px solid transparent}.open{transform:translate3d(-15rem,0,0)}.menu-button-icon{width:2rem;height:2rem}.hero{box-sizing:border-box;padding:2rem;background:#FFF;border:1px solid #FFF;border-radius:2px}.hero-headline{font-size:3rem;white-space:nowrap;margin-bottom:0}.hero-copy{font-size:1rem;margin-bottom:0;padding:0 2rem;text-align:center}.slide-menu{display:block;position:fixed;overflow:auto;top:0;right:0;bottom:0;height:100%;width:250px}.menu{box-sizing:border-box;padding-bottom:5rem;background:#001a33}.menu-header{box-sizing:border-box;padding:3rem 3rem 0;color:#eee}.menu-list{margin:0;padding:0;list-style:none}.menu-list-item{height:3rem;line-height:3rem;font-size:1rem;color:#007FFF;background:0 0;transition:all .2s ease-in}.menu-link{box-sizing:border-box;padding-left:3rem;display:block;color:#007FFF;transition:color .2s ease-in}.menu-link:hover{color:#3298ff;border-bottom:0}.link-top{align-self:flex-end}.button{position:relative;display:inline-block;box-sizing:border-box;min-width:11rem;padding:0 4rem;margin:1rem;height:3rem;line-height:3rem;border:1px solid #007FFF;border-radius:2px;color:#007FFF;font-size:1.25rem;transition:background-color,.15s}.button:hover{background:#39F;border-color:#39F;color:#FFF;text-shadow:0 1px #007FFF}.button:active{background:#007FFF;color:#FFF;border-top:2px solid #06C}.box,.box-first,.box-large,.box-nested,.box-row{position:relative;box-sizing:border-box;min-height:1rem;margin-bottom:0;background:#007FFF;border:1px solid #FFF;border-radius:2px;overflow:hidden;text-align:center;color:#fff}.box-row{margin-bottom:1rem}.box-first{background:#06C;border-color:#007FFF}.box-nested{background:#036;border-color:#007FFF}.box-large{height:8rem}.box-container{box-sizing:border-box;padding:.5rem}.page-footer{box-sizing:border-box;padding-bottom:3rem}.tag{color:#000;font-weight:400}.end{text-align:end}.invisible-xs{display:none;visibility:hidden}.visible-xs{display:block;visibility:visible}@media only screen and (min-width:48rem){body{font-size:16px}.slide-menu{width:25%}.open{transform:translate3d(0,0,0)}.hero-headline{font-size:6rem;margin-bottom:2rem}.hero-copy{font-size:1.25rem;margin-bottom:2rem}.box,.box-first,.box-large,.box-nested,.box-row{padding:1rem}.invisible-md{display:none;visibility:hidden}.visible-md{display:block;visibility:visible}}.container,.container-fluid{margin-right:auto;margin-left:auto}.container-fluid{padding-right:2rem;padding-left:2rem}.row{box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-.5rem;margin-left:-.5rem}.row.reverse{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.col.reverse{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.col-xs,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-offset-0,.col-xs-offset-1,.col-xs-offset-10,.col-xs-offset-11,.col-xs-offset-12,.col-xs-offset-2,.col-xs-offset-3,.col-xs-offset-4,.col-xs-offset-5,.col-xs-offset-6,.col-xs-offset-7,.col-xs-offset-8,.col-xs-offset-9{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.col-xs{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-xs-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-xs-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-xs-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-xs-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-xs-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-xs-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-xs-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-xs-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-xs-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-xs-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-xs-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-xs-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-xs-offset-0{margin-left:0}.col-xs-offset-1{margin-left:8.33333333%}.col-xs-offset-2{margin-left:16.66666667%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-4{margin-left:33.33333333%}.col-xs-offset-5{margin-left:41.66666667%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-7{margin-left:58.33333333%}.col-xs-offset-8{margin-left:66.66666667%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-10{margin-left:83.33333333%}.col-xs-offset-11{margin-left:91.66666667%}.start-xs{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-xs{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-xs{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-xs{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-xs{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-xs{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-xs{-ms-flex-pack:distribute;justify-content:space-around}.between-xs{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-xs{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-xs{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}@media only screen and (min-width:48em){.container{width:49rem}.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-offset-0,.col-sm-offset-1,.col-sm-offset-10,.col-sm-offset-11,.col-sm-offset-12,.col-sm-offset-2,.col-sm-offset-3,.col-sm-offset-4,.col-sm-offset-5,.col-sm-offset-6,.col-sm-offset-7,.col-sm-offset-8,.col-sm-offset-9{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.col-sm{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-sm-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-sm-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-sm-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-sm-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-sm-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-sm-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-sm-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-sm-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-sm-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-sm-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-sm-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-sm-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-sm-offset-0{margin-left:0}.col-sm-offset-1{margin-left:8.33333333%}.col-sm-offset-2{margin-left:16.66666667%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-4{margin-left:33.33333333%}.col-sm-offset-5{margin-left:41.66666667%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-7{margin-left:58.33333333%}.col-sm-offset-8{margin-left:66.66666667%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-10{margin-left:83.33333333%}.col-sm-offset-11{margin-left:91.66666667%}.start-sm{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-sm{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-sm{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-sm{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-sm{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-sm{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-sm{-ms-flex-pack:distribute;justify-content:space-around}.between-sm{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-sm{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-sm{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}}@media only screen and (min-width:64em){.container{width:65rem}.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-offset-0,.col-md-offset-1,.col-md-offset-10,.col-md-offset-11,.col-md-offset-12,.col-md-offset-2,.col-md-offset-3,.col-md-offset-4,.col-md-offset-5,.col-md-offset-6,.col-md-offset-7,.col-md-offset-8,.col-md-offset-9{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.col-md{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-md-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-md-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-md-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-md-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-md-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-md-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-md-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-md-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-md-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-md-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-md-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-md-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-md-offset-0{margin-left:0}.col-md-offset-1{margin-left:8.33333333%}.col-md-offset-2{margin-left:16.66666667%}.col-md-offset-3{margin-left:25%}.col-md-offset-4{margin-left:33.33333333%}.col-md-offset-5{margin-left:41.66666667%}.col-md-offset-6{margin-left:50%}.col-md-offset-7{margin-left:58.33333333%}.col-md-offset-8{margin-left:66.66666667%}.col-md-offset-9{margin-left:75%}.col-md-offset-10{margin-left:83.33333333%}.col-md-offset-11{margin-left:91.66666667%}.start-md{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-md{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-md{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-md{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-md{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-md{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-md{-ms-flex-pack:distribute;justify-content:space-around}.between-md{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-md{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-md{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}}@media only screen and (min-width:75em){.container{width:76rem}.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-offset-0,.col-lg-offset-1,.col-lg-offset-10,.col-lg-offset-11,.col-lg-offset-12,.col-lg-offset-2,.col-lg-offset-3,.col-lg-offset-4,.col-lg-offset-5,.col-lg-offset-6,.col-lg-offset-7,.col-lg-offset-8,.col-lg-offset-9{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.col-lg{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-lg-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-lg-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-lg-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-lg-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-lg-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-lg-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-lg-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-lg-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-lg-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-lg-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-lg-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-lg-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-lg-offset-0{margin-left:0}.col-lg-offset-1{margin-left:8.33333333%}.col-lg-offset-2{margin-left:16.66666667%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-4{margin-left:33.33333333%}.col-lg-offset-5{margin-left:41.66666667%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-7{margin-left:58.33333333%}.col-lg-offset-8{margin-left:66.66666667%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-10{margin-left:83.33333333%}.col-lg-offset-11{margin-left:91.66666667%}.start-lg{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-lg{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-lg{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-lg{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-lg{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-lg{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-lg{-ms-flex-pack:distribute;justify-content:space-around}.between-lg{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-lg{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-lg{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}} \ No newline at end of file diff --git a/asset/flexboxgrid/css/index.min.css b/asset/flexboxgrid/css/index.min.css new file mode 100644 index 0000000..2e1a961 --- /dev/null +++ b/asset/flexboxgrid/css/index.min.css @@ -0,0 +1 @@ +/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}a{background:0 0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}body{box-sizing:border-box;padding:0;margin:0;font-size:18px;font-family:HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-weight:400;background:#EEE;line-height:1.4rem}h1,h2,h3,h4,h5,h6{font-family:Gibson,HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;color:#001A33}h2{font-size:2rem;margin:1rem 0}:focus{outline-color:transparent;outline-style:none}h2+p{margin:0 0 2rem}a{text-decoration:none;color:#007FFF;padding:0 0 .2rem;font-weight:700}a:hover{color:#007FFF}pre{overflow-x:auto;padding:1.25em;border:1px solid #e6e6e6;border-left-width:5px;margin:1.6em 0;font-size:.875em;background:#fcfcfc;white-space:pre;word-wrap:normal}code{color:#007FFF}.layout{display:flex;min-height:100vh;flex-direction:column}.page-nav{box-sizing:border-box;position:fixed;padding:.5rem;width:100%;background:0 0}.page{z-index:0;background:#EEE}.wrap{box-sizing:border-box;max-width:1200px;margin:0 auto}.page-section{padding-top:3rem;margin-bottom:3rem}.page-features{width:100%;background:#001a33;overflow:scroll}.menu-button{position:fixed;top:.75rem;right:.75rem;z-index:1;box-sizing:border-box;padding:.45rem;height:3rem;width:3rem;background:#FFF;border:1px solid transparent;user-select:none}.menu-button:hover{border:1px solid #007FFF;border-radius:2px}.menu-button:active{background:#EEE;border:1px solid transparent}.open{transform:translate3d(-15rem,0,0)}.menu-button-icon{width:2rem;height:2rem}.hero{box-sizing:border-box;padding:2rem;background:#FFF;border:1px solid #FFF;border-radius:2px}.hero-headline{font-size:3rem;white-space:nowrap;margin-bottom:0}.hero-copy{font-size:1rem;margin-bottom:0;padding:0 2rem;text-align:center}.slide-menu{display:block;position:fixed;overflow:auto;top:0;right:0;bottom:0;height:100%;width:250px}.menu{box-sizing:border-box;padding-bottom:5rem;background:#001a33}.menu-header{box-sizing:border-box;padding:3rem 3rem 0;color:#eee}.menu-list{margin:0;padding:0;list-style:none}.menu-list-item{height:3rem;line-height:3rem;font-size:1rem;color:#007FFF;background:0 0;transition:all .2s ease-in}.menu-link{box-sizing:border-box;padding-left:3rem;display:block;color:#007FFF;transition:color .2s ease-in}.menu-link:hover{color:#3298ff;border-bottom:0}.link-top{align-self:flex-end}.button{position:relative;display:inline-block;box-sizing:border-box;min-width:11rem;padding:0 4rem;margin:1rem;height:3rem;line-height:3rem;border:1px solid #007FFF;border-radius:2px;color:#007FFF;font-size:1.25rem;transition:background-color,.15s}.button:hover{background:#39F;border-color:#39F;color:#FFF;text-shadow:0 1px #007FFF}.button:active{background:#007FFF;color:#FFF;border-top:2px solid #06C}.box,.box-first,.box-large,.box-nested,.box-row{position:relative;box-sizing:border-box;min-height:1rem;margin-bottom:0;background:#007FFF;border:1px solid #FFF;border-radius:2px;overflow:hidden;text-align:center;color:#fff}.box-row{margin-bottom:1rem}.box-first{background:#06C;border-color:#007FFF}.box-nested{background:#036;border-color:#007FFF}.box-large{height:8rem}.box-container{box-sizing:border-box;padding:.5rem}.page-footer{box-sizing:border-box;padding-bottom:3rem}.tag{color:#000;font-weight:400}.end{text-align:end}.invisible-xs{display:none;visibility:hidden}.visible-xs{display:block;visibility:visible}@media only screen and (min-width:48rem){body{font-size:16px}.slide-menu{width:25%}.open{transform:translate3d(0,0,0)}.hero-headline{font-size:6rem;margin-bottom:2rem}.hero-copy{font-size:1.25rem;margin-bottom:2rem}.box,.box-first,.box-large,.box-nested,.box-row{padding:1rem}.invisible-md{display:none;visibility:hidden}.visible-md{display:block;visibility:visible}}.container,.container-fluid{margin-right:auto;margin-left:auto}.container-fluid{padding-right:2rem;padding-left:2rem}.row{box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-.5rem;margin-left:-.5rem}.row.reverse{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.col.reverse{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.col-xs,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-offset-0,.col-xs-offset-1,.col-xs-offset-10,.col-xs-offset-11,.col-xs-offset-12,.col-xs-offset-2,.col-xs-offset-3,.col-xs-offset-4,.col-xs-offset-5,.col-xs-offset-6,.col-xs-offset-7,.col-xs-offset-8,.col-xs-offset-9{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.col-xs{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-xs-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-xs-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-xs-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-xs-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-xs-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-xs-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-xs-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-xs-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-xs-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-xs-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-xs-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-xs-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-xs-offset-0{margin-left:0}.col-xs-offset-1{margin-left:8.33333333%}.col-xs-offset-2{margin-left:16.66666667%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-4{margin-left:33.33333333%}.col-xs-offset-5{margin-left:41.66666667%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-7{margin-left:58.33333333%}.col-xs-offset-8{margin-left:66.66666667%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-10{margin-left:83.33333333%}.col-xs-offset-11{margin-left:91.66666667%}.start-xs{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-xs{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-xs{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-xs{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-xs{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-xs{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-xs{-ms-flex-pack:distribute;justify-content:space-around}.between-xs{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-xs{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-xs{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}@media only screen and (min-width:48em){.container{width:49rem}.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-offset-0,.col-sm-offset-1,.col-sm-offset-10,.col-sm-offset-11,.col-sm-offset-12,.col-sm-offset-2,.col-sm-offset-3,.col-sm-offset-4,.col-sm-offset-5,.col-sm-offset-6,.col-sm-offset-7,.col-sm-offset-8,.col-sm-offset-9{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.col-sm{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-sm-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-sm-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-sm-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-sm-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-sm-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-sm-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-sm-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-sm-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-sm-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-sm-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-sm-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-sm-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-sm-offset-0{margin-left:0}.col-sm-offset-1{margin-left:8.33333333%}.col-sm-offset-2{margin-left:16.66666667%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-4{margin-left:33.33333333%}.col-sm-offset-5{margin-left:41.66666667%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-7{margin-left:58.33333333%}.col-sm-offset-8{margin-left:66.66666667%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-10{margin-left:83.33333333%}.col-sm-offset-11{margin-left:91.66666667%}.start-sm{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-sm{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-sm{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-sm{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-sm{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-sm{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-sm{-ms-flex-pack:distribute;justify-content:space-around}.between-sm{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-sm{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-sm{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}}@media only screen and (min-width:64em){.container{width:65rem}.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-offset-0,.col-md-offset-1,.col-md-offset-10,.col-md-offset-11,.col-md-offset-12,.col-md-offset-2,.col-md-offset-3,.col-md-offset-4,.col-md-offset-5,.col-md-offset-6,.col-md-offset-7,.col-md-offset-8,.col-md-offset-9{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.col-md{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-md-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-md-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-md-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-md-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-md-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-md-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-md-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-md-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-md-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-md-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-md-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-md-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-md-offset-0{margin-left:0}.col-md-offset-1{margin-left:8.33333333%}.col-md-offset-2{margin-left:16.66666667%}.col-md-offset-3{margin-left:25%}.col-md-offset-4{margin-left:33.33333333%}.col-md-offset-5{margin-left:41.66666667%}.col-md-offset-6{margin-left:50%}.col-md-offset-7{margin-left:58.33333333%}.col-md-offset-8{margin-left:66.66666667%}.col-md-offset-9{margin-left:75%}.col-md-offset-10{margin-left:83.33333333%}.col-md-offset-11{margin-left:91.66666667%}.start-md{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-md{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-md{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-md{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-md{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-md{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-md{-ms-flex-pack:distribute;justify-content:space-around}.between-md{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-md{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-md{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}}@media only screen and (min-width:75em){.container{width:76rem}.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-offset-0,.col-lg-offset-1,.col-lg-offset-10,.col-lg-offset-11,.col-lg-offset-12,.col-lg-offset-2,.col-lg-offset-3,.col-lg-offset-4,.col-lg-offset-5,.col-lg-offset-6,.col-lg-offset-7,.col-lg-offset-8,.col-lg-offset-9{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.col-lg{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-lg-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-lg-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-lg-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-lg-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-lg-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-lg-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-lg-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-lg-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-lg-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-lg-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-lg-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-lg-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-lg-offset-0{margin-left:0}.col-lg-offset-1{margin-left:8.33333333%}.col-lg-offset-2{margin-left:16.66666667%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-4{margin-left:33.33333333%}.col-lg-offset-5{margin-left:41.66666667%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-7{margin-left:58.33333333%}.col-lg-offset-8{margin-left:66.66666667%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-10{margin-left:83.33333333%}.col-lg-offset-11{margin-left:91.66666667%}.start-lg{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-lg{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-lg{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-lg{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-lg{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-lg{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-lg{-ms-flex-pack:distribute;justify-content:space-around}.between-lg{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-lg{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-lg{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}} \ No newline at end of file diff --git a/asset/flexboxgrid/design/flexboxgrid-template.sketch b/asset/flexboxgrid/design/flexboxgrid-template.sketch new file mode 100644 index 0000000000000000000000000000000000000000..cc144e8d4689aaeec20671fd7fe9223c7fa9afcd GIT binary patch literal 81920 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 Yzta7xRr>1xd;jmb2>##K|JVJ00Dl>?h5!Hn literal 0 HcmV?d00001 diff --git a/asset/flexboxgrid/dist/flexboxgrid.css b/asset/flexboxgrid/dist/flexboxgrid.css new file mode 100644 index 0000000..6fe4553 --- /dev/null +++ b/asset/flexboxgrid/dist/flexboxgrid.css @@ -0,0 +1,960 @@ +.container-fluid, +.container { + margin-right: auto; + margin-left: auto; +} + +.container-fluid { + padding-right: 2rem; + padding-left: 2rem; +} + +.row { + box-sizing: border-box; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 0; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +.row.reverse { + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; +} + +.col.reverse { + -webkit-box-orient: vertical; + -webkit-box-direction: reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; +} + +.col-xs, +.col-xs-1, +.col-xs-2, +.col-xs-3, +.col-xs-4, +.col-xs-5, +.col-xs-6, +.col-xs-7, +.col-xs-8, +.col-xs-9, +.col-xs-10, +.col-xs-11, +.col-xs-12, +.col-xs-offset-0, +.col-xs-offset-1, +.col-xs-offset-2, +.col-xs-offset-3, +.col-xs-offset-4, +.col-xs-offset-5, +.col-xs-offset-6, +.col-xs-offset-7, +.col-xs-offset-8, +.col-xs-offset-9, +.col-xs-offset-10, +.col-xs-offset-11, +.col-xs-offset-12 { + box-sizing: border-box; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} + +.col-xs { + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100%; +} + +.col-xs-1 { + -ms-flex-preferred-size: 8.33333333%; + flex-basis: 8.33333333%; + max-width: 8.33333333%; +} + +.col-xs-2 { + -ms-flex-preferred-size: 16.66666667%; + flex-basis: 16.66666667%; + max-width: 16.66666667%; +} + +.col-xs-3 { + -ms-flex-preferred-size: 25%; + flex-basis: 25%; + max-width: 25%; +} + +.col-xs-4 { + -ms-flex-preferred-size: 33.33333333%; + flex-basis: 33.33333333%; + max-width: 33.33333333%; +} + +.col-xs-5 { + -ms-flex-preferred-size: 41.66666667%; + flex-basis: 41.66666667%; + max-width: 41.66666667%; +} + +.col-xs-6 { + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + max-width: 50%; +} + +.col-xs-7 { + -ms-flex-preferred-size: 58.33333333%; + flex-basis: 58.33333333%; + max-width: 58.33333333%; +} + +.col-xs-8 { + -ms-flex-preferred-size: 66.66666667%; + flex-basis: 66.66666667%; + max-width: 66.66666667%; +} + +.col-xs-9 { + -ms-flex-preferred-size: 75%; + flex-basis: 75%; + max-width: 75%; +} + +.col-xs-10 { + -ms-flex-preferred-size: 83.33333333%; + flex-basis: 83.33333333%; + max-width: 83.33333333%; +} + +.col-xs-11 { + -ms-flex-preferred-size: 91.66666667%; + flex-basis: 91.66666667%; + max-width: 91.66666667%; +} + +.col-xs-12 { + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; +} + +.col-xs-offset-0 { + margin-left: 0; +} + +.col-xs-offset-1 { + margin-left: 8.33333333%; +} + +.col-xs-offset-2 { + margin-left: 16.66666667%; +} + +.col-xs-offset-3 { + margin-left: 25%; +} + +.col-xs-offset-4 { + margin-left: 33.33333333%; +} + +.col-xs-offset-5 { + margin-left: 41.66666667%; +} + +.col-xs-offset-6 { + margin-left: 50%; +} + +.col-xs-offset-7 { + margin-left: 58.33333333%; +} + +.col-xs-offset-8 { + margin-left: 66.66666667%; +} + +.col-xs-offset-9 { + margin-left: 75%; +} + +.col-xs-offset-10 { + margin-left: 83.33333333%; +} + +.col-xs-offset-11 { + margin-left: 91.66666667%; +} + +.start-xs { + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + text-align: start; +} + +.center-xs { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + text-align: center; +} + +.end-xs { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + text-align: end; +} + +.top-xs { + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; +} + +.middle-xs { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.bottom-xs { + -webkit-box-align: end; + -ms-flex-align: end; + align-items: flex-end; +} + +.around-xs { + -ms-flex-pack: distribute; + justify-content: space-around; +} + +.between-xs { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.first-xs { + -webkit-box-ordinal-group: 0; + -ms-flex-order: -1; + order: -1; +} + +.last-xs { + -webkit-box-ordinal-group: 2; + -ms-flex-order: 1; + order: 1; +} + +@media only screen and (min-width: 48em) { + .container { + width: 49rem; + } + + .col-sm, + .col-sm-1, + .col-sm-2, + .col-sm-3, + .col-sm-4, + .col-sm-5, + .col-sm-6, + .col-sm-7, + .col-sm-8, + .col-sm-9, + .col-sm-10, + .col-sm-11, + .col-sm-12, + .col-sm-offset-0, + .col-sm-offset-1, + .col-sm-offset-2, + .col-sm-offset-3, + .col-sm-offset-4, + .col-sm-offset-5, + .col-sm-offset-6, + .col-sm-offset-7, + .col-sm-offset-8, + .col-sm-offset-9, + .col-sm-offset-10, + .col-sm-offset-11, + .col-sm-offset-12 { + box-sizing: border-box; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + } + + .col-sm { + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100%; + } + + .col-sm-1 { + -ms-flex-preferred-size: 8.33333333%; + flex-basis: 8.33333333%; + max-width: 8.33333333%; + } + + .col-sm-2 { + -ms-flex-preferred-size: 16.66666667%; + flex-basis: 16.66666667%; + max-width: 16.66666667%; + } + + .col-sm-3 { + -ms-flex-preferred-size: 25%; + flex-basis: 25%; + max-width: 25%; + } + + .col-sm-4 { + -ms-flex-preferred-size: 33.33333333%; + flex-basis: 33.33333333%; + max-width: 33.33333333%; + } + + .col-sm-5 { + -ms-flex-preferred-size: 41.66666667%; + flex-basis: 41.66666667%; + max-width: 41.66666667%; + } + + .col-sm-6 { + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + max-width: 50%; + } + + .col-sm-7 { + -ms-flex-preferred-size: 58.33333333%; + flex-basis: 58.33333333%; + max-width: 58.33333333%; + } + + .col-sm-8 { + -ms-flex-preferred-size: 66.66666667%; + flex-basis: 66.66666667%; + max-width: 66.66666667%; + } + + .col-sm-9 { + -ms-flex-preferred-size: 75%; + flex-basis: 75%; + max-width: 75%; + } + + .col-sm-10 { + -ms-flex-preferred-size: 83.33333333%; + flex-basis: 83.33333333%; + max-width: 83.33333333%; + } + + .col-sm-11 { + -ms-flex-preferred-size: 91.66666667%; + flex-basis: 91.66666667%; + max-width: 91.66666667%; + } + + .col-sm-12 { + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; + } + + .col-sm-offset-0 { + margin-left: 0; + } + + .col-sm-offset-1 { + margin-left: 8.33333333%; + } + + .col-sm-offset-2 { + margin-left: 16.66666667%; + } + + .col-sm-offset-3 { + margin-left: 25%; + } + + .col-sm-offset-4 { + margin-left: 33.33333333%; + } + + .col-sm-offset-5 { + margin-left: 41.66666667%; + } + + .col-sm-offset-6 { + margin-left: 50%; + } + + .col-sm-offset-7 { + margin-left: 58.33333333%; + } + + .col-sm-offset-8 { + margin-left: 66.66666667%; + } + + .col-sm-offset-9 { + margin-left: 75%; + } + + .col-sm-offset-10 { + margin-left: 83.33333333%; + } + + .col-sm-offset-11 { + margin-left: 91.66666667%; + } + + .start-sm { + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + text-align: start; + } + + .center-sm { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + text-align: center; + } + + .end-sm { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + text-align: end; + } + + .top-sm { + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + } + + .middle-sm { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } + + .bottom-sm { + -webkit-box-align: end; + -ms-flex-align: end; + align-items: flex-end; + } + + .around-sm { + -ms-flex-pack: distribute; + justify-content: space-around; + } + + .between-sm { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + } + + .first-sm { + -webkit-box-ordinal-group: 0; + -ms-flex-order: -1; + order: -1; + } + + .last-sm { + -webkit-box-ordinal-group: 2; + -ms-flex-order: 1; + order: 1; + } +} + +@media only screen and (min-width: 64em) { + .container { + width: 65rem; + } + + .col-md, + .col-md-1, + .col-md-2, + .col-md-3, + .col-md-4, + .col-md-5, + .col-md-6, + .col-md-7, + .col-md-8, + .col-md-9, + .col-md-10, + .col-md-11, + .col-md-12, + .col-md-offset-0, + .col-md-offset-1, + .col-md-offset-2, + .col-md-offset-3, + .col-md-offset-4, + .col-md-offset-5, + .col-md-offset-6, + .col-md-offset-7, + .col-md-offset-8, + .col-md-offset-9, + .col-md-offset-10, + .col-md-offset-11, + .col-md-offset-12 { + box-sizing: border-box; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + } + + .col-md { + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100%; + } + + .col-md-1 { + -ms-flex-preferred-size: 8.33333333%; + flex-basis: 8.33333333%; + max-width: 8.33333333%; + } + + .col-md-2 { + -ms-flex-preferred-size: 16.66666667%; + flex-basis: 16.66666667%; + max-width: 16.66666667%; + } + + .col-md-3 { + -ms-flex-preferred-size: 25%; + flex-basis: 25%; + max-width: 25%; + } + + .col-md-4 { + -ms-flex-preferred-size: 33.33333333%; + flex-basis: 33.33333333%; + max-width: 33.33333333%; + } + + .col-md-5 { + -ms-flex-preferred-size: 41.66666667%; + flex-basis: 41.66666667%; + max-width: 41.66666667%; + } + + .col-md-6 { + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + max-width: 50%; + } + + .col-md-7 { + -ms-flex-preferred-size: 58.33333333%; + flex-basis: 58.33333333%; + max-width: 58.33333333%; + } + + .col-md-8 { + -ms-flex-preferred-size: 66.66666667%; + flex-basis: 66.66666667%; + max-width: 66.66666667%; + } + + .col-md-9 { + -ms-flex-preferred-size: 75%; + flex-basis: 75%; + max-width: 75%; + } + + .col-md-10 { + -ms-flex-preferred-size: 83.33333333%; + flex-basis: 83.33333333%; + max-width: 83.33333333%; + } + + .col-md-11 { + -ms-flex-preferred-size: 91.66666667%; + flex-basis: 91.66666667%; + max-width: 91.66666667%; + } + + .col-md-12 { + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; + } + + .col-md-offset-0 { + margin-left: 0; + } + + .col-md-offset-1 { + margin-left: 8.33333333%; + } + + .col-md-offset-2 { + margin-left: 16.66666667%; + } + + .col-md-offset-3 { + margin-left: 25%; + } + + .col-md-offset-4 { + margin-left: 33.33333333%; + } + + .col-md-offset-5 { + margin-left: 41.66666667%; + } + + .col-md-offset-6 { + margin-left: 50%; + } + + .col-md-offset-7 { + margin-left: 58.33333333%; + } + + .col-md-offset-8 { + margin-left: 66.66666667%; + } + + .col-md-offset-9 { + margin-left: 75%; + } + + .col-md-offset-10 { + margin-left: 83.33333333%; + } + + .col-md-offset-11 { + margin-left: 91.66666667%; + } + + .start-md { + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + text-align: start; + } + + .center-md { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + text-align: center; + } + + .end-md { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + text-align: end; + } + + .top-md { + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + } + + .middle-md { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } + + .bottom-md { + -webkit-box-align: end; + -ms-flex-align: end; + align-items: flex-end; + } + + .around-md { + -ms-flex-pack: distribute; + justify-content: space-around; + } + + .between-md { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + } + + .first-md { + -webkit-box-ordinal-group: 0; + -ms-flex-order: -1; + order: -1; + } + + .last-md { + -webkit-box-ordinal-group: 2; + -ms-flex-order: 1; + order: 1; + } +} + +@media only screen and (min-width: 75em) { + .container { + width: 76rem; + } + + .col-lg, + .col-lg-1, + .col-lg-2, + .col-lg-3, + .col-lg-4, + .col-lg-5, + .col-lg-6, + .col-lg-7, + .col-lg-8, + .col-lg-9, + .col-lg-10, + .col-lg-11, + .col-lg-12, + .col-lg-offset-0, + .col-lg-offset-1, + .col-lg-offset-2, + .col-lg-offset-3, + .col-lg-offset-4, + .col-lg-offset-5, + .col-lg-offset-6, + .col-lg-offset-7, + .col-lg-offset-8, + .col-lg-offset-9, + .col-lg-offset-10, + .col-lg-offset-11, + .col-lg-offset-12 { + box-sizing: border-box; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + } + + .col-lg { + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100%; + } + + .col-lg-1 { + -ms-flex-preferred-size: 8.33333333%; + flex-basis: 8.33333333%; + max-width: 8.33333333%; + } + + .col-lg-2 { + -ms-flex-preferred-size: 16.66666667%; + flex-basis: 16.66666667%; + max-width: 16.66666667%; + } + + .col-lg-3 { + -ms-flex-preferred-size: 25%; + flex-basis: 25%; + max-width: 25%; + } + + .col-lg-4 { + -ms-flex-preferred-size: 33.33333333%; + flex-basis: 33.33333333%; + max-width: 33.33333333%; + } + + .col-lg-5 { + -ms-flex-preferred-size: 41.66666667%; + flex-basis: 41.66666667%; + max-width: 41.66666667%; + } + + .col-lg-6 { + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + max-width: 50%; + } + + .col-lg-7 { + -ms-flex-preferred-size: 58.33333333%; + flex-basis: 58.33333333%; + max-width: 58.33333333%; + } + + .col-lg-8 { + -ms-flex-preferred-size: 66.66666667%; + flex-basis: 66.66666667%; + max-width: 66.66666667%; + } + + .col-lg-9 { + -ms-flex-preferred-size: 75%; + flex-basis: 75%; + max-width: 75%; + } + + .col-lg-10 { + -ms-flex-preferred-size: 83.33333333%; + flex-basis: 83.33333333%; + max-width: 83.33333333%; + } + + .col-lg-11 { + -ms-flex-preferred-size: 91.66666667%; + flex-basis: 91.66666667%; + max-width: 91.66666667%; + } + + .col-lg-12 { + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; + } + + .col-lg-offset-0 { + margin-left: 0; + } + + .col-lg-offset-1 { + margin-left: 8.33333333%; + } + + .col-lg-offset-2 { + margin-left: 16.66666667%; + } + + .col-lg-offset-3 { + margin-left: 25%; + } + + .col-lg-offset-4 { + margin-left: 33.33333333%; + } + + .col-lg-offset-5 { + margin-left: 41.66666667%; + } + + .col-lg-offset-6 { + margin-left: 50%; + } + + .col-lg-offset-7 { + margin-left: 58.33333333%; + } + + .col-lg-offset-8 { + margin-left: 66.66666667%; + } + + .col-lg-offset-9 { + margin-left: 75%; + } + + .col-lg-offset-10 { + margin-left: 83.33333333%; + } + + .col-lg-offset-11 { + margin-left: 91.66666667%; + } + + .start-lg { + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + text-align: start; + } + + .center-lg { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + text-align: center; + } + + .end-lg { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + text-align: end; + } + + .top-lg { + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + } + + .middle-lg { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } + + .bottom-lg { + -webkit-box-align: end; + -ms-flex-align: end; + align-items: flex-end; + } + + .around-lg { + -ms-flex-pack: distribute; + justify-content: space-around; + } + + .between-lg { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + } + + .first-lg { + -webkit-box-ordinal-group: 0; + -ms-flex-order: -1; + order: -1; + } + + .last-lg { + -webkit-box-ordinal-group: 2; + -ms-flex-order: 1; + order: 1; + } +} \ No newline at end of file diff --git a/asset/flexboxgrid/dist/flexboxgrid.min.css b/asset/flexboxgrid/dist/flexboxgrid.min.css new file mode 100644 index 0000000..2f502c9 --- /dev/null +++ b/asset/flexboxgrid/dist/flexboxgrid.min.css @@ -0,0 +1 @@ +.container,.container-fluid{margin-right:auto;margin-left:auto}.container-fluid{padding-right:2rem;padding-left:2rem}.row{box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-.5rem;margin-left:-.5rem}.row.reverse{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.col.reverse{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.col-xs,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-offset-0,.col-xs-offset-1,.col-xs-offset-10,.col-xs-offset-11,.col-xs-offset-12,.col-xs-offset-2,.col-xs-offset-3,.col-xs-offset-4,.col-xs-offset-5,.col-xs-offset-6,.col-xs-offset-7,.col-xs-offset-8,.col-xs-offset-9{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.col-xs{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-xs-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-xs-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-xs-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-xs-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-xs-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-xs-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-xs-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-xs-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-xs-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-xs-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-xs-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-xs-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-xs-offset-0{margin-left:0}.col-xs-offset-1{margin-left:8.33333333%}.col-xs-offset-2{margin-left:16.66666667%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-4{margin-left:33.33333333%}.col-xs-offset-5{margin-left:41.66666667%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-7{margin-left:58.33333333%}.col-xs-offset-8{margin-left:66.66666667%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-10{margin-left:83.33333333%}.col-xs-offset-11{margin-left:91.66666667%}.start-xs{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-xs{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-xs{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-xs{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-xs{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-xs{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-xs{-ms-flex-pack:distribute;justify-content:space-around}.between-xs{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-xs{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-xs{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}@media only screen and (min-width:48em){.container{width:49rem}.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-offset-0,.col-sm-offset-1,.col-sm-offset-10,.col-sm-offset-11,.col-sm-offset-12,.col-sm-offset-2,.col-sm-offset-3,.col-sm-offset-4,.col-sm-offset-5,.col-sm-offset-6,.col-sm-offset-7,.col-sm-offset-8,.col-sm-offset-9{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.col-sm{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-sm-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-sm-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-sm-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-sm-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-sm-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-sm-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-sm-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-sm-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-sm-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-sm-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-sm-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-sm-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-sm-offset-0{margin-left:0}.col-sm-offset-1{margin-left:8.33333333%}.col-sm-offset-2{margin-left:16.66666667%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-4{margin-left:33.33333333%}.col-sm-offset-5{margin-left:41.66666667%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-7{margin-left:58.33333333%}.col-sm-offset-8{margin-left:66.66666667%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-10{margin-left:83.33333333%}.col-sm-offset-11{margin-left:91.66666667%}.start-sm{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-sm{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-sm{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-sm{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-sm{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-sm{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-sm{-ms-flex-pack:distribute;justify-content:space-around}.between-sm{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-sm{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-sm{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}}@media only screen and (min-width:64em){.container{width:65rem}.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-offset-0,.col-md-offset-1,.col-md-offset-10,.col-md-offset-11,.col-md-offset-12,.col-md-offset-2,.col-md-offset-3,.col-md-offset-4,.col-md-offset-5,.col-md-offset-6,.col-md-offset-7,.col-md-offset-8,.col-md-offset-9{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.col-md{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-md-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-md-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-md-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-md-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-md-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-md-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-md-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-md-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-md-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-md-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-md-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-md-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-md-offset-0{margin-left:0}.col-md-offset-1{margin-left:8.33333333%}.col-md-offset-2{margin-left:16.66666667%}.col-md-offset-3{margin-left:25%}.col-md-offset-4{margin-left:33.33333333%}.col-md-offset-5{margin-left:41.66666667%}.col-md-offset-6{margin-left:50%}.col-md-offset-7{margin-left:58.33333333%}.col-md-offset-8{margin-left:66.66666667%}.col-md-offset-9{margin-left:75%}.col-md-offset-10{margin-left:83.33333333%}.col-md-offset-11{margin-left:91.66666667%}.start-md{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-md{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-md{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-md{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-md{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-md{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-md{-ms-flex-pack:distribute;justify-content:space-around}.between-md{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-md{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-md{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}}@media only screen and (min-width:75em){.container{width:76rem}.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-offset-0,.col-lg-offset-1,.col-lg-offset-10,.col-lg-offset-11,.col-lg-offset-12,.col-lg-offset-2,.col-lg-offset-3,.col-lg-offset-4,.col-lg-offset-5,.col-lg-offset-6,.col-lg-offset-7,.col-lg-offset-8,.col-lg-offset-9{box-sizing:border-box;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.col-lg{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-lg-1{-ms-flex-preferred-size:8.33333333%;flex-basis:8.33333333%;max-width:8.33333333%}.col-lg-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}.col-lg-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-lg-4{-ms-flex-preferred-size:33.33333333%;flex-basis:33.33333333%;max-width:33.33333333%}.col-lg-5{-ms-flex-preferred-size:41.66666667%;flex-basis:41.66666667%;max-width:41.66666667%}.col-lg-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-lg-7{-ms-flex-preferred-size:58.33333333%;flex-basis:58.33333333%;max-width:58.33333333%}.col-lg-8{-ms-flex-preferred-size:66.66666667%;flex-basis:66.66666667%;max-width:66.66666667%}.col-lg-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-lg-10{-ms-flex-preferred-size:83.33333333%;flex-basis:83.33333333%;max-width:83.33333333%}.col-lg-11{-ms-flex-preferred-size:91.66666667%;flex-basis:91.66666667%;max-width:91.66666667%}.col-lg-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-lg-offset-0{margin-left:0}.col-lg-offset-1{margin-left:8.33333333%}.col-lg-offset-2{margin-left:16.66666667%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-4{margin-left:33.33333333%}.col-lg-offset-5{margin-left:41.66666667%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-7{margin-left:58.33333333%}.col-lg-offset-8{margin-left:66.66666667%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-10{margin-left:83.33333333%}.col-lg-offset-11{margin-left:91.66666667%}.start-lg{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-lg{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-lg{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-lg{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.middle-lg{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.bottom-lg{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.around-lg{-ms-flex-pack:distribute;justify-content:space-around}.between-lg{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.first-lg{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.last-lg{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}} \ No newline at end of file diff --git a/asset/flexboxgrid/img/menu.svg b/asset/flexboxgrid/img/menu.svg new file mode 100644 index 0000000..51bbc36 --- /dev/null +++ b/asset/flexboxgrid/img/menu.svg @@ -0,0 +1,11 @@ + + + Slice 1 + Created with Sketch (http://www.bohemiancoding.com/sketch) + + + + + + + \ No newline at end of file diff --git a/asset/flexboxgrid/index.html b/asset/flexboxgrid/index.html new file mode 100644 index 0000000..8436d06 --- /dev/null +++ b/asset/flexboxgrid/index.html @@ -0,0 +1,202 @@ +Flexbox Grid

Flexbox Grid

A grid system based on the flex display property.

Github

Responsive

Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md & lg viewport widths.

<div class="row">
+    <div class="col-xs-12
+                col-sm-8
+                col-md-6
+                col-lg-4">
+        <div class="box">Responsive</div>
+    </div>
+</div>

Fluid

Percent based widths allow fluid resizing of columns and rows.

.col-xs-6 {
+  flex-basis: 50%;
+}

Simple Syntax

All you need to remember is row, column, content.

<div class="row">
+    <div class="col-xs-12">
+        <div class="box">12</div>
+    </div>
+</div>

Offsets

Offset a column

<div class="row">
+    <div class="col-xs-offset-3 col-xs-9">
+        <div class="box">offset</div>
+    </div>
+</div>

Auto Width

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

<div class="row">
+    <div class="col-xs">
+        <div class="box">auto</div>
+    </div>
+</div>

Nested Grids

Nest grids inside grids inside grids.

<div class="row">
+    <div class="col-xs">
+        <div class="box">
+            <div class="row">
+                <div class="col-xs">
+                    <div class="box">auto</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

Alignment

Add classes to align elements to the start or end of a row as well as the top, bottom, or center of a column

.start-

<div class="row start-xs">
+    <div class="col-xs-6">
+        <div class="box">
+            start
+        </div>
+    </div>
+</div>
+

.center-

<div class="row center-xs">
+    <div class="col-xs-6">
+        <div class="box">
+            start
+        </div>
+    </div>
+</div>
+

.end-

<div class="row end-xs">
+    <div class="col-xs-6">
+        <div class="box">
+            end
+        </div>
+    </div>
+</div>
+

Here is an example of using the modifiers in conjunction to acheive different alignment at different viewport sizes.

Example
<div class="row center-xs end-sm start-lg">
+    <div class="col-xs-6">
+        <div class="box">
+            All together now
+        </div>
+    </div>
+</div>
+

.top-

<div class="row top-xs">
+    <div class="col-xs-6">
+        <div class="box">
+            top
+        </div>
+    </div>
+</div>
+

.middle-

<div class="row middle-xs">
+    <div class="col-xs-6">
+        <div class="box">
+            center
+        </div>
+    </div>
+</div>
+

.bottom-

<div class="row bottom-xs">
+    <div class="col-xs-6">
+        <div class="box">
+            bottom
+        </div>
+    </div>
+</div>
+

Distribution

Add classes to distribute the contents of a row or column.

.around-

<div class="row around-xs">
+    <div class="col-xs-2">
+        <div class="box">
+            around
+        </div>
+    </div>
+    <div class="col-xs-2">
+        <div class="box">
+            around
+        </div>
+    </div>
+    <div class="col-xs-2">
+        <div class="box">
+            around
+        </div>
+    </div>
+</div>
+

.between-

<div class="row between-xs">
+    <div class="col-xs-2">
+        <div class="box">
+            between
+        </div>
+    </div>
+    <div class="col-xs-2">
+        <div class="box">
+            between
+        </div>
+    </div>
+    <div class="col-xs-2">
+        <div class="box">
+            between
+        </div>
+    </div>
+</div>
+

Reordering

Add classes to reorder columns.

.first-

1
2
3
4
5
6
<div class="row">
+    <div class="col-xs-2">
+        <div class="box">
+            1
+        </div>
+    </div>
+    <div class="col-xs-2">
+        <div class="box">
+            2
+        </div>
+    </div>
+    <div class="col-xs-2 first-xs">
+        <div class="box">
+            3
+        </div>
+    </div>
+</div>
+

.last-

1
2
3
4
5
6
<div class="row">
+    <div class="col-xs-2 last-xs">
+        <div class="box">
+            1
+        </div>
+    </div>
+    <div class="col-xs-2">
+        <div class="box">
+            2
+        </div>
+    </div>
+    <div class="col-xs-2">
+        <div class="box">
+            3
+        </div>
+    </div>
+</div>
+

Reversing

.reverse

1
2
3
4
5
6
<div class="row reverse">
+    <div class="col-xs-2">
+        <div class="box">
+            1
+        </div>
+    </div>
+    <div class="col-xs-2">
+        <div class="box">
+            2
+        </div>
+    </div>
+    <div class="col-xs-2">
+        <div class="box">
+            3
+        </div>
+    </div>
+</div>
+
\ No newline at end of file diff --git a/asset/flexboxgrid/package.json b/asset/flexboxgrid/package.json new file mode 100644 index 0000000..f24331f --- /dev/null +++ b/asset/flexboxgrid/package.json @@ -0,0 +1,36 @@ +{ + "name": "flexboxgrid", + "version": "6.3.1", + "description": "Grid based off of CSS3 flexbox specification", + "style": "dist/flexboxgrid.css", + "main": "dist/flexboxgrid.css", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git://github.com/kristoferjoseph/flexboxgrid.git" + }, + "keywords": [ + "browser", + "flexbox", + "grid", + "css" + ], + "author": "@dam", + "license": "Apache 2", + "bugs": { + "url": "https://github.com/kristoferjoseph/flexboxgrid/issues" + }, + "homepage": "https://github.com/kristoferjoseph/flexboxgrid", + "devDependencies": { + "grunt": "^0.4.5", + "grunt-autoprefixer": "^0.7.2", + "grunt-contrib-cssmin": "^0.7.0", + "grunt-contrib-htmlmin": "^0.1.3", + "grunt-contrib-uglify": "^0.2.7", + "grunt-contrib-watch": "^0.5.3", + "grunt-myth": "^1.0.1", + "grunt-processhtml": "^0.2.9" + } +} diff --git a/asset/flexboxgrid/src/css/flexboxgrid.css b/asset/flexboxgrid/src/css/flexboxgrid.css new file mode 100644 index 0000000..c84eb21 --- /dev/null +++ b/asset/flexboxgrid/src/css/flexboxgrid.css @@ -0,0 +1,824 @@ +:root { + --gutter-width: 1rem; + --outer-margin: 2rem; + --gutter-compensation: calc((var(--gutter-width) * 0.5) * -1); + --half-gutter-width: calc((var(--gutter-width) * 0.5)); + --xs-min: 30; + --sm-min: 48; + --md-min: 64; + --lg-min: 75; + --screen-xs-min: var(--xs-min)em; + --screen-sm-min: var(--sm-min)em; + --screen-md-min: var(--md-min)em; + --screen-lg-min: var(--lg-min)em; + --container-sm: calc(var(--sm-min) + var(--gutter-width)); + --container-md: calc(var(--md-min) + var(--gutter-width)); + --container-lg: calc(var(--lg-min) + var(--gutter-width)); +} + +@custom-media --sm-viewport only screen and (min-width: 48em); +@custom-media --md-viewport only screen and (min-width: 64em); +@custom-media --lg-viewport only screen and (min-width: 75em); + +.container-fluid, .container { + margin-right: auto; + margin-left: auto; +} + +.container-fluid { + padding-right: var(--outer-margin, 2rem); + padding-left: var(--outer-margin, 2rem); +} + +.row { + box-sizing: border-box; + display: flex; + flex: 0 1 auto; + flex-direction: row; + flex-wrap: wrap; + margin-right: var(--gutter-compensation, -0.5rem); + margin-left: var(--gutter-compensation, -0.5rem); +} + +.row.reverse { + flex-direction: row-reverse; +} + +.col.reverse { + flex-direction: column-reverse; +} + +.col-xs, +.col-xs-1, +.col-xs-2, +.col-xs-3, +.col-xs-4, +.col-xs-5, +.col-xs-6, +.col-xs-7, +.col-xs-8, +.col-xs-9, +.col-xs-10, +.col-xs-11, +.col-xs-12, +.col-xs-offset-0, +.col-xs-offset-1, +.col-xs-offset-2, +.col-xs-offset-3, +.col-xs-offset-4, +.col-xs-offset-5, +.col-xs-offset-6, +.col-xs-offset-7, +.col-xs-offset-8, +.col-xs-offset-9, +.col-xs-offset-10, +.col-xs-offset-11, +.col-xs-offset-12 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: var(--half-gutter-width, 0.5rem); + padding-left: var(--half-gutter-width, 0.5rem); +} + +.col-xs { + flex-grow: 1; + flex-basis: 0; + max-width: 100%; +} + +.col-xs-1 { + flex-basis: 8.33333333%; + max-width: 8.33333333%; +} + +.col-xs-2 { + flex-basis: 16.66666667%; + max-width: 16.66666667%; +} + +.col-xs-3 { + flex-basis: 25%; + max-width: 25%; +} + +.col-xs-4 { + flex-basis: 33.33333333%; + max-width: 33.33333333%; +} + +.col-xs-5 { + flex-basis: 41.66666667%; + max-width: 41.66666667%; +} + +.col-xs-6 { + flex-basis: 50%; + max-width: 50%; +} + +.col-xs-7 { + flex-basis: 58.33333333%; + max-width: 58.33333333%; +} + +.col-xs-8 { + flex-basis: 66.66666667%; + max-width: 66.66666667%; +} + +.col-xs-9 { + flex-basis: 75%; + max-width: 75%; +} + +.col-xs-10 { + flex-basis: 83.33333333%; + max-width: 83.33333333%; +} + +.col-xs-11 { + flex-basis: 91.66666667%; + max-width: 91.66666667%; +} + +.col-xs-12 { + flex-basis: 100%; + max-width: 100%; +} + +.col-xs-offset-0 { + margin-left: 0; +} + +.col-xs-offset-1 { + margin-left: 8.33333333%; +} + +.col-xs-offset-2 { + margin-left: 16.66666667%; +} + +.col-xs-offset-3 { + margin-left: 25%; +} + +.col-xs-offset-4 { + margin-left: 33.33333333%; +} + +.col-xs-offset-5 { + margin-left: 41.66666667%; +} + +.col-xs-offset-6 { + margin-left: 50%; +} + +.col-xs-offset-7 { + margin-left: 58.33333333%; +} + +.col-xs-offset-8 { + margin-left: 66.66666667%; +} + +.col-xs-offset-9 { + margin-left: 75%; +} + +.col-xs-offset-10 { + margin-left: 83.33333333%; +} + +.col-xs-offset-11 { + margin-left: 91.66666667%; +} + +.start-xs { + justify-content: flex-start; + text-align: start; +} + +.center-xs { + justify-content: center; + text-align: center; +} + +.end-xs { + justify-content: flex-end; + text-align: end; +} + +.top-xs { + align-items: flex-start; +} + +.middle-xs { + align-items: center; +} + +.bottom-xs { + align-items: flex-end; +} + +.around-xs { + justify-content: space-around; +} + +.between-xs { + justify-content: space-between; +} + +.first-xs { + order: -1; +} + +.last-xs { + order: 1; +} + +@media (--sm-viewport) { + .container { + width: var(--container-sm, 46rem); + } + + .col-sm, + .col-sm-1, + .col-sm-2, + .col-sm-3, + .col-sm-4, + .col-sm-5, + .col-sm-6, + .col-sm-7, + .col-sm-8, + .col-sm-9, + .col-sm-10, + .col-sm-11, + .col-sm-12, + .col-sm-offset-0, + .col-sm-offset-1, + .col-sm-offset-2, + .col-sm-offset-3, + .col-sm-offset-4, + .col-sm-offset-5, + .col-sm-offset-6, + .col-sm-offset-7, + .col-sm-offset-8, + .col-sm-offset-9, + .col-sm-offset-10, + .col-sm-offset-11, + .col-sm-offset-12 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: var(--half-gutter-width, 0.5rem); + padding-left: var(--half-gutter-width, 0.5rem); + } + + .col-sm { + flex-grow: 1; + flex-basis: 0; + max-width: 100%; + } + + .col-sm-1 { + flex-basis: 8.33333333%; + max-width: 8.33333333%; + } + + .col-sm-2 { + flex-basis: 16.66666667%; + max-width: 16.66666667%; + } + + .col-sm-3 { + flex-basis: 25%; + max-width: 25%; + } + + .col-sm-4 { + flex-basis: 33.33333333%; + max-width: 33.33333333%; + } + + .col-sm-5 { + flex-basis: 41.66666667%; + max-width: 41.66666667%; + } + + .col-sm-6 { + flex-basis: 50%; + max-width: 50%; + } + + .col-sm-7 { + flex-basis: 58.33333333%; + max-width: 58.33333333%; + } + + .col-sm-8 { + flex-basis: 66.66666667%; + max-width: 66.66666667%; + } + + .col-sm-9 { + flex-basis: 75%; + max-width: 75%; + } + + .col-sm-10 { + flex-basis: 83.33333333%; + max-width: 83.33333333%; + } + + .col-sm-11 { + flex-basis: 91.66666667%; + max-width: 91.66666667%; + } + + .col-sm-12 { + flex-basis: 100%; + max-width: 100%; + } + + .col-sm-offset-0 { + margin-left: 0; + } + + .col-sm-offset-1 { + margin-left: 8.33333333%; + } + + .col-sm-offset-2 { + margin-left: 16.66666667%; + } + + .col-sm-offset-3 { + margin-left: 25%; + } + + .col-sm-offset-4 { + margin-left: 33.33333333%; + } + + .col-sm-offset-5 { + margin-left: 41.66666667%; + } + + .col-sm-offset-6 { + margin-left: 50%; + } + + .col-sm-offset-7 { + margin-left: 58.33333333%; + } + + .col-sm-offset-8 { + margin-left: 66.66666667%; + } + + .col-sm-offset-9 { + margin-left: 75%; + } + + .col-sm-offset-10 { + margin-left: 83.33333333%; + } + + .col-sm-offset-11 { + margin-left: 91.66666667%; + } + + .start-sm { + justify-content: flex-start; + text-align: start; + } + + .center-sm { + justify-content: center; + text-align: center; + } + + .end-sm { + justify-content: flex-end; + text-align: end; + } + + .top-sm { + align-items: flex-start; + } + + .middle-sm { + align-items: center; + } + + .bottom-sm { + align-items: flex-end; + } + + .around-sm { + justify-content: space-around; + } + + .between-sm { + justify-content: space-between; + } + + .first-sm { + order: -1; + } + + .last-sm { + order: 1; + } +} + +@media (--md-viewport) { + .container { + width: var(--container-md, 61rem); + } + + .col-md, + .col-md-1, + .col-md-2, + .col-md-3, + .col-md-4, + .col-md-5, + .col-md-6, + .col-md-7, + .col-md-8, + .col-md-9, + .col-md-10, + .col-md-11, + .col-md-12, + .col-md-offset-0, + .col-md-offset-1, + .col-md-offset-2, + .col-md-offset-3, + .col-md-offset-4, + .col-md-offset-5, + .col-md-offset-6, + .col-md-offset-7, + .col-md-offset-8, + .col-md-offset-9, + .col-md-offset-10, + .col-md-offset-11, + .col-md-offset-12 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: var(--half-gutter-width, 0.5rem); + padding-left: var(--half-gutter-width, 0.5rem); + } + + .col-md { + flex-grow: 1; + flex-basis: 0; + max-width: 100%; + } + + .col-md-1 { + flex-basis: 8.33333333%; + max-width: 8.33333333%; + } + + .col-md-2 { + flex-basis: 16.66666667%; + max-width: 16.66666667%; + } + + .col-md-3 { + flex-basis: 25%; + max-width: 25%; + } + + .col-md-4 { + flex-basis: 33.33333333%; + max-width: 33.33333333%; + } + + .col-md-5 { + flex-basis: 41.66666667%; + max-width: 41.66666667%; + } + + .col-md-6 { + flex-basis: 50%; + max-width: 50%; + } + + .col-md-7 { + flex-basis: 58.33333333%; + max-width: 58.33333333%; + } + + .col-md-8 { + flex-basis: 66.66666667%; + max-width: 66.66666667%; + } + + .col-md-9 { + flex-basis: 75%; + max-width: 75%; + } + + .col-md-10 { + flex-basis: 83.33333333%; + max-width: 83.33333333%; + } + + .col-md-11 { + flex-basis: 91.66666667%; + max-width: 91.66666667%; + } + + .col-md-12 { + flex-basis: 100%; + max-width: 100%; + } + + .col-md-offset-0 { + margin-left: 0; + } + + .col-md-offset-1 { + margin-left: 8.33333333%; + } + + .col-md-offset-2 { + margin-left: 16.66666667%; + } + + .col-md-offset-3 { + margin-left: 25%; + } + + .col-md-offset-4 { + margin-left: 33.33333333%; + } + + .col-md-offset-5 { + margin-left: 41.66666667%; + } + + .col-md-offset-6 { + margin-left: 50%; + } + + .col-md-offset-7 { + margin-left: 58.33333333%; + } + + .col-md-offset-8 { + margin-left: 66.66666667%; + } + + .col-md-offset-9 { + margin-left: 75%; + } + + .col-md-offset-10 { + margin-left: 83.33333333%; + } + + .col-md-offset-11 { + margin-left: 91.66666667%; + } + + .start-md { + justify-content: flex-start; + text-align: start; + } + + .center-md { + justify-content: center; + text-align: center; + } + + .end-md { + justify-content: flex-end; + text-align: end; + } + + .top-md { + align-items: flex-start; + } + + .middle-md { + align-items: center; + } + + .bottom-md { + align-items: flex-end; + } + + .around-md { + justify-content: space-around; + } + + .between-md { + justify-content: space-between; + } + + .first-md { + order: -1; + } + + .last-md { + order: 1; + } +} + +@media (--lg-viewport) { + .container { + width: var(--container-lg, 71rem); + } + + .col-lg, + .col-lg-1, + .col-lg-2, + .col-lg-3, + .col-lg-4, + .col-lg-5, + .col-lg-6, + .col-lg-7, + .col-lg-8, + .col-lg-9, + .col-lg-10, + .col-lg-11, + .col-lg-12, + .col-lg-offset-0, + .col-lg-offset-1, + .col-lg-offset-2, + .col-lg-offset-3, + .col-lg-offset-4, + .col-lg-offset-5, + .col-lg-offset-6, + .col-lg-offset-7, + .col-lg-offset-8, + .col-lg-offset-9, + .col-lg-offset-10, + .col-lg-offset-11, + .col-lg-offset-12 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: var(--half-gutter-width, 0.5rem); + padding-left: var(--half-gutter-width, 0.5rem); + } + + .col-lg { + flex-grow: 1; + flex-basis: 0; + max-width: 100%; + } + + .col-lg-1 { + flex-basis: 8.33333333%; + max-width: 8.33333333%; + } + + .col-lg-2 { + flex-basis: 16.66666667%; + max-width: 16.66666667%; + } + + .col-lg-3 { + flex-basis: 25%; + max-width: 25%; + } + + .col-lg-4 { + flex-basis: 33.33333333%; + max-width: 33.33333333%; + } + + .col-lg-5 { + flex-basis: 41.66666667%; + max-width: 41.66666667%; + } + + .col-lg-6 { + flex-basis: 50%; + max-width: 50%; + } + + .col-lg-7 { + flex-basis: 58.33333333%; + max-width: 58.33333333%; + } + + .col-lg-8 { + flex-basis: 66.66666667%; + max-width: 66.66666667%; + } + + .col-lg-9 { + flex-basis: 75%; + max-width: 75%; + } + + .col-lg-10 { + flex-basis: 83.33333333%; + max-width: 83.33333333%; + } + + .col-lg-11 { + flex-basis: 91.66666667%; + max-width: 91.66666667%; + } + + .col-lg-12 { + flex-basis: 100%; + max-width: 100%; + } + + .col-lg-offset-0 { + margin-left: 0; + } + + .col-lg-offset-1 { + margin-left: 8.33333333%; + } + + .col-lg-offset-2 { + margin-left: 16.66666667%; + } + + .col-lg-offset-3 { + margin-left: 25%; + } + + .col-lg-offset-4 { + margin-left: 33.33333333%; + } + + .col-lg-offset-5 { + margin-left: 41.66666667%; + } + + .col-lg-offset-6 { + margin-left: 50%; + } + + .col-lg-offset-7 { + margin-left: 58.33333333%; + } + + .col-lg-offset-8 { + margin-left: 66.66666667%; + } + + .col-lg-offset-9 { + margin-left: 75%; + } + + .col-lg-offset-10 { + margin-left: 83.33333333%; + } + + .col-lg-offset-11 { + margin-left: 91.66666667%; + } + + .start-lg { + justify-content: flex-start; + text-align: start; + } + + .center-lg { + justify-content: center; + text-align: center; + } + + .end-lg { + justify-content: flex-end; + text-align: end; + } + + .top-lg { + align-items: flex-start; + } + + .middle-lg { + align-items: center; + } + + .bottom-lg { + align-items: flex-end; + } + + .around-lg { + justify-content: space-around; + } + + .between-lg { + justify-content: space-between; + } + + .first-lg { + order: -1; + } + + .last-lg { + order: 1; + } +} + diff --git a/asset/flexboxgrid/src/css/style.css b/asset/flexboxgrid/src/css/style.css new file mode 100644 index 0000000..f255c61 --- /dev/null +++ b/asset/flexboxgrid/src/css/style.css @@ -0,0 +1,290 @@ +body { + box-sizing: border-box; + padding: 0; + margin: 0; + font-size: 18px; + font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-weight: normal; + background: #EEE; + line-height: 1.4rem; +} +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: "Gibson", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + color: #001A33; +} +h2 { + font-size: 2rem; + margin: 1rem 0; +} +:focus { + outline-color: transparent; + outline-style: none; +} +h2 + p { + margin: 0 0 2rem 0; +} +a { + text-decoration: none; + color: #007FFF; + padding: 0 0 0.2rem 0; + font-weight: bold; +} +a:hover { + color: #007FFF; +} +pre { + overflow-x: auto; + padding: 1.25em; + border: 1px solid #e6e6e6; + border-left-width: 5px; + margin: 1.6em 0; + font-size: 0.875em; + background: #fcfcfc; + white-space: pre; + word-wrap: normal; +} +code { + color: #007FFF; +} +.layout { + display: flex; + min-height: 100vh; + flex-direction: column; +} +.page-nav { + box-sizing: border-box; + position: fixed; + padding: 0.5rem; + width: 100%; + background: transparent; +} +.page { + z-index: 0; + background: #EEE; +} +.wrap { + box-sizing: border-box; + max-width: 1200px; + margin: 0 auto; +} +.page-section { + padding-top: 3rem; + margin-bottom: 3rem; +} +.page-features { + width: 100%; + background: hsl(209, 100%, 10%); + overflow: scroll; +} +.menu-button { + position: fixed; + top: 0.75rem; + right: 0.75rem; + z-index: 1; + box-sizing: border-box; + padding: 0.45rem; + height: 3rem; + width: 3rem; + background: #FFF; + border: 1px solid transparent; + user-select: none; +} +.menu-button:hover { + border: 1px solid #007FFF; + border-radius: 2px; +} +.menu-button:active { + background: #EEE; + border: 1px solid transparent; +} +.open { + transform: translate3d(-15rem, 0, 0); +} +.menu-button-icon { + width: 2rem; + height: 2rem; +} +.hero { + box-sizing: border-box; + padding: 2rem; + background: #FFF; + border: 1px solid #FFF; + border-radius: 2px; +} +.hero-headline { + font-size: 3rem; + white-space: nowrap; + margin-bottom: 0; +} +.hero-copy { + font-size: 1rem; + margin-bottom: 0; + padding: 0 2rem; + text-align: center; +} +.slide-menu { + display: block; + position: fixed; + overflow: auto; + top: 0; + right: 0; + bottom: 0; + height: 100%; + width: 250px; +} +.menu { + box-sizing: border-box; + padding-bottom: 5rem; + background: hsl(209, 100%, 10%); +} +.menu-header { + box-sizing: border-box; + padding: 3rem 3rem 0 3rem; + color: #eee; +} +.menu-list { + margin: 0; + padding: 0; + list-style: none; +} +.menu-list-item { + height: 3rem; + line-height: 3rem; + font-size: 1rem; + color: #007FFF; + background: transparent; + transition: all .2s ease-in; +} +.menu-link { + box-sizing: border-box; + padding-left: 3rem; + display: block; + color: #007FFF; + transition: color 0.2s ease-in; +} +.menu-link:hover { + color: hsl(210, 100%, 60%); + border-bottom: none; +} +.link-top { + align-self: flex-end; +} +.button { + position: relative; + display: inline-block; + box-sizing: border-box; + min-width: 11rem; + padding: 0 4rem; + margin: 1rem; + height: 3rem; + line-height: 3rem; + border: 1px solid #007FFF; + border-radius: 2px; + color: #007FFF; + font-size: 1.25rem; + transition: background-color, 0.15s; +} +.button:hover { + background: #3399FF; + border-color: #3399FF; + color: #FFF; + text-shadow: 0 1px #007FFF; +} +.button:active { + background: #007FFF; + color: #FFF; + border-top: 2px solid #0066CC; +} +.box-row, +.box-first, +.box-nested, +.box-large, +.box { + box-sizing: border-box; + position: relative; + box-sizing: border-box; + min-height: 1rem; + margin-bottom: 0; + background: #007FFF; + border: 1px solid #FFF; + border-radius: 2px; + overflow: hidden; + text-align: center; + color: white; +} +.box-row { + margin-bottom: 1rem; +} +.box-first { + background: #0066CC; + border-color: #007FFF; +} +.box-nested { + background: #003366; + border-color: #007FFF; +} +.box-large { + height: 8rem; +} +.box-container { + box-sizing: border-box; + padding: 0.5rem; +} +.page-footer { + box-sizing: border-box; + padding-bottom: 3rem; +} +.tag { + color: #000; + font-weight: normal; +} +.end { + text-align: end; +} +.invisible-xs { + display: none; + visibility: hidden; +} +.visible-xs { + display: block; + visibility: visible; +} +@media only screen and (min-width: 48rem) { + body { + font-size: 16px; + } + .slide-menu { + width: 25%; + } + .open { + transform: translate3d(0, 0, 0); + } + .hero-headline { + font-size: 6rem; + margin-bottom: 2rem; + } + .hero-copy { + font-size: 1.25rem; + margin-bottom: 2rem; + } + .box-row, + .box-first, + .box-nested, + .box-large, + .box { + padding: 1rem; + } + .invisible-md { + display: none; + visibility: hidden; + } + .visible-md { + display: block; + visibility: visible; + } +} diff --git a/asset/flexboxgrid/src/index.html b/asset/flexboxgrid/src/index.html new file mode 100644 index 0000000..6d0a985 --- /dev/null +++ b/asset/flexboxgrid/src/index.html @@ -0,0 +1,774 @@ + + + + + + + + Flexbox Grid + + + + + + + + + +
+
+
+

Flexbox Grid

+
+
+

A grid system based on the flex display + property.

+
+
+ + Github + +
+
+ + +
+ +
+

Responsive

+ +

Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, + sm, md & lg viewport widths.

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
<div class="row">
+    <div class="col-xs-12
+                col-sm-8
+                col-md-6
+                col-lg-4">
+        <div class="box">Responsive</div>
+    </div>
+</div>
+
+ + +
+
+

Fluid

+ +

Percent based widths allow fluid resizing of columns and rows.

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
.col-xs-6 {
+  flex-basis: 50%;
+}
+ +
+ + +
+

Simple Syntax

+ +

All you need to remember is row, column, content.

+
<div class="row">
+    <div class="col-xs-12">
+        <div class="box">12</div>
+    </div>
+</div>
+ +
+ + +
+

Offsets

+ +

Offset a column

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
<div class="row">
+    <div class="col-xs-offset-3 col-xs-9">
+        <div class="box">offset</div>
+    </div>
+</div>
+ +
+ + +
+

Auto Width

+ +

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

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
<div class="row">
+    <div class="col-xs">
+        <div class="box">auto</div>
+    </div>
+</div>
+ +
+ + +
+

Nested Grids

+ +

Nest grids inside grids inside grids.

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
<div class="row">
+    <div class="col-xs">
+        <div class="box">
+            <div class="row">
+                <div class="col-xs">
+                    <div class="box">auto</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+ +
+ + +
+

Alignment

+ +

Add classes to align elements to the start or end of a row as well as the top, + bottom, or center of a column

+

.start-

+ +
+
+
+
+
+
+
+
+
+
+
+
<div class="row start-xs">
+    <div class="col-xs-6">
+        <div class="box">
+            start
+        </div>
+    </div>
+</div>
+
+ + +

.center-

+ +
+
+
+
+
+
+
+
+
+
+
+
<div class="row center-xs">
+    <div class="col-xs-6">
+        <div class="box">
+            start
+        </div>
+    </div>
+</div>
+
+ +

.end-

+ +
+
+
+
+
+
+
+
+
+
+
+
<div class="row end-xs">
+    <div class="col-xs-6">
+        <div class="box">
+            end
+        </div>
+    </div>
+</div>
+
+ +

Here is an example of using the modifiers in conjunction to acheive different alignment at different viewport sizes.

+
+
+
+
+
+
+
+
+
+
+
Example +
<div class="row center-xs end-sm start-lg">
+    <div class="col-xs-6">
+        <div class="box">
+            All together now
+        </div>
+    </div>
+</div>
+
+ +

.top-

+ +
+
+
+
+
+
+
+
+
<div class="row top-xs">
+    <div class="col-xs-6">
+        <div class="box">
+            top
+        </div>
+    </div>
+</div>
+
+ +

.middle-

+ +
+
+
+
+
+
+
+
+
<div class="row middle-xs">
+    <div class="col-xs-6">
+        <div class="box">
+            center
+        </div>
+    </div>
+</div>
+
+ +

.bottom-

+ +
+
+
+
+
+
+
+
+
<div class="row bottom-xs">
+    <div class="col-xs-6">
+        <div class="box">
+            bottom
+        </div>
+    </div>
+</div>
+
+ +
+ + +
+

Distribution

+ +

Add classes to distribute the contents of a row or column.

+

.around-

+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
<div class="row around-xs">
+    <div class="col-xs-2">
+        <div class="box">
+            around
+        </div>
+    </div>
+    <div class="col-xs-2">
+        <div class="box">
+            around
+        </div>
+    </div>
+    <div class="col-xs-2">
+        <div class="box">
+            around
+        </div>
+    </div>
+</div>
+
+ +

.between-

+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
<div class="row between-xs">
+    <div class="col-xs-2">
+        <div class="box">
+            between
+        </div>
+    </div>
+    <div class="col-xs-2">
+        <div class="box">
+            between
+        </div>
+    </div>
+    <div class="col-xs-2">
+        <div class="box">
+            between
+        </div>
+    </div>
+</div>
+
+ +
+ + +
+

Reordering

+ +

Add classes to reorder columns.

+

.first-

+ +
+
+
+
+
+
1
+
+
+
2
+
+
+
3
+
+
+
4
+
+
+
5
+
+
+
6
+
+
+
+
+
+
<div class="row">
+    <div class="col-xs-2">
+        <div class="box">
+            1
+        </div>
+    </div>
+    <div class="col-xs-2">
+        <div class="box">
+            2
+        </div>
+    </div>
+    <div class="col-xs-2 first-xs">
+        <div class="box">
+            3
+        </div>
+    </div>
+</div>
+
+ +

.last-

+ +
+
+
+
+
+
1
+
+
+
2
+
+
+
3
+
+
+
4
+
+
+
5
+
+
+
6
+
+
+
+
+
+
<div class="row">
+    <div class="col-xs-2 last-xs">
+        <div class="box">
+            1
+        </div>
+    </div>
+    <div class="col-xs-2">
+        <div class="box">
+            2
+        </div>
+    </div>
+    <div class="col-xs-2">
+        <div class="box">
+            3
+        </div>
+    </div>
+</div>
+
+ +
+ + +
+

Reversing

+ +

.reverse

+ +
+
+
+
+
+
1
+
+
+
2
+
+
+
3
+
+
+
4
+
+
+
5
+
+
+
6
+
+
+
+
+
+
<div class="row reverse">
+    <div class="col-xs-2">
+        <div class="box">
+            1
+        </div>
+    </div>
+    <div class="col-xs-2">
+        <div class="box">
+            2
+        </div>
+    </div>
+    <div class="col-xs-2">
+        <div class="box">
+            3
+        </div>
+    </div>
+</div>
+
+ +
+ +
+
+ + + + + diff --git a/asset/flexboxgrid/src/js/index.js b/asset/flexboxgrid/src/js/index.js new file mode 100644 index 0000000..68d69f8 --- /dev/null +++ b/asset/flexboxgrid/src/js/index.js @@ -0,0 +1,13 @@ +(function(i, s, o, g, r, a, m) { + i['GoogleAnalyticsObject'] = r; + i[r] = i[r] || function() { + (i[r].q = i[r].q || []).push(arguments) + }, i[r].l = 1 * new Date(); + a = s.createElement(o), + m = s.getElementsByTagName(o)[0]; + a.async = 1; + a.src = g; + m.parentNode.insertBefore(a, m) +})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); +ga('create', 'UA-46683011-1', 'flexboxgrid.com'); +ga('send', 'pageview'); diff --git a/asset/flexboxgrid/vendor/css/normalize.css b/asset/flexboxgrid/vendor/css/normalize.css new file mode 100644 index 0000000..c9646a0 --- /dev/null +++ b/asset/flexboxgrid/vendor/css/normalize.css @@ -0,0 +1,407 @@ +/*! normalize.css v2.1.3 | MIT License | git.io/normalize */ + +/* ========================================================================== + HTML5 display definitions + ========================================================================== */ + +/** + * Correct `block` display not defined in IE 8/9. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +summary { + display: block; +} + +/** + * Correct `inline-block` display not defined in IE 8/9. + */ + +audio, +canvas, +video { + display: inline-block; +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Address `[hidden]` styling not present in IE 8/9. + * Hide the `template` element in IE, Safari, and Firefox < 22. + */ + +[hidden], +template { + display: none; +} + +/* ========================================================================== + Base + ========================================================================== */ + +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/** + * Remove default margin. + */ + +body { + margin: 0; +} + +/* ========================================================================== + Links + ========================================================================== */ + +/** + * Remove the gray background color from active links in IE 10. + */ + +a { + background: transparent; +} + +/** + * Address `outline` inconsistency between Chrome and other browsers. + */ + +a:focus { + outline: thin dotted; +} + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* ========================================================================== + Typography + ========================================================================== */ + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari 5, and Chrome. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/** + * Address styling not present in IE 8/9, Safari 5, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/** + * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +/** + * Address styling not present in Safari 5 and Chrome. + */ + +dfn { + font-style: italic; +} + +/** + * Address differences between Firefox and other browsers. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +/** + * Address styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/** + * Correct font family set oddly in Safari 5 and Chrome. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, serif; + font-size: 1em; +} + +/** + * Improve readability of pre-formatted text in all browsers. + */ + +pre { + white-space: pre-wrap; +} + +/** + * Set consistent quote types. + */ + +q { + quotes: "\201C" "\201D" "\2018" "\2019"; +} + +/** + * Address inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* ========================================================================== + Embedded content + ========================================================================== */ + +/** + * Remove border when inside `a` element in IE 8/9. + */ + +img { + border: 0; +} + +/** + * Correct overflow displayed oddly in IE 9. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* ========================================================================== + Figures + ========================================================================== */ + +/** + * Address margin not present in IE 8/9 and Safari 5. + */ + +figure { + margin: 0; +} + +/* ========================================================================== + Forms + ========================================================================== */ + +/** + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct `color` not being inherited in IE 8/9. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * 1. Correct font family not being inherited in all browsers. + * 2. Correct font size not being inherited in all browsers. + * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. + */ + +button, +input, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 2 */ + margin: 0; /* 3 */ +} + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +button, +input { + line-height: normal; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. + * Correct `select` style inheritance in Firefox 4+ and Opera. + */ + +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/** + * Remove inner padding and search cancel button in Safari 5 and Chrome + * on OS X. + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Remove inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * 1. Remove default vertical scrollbar in IE 8/9. + * 2. Improve readability and alignment in all browsers. + */ + +textarea { + overflow: auto; /* 1 */ + vertical-align: top; /* 2 */ +} + +/* ========================================================================== + Tables + ========================================================================== */ + +/** + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} + diff --git a/asset/flexboxgrid/vendor/js/modernizr.flexbox.js b/asset/flexboxgrid/vendor/js/modernizr.flexbox.js new file mode 100644 index 0000000..7cabad3 --- /dev/null +++ b/asset/flexboxgrid/vendor/js/modernizr.flexbox.js @@ -0,0 +1,4 @@ +/* Modernizr 2.7.1 (Custom Build) | MIT & BSD + * Build: http://modernizr.com/download/#-flexbox-flexboxlegacy-shiv-cssclasses-testprop-testallprops-domprefixes-load + */ +;window.Modernizr=function(a,b,c){function x(a){j.cssText=a}function y(a,b){return x(prefixes.join(a+";")+(b||""))}function z(a,b){return typeof a===b}function A(a,b){return!!~(""+a).indexOf(b)}function B(a,b){for(var d in a){var e=a[d];if(!A(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function C(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:z(f,"function")?f.bind(d||b):f}return!1}function D(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+n.join(d+" ")+d).split(" ");return z(b,"string")||z(b,"undefined")?B(e,b):(e=(a+" "+o.join(d+" ")+d).split(" "),C(e,b,c))}var d="2.7.1",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m="Webkit Moz O ms",n=m.split(" "),o=m.toLowerCase().split(" "),p={},q={},r={},s=[],t=s.slice,u,v={}.hasOwnProperty,w;!z(v,"undefined")&&!z(v.call,"undefined")?w=function(a,b){return v.call(a,b)}:w=function(a,b){return b in a&&z(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=t.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(t.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(t.call(arguments)))};return e}),p.flexbox=function(){return D("flexWrap")},p.flexboxlegacy=function(){return D("boxDirection")};for(var E in p)w(p,E)&&(u=E.toLowerCase(),e[u]=p[E](),s.push((e[u]?"":"no-")+u));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)w(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},x(""),i=k=null,function(a,b){function l(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function m(){var a=s.elements;return typeof a=="string"?a.split(" "):a}function n(a){var b=j[a[h]];return b||(b={},i++,a[h]=i,j[i]=b),b}function o(a,c,d){c||(c=b);if(k)return c.createElement(a);d||(d=n(c));var g;return d.cache[a]?g=d.cache[a].cloneNode():f.test(a)?g=(d.cache[a]=d.createElem(a)).cloneNode():g=d.createElem(a),g.canHaveChildren&&!e.test(a)&&!g.tagUrn?d.frag.appendChild(g):g}function p(a,c){a||(a=b);if(k)return a.createDocumentFragment();c=c||n(a);var d=c.frag.cloneNode(),e=0,f=m(),g=f.length;for(;e",g="hidden"in a,k=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){g=!0,k=!0}})();var s={elements:d.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:c,shivCSS:d.shivCSS!==!1,supportsUnknownElements:k,shivMethods:d.shivMethods!==!1,type:"default",shivDocument:r,createElement:o,createDocumentFragment:p};a.html5=s,r(b)}(this,b),e._version=d,e._domPrefixes=o,e._cssomPrefixes=n,e.testProp=function(a){return B([a])},e.testAllProps=D,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+s.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f