diff --git a/.babelrc b/.babelrc --- a/.babelrc +++ b/.babelrc @@ -1,4 +1,6 @@ { - "presets": ["es2015"], + "presets": ["@babel/preset-env"], "compact": false } + + diff --git a/.bowerrc b/.bowerrc deleted file mode 100644 --- a/.bowerrc +++ /dev/null @@ -1,3 +0,0 @@ -{ - "directory": "bower_components" -} diff --git a/.browserslistrc b/.browserslistrc new file mode 100644 --- /dev/null +++ b/.browserslistrc @@ -0,0 +1,5 @@ +# Browsers that we support +last 2 versions +ie >= 9 +ios >= 7 +android >= 4.4 diff --git a/.gitignore b/.gitignore --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,8 @@ .DS_Store -node_modules -npm-debug.log -bower_components dist *.swp + +# Node artifacts +node_modules +npm-debug.log +yarn.lock \ No newline at end of file diff --git a/config.yml b/config.yml --- a/config.yml +++ b/config.yml @@ -32,4 +32,4 @@ - "node_modules/motion-ui/src" # Paths to JavaScript entry points for webpack to bundle modules entries: - - "src/assets/js/app.js" + - "src/assets/js/app.js" \ No newline at end of file diff --git a/gulpfile.babel.js b/gulpfile.babel.js --- a/gulpfile.babel.js +++ b/gulpfile.babel.js @@ -6,12 +6,13 @@ import gulp from 'gulp'; import panini from 'panini'; import rimraf from 'rimraf'; -import sherpa from 'style-sherpa'; import yaml from 'js-yaml'; import fs from 'fs'; import webpackStream from 'webpack-stream'; import webpack2 from 'webpack'; import named from 'vinyl-named'; +import uncss from 'uncss'; +import autoprefixer from 'autoprefixer'; // Load all Gulp plugins into one variable const $ = plugins(); @@ -20,140 +21,143 @@ const PRODUCTION = !!(yargs.argv.production); // Load settings from settings.yml -const { COMPATIBILITY, PORT, TUNNEL, UNCSS_OPTIONS, PATHS } = loadConfig(); +const { COMPATIBILITY, PORT, UNCSS_OPTIONS, PATHS } = loadConfig(); function loadConfig() { - let ymlFile = fs.readFileSync('config.yml', 'utf8'); - return yaml.load(ymlFile); + let ymlFile = fs.readFileSync('config.yml', 'utf8'); + return yaml.load(ymlFile); } // Build the "dist" folder by running all of the below tasks +// Sass must be run later so UnCSS can search for used classes in the others assets. gulp.task('build', - gulp.series(clean, gulp.parallel(pages, sass, javascript, images, copy), styleGuide)); + gulp.series(clean, gulp.parallel(pages, javascript, images, copy), sass)); // Build the site, run the server, and watch for file changes gulp.task('default', - gulp.series('build', server, watch)); + gulp.series('build', server, watch)); // Delete the "dist" folder // This happens every time a build starts function clean(done) { - rimraf(PATHS.dist, done); + rimraf(PATHS.dist, done); } // Copy files out of the assets folder // This task skips over the "img", "js", and "scss" folders, which are parsed separately function copy() { - return gulp.src(PATHS.assets) - .pipe(gulp.dest(PATHS.dist + '/assets')); + return gulp.src(PATHS.assets) + .pipe(gulp.dest(PATHS.dist + '/assets')); } // Copy page templates into finished HTML files function pages() { - return gulp.src('src/pages/**/*.{html,hbs,handlebars}') - .pipe(panini({ - root: 'src/pages/', - layouts: 'src/layouts/', - partials: 'src/partials/', - data: 'src/data/', - helpers: 'src/helpers/' - })) - .pipe(gulp.dest(PATHS.dist)); + return gulp.src('src/pages/**/*.{html,hbs,handlebars}') + .pipe(panini({ + root: 'src/pages/', + layouts: 'src/layouts/', + partials: 'src/partials/', + data: 'src/data/', + helpers: 'src/helpers/' + })) + .pipe(gulp.dest(PATHS.dist)); } // Load updated HTML templates and partials into Panini function resetPages(done) { - panini.refresh(); - done(); -} - -// Generate a style guide from the Markdown content and HTML template in styleguide/ -function styleGuide(done) { - sherpa('src/styleguide/index.md', { - output: PATHS.dist + '/styleguide.html', - template: 'src/styleguide/template.html' - }, done); + panini.refresh(); + done(); } // Compile Sass into CSS // In production, the CSS is compressed function sass() { - return gulp.src('src/assets/scss/app.scss') - .pipe($.sourcemaps.init()) - .pipe($.sass({ - includePaths: PATHS.sass - }) - .on('error', $.sass.logError)) - .pipe($.autoprefixer({ - browsers: COMPATIBILITY - })) - // Comment in the pipe below to run UnCSS in production - //.pipe($.if(PRODUCTION, $.uncss(UNCSS_OPTIONS))) - .pipe($.if(PRODUCTION, $.cleanCss({ compatibility: 'ie9' }))) - .pipe($.if(!PRODUCTION, $.sourcemaps.write())) - .pipe(gulp.dest(PATHS.dist + '/assets/css')) - .pipe(browser.reload({ stream: true })); + + const postCssPlugins = [ + // Autoprefixer + autoprefixer({ browsers: COMPATIBILITY }), + + // UnCSS - Uncomment to remove unused styles in production + // PRODUCTION && uncss.postcssPlugin(UNCSS_OPTIONS), + ].filter(Boolean); + + return gulp.src('src/assets/scss/app.scss') + .pipe($.sourcemaps.init()) + .pipe($.sass({ + includePaths: PATHS.sass + }) + .on('error', $.sass.logError)) + .pipe($.postcss(postCssPlugins)) + .pipe($.if(PRODUCTION, $.cleanCss({ compatibility: 'ie9' }))) + .pipe($.if(!PRODUCTION, $.sourcemaps.write())) + .pipe(gulp.dest(PATHS.dist + '/assets/css')) + .pipe(browser.reload({ stream: true })); } let webpackConfig = { - module: { - rules: [ - { - test: /.js$/, - use: [ - { - loader: 'babel-loader' - } + mode: (PRODUCTION ? 'production' : 'development'), + module: { + rules: [ + { + test: /\.js$/, + use: { + loader: 'babel-loader', + options: { + presets: [ "@babel/preset-env" ], + compact: false + } + } + } ] - } - ] - } + }, + devtool: !PRODUCTION && 'source-map' } + // Combine JavaScript into one file // In production, the file is minified function javascript() { - return gulp.src(PATHS.entries) - .pipe(named()) - .pipe($.sourcemaps.init()) - .pipe(webpackStream(webpackConfig, webpack2)) - .pipe($.if(PRODUCTION, $.uglify() - .on('error', e => { console.log(e); }) - )) - .pipe($.if(!PRODUCTION, $.sourcemaps.write())) - .pipe(gulp.dest(PATHS.dist + '/assets/js')); + return gulp.src(PATHS.entries) + .pipe(named()) + .pipe($.sourcemaps.init()) + .pipe(webpackStream(webpackConfig, webpack2)) + .pipe($.if(PRODUCTION, $.uglify() + .on('error', e => { console.log(e); }) + )) + .pipe($.if(!PRODUCTION, $.sourcemaps.write())) + .pipe(gulp.dest(PATHS.dist + '/assets/js')); } // Copy images to the "dist" folder // In production, the images are compressed function images() { - return gulp.src('src/assets/img/**/*') - .pipe($.if(PRODUCTION, $.imagemin({ - progressive: true - }))) - .pipe(gulp.dest(PATHS.dist + '/assets/img')); + return gulp.src('src/assets/img/**/*') + .pipe($.if(PRODUCTION, $.imagemin([ + $.imagemin.jpegtran({ progressive: true }), + ]))) + .pipe(gulp.dest(PATHS.dist + '/assets/img')); } // Start a server with BrowserSync to preview the site in function server(done) { - browser.init({ - server: PATHS.dist, port: PORT, tunnel: TUNNEL - }); - done(); + browser.init({ + server: PATHS.dist, port: PORT + }, done); } // Reload the browser with BrowserSync function reload(done) { - browser.reload(); - done(); + browser.reload(); + done(); } // Watch for changes to static assets, pages, Sass, and JavaScript function watch() { - gulp.watch(PATHS.assets, copy); - gulp.watch('src/pages/**/*.html').on('all', gulp.series(pages, browser.reload)); - gulp.watch('src/{layouts,partials}/**/*.html').on('all', gulp.series(resetPages, pages, browser.reload)); - gulp.watch('src/assets/scss/**/*.scss').on('all', sass); - gulp.watch('src/assets/js/**/*.js').on('all', gulp.series(javascript, browser.reload)); - gulp.watch('src/assets/img/**/*').on('all', gulp.series(images, browser.reload)); - gulp.watch('src/styleguide/**').on('all', gulp.series(styleGuide, browser.reload)); + gulp.watch(PATHS.assets, copy); + gulp.watch('src/pages/**/*.html').on('all', gulp.series(pages, browser.reload)); + gulp.watch('src/{layouts,partials}/**/*.html').on('all', gulp.series(resetPages, pages, browser.reload)); + gulp.watch('src/data/**/*.{js,json,yml}').on('all', gulp.series(resetPages, pages, browser.reload)); + gulp.watch('src/helpers/**/*.js').on('all', gulp.series(resetPages, pages, browser.reload)); + gulp.watch('src/assets/scss/**/*.scss').on('all', sass); + gulp.watch('src/assets/js/**/*.js').on('all', gulp.series(javascript, browser.reload)); + gulp.watch('src/assets/img/**/*').on('all', gulp.series(images, browser.reload)); } diff --git a/package.json b/package.json --- a/package.json +++ b/package.json @@ -13,36 +13,37 @@ "foundation-sites": "~6.4.1", "jquery": ">=3.0.0", "what-input": "^4.1.3", - "motion-ui": "~1.2.2" + "motion-ui": "^2.0.3" }, "devDependencies": { - "babel-core": "^6.24.1", - "babel-loader": "^6.4.1", - "babel-preset-es2015": "^6.3.13", - "babel-register": "^6.7.2", + "@babel/core": "^7.1.2", + "@babel/preset-env": "^7.1.0", + "@babel/register": "^7.0.0", + "autoprefixer": "^9.1.5", + "babel-loader": "^8.0.4", "browser-sync": "^2.10.0", - "gulp": "github:gulpjs/gulp#4.0", - "gulp-autoprefixer": "^3.1.0", - "gulp-babel": "^6.1.2", + "gulp": "^4.0.0", + "gulp-babel": "^8.0.0", "gulp-clean-css": "^3.3.1", - "gulp-cli": "^1.2.1", + "gulp-cli": "^2.0.1", "gulp-concat": "^2.5.2", "gulp-extname": "^0.2.0", "gulp-if": "^2.0.0", - "gulp-imagemin": "^2.2.1", + "gulp-imagemin": "^4.1.0", "gulp-load-plugins": "^1.1.0", - "gulp-sass": "^2.1.0", - "gulp-sourcemaps": "^1.6.0", - "gulp-uglify": "^1.2.0", - "gulp-uncss": "^1.0.1", + "gulp-postcss": "^8.0.0", + "gulp-sass": "^4.0.1", + "gulp-sourcemaps": "^2.6.4", + "gulp-uglify": "^3.0.1", "js-yaml": "^3.4.6", "panini": "^1.3.0", "rimraf": "^2.4.3", "style-sherpa": "^1.0.0", + "uncss": "^0.16.2", "vinyl-named": "^1.1.0", - "webpack": "^2.6.1", - "webpack-stream": "^3.2.0", - "yargs": "^3.8.0" + "webpack": "^4.20.2", + "webpack-stream": "^5.1.1", + "yargs": "^12.0.2" }, "repository": { "type": "git", @@ -51,10 +52,5 @@ "bugs": { "url": "https://devcentral.nasqueron.org/" }, - "babel": { - "presets": [ - "es2015" - ] - }, "private": true } diff --git a/readme.md b/readme.md --- a/readme.md +++ b/readme.md @@ -43,16 +43,16 @@ ```bash cd infra-www -npm install +yarn install ``` -Finally, run `npm start` to run Gulp. Your finished site will be created in a +Finally, run `yarn start` to run Gulp. Your finished site will be created in a folder called `dist`, viewable at this URL: ``` http://localhost:8000 ``` -To create compressed, production-ready assets, run `npm run build`. +To create compressed, production-ready assets, run `yarn run build`. For Nasqueron, this is done by a Jenkins CD task. diff --git a/src/assets/js/app.js b/src/assets/js/app.js --- a/src/assets/js/app.js +++ b/src/assets/js/app.js @@ -8,6 +8,11 @@ Licence: CC-BY 4.0, MIT, BSD-2-Clause (multi-licensing) ------------------------------------------------------------- */ +import $ from 'jquery'; +window.$ = $; + +import Foundation from 'foundation-sites'; + /* ------------------------------------------------------------- Table of contents - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/scss/_settings.scss b/src/assets/scss/_settings.scss --- a/src/assets/scss/_settings.scss +++ b/src/assets/scss/_settings.scss @@ -1,48 +1,83 @@ -// Foundation for Sites Settings -// ----------------------------- -// -// Table of Contents: -// -// 1. Global -// 2. Breakpoints -// 3. The Grid -// 4. Base Typography -// 5. Typography Helpers -// 6. Abide -// 7. Accordion -// 8. Accordion Menu -// 9. Badge -// 10. Breadcrumbs -// 11. Button -// 12. Button Group -// 13. Callout -// 14. Close Button -// 15. Drilldown -// 16. Dropdown -// 17. Dropdown Menu -// 18. Flex Video -// 19. Forms -// 20. Label -// 21. Media Object -// 22. Menu -// 23. Meter -// 24. Off-canvas -// 25. Orbit -// 26. Pagination -// 27. Progress Bar -// 28. Reveal -// 29. Slider -// 30. Switch -// 31. Table -// 32. Tabs -// 33. Thumbnail -// 34. Title Bar -// 35. Tooltip -// 36. Top Bar -// 37. Code +@charset "utf-8"; + +/* ------------------------------------------------------------- + Nasqueron Infrastructure web site + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + Project: Nasqueron + Author: Dereckson + Dependencies: foundation motion-ui + Filename: app.css + Licence: CC-BY 4.0, MIT + ------------------------------------------------------------- */ @import 'util/util'; +/* ------------------------------------------------------------- + Table of contents + + Foundation for Sites Settings + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + :: 1. Global + :: 2. Breakpoints + :: 3. The Grid + :: 4. Base Typography + :: 5. Typography Helpers + :: 6. Abide + :: 7. Accordion + :: 8. Accordion Menu + :: 9. Badge + :: 10. Breadcrumbs + :: 11. Button + :: 12. Button Group + :: 13. Callout + :: 14. Card + :: 15. Close Button + :: 16. Drilldown + :: 17. Dropdown + :: 18. Dropdown Menu + :: 19. Flexbox Utilities + :: 20. Forms + :: 21. Label + :: 22. Media Object + :: 23. Menu + :: 24. Meter + :: 25. Off-canvas + :: 26. Orbit + :: 27. Pagination + :: 28. Progress Bar + :: 29. Prototype Arrow + :: 30. Prototype Border-Box + :: 31. Prototype Border-None + :: 32. Prototype Bordered + :: 33. Prototype Display + :: 34. Prototype Font-Styling + :: 35. Prototype List-Style-Type + :: 36. Prototype Overflow + :: 37. Prototype Position + :: 38. Prototype Rounded + :: 39. Prototype Separator + :: 40. Prototype Shadow + :: 41. Prototype Sizing + :: 42. Prototype Spacing + :: 43. Prototype Text-Decoration + :: 44. Prototype Text-Transformation + :: 45. Prototype Text-Utilities + :: 46. Responsive Embed + :: 47. Reveal + :: 48. Slider + :: 49. Switch + :: 50. Table + :: 51. Tabs + :: 52. Thumbnail + :: 53. Title Bar + :: 54. Tooltip + :: 55. Top Bar + :: 56. Xy Grid + :: 57. Code + +*/ + // 1. Global // --------- @@ -67,11 +102,17 @@ $body-antialiased: true; $global-margin: 1rem; $global-padding: 1rem; +$global-position: 1rem; $global-weight-normal: 400; $global-weight-bold: bold; $global-radius: 0; +$global-menu-padding: 0.7rem 1rem; +$global-menu-nested-margin: 1rem; $global-text-direction: ltr; -$global-flexbox: false; +$global-flexbox: true; +$global-prototype-breakpoints: false; +$global-button-cursor: pointer; +$global-color-pick-contrast-tolerance: 0; $print-transparent-backgrounds: true; @include add-foundation-colors; @@ -86,6 +127,7 @@ xlarge: 1200px, xxlarge: 1440px, ); +$print-breakpoint: large; $breakpoint-classes: (small medium large); // 3. The Grid @@ -98,6 +140,7 @@ medium: 30px, ); $grid-column-align-edge: true; +$grid-column-alias: 'columns'; $block-grid-max: 8; // 4. Base Typography @@ -107,27 +150,27 @@ $header-font-weight: 200; $header-font-style: normal; $font-family-monospace: 'Roboto Mono', Consolas, 'Liberation Mono', Courier, monospace; -$header-sizes: ( +$header-color: $secondary-color; +$header-lineheight: 1.4; +$header-margin-bottom: 0.5rem; +$header-styles: ( small: ( - 'h1': 24, - 'h2': 20, - 'h3': 19, - 'h4': 18, - 'h5': 17, - 'h6': 16, + 'h1': ('font-size': 24), + 'h2': ('font-size': 20), + 'h3': ('font-size': 19), + 'h4': ('font-size': 18), + 'h5': ('font-size': 17), + 'h6': ('font-size': 16), ), medium: ( - 'h1': 48, - 'h2': 40, - 'h3': 31, - 'h4': 25, - 'h5': 20, - 'h6': 16, + 'h1': ('font-size': 48), + 'h2': ('font-size': 40), + 'h3': ('font-size': 31), + 'h4': ('font-size': 25), + 'h5': ('font-size': 20), + 'h6': ('font-size': 16), ), ); -$header-color: $secondary-color; -$header-lineheight: 1.4; -$header-margin-bottom: 0.5rem; $header-text-rendering: optimizeLegibility; $small-font-size: 80%; $header-small-font-color: $medium-gray; @@ -155,6 +198,7 @@ $blockquote-border: 1px solid $medium-gray; $cite-font-size: rem-calc(13); $cite-color: $dark-gray; +$cite-pseudo-content: '\2014 \0020'; $keystroke-font: $font-family-monospace; $keystroke-color: $black; $keystroke-background: $light-gray; @@ -179,9 +223,9 @@ $abide-inputs: true; $abide-labels: true; -$input-background-invalid: map-get($foundation-palette, alert); -$form-label-color-invalid: map-get($foundation-palette, alert); -$input-error-color: map-get($foundation-palette, alert); +$input-background-invalid: get-color(alert); +$form-label-color-invalid: get-color(alert); +$input-error-color: get-color(alert); $input-error-font-size: rem-calc(12); $input-error-font-weight: $global-weight-bold; @@ -190,25 +234,38 @@ $accordion-background: $black; $accordion-plusminus: true; -$accordion-item-color: foreground($accordion-background, $primary-color); +$accordion-title-font-size: rem-calc(12); +$accordion-item-color: $primary-color; $accordion-item-background-hover: $light-gray; $accordion-item-padding: 1.25rem 1rem; $accordion-content-background: $black; $accordion-content-border: 1px solid $light-gray; -$accordion-content-color: foreground($accordion-background, $primary-color); +$accordion-content-color: $body-font-color; $accordion-content-padding: 1rem; // 8. Accordion Menu // ----------------- +$accordionmenu-padding: $global-menu-padding; +$accordionmenu-nested-margin: $global-menu-nested-margin; +$accordionmenu-submenu-padding: $accordionmenu-padding; $accordionmenu-arrows: true; $accordionmenu-arrow-color: $primary-color; +$accordionmenu-item-background: null; +$accordionmenu-border: null; +$accordionmenu-submenu-toggle-background: null; +$accordion-submenu-toggle-border: $accordionmenu-border; +$accordionmenu-submenu-toggle-width: 40px; +$accordionmenu-submenu-toggle-height: $accordionmenu-submenu-toggle-width; +$accordionmenu-arrow-size: 6px; // 9. Badge // -------- $badge-background: $primary-color; -$badge-color: foreground($badge-background); +$badge-color: $white; +$badge-color-alt: $black; +$badge-palette: $foundation-palette; $badge-padding: 0.3em; $badge-minwidth: 2.1em; $badge-font-size: 0.6rem; @@ -223,11 +280,15 @@ $breadcrumbs-item-color-disabled: $medium-gray; $breadcrumbs-item-margin: 0.75rem; $breadcrumbs-item-uppercase: true; -$breadcrumbs-item-slash: true; +$breadcrumbs-item-separator: true; +$breadcrumbs-item-separator-item: '/'; +$breadcrumbs-item-separator-item-rtl: '\\'; +$breadcrumbs-item-separator-color: $medium-gray; // 11. Button // ---------- +$button-font-family: inherit; $button-padding: 0.85em 1em; $button-margin: 0 0 $global-margin 0; $button-fill: solid; @@ -236,13 +297,18 @@ $button-color: $white; $button-color-alt: $black; $button-radius: $global-radius; +$button-hollow-border-width: 1px; $button-sizes: ( tiny: 0.6rem, small: 0.75rem, default: 0.9rem, large: 1.25rem, ); +$button-palette: $foundation-palette; $button-opacity-disabled: 0.25; +$button-background-hover-lightness: -20%; +$button-hollow-hover-lightness: -50%; +$button-transition: background-color 0.25s ease-out, color 0.25s ease-out; // 12. Button Group // ---------------- @@ -251,6 +317,7 @@ $buttongroup-spacing: 1px; $buttongroup-child-selector: '.button'; $buttongroup-expand-max: 6; +$buttongroup-radius-on-each: true; // 13. Callout // ----------- @@ -265,29 +332,56 @@ $callout-radius: $global-radius; $callout-link-tint: 1%; -// 14. Close Button +// 14. Card +// -------- + +$card-background: $white; +$card-font-color: $body-font-color; +$card-divider-background: $light-gray; +$card-border: 1px solid $light-gray; +$card-shadow: none; +$card-border-radius: $global-radius; +$card-padding: $global-padding; +$card-margin-bottom: $global-margin; + +// 15. Close Button // ---------------- $closebutton-position: right top; -$closebutton-offset-horizontal: 1rem; -$closebutton-offset-vertical: 0.5rem; -$closebutton-size: 2em; +$closebutton-offset-horizontal: ( + small: 0.66rem, + medium: 1rem, +); +$closebutton-offset-vertical: ( + small: 0.33em, + medium: 0.5rem, +); +$closebutton-size: ( + small: 1.5em, + medium: 2em, +); $closebutton-lineheight: 1; $closebutton-color: $light-gray; $closebutton-color-hover: $white; -// 15. Drilldown +// 16. Drilldown // ------------- $drilldown-transition: transform 0.15s linear; $drilldown-arrows: true; +$drilldown-padding: $global-menu-padding; +$drilldown-nested-margin: 0; +$drilldown-background: $white; +$drilldown-submenu-padding: $drilldown-padding; +$drilldown-submenu-background: $black; $drilldown-arrow-color: $primary-color; -$drilldown-background: $black; +$drilldown-arrow-size: 6px; -// 16. Dropdown +// 17. Dropdown // ------------ $dropdown-padding: 1rem; +$dropdown-background: $body-background; $dropdown-border: 1px solid $medium-gray; $dropdown-font-size: 1rem; $dropdown-width: 300px; @@ -298,23 +392,30 @@ large: 400px, ); -// 17. Dropdown Menu +// 18. Dropdown Menu // ----------------- $dropdownmenu-arrows: true; $dropdownmenu-arrow-color: $anchor-color; +$dropdownmenu-arrow-size: 6px; +$dropdownmenu-arrow-padding: 1.5rem; $dropdownmenu-min-width: 200px; $dropdownmenu-background: $black; +$dropdownmenu-submenu-background: $dropdownmenu-background; +$dropdownmenu-padding: $global-menu-padding; +$dropdownmenu-nested-margin: 0; +$dropdownmenu-submenu-padding: $dropdownmenu-padding; $dropdownmenu-border: 1px solid $medium-gray; +$dropdown-menu-item-color-active: get-color(primary); +$dropdown-menu-item-background-active: transparent; -// 18. Flex Video -// -------------- +// 19. Flexbox Utilities +// --------------------- -$flexvideo-margin-bottom: rem-calc(16); -$flexvideo-ratio: 4 by 3; -$flexvideo-ratio-widescreen: 16 by 9; +$flex-source-ordering-count: 6; +$flexbox-responsive-breakpoints: true; -// 19. Forms +// 20. Forms // --------- $fieldset-border: 1px solid $dark-gray; @@ -340,45 +441,56 @@ $input-placeholder-color: $medium-gray; $input-font-family: inherit; $input-font-size: rem-calc(16); +$input-font-weight: $global-weight-normal; +$input-line-height: $global-lineheight; $input-background: $black; $input-background-focus: $black; $input-background-disabled: $dark-gray; $input-border: 1px solid $medium-gray; $input-border-focus: 1px solid $dark-gray; +$input-padding: $form-spacing / 2; $input-shadow: inset 0 1px 2px rgba($black, 0.1); $input-shadow-focus: 0 0 5px $medium-gray; -$input-cursor-disabled: default; +$input-cursor-disabled: not-allowed; $input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out; $input-number-spinners: true; $input-radius: $global-radius; +$form-button-radius: $global-radius; -// 20. Label +// 21. Label // --------- $label-background: $primary-color; -$label-color: white; +$label-color: $white; +$label-color-alt: $black; +$label-palette: $foundation-palette; $label-font-size: 0.8rem; $label-padding: 0.33333rem 0.5rem; $label-radius: $global-radius; -// 21. Media Object +// 22. Media Object // ---------------- $mediaobject-margin-bottom: $global-margin; $mediaobject-section-padding: $global-padding; $mediaobject-image-width-stacked: 100%; -// 22. Menu +// 23. Menu // -------- $menu-margin: 0; -$menu-margin-nested: 1rem; -$menu-item-padding: 0.7rem 1rem; +$menu-nested-margin: $global-menu-nested-margin; +$menu-items-padding: $global-menu-padding; +$menu-simple-margin: 1rem; $menu-item-color-active: $white; -$menu-item-background-active: map-get($foundation-palette, primary); +$menu-item-background-active: get-color(primary); $menu-icon-spacing: 0.25rem; +$menu-item-background-hover: $light-gray; +$menu-state-back-compat: true; +$menu-centered-back-compat: true; +$menu-icons-back-compat: true; -// 23. Meter +// 24. Meter // --------- $meter-height: 1rem; @@ -388,20 +500,31 @@ $meter-fill-medium: $warning-color; $meter-fill-bad: $alert-color; -// 24. Off-canvas +// 25. Off-canvas // -------------- -$offcanvas-size: 250px; +$offcanvas-sizes: ( + small: 250px, +); +$offcanvas-vertical-sizes: ( + small: 250px, +); +$off-canvas-width: map-get($offcanvas-sizes, small); $offcanvas-background: $light-gray; -$offcanvas-zindex: -1; +$offcanvas-shadow: 0 0 10px rgba($black, 0.7); +$offcanvas-inner-shadow-size: 20px; +$offcanvas-inner-shadow-color: rgba($black, 0.25); +$offcanvas-overlay-zindex: 11; +$offcanvas-push-zindex: 12; +$offcanvas-overlap-zindex: 13; +$offcanvas-reveal-zindex: 12; $offcanvas-transition-length: 0.5s; $offcanvas-transition-timing: ease; $offcanvas-fixed-reveal: true; $offcanvas-exit-background: rgba($white, 0.25); $maincontent-class: 'off-canvas-content'; -$maincontent-shadow: 0 0 10px rgba($black, 0.5); -// 25. Orbit +// 26. Orbit // --------- $orbit-bullet-background: $medium-gray; @@ -416,7 +539,7 @@ $orbit-control-padding: 1rem; $orbit-control-zindex: 10; -// 26. Pagination +// 27. Pagination // -------------- $pagination-font-size: rem-calc(14); @@ -427,13 +550,14 @@ $pagination-radius: $global-radius; $pagination-item-background-hover: $light-gray; $pagination-item-background-current: $primary-color; -$pagination-item-color-current: foreground($pagination-item-background-current); +$pagination-item-color-current: $white; $pagination-item-color-disabled: $medium-gray; $pagination-ellipsis-color: $black; $pagination-mobile-items: false; +$pagination-mobile-current-item: false; $pagination-arrows: true; -// 27. Progress Bar +// 28. Progress Bar // ---------------- $progress-height: 1rem; @@ -442,7 +566,177 @@ $progress-meter-background: $primary-color; $progress-radius: $global-radius; -// 28. Reveal +// 29. Prototype Arrow +// ------------------- + +$prototype-arrow-directions: ( + down, + up, + right, + left +); +$prototype-arrow-size: 0.4375rem; +$prototype-arrow-color: $black; + +// 30. Prototype Border-Box +// ------------------------ + +$prototype-border-box-breakpoints: $global-prototype-breakpoints; + +// 31. Prototype Border-None +// ------------------------- + +$prototype-border-none-breakpoints: $global-prototype-breakpoints; + +// 32. Prototype Bordered +// ---------------------- + +$prototype-bordered-breakpoints: $global-prototype-breakpoints; +$prototype-border-width: rem-calc(1); +$prototype-border-type: solid; +$prototype-border-color: $medium-gray; + +// 33. Prototype Display +// --------------------- + +$prototype-display-breakpoints: $global-prototype-breakpoints; +$prototype-display: ( + inline, + inline-block, + block, + table, + table-cell +); + +// 34. Prototype Font-Styling +// -------------------------- + +$prototype-font-breakpoints: $global-prototype-breakpoints; +$prototype-wide-letter-spacing: rem-calc(4); +$prototype-font-normal: $global-weight-normal; +$prototype-font-bold: $global-weight-bold; + +// 35. Prototype List-Style-Type +// ----------------------------- + +$prototype-list-breakpoints: $global-prototype-breakpoints; +$prototype-style-type-unordered: ( + disc, + circle, + square +); +$prototype-style-type-ordered: ( + decimal, + lower-alpha, + lower-latin, + lower-roman, + upper-alpha, + upper-latin, + upper-roman +); + +// 36. Prototype Overflow +// ---------------------- + +$prototype-overflow-breakpoints: $global-prototype-breakpoints; +$prototype-overflow: ( + visible, + hidden, + scroll +); + +// 37. Prototype Position +// ---------------------- + +$prototype-position-breakpoints: $global-prototype-breakpoints; +$prototype-position: ( + static, + relative, + absolute, + fixed +); +$prototype-position-z-index: 975; + +// 38. Prototype Rounded +// --------------------- + +$prototype-rounded-breakpoints: $global-prototype-breakpoints; +$prototype-border-radius: rem-calc(3); + +// 39. Prototype Separator +// ----------------------- + +$prototype-separator-breakpoints: $global-prototype-breakpoints; +$prototype-separator-align: center; +$prototype-separator-height: rem-calc(2); +$prototype-separator-width: 3rem; +$prototype-separator-background: $primary-color; +$prototype-separator-margin-top: $global-margin; + +// 40. Prototype Shadow +// -------------------- + +$prototype-shadow-breakpoints: $global-prototype-breakpoints; +$prototype-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), + 0 2px 10px 0 rgba(0,0,0,.12); + +// 41. Prototype Sizing +// -------------------- + +$prototype-sizing-breakpoints: $global-prototype-breakpoints; +$prototype-sizing: ( + width, + height +); +$prototype-sizes: ( + 25: 25%, + 50: 50%, + 75: 75%, + 100: 100% +); + +// 42. Prototype Spacing +// --------------------- + +$prototype-spacing-breakpoints: $global-prototype-breakpoints; +$prototype-spacers-count: 3; + +// 43. Prototype Text-Decoration +// ----------------------------- + +$prototype-decoration-breakpoints: $global-prototype-breakpoints; +$prototype-text-decoration: ( + overline, + underline, + line-through, +); + +// 44. Prototype Text-Transformation +// --------------------------------- + +$prototype-transformation-breakpoints: $global-prototype-breakpoints; +$prototype-text-transformation: ( + lowercase, + uppercase, + capitalize +); + +// 45. Prototype Text-Utilities +// ---------------------------- + +$prototype-utilities-breakpoints: $global-prototype-breakpoints; +$prototype-text-overflow: ellipsis; + +// 46. Responsive Embed +// -------------------- + +$responsive-embed-margin-bottom: rem-calc(16); +$responsive-embed-ratios: ( + default: 4 by 3, + widescreen: 16 by 9, +); + +// 47. Reveal // ---------- $reveal-background: $black; @@ -454,7 +748,7 @@ $reveal-zindex: 1005; $reveal-overlay-background: rgba($black, 0.45); -// 29. Slider +// 48. Slider // ---------- $slider-width-vertical: 0.5rem; @@ -468,7 +762,7 @@ $slider-opacity-disabled: 0.25; $slider-radius: $global-radius; -// 30. Switch +// 49. Switch // ---------- $switch-background: $medium-gray; @@ -484,7 +778,7 @@ $switch-paddle-radius: $global-radius; $switch-paddle-transition: all 0.25s ease-out; -// 31. Table +// 50. Table // --------- $table-background: $black; @@ -494,29 +788,36 @@ $table-hover-scale: 2%; $table-row-hover: darken($table-background, $table-hover-scale); $table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale); +$table-is-striped: true; $table-striped-background: smart-scale($table-background, $table-color-scale); $table-stripe: even; $table-head-background: smart-scale($table-background, $table-color-scale / 2); +$table-head-row-hover: darken($table-head-background, $table-hover-scale); $table-foot-background: smart-scale($table-background, $table-color-scale); +$table-foot-row-hover: darken($table-foot-background, $table-hover-scale); $table-head-font-color: $body-font-color; +$table-foot-font-color: $body-font-color; $show-header-for-stacked: false; +$table-stack-breakpoint: medium; -// 32. Tabs +// 51. Tabs // -------- $tab-margin: 0; $tab-background: $black; +$tab-color: $primary-color; $tab-background-active: $light-gray; +$tab-active-color: $primary-color; $tab-item-font-size: rem-calc(12); $tab-item-background-hover: $white; $tab-item-padding: 1.25rem 1.5rem; $tab-expand-max: 6; $tab-content-background: $black; $tab-content-border: $light-gray; -$tab-content-color: foreground($tab-background, $primary-color); +$tab-content-color: $body-font-color; $tab-content-padding: 1rem; -// 33. Thumbnail +// 52. Thumbnail // ------------- $thumbnail-border: solid 4px $white; @@ -526,7 +827,7 @@ $thumbnail-transition: box-shadow 200ms ease-out; $thumbnail-radius: $global-radius; -// 34. Title Bar +// 53. Title Bar // ------------- $titlebar-background: $black; @@ -537,29 +838,46 @@ $titlebar-icon-color-hover: $medium-gray; $titlebar-icon-spacing: 0.25rem; -// 35. Tooltip +// 54. Tooltip // ----------- +$has-tip-cursor: help; $has-tip-font-weight: $global-weight-bold; $has-tip-border-bottom: dotted 1px $dark-gray; $tooltip-background-color: $black; $tooltip-color: $white; $tooltip-padding: 0.75rem; +$tooltip-max-width: 10rem; $tooltip-font-size: $small-font-size; $tooltip-pip-width: 0.75rem; $tooltip-pip-height: $tooltip-pip-width * 0.866; $tooltip-radius: $global-radius; -// 36. Top Bar +// 55. Top Bar // ----------- $topbar-padding: 0.5rem; $topbar-background: $light-gray; $topbar-submenu-background: $topbar-background; -$topbar-title-spacing: 1rem; +$topbar-title-spacing: 0.5rem 1rem 0.5rem 0; $topbar-input-width: 200px; $topbar-unstack-breakpoint: medium; +// 56. Xy Grid +// ----------- + +$xy-grid: true; +$grid-container: $global-width; +$grid-columns: 12; +$grid-margin-gutters: ( + small: 20px, + medium: 30px +); +$grid-padding-gutters: $grid-margin-gutters; +$grid-container-padding: $grid-padding-gutters; +$grid-container-max: $global-width; +$xy-block-grid-max: 8; + // 37. Code // -------- diff --git a/src/assets/scss/components/utilities-classes.scss b/src/assets/scss/components/utilities-classes.scss new file mode 100644 diff --git a/src/layouts/default.html b/src/layouts/default.html --- a/src/layouts/default.html +++ b/src/layouts/default.html @@ -6,15 +6,14 @@ -