├── .DS_Store ├── .babelrc ├── .bowerrc ├── .csscomb.json ├── .editorconfig ├── .eslintrc ├── .gitattributes ├── .jsbeautifyrc ├── .tmp ├── fonts │ ├── Graphik │ │ ├── Graphik-Black.otf │ │ ├── Graphik-BlackItalic.otf │ │ ├── Graphik-Bold.otf │ │ ├── Graphik-BoldItalic.otf │ │ ├── Graphik-Extralight.otf │ │ ├── Graphik-ExtralightItalic.otf │ │ ├── Graphik-Light.otf │ │ ├── Graphik-LightItalic.otf │ │ ├── Graphik-Medium.otf │ │ ├── Graphik-MediumItalic.otf │ │ ├── Graphik-Regular.otf │ │ ├── Graphik-RegularItalic.otf │ │ ├── Graphik-Semibold.otf │ │ ├── Graphik-SemiboldItalic.otf │ │ ├── Graphik-Super.otf │ │ ├── Graphik-SuperItalic.otf │ │ ├── Graphik-Thin.otf │ │ └── Graphik-ThinItalic.otf │ └── Majesti-Banner │ │ ├── Majesti-Banner-Bold.otf │ │ ├── Majesti-Banner-BoldItalic.otf │ │ ├── Majesti-Banner-Book.otf │ │ ├── Majesti-Banner-BookItalic.otf │ │ ├── Majesti-Banner-Heavy.otf │ │ ├── Majesti-Banner-HeavyItalic.otf │ │ ├── Majesti-Banner-Light.otf │ │ ├── Majesti-Banner-LightItalic.otf │ │ ├── Majesti-Banner-Medium.otf │ │ └── Majesti-Banner-MediumItalic.otf └── styles │ └── main.css ├── .yo-rc.json ├── LICENSE.md ├── README.md ├── app.js ├── app ├── .DS_Store ├── browserconfig.xml ├── favicon.ico ├── fonts │ ├── Graphik │ │ ├── Graphik-Black.otf │ │ ├── Graphik-BlackItalic.otf │ │ ├── Graphik-Bold.otf │ │ ├── Graphik-BoldItalic.otf │ │ ├── Graphik-Extralight.otf │ │ ├── Graphik-ExtralightItalic.otf │ │ ├── Graphik-Light.otf │ │ ├── Graphik-LightItalic.otf │ │ ├── Graphik-Medium.otf │ │ ├── Graphik-MediumItalic.otf │ │ ├── Graphik-Regular.otf │ │ ├── Graphik-RegularItalic.otf │ │ ├── Graphik-Semibold.otf │ │ ├── Graphik-SemiboldItalic.otf │ │ ├── Graphik-Super.otf │ │ ├── Graphik-SuperItalic.otf │ │ ├── Graphik-Thin.otf │ │ └── Graphik-ThinItalic.otf │ └── Majesti-Banner │ │ ├── Majesti-Banner-Bold.otf │ │ ├── Majesti-Banner-BoldItalic.otf │ │ ├── Majesti-Banner-Book.otf │ │ ├── Majesti-Banner-BookItalic.otf │ │ ├── Majesti-Banner-Heavy.otf │ │ ├── Majesti-Banner-HeavyItalic.otf │ │ ├── Majesti-Banner-Light.otf │ │ ├── Majesti-Banner-LightItalic.otf │ │ ├── Majesti-Banner-Medium.otf │ │ └── Majesti-Banner-MediumItalic.otf ├── images │ ├── .DS_Store │ ├── favicons │ │ ├── android-icon-144x144.png │ │ ├── android-icon-192x192.png │ │ ├── android-icon-36x36.png │ │ ├── android-icon-48x48.png │ │ ├── android-icon-72x72.png │ │ ├── android-icon-96x96.png │ │ ├── apple-icon-114x114.png │ │ ├── apple-icon-120x120.png │ │ ├── apple-icon-144x144.png │ │ ├── apple-icon-152x152.png │ │ ├── apple-icon-180x180.png │ │ ├── apple-icon-57x57.png │ │ ├── apple-icon-60x60.png │ │ ├── apple-icon-72x72.png │ │ ├── apple-icon-76x76.png │ │ ├── apple-icon-precomposed.png │ │ ├── apple-icon.png │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ ├── favicon-96x96.png │ │ ├── ms-icon-144x144.png │ │ ├── ms-icon-150x150.png │ │ ├── ms-icon-310x310.png │ │ └── ms-icon-70x70.png │ └── icons │ │ ├── .DS_Store │ │ ├── icon-down-arrow.svg │ │ ├── icon-email.svg │ │ ├── icon-facebook-custom.svg │ │ ├── icon-facebook.svg │ │ ├── icon-fingerprint.svg │ │ ├── icon-instagram-custom.svg │ │ ├── icon-instagram.svg │ │ ├── icon-linkedin-custom.svg │ │ ├── icon-linkedin.svg │ │ ├── icon-map-pin.svg │ │ ├── icon-mouse.png │ │ ├── icon-phone.svg │ │ ├── icon-twitter-custom.svg │ │ └── icon-twitter.svg ├── index.html ├── manifest.json ├── robots.txt ├── scripts │ ├── .DS_Store │ ├── app.js │ ├── bundle.js │ ├── content │ │ ├── classes.js │ │ ├── documentation-obj.js │ │ ├── documentation.js │ │ ├── examples.js │ │ ├── mixins.js │ │ ├── overview.js │ │ ├── sass-classes.js │ │ ├── sass-mixins.js │ │ ├── sass-variables.js │ │ └── variables.js │ ├── main.js │ ├── marked.js │ └── router.js ├── styles │ ├── .DS_Store │ ├── _border-box-all.scss │ ├── _element-defaults.scss │ ├── _fonts.scss │ ├── _reset.scss │ ├── _unique.scss │ ├── library │ │ ├── .DS_Store │ │ ├── _grid.scss │ │ ├── _visibility.scss │ │ ├── main.scss │ │ ├── mixins │ │ │ ├── _grid-mixins.scss │ │ │ ├── _visibility-mixins.scss │ │ │ └── main.scss │ │ └── variables │ │ │ ├── _grid-variables.scss │ │ │ └── main.scss │ ├── main.scss │ ├── mixins │ │ ├── .DS_Store │ │ ├── _text-mixins.scss │ │ └── main.scss │ └── variables │ │ ├── .DS_Store │ │ ├── _color-variables.scss │ │ ├── _text-variables.scss │ │ └── main.scss └── views │ ├── classes.html │ ├── classes │ └── index.html │ ├── documentation.html │ ├── mixins.html │ ├── mixins │ └── index.html │ ├── variables.html │ └── variables │ └── index.html ├── bower.json ├── dist ├── .DS_Store ├── browserconfig.xml ├── favicon.ico ├── fonts │ ├── Graphik │ │ ├── Graphik-Black.otf │ │ ├── Graphik-BlackItalic.otf │ │ ├── Graphik-Bold.otf │ │ ├── Graphik-BoldItalic.otf │ │ ├── Graphik-Extralight.otf │ │ ├── Graphik-ExtralightItalic.otf │ │ ├── Graphik-Light.otf │ │ ├── Graphik-LightItalic.otf │ │ ├── Graphik-Medium.otf │ │ ├── Graphik-MediumItalic.otf │ │ ├── Graphik-Regular.otf │ │ ├── Graphik-RegularItalic.otf │ │ ├── Graphik-Semibold.otf │ │ ├── Graphik-SemiboldItalic.otf │ │ ├── Graphik-Super.otf │ │ ├── Graphik-SuperItalic.otf │ │ ├── Graphik-Thin.otf │ │ └── Graphik-ThinItalic.otf │ └── Majesti-Banner │ │ ├── Majesti-Banner-Bold.otf │ │ ├── Majesti-Banner-BoldItalic.otf │ │ ├── Majesti-Banner-Book.otf │ │ ├── Majesti-Banner-BookItalic.otf │ │ ├── Majesti-Banner-Heavy.otf │ │ ├── Majesti-Banner-HeavyItalic.otf │ │ ├── Majesti-Banner-Light.otf │ │ ├── Majesti-Banner-LightItalic.otf │ │ ├── Majesti-Banner-Medium.otf │ │ └── Majesti-Banner-MediumItalic.otf ├── images │ ├── favicons │ │ ├── android-icon-144x144.png │ │ ├── android-icon-192x192.png │ │ ├── android-icon-36x36.png │ │ ├── android-icon-48x48.png │ │ ├── android-icon-72x72.png │ │ ├── android-icon-96x96.png │ │ ├── apple-icon-114x114.png │ │ ├── apple-icon-120x120.png │ │ ├── apple-icon-144x144.png │ │ ├── apple-icon-152x152.png │ │ ├── apple-icon-180x180.png │ │ ├── apple-icon-57x57.png │ │ ├── apple-icon-60x60.png │ │ ├── apple-icon-72x72.png │ │ ├── apple-icon-76x76.png │ │ ├── apple-icon-precomposed.png │ │ ├── apple-icon.png │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ ├── favicon-96x96.png │ │ ├── ms-icon-144x144.png │ │ ├── ms-icon-150x150.png │ │ ├── ms-icon-310x310.png │ │ └── ms-icon-70x70.png │ └── icons │ │ ├── icon-down-arrow.svg │ │ ├── icon-email.svg │ │ ├── icon-facebook-custom.svg │ │ ├── icon-facebook.svg │ │ ├── icon-fingerprint.svg │ │ ├── icon-instagram-custom.svg │ │ ├── icon-instagram.svg │ │ ├── icon-linkedin-custom.svg │ │ ├── icon-linkedin.svg │ │ ├── icon-map-pin.svg │ │ ├── icon-mouse.png │ │ ├── icon-phone.svg │ │ ├── icon-twitter-custom.svg │ │ └── icon-twitter.svg ├── index.html ├── manifest.json ├── robots.txt ├── scripts │ ├── bundle.js │ ├── main.js │ ├── vendor.js │ └── vendor │ │ └── modernizr.js ├── styles │ └── main.css └── views │ ├── classes.html │ ├── documentation.html │ ├── mixins.html │ └── variables.html ├── gulpfile.js ├── maps └── bundle.js.map ├── package-lock.json ├── package.json ├── public ├── sass-flexbox.zip └── sass-flexbox │ ├── main.css │ ├── main.min.css │ └── scss │ ├── _grid.scss │ ├── _visibility.scss │ ├── main.scss │ ├── mixins │ ├── _grid-mixins.scss │ ├── _visibility-mixins.scss │ └── main.scss │ └── variables │ ├── _grid-variables.scss │ └── main.scss └── test ├── index.html └── spec └── test.js /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/.DS_Store -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "es2015" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "bower_components" 3 | } 4 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | 8 | [*] 9 | 10 | # change these settings to your own preference 11 | indent_style = space 12 | indent_size = 2 13 | 14 | # we recommend you to keep these unchanged 15 | end_of_line = lf 16 | charset = utf-8 17 | trim_trailing_whitespace = true 18 | insert_final_newline = true 19 | 20 | [*.md] 21 | trim_trailing_whitespace = false 22 | 23 | [{package,bower}.json] 24 | indent_style = space 25 | indent_size = 2 26 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "extends": "airbnb/base", 4 | "env": { 5 | "node": true, 6 | "mocha": true, 7 | "browser": true, 8 | "jquery": true, 9 | "mongo": true, 10 | "es6": true 11 | }, 12 | "globals": { 13 | "riot": true, 14 | "app": true 15 | }, 16 | "rules": { 17 | "padded-blocks": 0, 18 | "indent": [ 1, "tab", { 19 | "VariableDeclarator": 4 20 | } ], 21 | "max-len": [ 1, 120, 2, { 22 | "ignoreComments": true 23 | } ], 24 | "quote-props": [ 1, "consistent-as-needed" ], 25 | "no-cond-assign": [ 2, "except-parens" ], 26 | "radix": 0, 27 | "space-infix-ops": 0, 28 | "no-unused-vars": [ 1, { 29 | "vars": "local", 30 | "args": "none" 31 | } ], 32 | "default-case": 0, 33 | "no-else-return": 0, 34 | "no-param-reassign": 0, 35 | "quotes": 0, 36 | "no-console": 0, 37 | "space-before-function-paren": [ 1, { 38 | "anonymous": "always", 39 | "named": "never" 40 | } ] 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto -------------------------------------------------------------------------------- /.jsbeautifyrc: -------------------------------------------------------------------------------- 1 | { 2 | "html": { 3 | "allowed_file_extensions": [ "htm", "html", "xhtml", "shtml", "xml", "svg", "hbs", "tag" ], 4 | "brace_style": "collapse", 5 | "end_with_newline": false, 6 | "indent_char": "\t", 7 | "indent_handlebars": true, 8 | "indent_inner_html": true, 9 | "indent_scripts": "normal", 10 | "indent_size": 1, 11 | "max_preserve_newlines": 3, 12 | "preserve_newlines": true, 13 | "unformatted": [ "a", "span", "img", "code", "pre", "sub", "sup", "em", "strong", "b", "i", "u", "strike", "big", "small", "pre", "h1", "h2", "h3", "h4", "h5", "h6" ], 14 | "wrap_line_length": 0 15 | }, 16 | "css": { 17 | "allowed_file_extensions": [ "css", "scss", "sass", "less" ], 18 | "end_with_newline": false, 19 | "indent_char": "\t", 20 | "indent_size": 1, 21 | "newline_between_rules": true, 22 | "selector_separator": " ", 23 | "selector_separator_newline": true 24 | }, 25 | "js": { 26 | "allowed_file_extensions": [ "js", "json", "jshintrc", "jsbeautifyrc", "eslintrc" ], 27 | "brace_style": "collapse", 28 | "break_chained_methods": false, 29 | "e4x": false, 30 | "end_with_newline": false, 31 | "indent_char": "\t", 32 | "indent_level": 0, 33 | "indent_size": 1, 34 | "indent_with_tabs": true, 35 | "jslint_happy": true, 36 | "keep_array_indentation": false, 37 | "keep_function_indentation": false, 38 | "max_preserve_newlines": 3, 39 | "preserve_newlines": true, 40 | "space_after_anon_function": true, 41 | "space_before_conditional": true, 42 | "space_in_empty_paren": false, 43 | "space_in_paren": true, 44 | "unescape_strings": false, 45 | "wrap_line_length": 0 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /.tmp/fonts/Graphik/Graphik-Black.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/.tmp/fonts/Graphik/Graphik-Black.otf -------------------------------------------------------------------------------- /.tmp/fonts/Graphik/Graphik-BlackItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/.tmp/fonts/Graphik/Graphik-BlackItalic.otf -------------------------------------------------------------------------------- /.tmp/fonts/Graphik/Graphik-Bold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/.tmp/fonts/Graphik/Graphik-Bold.otf -------------------------------------------------------------------------------- /.tmp/fonts/Graphik/Graphik-BoldItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/.tmp/fonts/Graphik/Graphik-BoldItalic.otf -------------------------------------------------------------------------------- /.tmp/fonts/Graphik/Graphik-Extralight.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/.tmp/fonts/Graphik/Graphik-Extralight.otf -------------------------------------------------------------------------------- /.tmp/fonts/Graphik/Graphik-ExtralightItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/.tmp/fonts/Graphik/Graphik-ExtralightItalic.otf -------------------------------------------------------------------------------- /.tmp/fonts/Graphik/Graphik-Light.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/.tmp/fonts/Graphik/Graphik-Light.otf -------------------------------------------------------------------------------- /.tmp/fonts/Graphik/Graphik-LightItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/.tmp/fonts/Graphik/Graphik-LightItalic.otf -------------------------------------------------------------------------------- /.tmp/fonts/Graphik/Graphik-Medium.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/.tmp/fonts/Graphik/Graphik-Medium.otf -------------------------------------------------------------------------------- /.tmp/fonts/Graphik/Graphik-MediumItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/.tmp/fonts/Graphik/Graphik-MediumItalic.otf -------------------------------------------------------------------------------- /.tmp/fonts/Graphik/Graphik-Regular.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/.tmp/fonts/Graphik/Graphik-Regular.otf -------------------------------------------------------------------------------- /.tmp/fonts/Graphik/Graphik-RegularItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/.tmp/fonts/Graphik/Graphik-RegularItalic.otf -------------------------------------------------------------------------------- /.tmp/fonts/Graphik/Graphik-Semibold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/.tmp/fonts/Graphik/Graphik-Semibold.otf -------------------------------------------------------------------------------- /.tmp/fonts/Graphik/Graphik-SemiboldItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/.tmp/fonts/Graphik/Graphik-SemiboldItalic.otf -------------------------------------------------------------------------------- /.tmp/fonts/Graphik/Graphik-Super.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/.tmp/fonts/Graphik/Graphik-Super.otf -------------------------------------------------------------------------------- /.tmp/fonts/Graphik/Graphik-SuperItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/.tmp/fonts/Graphik/Graphik-SuperItalic.otf -------------------------------------------------------------------------------- /.tmp/fonts/Graphik/Graphik-Thin.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/.tmp/fonts/Graphik/Graphik-Thin.otf -------------------------------------------------------------------------------- /.tmp/fonts/Graphik/Graphik-ThinItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/.tmp/fonts/Graphik/Graphik-ThinItalic.otf -------------------------------------------------------------------------------- /.tmp/fonts/Majesti-Banner/Majesti-Banner-Bold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/.tmp/fonts/Majesti-Banner/Majesti-Banner-Bold.otf -------------------------------------------------------------------------------- /.tmp/fonts/Majesti-Banner/Majesti-Banner-BoldItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/.tmp/fonts/Majesti-Banner/Majesti-Banner-BoldItalic.otf -------------------------------------------------------------------------------- /.tmp/fonts/Majesti-Banner/Majesti-Banner-Book.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/.tmp/fonts/Majesti-Banner/Majesti-Banner-Book.otf -------------------------------------------------------------------------------- /.tmp/fonts/Majesti-Banner/Majesti-Banner-BookItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/.tmp/fonts/Majesti-Banner/Majesti-Banner-BookItalic.otf -------------------------------------------------------------------------------- /.tmp/fonts/Majesti-Banner/Majesti-Banner-Heavy.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/.tmp/fonts/Majesti-Banner/Majesti-Banner-Heavy.otf -------------------------------------------------------------------------------- /.tmp/fonts/Majesti-Banner/Majesti-Banner-HeavyItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/.tmp/fonts/Majesti-Banner/Majesti-Banner-HeavyItalic.otf -------------------------------------------------------------------------------- /.tmp/fonts/Majesti-Banner/Majesti-Banner-Light.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/.tmp/fonts/Majesti-Banner/Majesti-Banner-Light.otf -------------------------------------------------------------------------------- /.tmp/fonts/Majesti-Banner/Majesti-Banner-LightItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/.tmp/fonts/Majesti-Banner/Majesti-Banner-LightItalic.otf -------------------------------------------------------------------------------- /.tmp/fonts/Majesti-Banner/Majesti-Banner-Medium.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/.tmp/fonts/Majesti-Banner/Majesti-Banner-Medium.otf -------------------------------------------------------------------------------- /.tmp/fonts/Majesti-Banner/Majesti-Banner-MediumItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/.tmp/fonts/Majesti-Banner/Majesti-Banner-MediumItalic.otf -------------------------------------------------------------------------------- /.yo-rc.json: -------------------------------------------------------------------------------- 1 | { 2 | "generator-mocha": { 3 | "ui": "tdd", 4 | "rjs": false 5 | } 6 | } -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | Copyright (c) 2018 Drew Botka 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining a copy 5 | of this software and associated documentation files (the "Software"), to deal 6 | in the Software without restriction, including without limitation the rights 7 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the Software is 9 | furnished to do so, subject to the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be included in all 12 | copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 20 | SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Sass Flexbox Grid 2 | 3 | Documentation and examples available at [sassflexboxgrid.com](http://sassflexboxgrid.com/) 4 | 5 | ## Overview 6 | A responsive grid system based on [Flexbox Grid](http://flexboxgrid.com/ "flexbox-grid") and the flex property, re-written in Sass, edited and expanded upon. 7 | 8 | Enhancements include: 9 | - Visibility classes 10 | - Additional 'XL' breakpoint 11 | - Sass variables and mixins 12 | - Customizable grid 13 | 14 | ## Installation 15 | 16 | ### npm 17 | ``` 18 | npm install @drewbot/sass-flexbox-grid --save 19 | ``` 20 | Then link to your preferred CSS or Sass File: 21 | 22 | #### CSS 23 | `node_modules/@drewbot/sass-flexbox-grid/public/sass-flexbox/main.css` 24 | 25 | #### CSS (minified) 26 | `node_modules/@drewbot/sass-flexbox-grid/public/sass-flexbox/main.min.css` 27 | 28 | Or copy the Sass files over to your `src` directory from the following directory: 29 | 30 | `node_modules/@drewbot/sass-flexbox-grid/public/sass-flexbox/scss` 31 | 32 | ### Direct download 33 | 34 | [https://github.com/drewbot/sass-flexbox-grid/raw/master/public/sass-flexbox.zip](https://github.com/drewbot/sass-flexbox-grid/raw/master/public/sass-flexbox.zip) 35 | 36 | ## Mobile First 37 | 38 | Use Sass Flexbox Grid's mobile-first media queries provided in the Sass version of the library. All styles should first be declared at small (mobile) then built outward for larger screens. 39 | 40 | ## Version 2.0.3 Release Notes - 04/12/2018 41 | 42 | - Added `!default;` to adjustable grid vars in `.../scss/variables/_grid-variables.scss`. 43 | 44 | ## Version 2.0.2 Release Notes - 04/10/2018 45 | 46 | - Added `box-sizing: border-box;` to all rows and columns by default. 47 | 48 | ## Version 2.0.0 Release Notes - 04/09/2018 49 | 50 | - All columns within a row will automatically scale in height to match the tallest column in the row. 51 | - `eq-height` is thereby deprecated. 52 | - `.auto-height` class has been refactored to `.natural-height`. 53 | - Likewise, the `row-auto-height()` mixin has been refactored to `row-natural-height()`. 54 | - The `flex-column()` mixin has been refactored to `row-flex-column()`. 55 | - The `.show` class can now be applied to `.row` elements. 56 | - The `show()` mixin now accepts an optional `$row` argument and can be used on `row` elements. 57 | - Example: `@include show("xs", "row")` or `@include show("xs", "true")`. 58 | 59 | ## Version 1.0.0 Release Notes - 04/08/2018 60 | 61 | - Added gutters to the top, bottom, left, and right of all columns by default. 62 | - Gutter size can be adjusted by changing the value of the sass variable `$gutter`. 63 | - The `.col-gutter-lr` class will only apply gutters to the left and right of a column. 64 | - The `.col-no-gutter` class will remove gutters from a column. 65 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var app = express(); 3 | var port = normalizePort(process.env.PORT || '3000'); 4 | 5 | function normalizePort(val) { 6 | var port = parseInt(val, 10); 7 | 8 | if (isNaN(port)) { 9 | // named pipe 10 | return val; 11 | } 12 | 13 | if (port >= 0) { 14 | // port number 15 | return port; 16 | } 17 | 18 | return false; 19 | } 20 | 21 | app.get('*', function (req, res) { 22 | res.sendfile(__dirname + '/dist/index.html'); 23 | }) 24 | 25 | app.listen(port, function () { 26 | console.log('Example app listening on port 3000!') 27 | }) 28 | 29 | console.log('hello world'); 30 | -------------------------------------------------------------------------------- /app/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/.DS_Store -------------------------------------------------------------------------------- /app/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | #ffffff -------------------------------------------------------------------------------- /app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/favicon.ico -------------------------------------------------------------------------------- /app/fonts/Graphik/Graphik-Black.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/fonts/Graphik/Graphik-Black.otf -------------------------------------------------------------------------------- /app/fonts/Graphik/Graphik-BlackItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/fonts/Graphik/Graphik-BlackItalic.otf -------------------------------------------------------------------------------- /app/fonts/Graphik/Graphik-Bold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/fonts/Graphik/Graphik-Bold.otf -------------------------------------------------------------------------------- /app/fonts/Graphik/Graphik-BoldItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/fonts/Graphik/Graphik-BoldItalic.otf -------------------------------------------------------------------------------- /app/fonts/Graphik/Graphik-Extralight.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/fonts/Graphik/Graphik-Extralight.otf -------------------------------------------------------------------------------- /app/fonts/Graphik/Graphik-ExtralightItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/fonts/Graphik/Graphik-ExtralightItalic.otf -------------------------------------------------------------------------------- /app/fonts/Graphik/Graphik-Light.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/fonts/Graphik/Graphik-Light.otf -------------------------------------------------------------------------------- /app/fonts/Graphik/Graphik-LightItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/fonts/Graphik/Graphik-LightItalic.otf -------------------------------------------------------------------------------- /app/fonts/Graphik/Graphik-Medium.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/fonts/Graphik/Graphik-Medium.otf -------------------------------------------------------------------------------- /app/fonts/Graphik/Graphik-MediumItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/fonts/Graphik/Graphik-MediumItalic.otf -------------------------------------------------------------------------------- /app/fonts/Graphik/Graphik-Regular.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/fonts/Graphik/Graphik-Regular.otf -------------------------------------------------------------------------------- /app/fonts/Graphik/Graphik-RegularItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/fonts/Graphik/Graphik-RegularItalic.otf -------------------------------------------------------------------------------- /app/fonts/Graphik/Graphik-Semibold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/fonts/Graphik/Graphik-Semibold.otf -------------------------------------------------------------------------------- /app/fonts/Graphik/Graphik-SemiboldItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/fonts/Graphik/Graphik-SemiboldItalic.otf -------------------------------------------------------------------------------- /app/fonts/Graphik/Graphik-Super.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/fonts/Graphik/Graphik-Super.otf -------------------------------------------------------------------------------- /app/fonts/Graphik/Graphik-SuperItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/fonts/Graphik/Graphik-SuperItalic.otf -------------------------------------------------------------------------------- /app/fonts/Graphik/Graphik-Thin.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/fonts/Graphik/Graphik-Thin.otf -------------------------------------------------------------------------------- /app/fonts/Graphik/Graphik-ThinItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/fonts/Graphik/Graphik-ThinItalic.otf -------------------------------------------------------------------------------- /app/fonts/Majesti-Banner/Majesti-Banner-Bold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/fonts/Majesti-Banner/Majesti-Banner-Bold.otf -------------------------------------------------------------------------------- /app/fonts/Majesti-Banner/Majesti-Banner-BoldItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/fonts/Majesti-Banner/Majesti-Banner-BoldItalic.otf -------------------------------------------------------------------------------- /app/fonts/Majesti-Banner/Majesti-Banner-Book.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/fonts/Majesti-Banner/Majesti-Banner-Book.otf -------------------------------------------------------------------------------- /app/fonts/Majesti-Banner/Majesti-Banner-BookItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/fonts/Majesti-Banner/Majesti-Banner-BookItalic.otf -------------------------------------------------------------------------------- /app/fonts/Majesti-Banner/Majesti-Banner-Heavy.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/fonts/Majesti-Banner/Majesti-Banner-Heavy.otf -------------------------------------------------------------------------------- /app/fonts/Majesti-Banner/Majesti-Banner-HeavyItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/fonts/Majesti-Banner/Majesti-Banner-HeavyItalic.otf -------------------------------------------------------------------------------- /app/fonts/Majesti-Banner/Majesti-Banner-Light.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/fonts/Majesti-Banner/Majesti-Banner-Light.otf -------------------------------------------------------------------------------- /app/fonts/Majesti-Banner/Majesti-Banner-LightItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/fonts/Majesti-Banner/Majesti-Banner-LightItalic.otf -------------------------------------------------------------------------------- /app/fonts/Majesti-Banner/Majesti-Banner-Medium.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/fonts/Majesti-Banner/Majesti-Banner-Medium.otf -------------------------------------------------------------------------------- /app/fonts/Majesti-Banner/Majesti-Banner-MediumItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/fonts/Majesti-Banner/Majesti-Banner-MediumItalic.otf -------------------------------------------------------------------------------- /app/images/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/images/.DS_Store -------------------------------------------------------------------------------- /app/images/favicons/android-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/images/favicons/android-icon-144x144.png -------------------------------------------------------------------------------- /app/images/favicons/android-icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/images/favicons/android-icon-192x192.png -------------------------------------------------------------------------------- /app/images/favicons/android-icon-36x36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/images/favicons/android-icon-36x36.png -------------------------------------------------------------------------------- /app/images/favicons/android-icon-48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/images/favicons/android-icon-48x48.png -------------------------------------------------------------------------------- /app/images/favicons/android-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/images/favicons/android-icon-72x72.png -------------------------------------------------------------------------------- /app/images/favicons/android-icon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/images/favicons/android-icon-96x96.png -------------------------------------------------------------------------------- /app/images/favicons/apple-icon-114x114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/images/favicons/apple-icon-114x114.png -------------------------------------------------------------------------------- /app/images/favicons/apple-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/images/favicons/apple-icon-120x120.png -------------------------------------------------------------------------------- /app/images/favicons/apple-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/images/favicons/apple-icon-144x144.png -------------------------------------------------------------------------------- /app/images/favicons/apple-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/images/favicons/apple-icon-152x152.png -------------------------------------------------------------------------------- /app/images/favicons/apple-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/images/favicons/apple-icon-180x180.png -------------------------------------------------------------------------------- /app/images/favicons/apple-icon-57x57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/images/favicons/apple-icon-57x57.png -------------------------------------------------------------------------------- /app/images/favicons/apple-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/images/favicons/apple-icon-60x60.png -------------------------------------------------------------------------------- /app/images/favicons/apple-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/images/favicons/apple-icon-72x72.png -------------------------------------------------------------------------------- /app/images/favicons/apple-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/images/favicons/apple-icon-76x76.png -------------------------------------------------------------------------------- /app/images/favicons/apple-icon-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/images/favicons/apple-icon-precomposed.png -------------------------------------------------------------------------------- /app/images/favicons/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/images/favicons/apple-icon.png -------------------------------------------------------------------------------- /app/images/favicons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/images/favicons/favicon-16x16.png -------------------------------------------------------------------------------- /app/images/favicons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/images/favicons/favicon-32x32.png -------------------------------------------------------------------------------- /app/images/favicons/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/images/favicons/favicon-96x96.png -------------------------------------------------------------------------------- /app/images/favicons/ms-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/images/favicons/ms-icon-144x144.png -------------------------------------------------------------------------------- /app/images/favicons/ms-icon-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/images/favicons/ms-icon-150x150.png -------------------------------------------------------------------------------- /app/images/favicons/ms-icon-310x310.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/images/favicons/ms-icon-310x310.png -------------------------------------------------------------------------------- /app/images/favicons/ms-icon-70x70.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/images/favicons/ms-icon-70x70.png -------------------------------------------------------------------------------- /app/images/icons/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/images/icons/.DS_Store -------------------------------------------------------------------------------- /app/images/icons/icon-down-arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /app/images/icons/icon-email.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ic_email_black_24px 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /app/images/icons/icon-facebook-custom.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Combined Shape 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /app/images/icons/icon-facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/images/icons/icon-fingerprint.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 11 | 14 | 18 | 22 | 26 | 30 | 33 | 36 | 39 | 41 | 44 | 47 | 51 | 54 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /app/images/icons/icon-instagram-custom.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Page 1 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /app/images/icons/icon-instagram.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/images/icons/icon-linkedin-custom.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Combined Shape 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /app/images/icons/icon-linkedin.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/images/icons/icon-map-pin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ic_place_black_24px 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /app/images/icons/icon-mouse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/images/icons/icon-mouse.png -------------------------------------------------------------------------------- /app/images/icons/icon-phone.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ic_phone_black_24px 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /app/images/icons/icon-twitter-custom.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Combined Shape 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /app/images/icons/icon-twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "App", 3 | "icons": [ 4 | { 5 | "src": "\/android-icon-36x36.png", 6 | "sizes": "36x36", 7 | "type": "image\/png", 8 | "density": "0.75" 9 | }, 10 | { 11 | "src": "\/android-icon-48x48.png", 12 | "sizes": "48x48", 13 | "type": "image\/png", 14 | "density": "1.0" 15 | }, 16 | { 17 | "src": "\/android-icon-72x72.png", 18 | "sizes": "72x72", 19 | "type": "image\/png", 20 | "density": "1.5" 21 | }, 22 | { 23 | "src": "\/android-icon-96x96.png", 24 | "sizes": "96x96", 25 | "type": "image\/png", 26 | "density": "2.0" 27 | }, 28 | { 29 | "src": "\/android-icon-144x144.png", 30 | "sizes": "144x144", 31 | "type": "image\/png", 32 | "density": "3.0" 33 | }, 34 | { 35 | "src": "\/android-icon-192x192.png", 36 | "sizes": "192x192", 37 | "type": "image\/png", 38 | "density": "4.0" 39 | } 40 | ] 41 | } -------------------------------------------------------------------------------- /app/robots.txt: -------------------------------------------------------------------------------- 1 | # robotstxt.org/ 2 | 3 | User-agent: * 4 | Disallow: 5 | -------------------------------------------------------------------------------- /app/scripts/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/scripts/.DS_Store -------------------------------------------------------------------------------- /app/scripts/app.js: -------------------------------------------------------------------------------- 1 | // import customRouter from './router.js'; 2 | import setMarkedOptions from './marked.js'; 3 | import mainObj from './main.js'; 4 | import examplesObj from './content/examples.js'; 5 | import sassClassesObj from './content/sass-classes.js'; 6 | import sassVarsObj from './content/sass-variables.js'; 7 | import sassMixinsObj from './content/sass-mixins.js'; 8 | import documentationObj from './content/documentation-obj.js' 9 | import overviewCollection from './content/overview.js'; 10 | import variablesCollection from './content/variables.js'; 11 | import mixinsCollection from './content/mixins.js'; 12 | import classesCollection from './content/classes.js'; 13 | import documentationCollection from './content/documentation.js' 14 | 15 | console.log(mainObj.isTouchDevice() ? 'Touch Device': 'Desktop'); 16 | 17 | setMarkedOptions(); 18 | 19 | var codeContentsArray = [examplesObj, sassClassesObj, sassVarsObj, sassMixinsObj, documentationObj]; 20 | 21 | $(function() { 22 | 23 | var featureDetailSource = $('#feature-detail').html(), 24 | featureDetailTemplate = Handlebars.compile(featureDetailSource); 25 | 26 | var makeFeatureDetail = function(obj, i, array) { 27 | var context = obj, 28 | html = featureDetailTemplate(context); 29 | 30 | $(`#${obj.sectionId}`).prepend(html); 31 | } 32 | 33 | overviewCollection.forEach( makeFeatureDetail ); 34 | 35 | variablesCollection.forEach( makeFeatureDetail ); 36 | 37 | mixinsCollection.forEach( makeFeatureDetail ); 38 | 39 | classesCollection.forEach( makeFeatureDetail ); 40 | 41 | documentationCollection.forEach( makeFeatureDetail ); 42 | 43 | // customRouter(); 44 | 45 | var markedSection = function(obj) { 46 | $.each(obj, function(key, value) { 47 | $(`#${key}`).html(marked(value)); 48 | }) 49 | } 50 | 51 | $.each(codeContentsArray, function(i, obj) { 52 | markedSection(obj); 53 | }) 54 | 55 | $('#siteOwner').append(mainObj.getOwnerContent()); 56 | 57 | $('#menuOpen').on('click', function() { 58 | $('#menu').show(); 59 | }) 60 | 61 | $('#menuClose').on('click', function() { 62 | $('#menu').hide(); 63 | }) 64 | 65 | // $('#menu a').on('click', function() { 66 | // event.stopPropagation(); 67 | // }) 68 | 69 | }); 70 | -------------------------------------------------------------------------------- /app/scripts/content/classes.js: -------------------------------------------------------------------------------- 1 | var classesCollection = [ 2 | { 3 | sectionId: 'rowClasses', 4 | codeBlockId: 'rowClassesExample', 5 | title: 'Row Classes', 6 | description: 'Define how content is arranged horizontally and vertically. You can also get specific about ordering and distribution of space.', 7 | hasLink: false, 8 | href: '', 9 | linkContent: '' 10 | }, 11 | { 12 | sectionId: 'colClasses', 13 | codeBlockId: 'colClassesExample', 14 | title: 'Column Classes', 15 | description: 'Define column width and placement for each breakpoint or for a set range', 16 | hasLink: false, 17 | href: '', 18 | linkContent: '' 19 | }, 20 | { 21 | sectionId: 'visClasses', 22 | codeBlockId: 'visClassesExample', 23 | title: 'Visibility Classes', 24 | description: 'Hide and show content. Define visibility for each breakpoint or for a set range', 25 | hasLink: false, 26 | href: '', 27 | linkContent: '' 28 | } 29 | ]; 30 | 31 | module.exports = classesCollection; 32 | -------------------------------------------------------------------------------- /app/scripts/content/documentation-obj.js: -------------------------------------------------------------------------------- 1 | var indent = `  `, 2 | indentDouble = indent + indent, 3 | indentTriple = indentDouble + indent, 4 | indentQuadruple = indentTriple + indent, 5 | indentQuintuple = indentQuadruple + indent, 6 | indentSextuple = indentQuintuple + indent; 7 | 8 | var documentationObj = { 9 | npmInstallationExample: ` 10 | npm install @drewbot/sass-flexbox-grid --save 11 | `, 12 | cssInstallationExample: ` 13 | // Full version 14 | node_modules/@drewbot/sass-flexbox-grid/public/sass-flexbox/main.css 15 | // Minified version 16 | node_modules/@drewbot/sass-flexbox-grid/public/sass-flexbox/main.min.css 17 | `, 18 | sassInstallationExample: ` 19 | node_modules/@drewbot/sass-flexbox-grid/public/sass-flexbox/scss 20 | `, 21 | variableSetupExample: ` 22 | // .../sass-flexbox-grid/public/sass-flexbox/scss/variables/_grid-variables.scss 23 | ${indent} 24 | $grid-columns: 12; // Set number of columns in the grid 25 | ${indent} 26 | $xs-max: 40rem; // Set xs breakpoint's max width 27 | $sm-max: 64rem; // Set sm breakpoint's max width 28 | $md-max: 90rem; // Set md breakpoint's max width 29 | $lg-max: 120rem; // Set lg breakpoint's max width 30 | ${indent} 31 | $gutter: 1rem; // Set gutter size 32 | ${indent} 33 | $content-well-max-width: "none"; // Set the max-width of the content well 34 | ` 35 | } 36 | 37 | module.exports = documentationObj; 38 | -------------------------------------------------------------------------------- /app/scripts/content/documentation.js: -------------------------------------------------------------------------------- 1 | var documentationCollection = [ 2 | { 3 | sectionId: 'npmInstallation', 4 | codeBlockId: 'npmInstallationExample', 5 | title: 'NPM Install', 6 | description: 'From the command line:', 7 | hasLink: false, 8 | href: 'https://www.npmjs.com/package/@drewbot/sass-flexbox-grid', 9 | linkContent: 'View the NPM package webpage' 10 | }, 11 | { 12 | sectionId: 'cssInstallation', 13 | codeBlockId: 'cssInstallationExample', 14 | title: 'Link to CSS', 15 | description: 'Link to the full CSS file or the minified version.', 16 | hasLink: false, 17 | href: '', 18 | linkContent: '' 19 | }, 20 | { 21 | sectionId: 'sassInstallation', 22 | codeBlockId: 'sassInstallationExample', 23 | title: 'Sass Usage', 24 | description: 'Copy the Sass folder over to your development directory in order to customize and preprocess on your own.', 25 | hasLink: false, 26 | href: '', 27 | linkContent: '' 28 | }, 29 | { 30 | sectionId: 'variableSetup', 31 | codeBlockId: 'variableSetupExample', 32 | title: 'Customize Your Grid', 33 | description: 'If you\'re using the Sass version of the library you can update _grid-variables.scss with your preferred number of columns, breakpoint sizes, gutter size, and content well max-width.', 34 | hasLink: false, 35 | href: '', 36 | linkContent: '' 37 | } 38 | ]; 39 | 40 | module.exports = documentationCollection; 41 | -------------------------------------------------------------------------------- /app/scripts/content/examples.js: -------------------------------------------------------------------------------- 1 | var indent = `  `, 2 | indentDouble = indent + indent, 3 | indentTriple = indentDouble + indent, 4 | indentQuadruple = indentTriple + indent, 5 | indentQuintuple = indentQuadruple + indent, 6 | indentSextuple = indentQuintuple + indent; 7 | 8 | var examplesObj = { 9 | responsiveExample: ` 10 |
11 | ${indent}
12 |
13 | `, 14 | offsetsExample: ` 15 |
16 | ${indent}
17 |
18 | `, 19 | autoWidthExample: ` 20 |
21 | ${indent}
22 | ${indent}
23 |
24 | `, 25 | nestedExample: ` 26 |
27 | ${indent}
28 | ${indentDouble}
29 | ${indentTriple}
30 | ${indentDouble}
31 | ${indent}
32 |
33 | `, 34 | alignmentExample: ` 35 |
36 | ${indent}
content
37 |
38 | `, 39 | distributionExample: ` 40 |
41 | ${indent}
42 | ${indent}
43 | ${indent}
44 |
45 | `, 46 | reorderExample: ` 47 |
48 | ${indent}
1
49 | ${indent}
2
50 | ${indent}
3
51 | ${indent}... 52 |
53 | `, 54 | reverseExample: ` 55 |
56 | ${indent}
1
57 | ${indent}
2
58 | ${indent}
3
59 |
60 | `, 61 | variablesExample: ` 62 | $grid-columns: 12; // Set number of columns in the grid 63 | ${indent} 64 | $xs-max: 40rem; // Set xs breakpoint's max width 65 | $sm-max: 64rem; // Set sm breakpoint's max width 66 | $md-max: 90rem; // Set md breakpoint's max width 67 | $lg-max: 120rem; // Set lg breakpoint's max width 68 | ${indent} 69 | $gutter: 1rem; // Set gutter size 70 | ${indent} 71 | $content-well-max-width: "none"; // Set the max-width of the content well 72 | `, 73 | mixinsExample: ` 74 | .container { 75 | ${indent}@include row(); 76 | ${indent}.box { 77 | ${indentDouble}@inlcude col(6); 78 | ${indentDouble}@inlcude col(md, 3); 79 | ${indent}} 80 | ${indent}.extras { 81 | ${indentDouble}@include hide(lg); 82 | ${indent}} 83 | } 84 | `, 85 | visibilityExample: ` 86 |
87 | ${indent}
88 | ${indent}
89 | ${indent}
90 | ${indent}
91 | ${indent}
92 | ${indent}
93 |
94 | `, 95 | eqHeightExample: ` 96 |
97 | ${indent}
Content of varying height
98 | ${indent}
Content of varying height
99 |
100 | ` 101 | } 102 | 103 | module.exports = examplesObj; 104 | 105 | // var examplesArray = [ 106 | // { 107 | // id: 'responsiveExample', 108 | // markup: ` 109 | //
110 | // ${indent}
111 | //
112 | // ` 113 | // }, 114 | // { 115 | // id: 'offsetsExample', 116 | // markup: ` 117 | //
118 | // ${indent}
119 | //
120 | // ` 121 | // }, 122 | // { 123 | // id: 'autoWidthExample', 124 | // markup: ` 125 | //
126 | // ${indent}
127 | // ${indent}
128 | //
129 | // ` 130 | // }, 131 | // { 132 | // id: 'nestedExample', 133 | // markup: ` 134 | //
135 | // ${indent}
136 | // ${indentDouble}
137 | // ${indentTriple}
138 | // ${indentDouble}
139 | // ${indent}
140 | //
141 | // ` 142 | // }, 143 | // { 144 | // id: 'alignmentExample', 145 | // markup: ` 146 | //
147 | // ${indent}
content
148 | //
149 | // ` 150 | // }, 151 | // { 152 | // id: 'distributionExample', 153 | // markup: ` 154 | //
155 | // ${indent}
156 | // ${indent}
157 | // ${indent}
158 | //
159 | // ` 160 | // }, 161 | // { 162 | // id: 'reorderExample', 163 | // markup: ` 164 | //
165 | // ${indent}
1
166 | // ${indent}
2
167 | // ${indent}
3
168 | // ${indent}... 169 | //
170 | // ` 171 | // }, 172 | // { 173 | // id: 'reverseExample', 174 | // markup: ` 175 | //
176 | // ${indent}
1
177 | // ${indent}
2
178 | // ${indent}
3
179 | //
180 | // ` 181 | // }, 182 | // { 183 | // id: 'variablesExample', 184 | // markup: ` 185 | // $grid-columns: 12; 186 | // 187 | // $xs-max: 640px; 188 | // $sm-max: 1024px; 189 | // $md-max: 1440px; 190 | // $lg-max: 1920px; 191 | // 192 | // $content-well-max-width: 2400px; 193 | // ` 194 | // }, 195 | // { 196 | // id: 'mixinsExample', 197 | // markup: ` 198 | // .container { 199 | // ${indent}@include row(); 200 | // ${indent}.box { 201 | // ${indentDouble}@inlcude col(6); 202 | // ${indentDouble}@inlcude col(md, 3); 203 | // ${indent}} 204 | // ${indent}.extras { 205 | // ${indentDouble}@include hide(lg); 206 | // ${indent}} 207 | // } 208 | // ` 209 | // }, 210 | // { 211 | // id: 'visibilityExample', 212 | // markup: ` 213 | //
214 | // ${indent}
215 | // ${indent}
216 | // ${indent}
217 | // ${indent}
218 | // ${indent}
219 | // ${indent}
220 | //
221 | // ` 222 | // }, 223 | // { 224 | // id: 'eqHeightExample', 225 | // markup: ` 226 | //
227 | // ${indent}
Content of varying height
228 | // ${indent}
Content of varying height
229 | //
230 | // ` 231 | // } 232 | // ] 233 | -------------------------------------------------------------------------------- /app/scripts/content/mixins.js: -------------------------------------------------------------------------------- 1 | var mixinsCollection = [ 2 | { 3 | sectionId: 'rowMixins', 4 | codeBlockId: 'rowMixinsExample', 5 | title: 'Row Mixins', 6 | description: 'Set a container as a row and customize.', 7 | hasLink: false, 8 | href: '', 9 | linkContent: '' 10 | }, 11 | { 12 | sectionId: 'colMixins', 13 | codeBlockId: 'colMixinsExample', 14 | title: 'Column Mixins', 15 | description: 'Set a container as a column and customize.', 16 | hasLink: false, 17 | href: '', 18 | linkContent: '' 19 | }, 20 | { 21 | sectionId: 'arrangeMixins', 22 | codeBlockId: 'arrangeMixinsExample', 23 | title: 'Arrangement Mixins', 24 | description: 'Customize the arrangement, placement and orientation.', 25 | hasLink: false, 26 | href: '', 27 | linkContent: '' 28 | }, 29 | { 30 | sectionId: 'visibilityMixins', 31 | codeBlockId: 'visibilityMixinsExample', 32 | title: 'Visibility Mixins', 33 | description: 'Hide and show content within all or various breakpoint ranges.', 34 | hasLink: false, 35 | href: '', 36 | linkContent: '' 37 | } 38 | ]; 39 | 40 | module.exports = mixinsCollection; 41 | -------------------------------------------------------------------------------- /app/scripts/content/overview.js: -------------------------------------------------------------------------------- 1 | var overviewCollection = [ 2 | { 3 | sectionId: 'responsive', 4 | codeBlockId: 'responsiveExample', 5 | title: 'Responsive and Fluid', 6 | description: 'Responsive modifiers let you define column sizes, offsets, alignment and distribution at xs, sm, md & lg viewport widths. Use the row class to define an outer row of columns and then place columns inside of rows.', 7 | hasLink: true, 8 | href: '/views/classes.html', 9 | linkContent: 'See all classes' 10 | }, 11 | { 12 | sectionId: 'offsets', 13 | codeBlockId: 'offsetsExample', 14 | title: 'Offsets', 15 | description: 'Offset a column.', 16 | hasLink: false, 17 | href: '', 18 | linkContent: '' 19 | }, 20 | { 21 | sectionId: 'autoWidth', 22 | codeBlockId: 'autoWidthExample', 23 | title: 'Auto Width', 24 | description: 'Add any number of auto sizing columns to a row. Let the grid figure it out.', 25 | hasLink: false, 26 | href: '', 27 | linkContent: '' 28 | }, 29 | { 30 | sectionId: 'alignment', 31 | codeBlockId: 'alignmentExample', 32 | title: 'Alignment', 33 | description: 'Add classes to align elements to the start or end of a row as well as the top, bottom, or center of a column.', 34 | hasLink: true, 35 | href: '/views/classes.html', 36 | linkContent: 'See all classes' 37 | }, 38 | { 39 | sectionId: 'distribution', 40 | codeBlockId: 'distributionExample', 41 | title: 'Distribution', 42 | description: 'Add classes to distribute the contents of a row or column.', 43 | hasLink: false, 44 | href: '', 45 | linkContent: '' 46 | }, 47 | { 48 | sectionId: 'reorder', 49 | codeBlockId: 'reorderExample', 50 | title: 'Reordering', 51 | description: 'Add classes to reorder columns.', 52 | hasLink: false, 53 | href: '', 54 | linkContent: '' 55 | }, 56 | { 57 | sectionId: 'reverse', 58 | codeBlockId: 'reverseExample', 59 | title: 'Reversing', 60 | description: 'Add a class to reverse columns or column content.', 61 | hasLink: false, 62 | href: '', 63 | linkContent: '' 64 | }, 65 | { 66 | sectionId: 'eqHeight', 67 | codeBlockId: 'eqHeightExample', 68 | title: 'Column Height Equalizer', 69 | description: 'By default, flexbox stretches each flex item to match the height of it\'s sibling. The .natural-height row utility class will make each column\'s height match it\'s content, giving the developer control of the behavior.', 70 | hasLink: false, 71 | href: '', 72 | linkContent: '' 73 | }, 74 | { 75 | sectionId: 'nested', 76 | codeBlockId: 'nestedExample', 77 | title: 'Nested Grids', 78 | description: 'Nest grids inside grids inside grids.', 79 | hasLink: false, 80 | href: '', 81 | linkContent: '' 82 | }, 83 | { 84 | sectionId: 'visibility', 85 | codeBlockId: 'visibilityExample', 86 | title: 'Visibility', 87 | description: 'Visibility classes allow for responsive showing and hiding of content.', 88 | hasLink: true, 89 | href: '/views/classes.html', 90 | linkContent: 'See all classes' 91 | }, 92 | { 93 | sectionId: 'variables', 94 | codeBlockId: 'variablesExample', 95 | title: 'Variables', 96 | description: 'Customizable Sass variables allow you to create a grid and responsive framework to meet your needs. You can easily change the number of columns in your grid from the default 12. Update your breakpoint ranges by adjusting these variables and all of the media queries, classes and mixins will update accordingly.', 97 | hasLink: true, 98 | href: '/views/variables.html', 99 | linkContent: 'See all variables' 100 | }, 101 | { 102 | sectionId: 'mixins', 103 | codeBlockId: 'mixinsExample', 104 | title: 'Mixins', 105 | description: 'Mixins are available for every Sass Flexbox Grid set of delarations.', 106 | hasLink: true, 107 | href: '/views/mixins.html', 108 | linkContent: 'See all mixins' 109 | } 110 | ]; 111 | 112 | module.exports = overviewCollection; 113 | -------------------------------------------------------------------------------- /app/scripts/content/sass-classes.js: -------------------------------------------------------------------------------- 1 | var indent = `  `, 2 | indentDouble = indent + indent, 3 | indentTriple = indentDouble + indent, 4 | indentQuadruple = indentTriple + indent, 5 | indentQuintuple = indentQuadruple + indent, 6 | indentSextuple = indentQuintuple + indent; 7 | 8 | var sassClassesObj = { 9 | rowClassesExample: ` 10 | .row // Define and element as a row 11 | .reverse // Reverse the order of the row\'s children 12 | .natural-height // Row children heights match their contents 13 | .flex-column // Arrange row children vertically 14 | .start // Align row children to the beginning of the row 15 | .center // Align row children to the center of the row 16 | .end // Align row children to the end of the row 17 | .top // Align row children to the top of the row 18 | .middle // Align row children to the middle of the row 19 | .bottom // Align row children to the bottom of the row 20 | .around // Apply equal space around each row child 21 | .between // Apply equal space between each row child 22 | `, 23 | colClassesExample: ` 24 | .col // Define a column with auto-sizing 25 | .col-xs // Define a column with auto-sizing on XS and up 26 | .col-sm // Define a column with auto-sizing on SM and up 27 | .col-md // Define a column with auto-sizing on MD and up 28 | .col-lg // Define a column with auto-sizing on LG and up 29 | .col-xl // Define a column with auto-sizing on XL and up 30 | .col-xs- // Define a column\'s number width on XS and up 31 | .col-sm- // Define a column\'s number width on SM and up 32 | .col-md- // Define a column\'s number width on MD and up 33 | .col-lg- // Define a column\'s number width on LG and up 34 | .col-xl- // Define a column\'s number width on XL and up 35 | .col-xs-offset- // Offset by a number width on XS and up 36 | .col-sm-offset- // Offset by a number width on SM and up 37 | .col-md-offset- // Offset by a number width on MD and up 38 | .col-lg-offset- // Offset by a number width on LG and up 39 | .col-xl-offset- // Offset by a number width on XL and up 40 | .first // Make a column first in order within a row 41 | .first-xs // Make a column first in order on XS and up 42 | .first-sm // Make a column first in order on SM and up 43 | .first-md // Make a column first in order on MD and up 44 | .first-lg // Make a column first in order on LG and up 45 | .first-xl // Make a column first in order on XL and up 46 | .last // Make a column last in order on XS and up 47 | .last-xs // Make a column last in order on XS and up 48 | .last-sm // Make a column last in order on SM and up 49 | .last-md // Make a column last in order on MD and up 50 | .last-lg // Make a column last in order on LG and up 51 | .last-xl // Make a column last in order on XL and up 52 | `, 53 | visClassesExample: ` 54 | .show // Show an element 55 | .show-xs // Show an element on XS and up 56 | .show-xs-only // Show an element on XS only 57 | .show-sm // Show an element on SM and up 58 | .show-sm-only // Show an element on SM only 59 | .show-md // Show an element on MD and up 60 | .show-md-only // Show an element on MD only 61 | .show-lg // Show an element on LG and up 62 | .show-lg-only // Show an element on LG only 63 | .show-xl // Show an element on XL screens 64 | .hide // Hide an element 65 | .hide-xs // Hide an element on XS and up 66 | .hide-xs-only // Hide an element on XS only 67 | .hide-sm // Hide an element on SM and up 68 | .hide-sm-only // Hide an element on SM only 69 | .hide-md // Hide an element on MD and up 70 | .hide-md-only // Hide an element on MD only 71 | .hide-lg // Hide an element on LG and up 72 | .hide-lg-only // Hide an element on LG only 73 | .hide-xl // Hide an element on XL screens 74 | ` 75 | } 76 | 77 | module.exports = sassClassesObj; 78 | -------------------------------------------------------------------------------- /app/scripts/content/sass-mixins.js: -------------------------------------------------------------------------------- 1 | var indent = `  `, 2 | indentDouble = indent + indent, 3 | indentTriple = indentDouble + indent, 4 | indentQuadruple = indentTriple + indent, 5 | indentQuintuple = indentQuadruple + indent, 6 | indentSextuple = indentQuintuple + indent; 7 | 8 | var sassMixinsObj = { 9 | rowMixinsExample: ` 10 | row(); // Define and element as a row 11 | row-reverse(); // Reverse the order of the row\'s children 12 | row-natural-height(); // Row children heights match their contents 13 | row-flex-column(); // Row children arrange vertically 14 | `, 15 | colMixinsExample: ` 16 | // Pass in breakpoint and number arguments to define a column 17 | col(, ); 18 | ${indent} 19 | // No breakpoint arg = xs- 20 | col(); 21 | ${indent} 22 | // No args = auto-width column at the xs breakpoint 23 | col(); 24 | ${indent} 25 | // Pass in breakpoint and number arguments to offset a column 26 | col-offset(, ); 27 | ${indent} 28 | // Reverse the order of an auto width col 29 | col-reverse(); 30 | `, 31 | arrangeMixinsExample: ` 32 | // apply to a row to arrange descendants 33 | start(); // Align to the beginning of the row 34 | center(); // Align to the center of the row 35 | end(); // Align to the end of the row 36 | top(); // Align to the top of the row 37 | middle(); // Align to the middle of the row 38 | bottom(); // Align to the bottom of the row 39 | around(); // Apply equal space around each row child 40 | between(); // Apply equal space between each row child 41 | ${indent} 42 | // Apply to a column to arrange this element 43 | first(); // Make a column first in order within a row 44 | last(); // Make a column last in order on XS and up 45 | `, 46 | visibilityMixinsExample: ` 47 | show(); // Show an element 48 | hide(); // Hide an element 49 | ` 50 | } 51 | 52 | module.exports = sassMixinsObj; 53 | -------------------------------------------------------------------------------- /app/scripts/content/sass-variables.js: -------------------------------------------------------------------------------- 1 | var indent = `  `, 2 | indentDouble = indent + indent, 3 | indentTriple = indentDouble + indent, 4 | indentQuadruple = indentTriple + indent, 5 | indentQuintuple = indentQuadruple + indent, 6 | indentSextuple = indentQuintuple + indent; 7 | 8 | var sassVarsObj = { 9 | gridVarsExample: ` 10 | $grid-columns: 12; // Set number of columns in the grid 11 | ${indent} 12 | $xs-max: 40rem; // Set xs breakpoint's max width 13 | $sm-max: 64rem; // Set sm breakpoint's max width 14 | $md-max: 90rem; // Set md breakpoint's max width 15 | $lg-max: 120rem; // Set lg breakpoint's max width 16 | ${indent} 17 | $gutter: 1rem; // Set gutter size 18 | ${indent} 19 | $content-well-max-width: "none"; // Set the max-width of the content well 20 | ${indent} 21 | $sm-start: ($xs-max + 1); // Generate sm breakpoint's min width 22 | $md-start: ($sm-max + 1); // Generate md breakpoint's min width 23 | $lg-start: ($md-max + 1); // Generate lg breakpoint's min width 24 | $xl-start: ($lg-max + 1); // Generate xl breakpoint's min width 25 | `, 26 | breakpointVarsExample: ` 27 | $breakpoint-xs-only: "only screen and (max-width: #{$xs-max})"; 28 | $breakpoint-sm-up: "only screen and (min-width: #{$sm-start})"; 29 | $breakpoint-sm-only: "only screen and (min-width: #{$sm-start}) and (max-width: #{$sm-max})"; 30 | $breakpoint-md-up: "only screen and (min-width: #{$md-start})"; 31 | $breakpoint-md-only: "only screen and (min-width: #{$md-start}) and (max-width: #{$md-max})"; 32 | $breakpoint-lg-up: "only screen and (min-width: #{$lg-start})"; 33 | $breakpoint-lg-only: "only screen and (min-width: #{$lg-start}) and (max-width: #{$lg-max})"; 34 | $breakpoint-xl-up: "only screen and (min-width: #{$xl-start})"; 35 | ` 36 | } 37 | 38 | module.exports = sassVarsObj; 39 | -------------------------------------------------------------------------------- /app/scripts/content/variables.js: -------------------------------------------------------------------------------- 1 | var variablesCollection = [ 2 | { 3 | sectionId: 'gridVars', 4 | codeBlockId: 'gridVarsExample', 5 | title: 'Grid Control', 6 | description: 'You can easily change the number of columns in your grid from the default 12. Update your breakpoint ranges by adjusting these variables and all of the media queries, classes and mixins will update accordingly.', 7 | hasLink: false, 8 | href: '', 9 | linkContent: '' 10 | }, 11 | { 12 | sectionId: 'breakpointVars', 13 | codeBlockId: 'breakpointVarsExample', 14 | title: 'Breakpoint Ranges', 15 | description: 'Breakpoint range variables are automagically created based on the grid variables.', 16 | hasLink: false, 17 | href: '', 18 | linkContent: '' 19 | } 20 | ]; 21 | 22 | module.exports = variablesCollection; 23 | -------------------------------------------------------------------------------- /app/scripts/main.js: -------------------------------------------------------------------------------- 1 | var mainObj = { 2 | owner: 'Drew Botka', 3 | githubUrl: `https://github.com/drewbot`, 4 | currentYear: new Date().getFullYear(), 5 | isTouchDevice() { 6 | return !!('ontouchstart' in window) || !!('msmaxtouchpoints' in window.navigator); 7 | }, 8 | getCopyright() { 9 | return `© ${this.currentYear} ${this.owner}. All Rights Reserved.` 10 | }, 11 | getOwnerContent() { 12 | return `Made by ${this.owner}` 13 | } 14 | }; 15 | 16 | module.exports = mainObj; 17 | -------------------------------------------------------------------------------- /app/scripts/marked.js: -------------------------------------------------------------------------------- 1 | var setMarkedOptions = function() { 2 | return marked.setOptions({ 3 | breaks: true, 4 | sanitize: true 5 | }); 6 | } 7 | 8 | module.exports = setMarkedOptions; 9 | -------------------------------------------------------------------------------- /app/scripts/router.js: -------------------------------------------------------------------------------- 1 | // var root = null, 2 | // useHash = false, 3 | // router = new Navigo(root, useHash), 4 | // $allViews = $( '[id|="view"]' ), 5 | // $homeView = $('#view-home'), 6 | // $classesView = $('#view-classes'), 7 | // $mixinsView = $('#view-mixins'), 8 | // $variablesView = $('#view-variables'); 9 | // 10 | // var replaceView = function($view) { 11 | // $allViews.hide(); 12 | // $view.show(); 13 | // } 14 | // 15 | // var customRouter = function() { 16 | // return router 17 | // .on({ 18 | // 'classes': function() { 19 | // replaceView($classesView); 20 | // }, 21 | // 'variables': function() { 22 | // replaceView($variablesView); 23 | // }, 24 | // 'mixins': function() { 25 | // replaceView($mixinsView); 26 | // }, 27 | // '*': function() { 28 | // replaceView($homeView); 29 | // } 30 | // }) 31 | // .resolve(); 32 | // } 33 | // 34 | // module.exports = customRouter; 35 | -------------------------------------------------------------------------------- /app/styles/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/styles/.DS_Store -------------------------------------------------------------------------------- /app/styles/_border-box-all.scss: -------------------------------------------------------------------------------- 1 | /* apply a natural box layout model to all elements, but allowing components to change */ 2 | html { 3 | box-sizing: border-box; 4 | } 5 | 6 | *, *:before, *:after { 7 | box-sizing: inherit; 8 | } 9 | -------------------------------------------------------------------------------- /app/styles/_element-defaults.scss: -------------------------------------------------------------------------------- 1 | 2 | html { 3 | font-size: 10px; 4 | } 5 | 6 | body { 7 | font-family: $graphik; 8 | } 9 | 10 | h1 { 11 | font-family: $majesti; 12 | @include font-size-line-height(3rem); 13 | color: $white; 14 | @media #{$breakpoint-md-up} { 15 | @include font-size-line-height(5rem); 16 | } 17 | @media #{$breakpoint-lg-up} { 18 | @include font-size-line-height(7rem); 19 | } 20 | } 21 | 22 | h2 { 23 | font-family: $majesti; 24 | @include font-size-line-height(2.6rem); 25 | color: $darkslate; 26 | @media #{$breakpoint-md-up} { 27 | @include font-size-line-height(4rem); 28 | } 29 | @media #{$breakpoint-lg-up} { 30 | @include font-size-line-height(6.6rem); 31 | } 32 | } 33 | 34 | h4 { 35 | font-family: $graphik-medium; 36 | @include font-size-line-height(1.8rem); 37 | color: $bronze; 38 | @media #{$breakpoint-lg-up} { 39 | @include font-size-line-height(2rem); 40 | } 41 | } 42 | 43 | p { 44 | margin: 0 0 1.8rem 0; 45 | font-family: $graphik; 46 | @include font-size-line-height(1.6rem); 47 | color: $darkslate; 48 | @media #{$breakpoint-md-up} { 49 | margin: 0 0 2rem 0; 50 | @include font-size-line-height(2rem); 51 | } 52 | @media #{$breakpoint-lg-up} { 53 | margin: 0 0 2.2rem 0; 54 | @include font-size-line-height(2.2rem); 55 | } 56 | } 57 | 58 | a { 59 | color: lighten($bronze, 10%);; 60 | &:hover { 61 | cursor: pointer; 62 | color: lighten($bronze, 20%); 63 | } 64 | } 65 | 66 | li { 67 | font-family: $graphik; 68 | @include font-size-line-height(1.8rem); 69 | color: $darkslate; 70 | @media #{$breakpoint-md-up} { 71 | @include font-size-line-height(2rem); 72 | } 73 | @media #{$breakpoint-lg-up} { 74 | @include font-size-line-height(2.2rem); 75 | } 76 | } 77 | 78 | aside, .secondary-text { 79 | font-family: $graphik; 80 | @include font-size-line-height(1.4rem); 81 | color: $bronze; 82 | @media #{$breakpoint-md-up} { 83 | @include font-size-line-height(1.6rem); 84 | } 85 | @media #{$breakpoint-lg-up} { 86 | @include font-size-line-height(1.8rem); 87 | } 88 | } 89 | 90 | img { 91 | width: auto; 92 | max-width: 100%; 93 | height: auto; 94 | } 95 | 96 | button { 97 | padding: 2px 14px 2px 14px; 98 | background-color: lighten($bronze, 10%); 99 | font-family: $graphik-medium; 100 | text-align: center; 101 | border: none; 102 | @include font-size-line-height(1.4rem); 103 | color: $white; 104 | border-radius: 0; 105 | transition: background-color 0.2s ease-in; 106 | transition: border 0.2s ease-in; 107 | @media #{$breakpoint-md-up} { 108 | padding: 3px 15px 3px 15px; 109 | @include font-size-line-height(1.6rem); 110 | } 111 | @media #{$breakpoint-lg-up} { 112 | padding: 5px 16px 5px 16px; 113 | @include font-size-line-height(1.8rem); 114 | } 115 | &:hover { 116 | cursor: pointer; 117 | background-color: lighten($bronze, 15%); 118 | } 119 | } 120 | 121 | .fa { 122 | color: $white; 123 | @include font-size-line-height(1.8rem); 124 | @media #{$breakpoint-md-up} { 125 | @include font-size-line-height(2rem); 126 | } 127 | @media #{$breakpoint-lg-up} { 128 | @include font-size-line-height(2.2rem); 129 | } 130 | } 131 | -------------------------------------------------------------------------------- /app/styles/_fonts.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=PT+Mono'); 2 | 3 | @font-face { 4 | font-family: "graphik-regular"; 5 | src: url(../fonts/Graphik/Graphik-Regular.otf) format("truetype"); 6 | } 7 | 8 | @font-face { 9 | font-family: "graphik-medium"; 10 | src: url(../fonts/Graphik/Graphik-Medium.otf) format("truetype"); 11 | } 12 | 13 | @font-face { 14 | font-family: "graphik-semibold"; 15 | src: url(../fonts/Graphik/Graphik-SemiBold.otf) format("truetype"); 16 | } 17 | 18 | @font-face { 19 | font-family: "majesti-banner-book"; 20 | src: url(../fonts/Majesti-Banner/Majesti-Banner-Book.otf) format("truetype"); 21 | } 22 | -------------------------------------------------------------------------------- /app/styles/_reset.scss: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } 49 | -------------------------------------------------------------------------------- /app/styles/library/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/styles/library/.DS_Store -------------------------------------------------------------------------------- /app/styles/library/_grid.scss: -------------------------------------------------------------------------------- 1 | // Creds to https://github.com/kristoferjoseph/flexboxgrid 2 | // No gutters 3 | // No text alignment with justified container classes (center-xs, for example) 4 | 5 | .row { 6 | @include row(); 7 | } 8 | 9 | .row.reverse { 10 | @include row-reverse(); 11 | } 12 | 13 | .row.natural-height { 14 | @include row-natural-height(); 15 | } 16 | 17 | .row.flex-column { 18 | @include row-flex-column(); 19 | } 20 | 21 | .col { 22 | @include col(); 23 | } 24 | 25 | .col.reverse { 26 | @include col-reverse(); 27 | } 28 | 29 | .first { 30 | order: -1; 31 | } 32 | 33 | .last { 34 | order: 1; 35 | } 36 | 37 | .align-start { 38 | align-self: flex-start; 39 | } 40 | 41 | .align-end { 42 | align-self: flex-end; 43 | } 44 | 45 | .align-center { 46 | align-self: center; 47 | } 48 | 49 | .align-baseline { 50 | align-self: baseline; 51 | } 52 | 53 | .align-stretch { 54 | align-self: stretch; 55 | } 56 | 57 | // Mixin to run inside of for loop - creates col/breakpoint classes * Not for developer use * 58 | @mixin col-factory($thisPrefix) { 59 | .col-#{$thisPrefix} { 60 | box-sizing: border-box; 61 | flex-grow: 1; 62 | flex-basis: 0; 63 | max-width: 100%; 64 | padding: $gutter; 65 | } 66 | @for $i from 1 through $grid-columns { 67 | .col-#{$thisPrefix}-#{$i} { 68 | box-sizing: border-box; 69 | flex-basis: 100% / $grid-columns * $i; 70 | max-width: 100% / $grid-columns * $i; 71 | padding: $gutter; 72 | } 73 | .col-#{$thisPrefix}-offset-#{$i} { 74 | margin-left: 100% / $grid-columns * $i; 75 | } 76 | } 77 | .row.start-#{$thisPrefix} { 78 | justify-content: flex-start; 79 | } 80 | .row.center-#{$thisPrefix} { 81 | justify-content: center; 82 | } 83 | .row.end-#{$thisPrefix} { 84 | justify-content: flex-end; 85 | } 86 | .row.top-#{$thisPrefix} { 87 | align-items: flex-start; 88 | } 89 | .row.middle-#{$thisPrefix} { 90 | align-items: center; 91 | } 92 | .row.bottom-#{$thisPrefix} { 93 | align-items: flex-end; 94 | } 95 | .row.around-#{$thisPrefix} { 96 | justify-content: space-around; 97 | } 98 | .row.between-#{$thisPrefix} { 99 | justify-content: space-between; 100 | } 101 | .first-#{$thisPrefix} { 102 | order: -1; 103 | } 104 | .last-#{$thisPrefix} { 105 | order: 1; 106 | } 107 | } // Mixin to run inside of for loop - creates col/breakpoint classes 108 | 109 | @for $i from 1 through length($breakpoint-up-prefixes) { 110 | $thisPrefix: nth($breakpoint-up-prefixes, $i); 111 | @if $thisPrefix == "xs" { 112 | @include col-factory($thisPrefix); 113 | } @else if $thisPrefix == "sm" { 114 | @media #{$breakpoint-sm-up} { 115 | @include col-factory($thisPrefix); 116 | } 117 | } @else if $thisPrefix == "md" { 118 | @media #{$breakpoint-md-up} { 119 | @include col-factory($thisPrefix); 120 | } 121 | } @else if $thisPrefix == "lg" { 122 | @media #{$breakpoint-lg-up} { 123 | @include col-factory($thisPrefix); 124 | } 125 | } @else if $thisPrefix == "xl" { 126 | @media #{$breakpoint-xl-up} { 127 | @include col-factory($thisPrefix); 128 | } 129 | } 130 | } 131 | 132 | .col-gutter-lr { 133 | padding: 0 $gutter; 134 | } 135 | 136 | .col-no-gutter { 137 | padding: 0; 138 | } 139 | -------------------------------------------------------------------------------- /app/styles/library/_visibility.scss: -------------------------------------------------------------------------------- 1 | 2 | .show { 3 | display: block !important; 4 | } 5 | 6 | .row.show { 7 | display: -webkit-flex !important; 8 | display: -ms-flexbox !important; 9 | display: flex !important; 10 | } 11 | 12 | .hide { 13 | display: none !important; 14 | } 15 | 16 | // Mixin to run inside of for loop - creates visibility classes * Not for developer use * 17 | @mixin vis-factory($thisPrefix) { 18 | .show-#{$thisPrefix} { 19 | display: block !important; 20 | } 21 | .row.show-#{$thisPrefix} { 22 | display: -webkit-flex !important; 23 | display: -ms-flexbox !important; 24 | display: flex !important; 25 | } 26 | .hide-#{$thisPrefix} { 27 | display: none !important; 28 | } 29 | } // Mixin to run inside of for loop - creates visibility classes * Not for developer use * 30 | 31 | @for $i from 1 through length($breakpoint-all-prefixes) { 32 | $thisPrefix: nth($breakpoint-all-prefixes, $i); 33 | @if $thisPrefix == "xs" { 34 | @include vis-factory($thisPrefix); 35 | } @else if $thisPrefix == "xs-only" { 36 | @media #{$breakpoint-xs-only} { 37 | @include vis-factory($thisPrefix); 38 | } 39 | } @else if $thisPrefix == "sm" { 40 | @media #{$breakpoint-sm-up} { 41 | @include vis-factory($thisPrefix); 42 | } 43 | } @else if $thisPrefix == "sm-only" { 44 | @media #{$breakpoint-sm-only} { 45 | @include vis-factory($thisPrefix); 46 | } 47 | } @else if $thisPrefix == "md" { 48 | @media #{$breakpoint-md-up} { 49 | @include vis-factory($thisPrefix); 50 | } 51 | } @else if $thisPrefix == "md-only" { 52 | @media #{$breakpoint-md-only} { 53 | @include vis-factory($thisPrefix); 54 | } 55 | } @else if $thisPrefix == "lg" { 56 | @media #{$breakpoint-lg-up} { 57 | @include vis-factory($thisPrefix); 58 | } 59 | } @else if $thisPrefix == "lg-only" { 60 | @media #{$breakpoint-lg-only} { 61 | @include vis-factory($thisPrefix); 62 | } 63 | } @else if $thisPrefix == "xl" { 64 | @media #{$breakpoint-xl-up} { 65 | @include vis-factory($thisPrefix); 66 | } 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /app/styles/library/main.scss: -------------------------------------------------------------------------------- 1 | @import "variables/main.scss"; 2 | @import "mixins/main.scss"; 3 | @import "grid"; 4 | @import "visibility"; // Visibility last for precedence 5 | -------------------------------------------------------------------------------- /app/styles/library/mixins/_visibility-mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin show($breakpoint, $row) { 2 | @if $breakpoint == "xs" { 3 | @if $row == "true" or $row == "row" { 4 | display: flex; 5 | } @else { 6 | display: block; 7 | } 8 | } @else if $breakpoint == "xs-only" { 9 | @media #{$breakpoint-xs-only} { 10 | @if $row == "true" or $row == "row" { 11 | display: flex; 12 | } @else { 13 | display: block; 14 | } 15 | } 16 | } @else if $breakpoint == "sm" { 17 | @media #{$breakpoint-sm-up} { 18 | @if $row == "true" or $row == "row" { 19 | display: flex; 20 | } @else { 21 | display: block; 22 | } 23 | } 24 | } @else if $breakpoint == "sm-only" { 25 | @media #{$breakpoint-sm-only} { 26 | @if $row == "true" or $row == "row" { 27 | display: flex; 28 | } @else { 29 | display: block; 30 | } 31 | } 32 | } @else if $breakpoint == "md" { 33 | @media #{$breakpoint-md-up} { 34 | @if $row == "true" or $row == "row" { 35 | display: flex; 36 | } @else { 37 | display: block; 38 | } 39 | } 40 | } @else if $breakpoint == "md-only" { 41 | @media #{$breakpoint-md-only} { 42 | @if $row == "true" or $row == "row" { 43 | display: flex; 44 | } @else { 45 | display: block; 46 | } 47 | } 48 | } @else if $breakpoint == "lg" { 49 | @media #{$breakpoint-lg-up} { 50 | @if $row == "true" or $row == "row" { 51 | display: flex; 52 | } @else { 53 | display: block; 54 | } 55 | } 56 | } @else if $breakpoint == "lg-only" { 57 | @media #{$breakpoint-lg-only} { 58 | @if $row == "true" or $row == "row" { 59 | display: flex; 60 | } @else { 61 | display: block; 62 | } 63 | } 64 | } @else if $breakpoint == "xl" { 65 | @media #{$breakpoint-xl-up} { 66 | @if $row == "true" or $row == "row" { 67 | display: flex; 68 | } @else { 69 | display: block; 70 | } 71 | } 72 | } @else { 73 | @warn "show mixin arg must be one of the existing breakpoints or ranges (#{$breakpoint-all-prefixes})"; 74 | } 75 | } 76 | 77 | @mixin hide($breakpoint) { 78 | @if $breakpoint == "xs" { 79 | display: none; 80 | } @else if $breakpoint == "xs-only" { 81 | @media #{$breakpoint-xs-only} { 82 | display: none; 83 | } 84 | } @else if $breakpoint == "sm" { 85 | @media #{$breakpoint-sm-up} { 86 | display: none; 87 | } 88 | } @else if $breakpoint == "sm-only" { 89 | @media #{$breakpoint-sm-only} { 90 | display: none; 91 | } 92 | } @else if $breakpoint == "md" { 93 | @media #{$breakpoint-md-up} { 94 | display: none; 95 | } 96 | } @else if $breakpoint == "md-only" { 97 | @media #{$breakpoint-md-only} { 98 | display: none; 99 | } 100 | } @else if $breakpoint == "lg" { 101 | @media #{$breakpoint-lg-up} { 102 | display: none; 103 | } 104 | } @else if $breakpoint == "lg-only" { 105 | @media #{$breakpoint-lg-only} { 106 | display: none; 107 | } 108 | } @else if $breakpoint == "xl" { 109 | @media #{$breakpoint-xl-up} { 110 | display: none; 111 | } 112 | } @else { 113 | @warn "hide mixin arg must be one of the existing breakpoints or ranges (#{$breakpoint-all-prefixes})"; 114 | } 115 | } 116 | -------------------------------------------------------------------------------- /app/styles/library/mixins/main.scss: -------------------------------------------------------------------------------- 1 | // mixins/main.scss 2 | 3 | @import "visibility-mixins"; 4 | @import "grid-mixins"; 5 | -------------------------------------------------------------------------------- /app/styles/library/variables/_grid-variables.scss: -------------------------------------------------------------------------------- 1 | // Grid 2 | $grid-columns: 12 !default; // Set number of columns in the grid 3 | 4 | $xs-max: 40rem !default; // Set xs breakpoint's max width 5 | $sm-max: 64rem !default; // Set sm breakpoint's max width 6 | $md-max: 90rem !default; // Set md breakpoint's max width 7 | $lg-max: 120rem !default; // Set lg breakpoint's max width 8 | 9 | $gutter: 1rem !default; // Set gutter size 10 | 11 | $content-well-max-width: "none" !default; // Set the max-width of the content well 12 | 13 | $sm-start: ($xs-max + 1); // Generate sm breakpoint's min width 14 | $md-start: ($sm-max + 1); // Generate md breakpoint's min width 15 | $lg-start: ($md-max + 1); // Generate lg breakpoint's min width 16 | $xl-start: ($lg-max + 1); // Generate xl breakpoint's min width 17 | 18 | // Breakpoints 19 | // Create breakpoint range statements to be used in media queries 20 | $breakpoint-xs-only: "only screen and (max-width: #{$xs-max})"; // 0 -> xs-max range 21 | $breakpoint-sm-up: "only screen and (min-width: #{$sm-start})"; // sm-start -> up range 22 | $breakpoint-sm-only: "only screen and (min-width: #{$sm-start}) and (max-width: #{$sm-max})"; // sm-start -> sm-max range 23 | $breakpoint-md-up: "only screen and (min-width: #{$md-start})"; // md-start -> up range 24 | $breakpoint-md-only: "only screen and (min-width: #{$md-start}) and (max-width: #{$md-max})"; // md-start -> md-max range 25 | $breakpoint-lg-up: "only screen and (min-width: #{$lg-start})"; // lg-start -> up range 26 | $breakpoint-lg-only: "only screen and (min-width: #{$lg-start}) and (max-width: #{$lg-max})"; // lg-start -> lg-max range 27 | $breakpoint-xl-up: "only screen and (min-width: #{$xl-start})"; // xl-start -> up range 28 | 29 | $breakpoints-all: ($breakpoint-xs-only, $breakpoint-sm-up, $breakpoint-sm-only, $breakpoint-md-up, $breakpoint-md-only, $breakpoint-lg-up, $breakpoint-lg-only, $breakpoint-xl-up); 30 | $breakpoint-ups: ($breakpoint-sm-up, $breakpoint-md-up, $breakpoint-lg-up, $breakpoint-xl-up); 31 | $breakpoint-all-prefixes: ("xs", "xs-only", "sm", "sm-only", "md", "md-only", "lg", "lg-only", "xl"); 32 | $breakpoint-up-prefixes: ("xs", "sm", "md", "lg", "xl"); 33 | -------------------------------------------------------------------------------- /app/styles/library/variables/main.scss: -------------------------------------------------------------------------------- 1 | // variables/main.scss 2 | 3 | @import "grid-variables"; 4 | -------------------------------------------------------------------------------- /app/styles/main.scss: -------------------------------------------------------------------------------- 1 | // bower:scss 2 | // endbower 3 | 4 | @import "library/main.scss"; // Sass-Flexbox library 5 | @import "reset"; 6 | @import "border-box-all"; 7 | @import "fonts"; 8 | @import "variables/main.scss"; 9 | @import "mixins/main.scss"; 10 | @import "element-defaults"; 11 | @import "unique"; 12 | -------------------------------------------------------------------------------- /app/styles/mixins/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/styles/mixins/.DS_Store -------------------------------------------------------------------------------- /app/styles/mixins/_text-mixins.scss: -------------------------------------------------------------------------------- 1 | // Text Mixins 2 | 3 | @mixin font-size-line-height($size) { 4 | font-size: $size; 5 | line-height: ($line-height-multiplier * $size); 6 | } 7 | -------------------------------------------------------------------------------- /app/styles/mixins/main.scss: -------------------------------------------------------------------------------- 1 | // mixins/main.scss 2 | 3 | @import "text-mixins"; 4 | -------------------------------------------------------------------------------- /app/styles/variables/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/app/styles/variables/.DS_Store -------------------------------------------------------------------------------- /app/styles/variables/_color-variables.scss: -------------------------------------------------------------------------------- 1 | // Colors 2 | $white: #ffffff; 3 | $black: #000000; 4 | $slate: #7B7B7B; 5 | $darkslate: #303030; 6 | $lightslate: #F5F5F5; 7 | $bronze: #88714D; 8 | $lightbronze: lighten($bronze, 52%); 9 | 10 | $coral: #EA526F; 11 | $burgandy: #63474D; 12 | $gold: #FFC972; 13 | $slateblue: #7C9EB2; 14 | $charcoal: #585B56; 15 | 16 | $coral-lt: lighten($coral, 10%); 17 | $burgandy-lt: lighten($burgandy, 10%); 18 | $gold-lt: #937D64; 19 | $slateblue-lt: lighten($slateblue, 10%); 20 | $charcoal-lt: lighten($charcoal, 10%); 21 | 22 | $block-colors: ($coral, $burgandy, $gold, $slateblue, $charcoal); 23 | $block-colors-lt: ($coral-lt, $burgandy-lt, $gold-lt, $slateblue-lt, $charcoal-lt); 24 | -------------------------------------------------------------------------------- /app/styles/variables/_text-variables.scss: -------------------------------------------------------------------------------- 1 | // fonts 2 | $majesti: "majesti-banner-book", serif; 3 | $graphik: "graphik-regular", helvetica, sans-serif; 4 | $graphik-medium: "graphik-medium", helvetica, sans-serif; 5 | $graphik-semibold: "graphik-semibold", helvetica, sans-serif; 6 | $pt-mono: "PT Mono", monospace; 7 | 8 | // text 9 | $line-height-multiplier: 1.8; 10 | -------------------------------------------------------------------------------- /app/styles/variables/main.scss: -------------------------------------------------------------------------------- 1 | // variables/main.scss 2 | 3 | @import "text-variables"; 4 | @import "color-variables"; 5 | -------------------------------------------------------------------------------- /app/views/classes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Sass Flexbox Grid 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 47 | 48 | 70 | 71 | 88 | 89 |
90 |
91 |
92 |
93 |

Classes

94 |

95 | Sass Flexbox Grid provides a library of utility classes for defining rows, columns and visibility. Using flexbox's powerful features, you can easily create dynamic layouts. 96 |

97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 | 105 |
106 |
107 |
    108 |
  • 109 | 110 |
    • 111 |
112 |
113 |
114 | 115 | 133 | 134 | 135 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | -------------------------------------------------------------------------------- /app/views/mixins/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Sass Flexbox Grid 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 47 | 48 | 70 | 71 | 88 | 89 |
90 |
91 |
92 |
93 |

Mixins

94 |

95 | Mixins are available for every Sass Flexbox Grid declaration. 96 |

97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 | 106 |
107 |
108 |
    109 |
  • 110 | 111 |
    • 112 |
113 |
114 |
115 | 116 | 134 | 135 | 136 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | -------------------------------------------------------------------------------- /app/views/variables.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Sass Flexbox Grid 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 47 | 48 | 75 | 76 | 96 | 97 |
98 |
99 |
100 |
101 |

Variables

102 |

103 | Customizable Sass variables allow you to create a grid and responsive framework to meet your needs. 104 |

105 |
106 |
107 |
108 |
109 |
110 |
111 | 112 |
113 |
114 |
    115 |
  • 116 | 117 |
    • 118 |
119 |
120 |
121 | 122 | 140 | 141 | 142 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | -------------------------------------------------------------------------------- /app/views/variables/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Sass Flexbox Grid 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 47 | 48 | 70 | 71 | 88 | 89 |
90 |
91 |
92 |
93 |

Variables

94 |

95 | Customizable Sass variables allow you to create a grid and responsive framework to meet your needs. 96 |

97 |
98 |
99 |
100 |
101 |
102 |
103 | 104 |
105 |
106 |
    107 |
  • 108 | 109 |
    • 110 |
111 |
112 |
113 | 114 | 132 | 133 | 134 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "web-boilerplate", 3 | "private": true, 4 | "dependencies": { 5 | "jquery": "~2.1.1", 6 | "modernizr": "~2.8.1", 7 | "marked": "^0.3.6", 8 | "handlebars": "^4.0.5" 9 | }, 10 | "devDependencies": { 11 | "chai": "^3.5.0", 12 | "mocha": "^3.2.0", 13 | "particles.js": "^2.0.0" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /dist/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/.DS_Store -------------------------------------------------------------------------------- /dist/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | #ffffff -------------------------------------------------------------------------------- /dist/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/favicon.ico -------------------------------------------------------------------------------- /dist/fonts/Graphik/Graphik-Black.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/fonts/Graphik/Graphik-Black.otf -------------------------------------------------------------------------------- /dist/fonts/Graphik/Graphik-BlackItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/fonts/Graphik/Graphik-BlackItalic.otf -------------------------------------------------------------------------------- /dist/fonts/Graphik/Graphik-Bold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/fonts/Graphik/Graphik-Bold.otf -------------------------------------------------------------------------------- /dist/fonts/Graphik/Graphik-BoldItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/fonts/Graphik/Graphik-BoldItalic.otf -------------------------------------------------------------------------------- /dist/fonts/Graphik/Graphik-Extralight.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/fonts/Graphik/Graphik-Extralight.otf -------------------------------------------------------------------------------- /dist/fonts/Graphik/Graphik-ExtralightItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/fonts/Graphik/Graphik-ExtralightItalic.otf -------------------------------------------------------------------------------- /dist/fonts/Graphik/Graphik-Light.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/fonts/Graphik/Graphik-Light.otf -------------------------------------------------------------------------------- /dist/fonts/Graphik/Graphik-LightItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/fonts/Graphik/Graphik-LightItalic.otf -------------------------------------------------------------------------------- /dist/fonts/Graphik/Graphik-Medium.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/fonts/Graphik/Graphik-Medium.otf -------------------------------------------------------------------------------- /dist/fonts/Graphik/Graphik-MediumItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/fonts/Graphik/Graphik-MediumItalic.otf -------------------------------------------------------------------------------- /dist/fonts/Graphik/Graphik-Regular.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/fonts/Graphik/Graphik-Regular.otf -------------------------------------------------------------------------------- /dist/fonts/Graphik/Graphik-RegularItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/fonts/Graphik/Graphik-RegularItalic.otf -------------------------------------------------------------------------------- /dist/fonts/Graphik/Graphik-Semibold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/fonts/Graphik/Graphik-Semibold.otf -------------------------------------------------------------------------------- /dist/fonts/Graphik/Graphik-SemiboldItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/fonts/Graphik/Graphik-SemiboldItalic.otf -------------------------------------------------------------------------------- /dist/fonts/Graphik/Graphik-Super.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/fonts/Graphik/Graphik-Super.otf -------------------------------------------------------------------------------- /dist/fonts/Graphik/Graphik-SuperItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/fonts/Graphik/Graphik-SuperItalic.otf -------------------------------------------------------------------------------- /dist/fonts/Graphik/Graphik-Thin.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/fonts/Graphik/Graphik-Thin.otf -------------------------------------------------------------------------------- /dist/fonts/Graphik/Graphik-ThinItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/fonts/Graphik/Graphik-ThinItalic.otf -------------------------------------------------------------------------------- /dist/fonts/Majesti-Banner/Majesti-Banner-Bold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/fonts/Majesti-Banner/Majesti-Banner-Bold.otf -------------------------------------------------------------------------------- /dist/fonts/Majesti-Banner/Majesti-Banner-BoldItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/fonts/Majesti-Banner/Majesti-Banner-BoldItalic.otf -------------------------------------------------------------------------------- /dist/fonts/Majesti-Banner/Majesti-Banner-Book.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/fonts/Majesti-Banner/Majesti-Banner-Book.otf -------------------------------------------------------------------------------- /dist/fonts/Majesti-Banner/Majesti-Banner-BookItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/fonts/Majesti-Banner/Majesti-Banner-BookItalic.otf -------------------------------------------------------------------------------- /dist/fonts/Majesti-Banner/Majesti-Banner-Heavy.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/fonts/Majesti-Banner/Majesti-Banner-Heavy.otf -------------------------------------------------------------------------------- /dist/fonts/Majesti-Banner/Majesti-Banner-HeavyItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/fonts/Majesti-Banner/Majesti-Banner-HeavyItalic.otf -------------------------------------------------------------------------------- /dist/fonts/Majesti-Banner/Majesti-Banner-Light.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/fonts/Majesti-Banner/Majesti-Banner-Light.otf -------------------------------------------------------------------------------- /dist/fonts/Majesti-Banner/Majesti-Banner-LightItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/fonts/Majesti-Banner/Majesti-Banner-LightItalic.otf -------------------------------------------------------------------------------- /dist/fonts/Majesti-Banner/Majesti-Banner-Medium.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/fonts/Majesti-Banner/Majesti-Banner-Medium.otf -------------------------------------------------------------------------------- /dist/fonts/Majesti-Banner/Majesti-Banner-MediumItalic.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/fonts/Majesti-Banner/Majesti-Banner-MediumItalic.otf -------------------------------------------------------------------------------- /dist/images/favicons/android-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/images/favicons/android-icon-144x144.png -------------------------------------------------------------------------------- /dist/images/favicons/android-icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/images/favicons/android-icon-192x192.png -------------------------------------------------------------------------------- /dist/images/favicons/android-icon-36x36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/images/favicons/android-icon-36x36.png -------------------------------------------------------------------------------- /dist/images/favicons/android-icon-48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/images/favicons/android-icon-48x48.png -------------------------------------------------------------------------------- /dist/images/favicons/android-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/images/favicons/android-icon-72x72.png -------------------------------------------------------------------------------- /dist/images/favicons/android-icon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/images/favicons/android-icon-96x96.png -------------------------------------------------------------------------------- /dist/images/favicons/apple-icon-114x114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/images/favicons/apple-icon-114x114.png -------------------------------------------------------------------------------- /dist/images/favicons/apple-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/images/favicons/apple-icon-120x120.png -------------------------------------------------------------------------------- /dist/images/favicons/apple-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/images/favicons/apple-icon-144x144.png -------------------------------------------------------------------------------- /dist/images/favicons/apple-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/images/favicons/apple-icon-152x152.png -------------------------------------------------------------------------------- /dist/images/favicons/apple-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/images/favicons/apple-icon-180x180.png -------------------------------------------------------------------------------- /dist/images/favicons/apple-icon-57x57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/images/favicons/apple-icon-57x57.png -------------------------------------------------------------------------------- /dist/images/favicons/apple-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/images/favicons/apple-icon-60x60.png -------------------------------------------------------------------------------- /dist/images/favicons/apple-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/images/favicons/apple-icon-72x72.png -------------------------------------------------------------------------------- /dist/images/favicons/apple-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/images/favicons/apple-icon-76x76.png -------------------------------------------------------------------------------- /dist/images/favicons/apple-icon-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/images/favicons/apple-icon-precomposed.png -------------------------------------------------------------------------------- /dist/images/favicons/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/images/favicons/apple-icon.png -------------------------------------------------------------------------------- /dist/images/favicons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/images/favicons/favicon-16x16.png -------------------------------------------------------------------------------- /dist/images/favicons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/images/favicons/favicon-32x32.png -------------------------------------------------------------------------------- /dist/images/favicons/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/images/favicons/favicon-96x96.png -------------------------------------------------------------------------------- /dist/images/favicons/ms-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/images/favicons/ms-icon-144x144.png -------------------------------------------------------------------------------- /dist/images/favicons/ms-icon-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/images/favicons/ms-icon-150x150.png -------------------------------------------------------------------------------- /dist/images/favicons/ms-icon-310x310.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/images/favicons/ms-icon-310x310.png -------------------------------------------------------------------------------- /dist/images/favicons/ms-icon-70x70.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/images/favicons/ms-icon-70x70.png -------------------------------------------------------------------------------- /dist/images/icons/icon-down-arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /dist/images/icons/icon-email.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ic_email_black_24px 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /dist/images/icons/icon-facebook-custom.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Combined Shape 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /dist/images/icons/icon-facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/images/icons/icon-fingerprint.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 11 | 14 | 18 | 22 | 26 | 30 | 33 | 36 | 39 | 41 | 44 | 47 | 51 | 54 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /dist/images/icons/icon-instagram-custom.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Page 1 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /dist/images/icons/icon-instagram.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/images/icons/icon-linkedin-custom.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Combined Shape 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /dist/images/icons/icon-linkedin.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/images/icons/icon-map-pin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ic_place_black_24px 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /dist/images/icons/icon-mouse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/dist/images/icons/icon-mouse.png -------------------------------------------------------------------------------- /dist/images/icons/icon-phone.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ic_phone_black_24px 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /dist/images/icons/icon-twitter-custom.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Combined Shape 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /dist/images/icons/icon-twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "App", 3 | "icons": [ 4 | { 5 | "src": "\/android-icon-36x36.png", 6 | "sizes": "36x36", 7 | "type": "image\/png", 8 | "density": "0.75" 9 | }, 10 | { 11 | "src": "\/android-icon-48x48.png", 12 | "sizes": "48x48", 13 | "type": "image\/png", 14 | "density": "1.0" 15 | }, 16 | { 17 | "src": "\/android-icon-72x72.png", 18 | "sizes": "72x72", 19 | "type": "image\/png", 20 | "density": "1.5" 21 | }, 22 | { 23 | "src": "\/android-icon-96x96.png", 24 | "sizes": "96x96", 25 | "type": "image\/png", 26 | "density": "2.0" 27 | }, 28 | { 29 | "src": "\/android-icon-144x144.png", 30 | "sizes": "144x144", 31 | "type": "image\/png", 32 | "density": "3.0" 33 | }, 34 | { 35 | "src": "\/android-icon-192x192.png", 36 | "sizes": "192x192", 37 | "type": "image\/png", 38 | "density": "4.0" 39 | } 40 | ] 41 | } -------------------------------------------------------------------------------- /dist/robots.txt: -------------------------------------------------------------------------------- 1 | # robotstxt.org/ 2 | 3 | User-agent: * 4 | Disallow: 5 | -------------------------------------------------------------------------------- /dist/views/classes.html: -------------------------------------------------------------------------------- 1 | Sass Flexbox Grid

Classes

Sass Flexbox Grid provides a library of utility classes for defining rows, columns and visibility. Using flexbox's powerful features, you can easily create dynamic layouts.

-------------------------------------------------------------------------------- /dist/views/documentation.html: -------------------------------------------------------------------------------- 1 | Sass Flexbox Grid - Documentation

Documentation

Here's everything you need to know to get started.

Direct Download

All CSS, minified CSS and Sass files are available for direct download here.

General Usage

Refer to the Overview page for examples and descriptions of basic usage.

A complete list of classes is available on the Classes page.

All Sass Variables and Mixins can be found on their respective pages.

-------------------------------------------------------------------------------- /dist/views/mixins.html: -------------------------------------------------------------------------------- 1 | Sass Flexbox Grid

Mixins

Mixins are available for every Sass Flexbox Grid declaration.

-------------------------------------------------------------------------------- /dist/views/variables.html: -------------------------------------------------------------------------------- 1 | Sass Flexbox Grid

Variables

Customizable Sass variables allow you to create a grid and responsive framework to meet your needs.

-------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@drewbot/sass-flexbox-grid", 3 | "version": "2.0.7", 4 | "description": "A responsive sass grid library built with flexbox", 5 | "keywords": [ 6 | "sass", 7 | "scss", 8 | "css", 9 | "flex", 10 | "box", 11 | "flexbox", 12 | "grid", 13 | "library", 14 | "responsive", 15 | "mobile first", 16 | "visibility", 17 | "hide", 18 | "show", 19 | "custom", 20 | "customize" 21 | ], 22 | "homepage": "http://sassflexboxgrid.com/", 23 | "license": "MIT", 24 | "author": "Drew Botka", 25 | "main": "app.js", 26 | "repository": { 27 | "type": "git", 28 | "url": "https://github.com/drewbot/sass-flexbox-grid" 29 | }, 30 | "engines": { 31 | "node": ">=4" 32 | }, 33 | "scripts": { 34 | "serve": "gulp clean && gulp serve", 35 | "build": "gulp clean && gulp build-lite", 36 | "start": "npm run build" 37 | }, 38 | "devDependencies": { 39 | "babel-core": "^6.4.0", 40 | "babel-preset-es2015": "^6.3.13", 41 | "babel-register": "^6.5.2", 42 | "babelify": "^7.3.0", 43 | "browser-sync": "^2.2.1", 44 | "browserify": "^13.1.1", 45 | "del": "^1.1.1", 46 | "express": "^4.14.1", 47 | "gulp": "^3.9.0", 48 | "gulp-autoprefixer": "^3.0.1", 49 | "gulp-babel": "^6.1.1", 50 | "gulp-cache": "^0.4.2", 51 | "gulp-cssnano": "^2.0.0", 52 | "gulp-eslint": "^2.0.0", 53 | "gulp-htmlmin": "^1.3.0", 54 | "gulp-if": "^2.0.0", 55 | "gulp-imagemin": "^2.2.1", 56 | "gulp-livereload": "^3.8.1", 57 | "gulp-load-plugins": "^0.10.0", 58 | "gulp-plumber": "^1.0.1", 59 | "gulp-rename": "^1.2.2", 60 | "gulp-sass": "^2.0.0", 61 | "gulp-size": "^1.2.1", 62 | "gulp-sourcemaps": "^1.5.0", 63 | "gulp-uglify": "^1.1.0", 64 | "gulp-useref": "^3.0.0", 65 | "gulp-util": "^3.0.7", 66 | "gulp-zip": "^4.0.0", 67 | "main-bower-files": "^2.5.0", 68 | "merge": "^1.2.0", 69 | "run-sequence": "^1.2.2", 70 | "vinyl-buffer": "^1.0.0", 71 | "vinyl-source-stream": "^1.1.0", 72 | "watchify": "^3.7.0", 73 | "wiredep": "^2.2.2" 74 | }, 75 | "eslintConfig": { 76 | "env": { 77 | "es6": true, 78 | "node": true, 79 | "browser": true 80 | }, 81 | "rules": { 82 | "quotes": [ 83 | 2, 84 | "single" 85 | ] 86 | } 87 | }, 88 | "dependencies": {} 89 | } 90 | -------------------------------------------------------------------------------- /public/sass-flexbox.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewbot/sass-flexbox-grid/9042c7cb4b3da4055dc08f8779e4155e3d8e8c5c/public/sass-flexbox.zip -------------------------------------------------------------------------------- /public/sass-flexbox/scss/_grid.scss: -------------------------------------------------------------------------------- 1 | // Creds to https://github.com/kristoferjoseph/flexboxgrid 2 | // No gutters 3 | // No text alignment with justified container classes (center-xs, for example) 4 | 5 | .row { 6 | @include row(); 7 | } 8 | 9 | .row.reverse { 10 | @include row-reverse(); 11 | } 12 | 13 | .row.natural-height { 14 | @include row-natural-height(); 15 | } 16 | 17 | .row.flex-column { 18 | @include row-flex-column(); 19 | } 20 | 21 | .col { 22 | @include col(); 23 | } 24 | 25 | .col.reverse { 26 | @include col-reverse(); 27 | } 28 | 29 | .first { 30 | order: -1; 31 | } 32 | 33 | .last { 34 | order: 1; 35 | } 36 | 37 | .align-start { 38 | align-self: flex-start; 39 | } 40 | 41 | .align-end { 42 | align-self: flex-end; 43 | } 44 | 45 | .align-center { 46 | align-self: center; 47 | } 48 | 49 | .align-baseline { 50 | align-self: baseline; 51 | } 52 | 53 | .align-stretch { 54 | align-self: stretch; 55 | } 56 | 57 | // Mixin to run inside of for loop - creates col/breakpoint classes * Not for developer use * 58 | @mixin col-factory($thisPrefix) { 59 | .col-#{$thisPrefix} { 60 | box-sizing: border-box; 61 | flex-grow: 1; 62 | flex-basis: 0; 63 | max-width: 100%; 64 | padding: $gutter; 65 | } 66 | @for $i from 1 through $grid-columns { 67 | .col-#{$thisPrefix}-#{$i} { 68 | box-sizing: border-box; 69 | flex-basis: 100% / $grid-columns * $i; 70 | max-width: 100% / $grid-columns * $i; 71 | padding: $gutter; 72 | } 73 | .col-#{$thisPrefix}-offset-#{$i} { 74 | margin-left: 100% / $grid-columns * $i; 75 | } 76 | } 77 | .row.start-#{$thisPrefix} { 78 | justify-content: flex-start; 79 | } 80 | .row.center-#{$thisPrefix} { 81 | justify-content: center; 82 | } 83 | .row.end-#{$thisPrefix} { 84 | justify-content: flex-end; 85 | } 86 | .row.top-#{$thisPrefix} { 87 | align-items: flex-start; 88 | } 89 | .row.middle-#{$thisPrefix} { 90 | align-items: center; 91 | } 92 | .row.bottom-#{$thisPrefix} { 93 | align-items: flex-end; 94 | } 95 | .row.around-#{$thisPrefix} { 96 | justify-content: space-around; 97 | } 98 | .row.between-#{$thisPrefix} { 99 | justify-content: space-between; 100 | } 101 | .first-#{$thisPrefix} { 102 | order: -1; 103 | } 104 | .last-#{$thisPrefix} { 105 | order: 1; 106 | } 107 | } // Mixin to run inside of for loop - creates col/breakpoint classes 108 | 109 | @for $i from 1 through length($breakpoint-up-prefixes) { 110 | $thisPrefix: nth($breakpoint-up-prefixes, $i); 111 | @if $thisPrefix == "xs" { 112 | @include col-factory($thisPrefix); 113 | } @else if $thisPrefix == "sm" { 114 | @media #{$breakpoint-sm-up} { 115 | @include col-factory($thisPrefix); 116 | } 117 | } @else if $thisPrefix == "md" { 118 | @media #{$breakpoint-md-up} { 119 | @include col-factory($thisPrefix); 120 | } 121 | } @else if $thisPrefix == "lg" { 122 | @media #{$breakpoint-lg-up} { 123 | @include col-factory($thisPrefix); 124 | } 125 | } @else if $thisPrefix == "xl" { 126 | @media #{$breakpoint-xl-up} { 127 | @include col-factory($thisPrefix); 128 | } 129 | } 130 | } 131 | 132 | .col-gutter-lr { 133 | padding: 0 $gutter; 134 | } 135 | 136 | .col-no-gutter { 137 | padding: 0; 138 | } 139 | -------------------------------------------------------------------------------- /public/sass-flexbox/scss/_visibility.scss: -------------------------------------------------------------------------------- 1 | 2 | .show { 3 | display: block !important; 4 | } 5 | 6 | .row.show { 7 | display: -webkit-flex !important; 8 | display: -ms-flexbox !important; 9 | display: flex !important; 10 | } 11 | 12 | .hide { 13 | display: none !important; 14 | } 15 | 16 | // Mixin to run inside of for loop - creates visibility classes * Not for developer use * 17 | @mixin vis-factory($thisPrefix) { 18 | .show-#{$thisPrefix} { 19 | display: block !important; 20 | } 21 | .row.show-#{$thisPrefix} { 22 | display: -webkit-flex !important; 23 | display: -ms-flexbox !important; 24 | display: flex !important; 25 | } 26 | .hide-#{$thisPrefix} { 27 | display: none !important; 28 | } 29 | } // Mixin to run inside of for loop - creates visibility classes * Not for developer use * 30 | 31 | @for $i from 1 through length($breakpoint-all-prefixes) { 32 | $thisPrefix: nth($breakpoint-all-prefixes, $i); 33 | @if $thisPrefix == "xs" { 34 | @include vis-factory($thisPrefix); 35 | } @else if $thisPrefix == "xs-only" { 36 | @media #{$breakpoint-xs-only} { 37 | @include vis-factory($thisPrefix); 38 | } 39 | } @else if $thisPrefix == "sm" { 40 | @media #{$breakpoint-sm-up} { 41 | @include vis-factory($thisPrefix); 42 | } 43 | } @else if $thisPrefix == "sm-only" { 44 | @media #{$breakpoint-sm-only} { 45 | @include vis-factory($thisPrefix); 46 | } 47 | } @else if $thisPrefix == "md" { 48 | @media #{$breakpoint-md-up} { 49 | @include vis-factory($thisPrefix); 50 | } 51 | } @else if $thisPrefix == "md-only" { 52 | @media #{$breakpoint-md-only} { 53 | @include vis-factory($thisPrefix); 54 | } 55 | } @else if $thisPrefix == "lg" { 56 | @media #{$breakpoint-lg-up} { 57 | @include vis-factory($thisPrefix); 58 | } 59 | } @else if $thisPrefix == "lg-only" { 60 | @media #{$breakpoint-lg-only} { 61 | @include vis-factory($thisPrefix); 62 | } 63 | } @else if $thisPrefix == "xl" { 64 | @media #{$breakpoint-xl-up} { 65 | @include vis-factory($thisPrefix); 66 | } 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /public/sass-flexbox/scss/main.scss: -------------------------------------------------------------------------------- 1 | @import "variables/main.scss"; 2 | @import "mixins/main.scss"; 3 | @import "grid"; 4 | @import "visibility"; // Visibility last for precedence 5 | -------------------------------------------------------------------------------- /public/sass-flexbox/scss/mixins/_visibility-mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin show($breakpoint, $row) { 2 | @if $breakpoint == "xs" { 3 | @if $row == "true" or $row == "row" { 4 | display: flex; 5 | } @else { 6 | display: block; 7 | } 8 | } @else if $breakpoint == "xs-only" { 9 | @media #{$breakpoint-xs-only} { 10 | @if $row == "true" or $row == "row" { 11 | display: flex; 12 | } @else { 13 | display: block; 14 | } 15 | } 16 | } @else if $breakpoint == "sm" { 17 | @media #{$breakpoint-sm-up} { 18 | @if $row == "true" or $row == "row" { 19 | display: flex; 20 | } @else { 21 | display: block; 22 | } 23 | } 24 | } @else if $breakpoint == "sm-only" { 25 | @media #{$breakpoint-sm-only} { 26 | @if $row == "true" or $row == "row" { 27 | display: flex; 28 | } @else { 29 | display: block; 30 | } 31 | } 32 | } @else if $breakpoint == "md" { 33 | @media #{$breakpoint-md-up} { 34 | @if $row == "true" or $row == "row" { 35 | display: flex; 36 | } @else { 37 | display: block; 38 | } 39 | } 40 | } @else if $breakpoint == "md-only" { 41 | @media #{$breakpoint-md-only} { 42 | @if $row == "true" or $row == "row" { 43 | display: flex; 44 | } @else { 45 | display: block; 46 | } 47 | } 48 | } @else if $breakpoint == "lg" { 49 | @media #{$breakpoint-lg-up} { 50 | @if $row == "true" or $row == "row" { 51 | display: flex; 52 | } @else { 53 | display: block; 54 | } 55 | } 56 | } @else if $breakpoint == "lg-only" { 57 | @media #{$breakpoint-lg-only} { 58 | @if $row == "true" or $row == "row" { 59 | display: flex; 60 | } @else { 61 | display: block; 62 | } 63 | } 64 | } @else if $breakpoint == "xl" { 65 | @media #{$breakpoint-xl-up} { 66 | @if $row == "true" or $row == "row" { 67 | display: flex; 68 | } @else { 69 | display: block; 70 | } 71 | } 72 | } @else { 73 | @warn "show mixin arg must be one of the existing breakpoints or ranges (#{$breakpoint-all-prefixes})"; 74 | } 75 | } 76 | 77 | @mixin hide($breakpoint) { 78 | @if $breakpoint == "xs" { 79 | display: none; 80 | } @else if $breakpoint == "xs-only" { 81 | @media #{$breakpoint-xs-only} { 82 | display: none; 83 | } 84 | } @else if $breakpoint == "sm" { 85 | @media #{$breakpoint-sm-up} { 86 | display: none; 87 | } 88 | } @else if $breakpoint == "sm-only" { 89 | @media #{$breakpoint-sm-only} { 90 | display: none; 91 | } 92 | } @else if $breakpoint == "md" { 93 | @media #{$breakpoint-md-up} { 94 | display: none; 95 | } 96 | } @else if $breakpoint == "md-only" { 97 | @media #{$breakpoint-md-only} { 98 | display: none; 99 | } 100 | } @else if $breakpoint == "lg" { 101 | @media #{$breakpoint-lg-up} { 102 | display: none; 103 | } 104 | } @else if $breakpoint == "lg-only" { 105 | @media #{$breakpoint-lg-only} { 106 | display: none; 107 | } 108 | } @else if $breakpoint == "xl" { 109 | @media #{$breakpoint-xl-up} { 110 | display: none; 111 | } 112 | } @else { 113 | @warn "hide mixin arg must be one of the existing breakpoints or ranges (#{$breakpoint-all-prefixes})"; 114 | } 115 | } 116 | -------------------------------------------------------------------------------- /public/sass-flexbox/scss/mixins/main.scss: -------------------------------------------------------------------------------- 1 | // mixins/main.scss 2 | 3 | @import "visibility-mixins"; 4 | @import "grid-mixins"; 5 | -------------------------------------------------------------------------------- /public/sass-flexbox/scss/variables/_grid-variables.scss: -------------------------------------------------------------------------------- 1 | // Grid 2 | $grid-columns: 12 !default; // Set number of columns in the grid 3 | 4 | $xs-max: 40rem !default; // Set xs breakpoint's max width 5 | $sm-max: 64rem !default; // Set sm breakpoint's max width 6 | $md-max: 90rem !default; // Set md breakpoint's max width 7 | $lg-max: 120rem !default; // Set lg breakpoint's max width 8 | 9 | $gutter: 1rem !default; // Set gutter size 10 | 11 | $content-well-max-width: "none" !default; // Set the max-width of the content well 12 | 13 | $sm-start: ($xs-max + 1); // Generate sm breakpoint's min width 14 | $md-start: ($sm-max + 1); // Generate md breakpoint's min width 15 | $lg-start: ($md-max + 1); // Generate lg breakpoint's min width 16 | $xl-start: ($lg-max + 1); // Generate xl breakpoint's min width 17 | 18 | // Breakpoints 19 | // Create breakpoint range statements to be used in media queries 20 | $breakpoint-xs-only: "only screen and (max-width: #{$xs-max})"; // 0 -> xs-max range 21 | $breakpoint-sm-up: "only screen and (min-width: #{$sm-start})"; // sm-start -> up range 22 | $breakpoint-sm-only: "only screen and (min-width: #{$sm-start}) and (max-width: #{$sm-max})"; // sm-start -> sm-max range 23 | $breakpoint-md-up: "only screen and (min-width: #{$md-start})"; // md-start -> up range 24 | $breakpoint-md-only: "only screen and (min-width: #{$md-start}) and (max-width: #{$md-max})"; // md-start -> md-max range 25 | $breakpoint-lg-up: "only screen and (min-width: #{$lg-start})"; // lg-start -> up range 26 | $breakpoint-lg-only: "only screen and (min-width: #{$lg-start}) and (max-width: #{$lg-max})"; // lg-start -> lg-max range 27 | $breakpoint-xl-up: "only screen and (min-width: #{$xl-start})"; // xl-start -> up range 28 | 29 | $breakpoints-all: ($breakpoint-xs-only, $breakpoint-sm-up, $breakpoint-sm-only, $breakpoint-md-up, $breakpoint-md-only, $breakpoint-lg-up, $breakpoint-lg-only, $breakpoint-xl-up); 30 | $breakpoint-ups: ($breakpoint-sm-up, $breakpoint-md-up, $breakpoint-lg-up, $breakpoint-xl-up); 31 | $breakpoint-all-prefixes: ("xs", "xs-only", "sm", "sm-only", "md", "md-only", "lg", "lg-only", "xl"); 32 | $breakpoint-up-prefixes: ("xs", "sm", "md", "lg", "xl"); 33 | -------------------------------------------------------------------------------- /public/sass-flexbox/scss/variables/main.scss: -------------------------------------------------------------------------------- 1 | // variables/main.scss 2 | 3 | @import "grid-variables"; 4 | -------------------------------------------------------------------------------- /test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mocha Spec Runner 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 18 | 19 | 20 | 21 | 22 | 23 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /test/spec/test.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | 4 | describe('Give it some context', function () { 5 | describe('maybe a bit more context here', function () { 6 | it('should run here few assertions', function () { 7 | 8 | }); 9 | }); 10 | }); 11 | })(); 12 | --------------------------------------------------------------------------------