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 0000000..cc144e8 Binary files /dev/null and b/asset/flexboxgrid/design/flexboxgrid-template.sketch differ 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