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 @@ - Servers log — Nasqueron + {{ title }} — Nasqueron - - {{!-- Pages you create in the src/pages/ folder are inserted here when the flattened page is created. --}} + {{> header}} {{> body}} - + {{> footer}} diff --git a/src/pages/2016.html b/src/pages/2016.html deleted file mode 100644 --- a/src/pages/2016.html +++ /dev/null @@ -1,22 +0,0 @@ -
-
-

Servers log

-
-
- -
-
- {{> intro}} -
-
- -
-
- {{> log-entries}} -
-
- {{> log-help}} -
-
- -{{> footer}} diff --git a/src/pages/log.html b/src/pages/log.html deleted file mode 100644 --- a/src/pages/log.html +++ /dev/null @@ -1,145 +0,0 @@ -
-
-

Servers log

-

This page shows different way to print the servers log.

-
-
- -
-
-

If components are important, we can divide in two columns:

-
-
-
-

Ysul

-
-
-
-
-

Upgraded userland to 10.1-RELEASE-p37

-

- 2016-09-05 01:47:31 - Dereckson -

-
-
-
-
-
-
-

Dwellers

-

Acquisitariat

-
-
-
-
-

2016-09-05 01:47:31 Dereckson

-

Enable performance schema

-
-
-
- -
- -
-
-

No background for entries, with labels per component, IRC-like format:

-

2016-09-05

-

- Ysul - [01:59:42] - <Dereckson> - General software upgrade round. PHP will be 5.6.25. -

-

- Ysul - [01:47:31] - <Dereckson> - Upgraded userland to 10.1-RELEASE-p37 -

-
-
- -
- -
-
-

No background for entries, with labels per component, clean format:

-

2016-07-21

-

- AWS - 01:59 - Sandlayth: - AmazonS3FullAccess Policy attached to user Dwellers -

-

2016-09-05

-

- Ysul - 01:59 - Dereckson: - General software upgrade round. PHP will be 5.6.25. -

-

- Ysul - 01:47 - Dereckson: - Upgraded userland to 10.1-RELEASE-p37 -

-

- Dwellers/Acquisitariat - 01:47 - Dereckson: - Enable performance schema -

-
-
- -
- -
-
-

We can also use plain colors, but vary it when we vary the component:

-

2016-07-21

-
-
-
-
-

- AWS - 01:59 - Sandlayth: - AmazonS3FullAccess Policy attached to user Dwellers -

-
-
-
-
-

- Ysul - 01:59 - Dereckson: - General software upgrade round. PHP will be 5.6.25. -

-
-
-
-
-

- Ysul - 01:47 - Dereckson: - Upgraded userland to 10.1-RELEASE-p37 -

-
-
-
-
-

- Dwellers/Acquisitariat - 01:47 - Dereckson: - Enable performance schema -

-
-
- diff --git a/src/pages/api.html b/src/pages/servers-log/index.html rename from src/pages/api.html rename to src/pages/servers-log/index.html --- a/src/pages/api.html +++ b/src/pages/servers-log/index.html @@ -1,12 +1,10 @@ -
-
-

Servers log

-
-
+--- +title: Servers log +---
- {{> intro}} + {{> log-intro}}
@@ -17,5 +15,3 @@ {{> log-help}} - -{{> footer}} diff --git a/src/partials/footer.html b/src/partials/default-layout/footer.html rename from src/partials/footer.html rename to src/partials/default-layout/footer.html diff --git a/src/partials/default-layout/header.html b/src/partials/default-layout/header.html new file mode 100644 --- /dev/null +++ b/src/partials/default-layout/header.html @@ -0,0 +1,5 @@ +
+
+

{{ title }}

+
+
diff --git a/src/partials/log-entries.html b/src/partials/servers-log/log-entries.html rename from src/partials/log-entries.html rename to src/partials/servers-log/log-entries.html diff --git a/src/partials/log-help.html b/src/partials/servers-log/log-help.html rename from src/partials/log-help.html rename to src/partials/servers-log/log-help.html diff --git a/src/partials/intro.html b/src/partials/servers-log/log-intro.html rename from src/partials/intro.html rename to src/partials/servers-log/log-intro.html diff --git a/src/styleguide/index.md b/src/styleguide/index.md deleted file mode 100644 --- a/src/styleguide/index.md +++ /dev/null @@ -1,355 +0,0 @@ -# The Grid - -

Problem: You've got tons of content, each needing different sized vertical columns, and don't know how to quick and easily get it all done. Solution: The awesome grid!

- ---- - -## Overview - -The grid is built around two key elements: rows and columns. Rows create a max-width and contain the columns, and columns create the final structure. Everything on your page that you don't give a specific structural style to should be within a row or column. - ---- - -## Nesting - -In the Grid you can nest columns down as far as you'd like. Just embed rows inside columns and go from there. Each embedded row can contain up to 12 columns. - ---- - -## How to Use - -Using this framework is easy. Here's how your code will look when you use a series of
tags to create vertical columns. - -```html -
-
...
-
...
-
-``` - -
-
4
-
4
-
4
-
-
-
3
-
6
-
3
-
-
-
2
-
8
-
2
-
-
-
3
-
9
-
-
-
4
-
8
-
-
-
5
-
7
-
-
-
6
-
6
-
- ---- - -## Nesting Rows - -In the Grid you can nest columns down as far as you'd like. Just embed rows inside columns and go from there. Each embedded row can contain up to 12 columns. - -```html -
-
8 -
-
8 Nested -
-
8 Nested Again
-
4
-
-
-
4
-
-
-
4
-
-``` - -
-
8 -
-
8 Nested -
-
8 Nested Again
-
4
-
-
-
4
-
-
-
4
-
- ---- - -## Small Grid - -As you've probably noticed in the examples above, you have access to a small, medium, and large grid. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. You can override your small grid classes by adding medium or large grid classes. - -```html -
-
2
-
10, last
-
-
-
3
-
9, last
-
-``` - -
-
2
-
10, last
-
-
-
3
-
9, last
-
- - - -# Colors - -

Below you can find the different values we created that support the primary color variable you can change at any time in \_settings.scss

- ---- - -
-
-
- - #2C6A74 -
-
-
-
- - #3F8B82 -
-
-
-
- - #3F8B82 -
-
-
-
- - #F2792E -
-
-
-
- - #F06330 -
-
-
- - - -# Typography - -

This design uses Helvetica Neue for headings and paragraph text.

- ---- - -## Headings - -Headings are used to denote different sections of content, usually consisting of related paragraphs and other HTML elements. They range from h1 to h6 and should be styled in a clear hierarchy (i.e., largest to smallest) - ---- - -## Paragraphs - -Paragraphs are groups of sentences, each with a lead (first sentence) and transition (last sentence). They are block level elements, meaning they stack vertically when repeated. Use them as such. - ---- - -

Heading Level 1

- -Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio. - -

Heading Level 2

- -Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio. - -

Heading Level 3

- -Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio. - -

Heading Level 4

- -Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio. - -
Heading Level 5
- -Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio. - -
Heading Level 6
- -Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio. - - - -# Buttons - -

Buttons are tied to an action of some kind, whether that button is on a cheese dispenser or launches the rocket that you're strapped to. On the web, we follow similar conventions.

- ---- - -## Primary Buttons - -These buttons are primary calls to action and should be used sparingly. Their size can be adjusted with the `.tiny`, `.small`, and `.large` classes. - -```html_example -Large button -Regular button -Small button -Tiny button -``` - ---- - -## Secondary Buttons - -These buttons are used for less important, secondary actions on a page. - -```html_example -Large button -Regular button -Small button -Tiny button -``` - - - -# Forms - -

Use forms to allow users to interact with the site and provide information to the company.

- ---- - -## Elements of a Form - -A form should be marked up using its default HTML properties. The ones we make use of include (in hierarchical order): - -- Form -- Label -- Input -- Select -- Text area -- Button - ---- - -## How to Use - -Make forms great and easy to use with the following rules: - -- Wrap checkboxes and radio buttons within labels for larger hit areas, and be sure to set the for, name, and id attributes for all applicable elements. -- Series of checkboxes and radio buttons below within a `