Page MenuHomeDevCentral

D1903.diff
No OneTemporary

D1903.diff

diff --git a/.babelrc b/.babelrc
--- a/.babelrc
+++ b/.babelrc
@@ -1,4 +1,4 @@
{
- "presets": ["es2015"],
- "compact": false
-}
+ "presets": [ "@babel/preset-env" ],
+ "compact": false
+}
\ No newline at end of file
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
@@ -4,7 +4,7 @@
# Node artifacts
node_modules
npm-debug.log
-bower_components
+yarn.lock
# Released version
dist
diff --git a/CHANGELOG.md b/CHANGELOG.md
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,11 @@
All notable changes to this project will be documented in this file.
This project adheres to [semantic versioning](http://semver.org/).
+## [0.2.0] - 2018-10-12
+### Changed
+- Update site builder to use ZURB WebApp Template at 0ce53ed.
+- Migrate Foundation icons font from Bower to a Node module.
+
## [0.1.0] - 2016-07-24
### Added
- Motion UI animations.
diff --git a/bower.json b/bower.json
deleted file mode 100644
--- a/bower.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
- "name": "daeghrefn-www",
- "version": "0.1.0",
- "authors": [
- "Sébastien Santoro aka Dereckson <dereckson@espace-win.org>"
- ],
- "description": "Website for Dæghrefn.",
- "main": "gulpfile.js",
- "license": "CC-BY-4.0",
- "ignore": [
- "**/.*",
- "node_modules",
- "bower_components",
- "test",
- "tests"
- ],
- "dependencies": {
- "foundation-sites": "~6.2.3",
- "motion-ui": "~1.2.2",
- "foundation-icon-fonts": "*"
- },
- "private": true
-}
diff --git a/config.yml b/config.yml
--- a/config.yml
+++ b/config.yml
@@ -5,11 +5,13 @@
COMPATIBILITY:
- "last 2 versions"
- "ie >= 9"
+ - "ios >= 7"
# UnCSS will use these settings
UNCSS_OPTIONS:
html:
- - "src/**/*.html"
+ # Search for used CSS classes in generated HTML files
+ - "dist/**/*.html"
ignore:
- !!js/regexp .foundation-mq
- !!js/regexp ^\.is-.*
@@ -17,7 +19,7 @@
# Gulp will reference these paths when it copies files
PATHS:
# Path to dist folder
- dist: "dist"
+ dist: "dist"
# Paths to static assets that aren't images, CSS, or JavaScript
assets:
- "src/assets/**/*"
@@ -25,38 +27,8 @@
- "!src/assets/{img,js,scss}/**/*"
# Paths to Sass libraries, which can then be loaded with @import
sass:
- - "bower_components/foundation-sites/scss"
- - "bower_components/motion-ui/src"
- - "bower_components/foundation-icon-fonts"
- # Paths to JavaScript libraries, which are compined into one file
- javascript:
- # Libraries requried by Foundation
- - "bower_components/jquery/dist/jquery.js"
- - "bower_components/what-input/what-input.js"
- # Core Foundation files
- - "bower_components/foundation-sites/js/foundation.core.js"
- - "bower_components/foundation-sites/js/foundation.util.*.js"
- # Individual Foundation components
- # If you aren't using a component, just remove it from the list
- - "bower_components/foundation-sites/js/foundation.abide.js"
- - "bower_components/foundation-sites/js/foundation.accordion.js"
- - "bower_components/foundation-sites/js/foundation.accordionMenu.js"
- - "bower_components/foundation-sites/js/foundation.drilldown.js"
- - "bower_components/foundation-sites/js/foundation.dropdown.js"
- - "bower_components/foundation-sites/js/foundation.dropdownMenu.js"
- - "bower_components/foundation-sites/js/foundation.equalizer.js"
- - "bower_components/foundation-sites/js/foundation.interchange.js"
- - "bower_components/foundation-sites/js/foundation.magellan.js"
- - "bower_components/foundation-sites/js/foundation.offcanvas.js"
- - "bower_components/foundation-sites/js/foundation.orbit.js"
- - "bower_components/foundation-sites/js/foundation.responsiveMenu.js"
- - "bower_components/foundation-sites/js/foundation.responsiveToggle.js"
- - "bower_components/foundation-sites/js/foundation.reveal.js"
- - "bower_components/foundation-sites/js/foundation.slider.js"
- - "bower_components/foundation-sites/js/foundation.sticky.js"
- - "bower_components/foundation-sites/js/foundation.tabs.js"
- - "bower_components/foundation-sites/js/foundation.toggler.js"
- - "bower_components/foundation-sites/js/foundation.tooltip.js"
- # Paths to your own project code are here
- - "src/assets/js/!(app).js"
+ - "node_modules/foundation-sites/scss"
+ - "node_modules/motion-ui/src"
+ # Paths to JavaScript entry points for webpack to bundle modules
+ entries:
- "src/assets/js/app.js"
diff --git a/gulpfile.babel.js b/gulpfile.babel.js
--- a/gulpfile.babel.js
+++ b/gulpfile.babel.js
@@ -1,14 +1,18 @@
'use strict';
-import plugins from 'gulp-load-plugins';
-import yargs from 'yargs';
-import browser from 'browser-sync';
-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 plugins from 'gulp-load-plugins';
+import yargs from 'yargs';
+import browser from 'browser-sync';
+import gulp from 'gulp';
+import panini from 'panini';
+import rimraf from 'rimraf';
+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();
@@ -25,12 +29,9 @@
}
// 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, cssfonts, copy)
- )
-);
+ gulp.series(clean, gulp.parallel(pages, javascript, images, fonts, copy), sass));
// Build the site, run the server, and watch for file changes
gulp.task('default',
@@ -71,30 +72,54 @@
// Compile Sass into CSS
// In production, the CSS is compressed
function sass() {
+
+ 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($.autoprefixer({
- browsers: COMPATIBILITY
- }))
- // Comment in the pipe below to run UnCSS in production
- //.pipe($.if(PRODUCTION, $.uncss(UNCSS_OPTIONS)))
- .pipe($.if(PRODUCTION, $.cssnano()))
+ .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 = {
+ 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.javascript)
+ return gulp.src(PATHS.entries)
+ .pipe(named())
.pipe($.sourcemaps.init())
- .pipe($.babel())
- .pipe($.concat('app.js'))
+ .pipe(webpackStream(webpackConfig, webpack2))
.pipe($.if(PRODUCTION, $.uglify()
.on('error', e => { console.log(e); })
))
@@ -106,15 +131,15 @@
// In production, the images are compressed
function images() {
return gulp.src('src/assets/img/**/*')
- .pipe($.if(PRODUCTION, $.imagemin({
- progressive: true
- })))
+ .pipe($.if(PRODUCTION, $.imagemin([
+ $.imagemin.jpegtran({ progressive: true }),
+ ])))
.pipe(gulp.dest(PATHS.dist + '/assets/img'));
}
// Copy fonts used in CSS to the "dist" folder
-function cssfonts() {
- return gulp.src('./bower_components/foundation-icon-fonts/*.{ttf,woff,eot,svg}')
+function fonts() {
+ return gulp.src('./node_modules/foundation-icon-fonts/*.{ttf,woff,eot,svg}')
.pipe(gulp.dest(PATHS.dist + '/assets/fonts'));
}
@@ -122,8 +147,7 @@
function server(done) {
browser.init({
server: PATHS.dist, port: PORT
- });
- done();
+ }, done);
}
// Reload the browser with BrowserSync
@@ -135,9 +159,11 @@
// Watch for changes to static assets, pages, Sass, and JavaScript
function watch() {
gulp.watch(PATHS.assets, copy);
- gulp.watch('src/pages/**/*.html').on('change', gulp.series(pages, browser.reload));
- gulp.watch('src/{layouts,partials}/**/*.html').on('change', gulp.series(resetPages, pages, browser.reload));
- gulp.watch('src/assets/scss/**/*.scss', sass);
- gulp.watch('src/assets/js/**/*.js').on('change', gulp.series(javascript, browser.reload));
- gulp.watch('src/assets/img/**/*').on('change', gulp.series(images, browser.reload));
+ 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
@@ -2,7 +2,7 @@
"name": "daeghrefn-www",
"version": "0.1.0",
"description": "Website for Dæghrefn.",
- "main": "gulpfile.js",
+ "main": "gulpfile.babel.js",
"scripts": {
"start": "gulp",
"build": "gulp build --production"
@@ -10,30 +10,48 @@
"author": "Sébastien Santoro aka Dereckson <dereckson@espace-win.org>",
"homepage": "https://daeghrefn.nasqueron.org/",
"license": "CC-BY-4.0",
- "keywords": ["www"],
+ "keywords": [
+ "www"
+ ],
+ "dependencies": {
+ "foundation-icon-fonts": "^0.1.1",
+ "foundation-sites": "~6.4.1",
+ "jquery": "^3.2.1",
+ "motion-ui": "^2.0.3",
+ "slick-carousel": "^1.8.1",
+ "svg-injector-2": "^2.1.3",
+ "tablesaw": "^3.0.5",
+ "what-input": "^5.1.2"
+ },
"devDependencies": {
- "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": "gulpjs/gulp#4.0",
- "gulp-autoprefixer": "^3.1.0",
- "gulp-babel": "^6.1.2",
- "gulp-cli": "^1.2.1",
+ "gulp": "^4.0.0",
+ "gulp-babel": "^8.0.0",
+ "gulp-clean-css": "^3.3.1",
+ "gulp-cli": "^2.0.1",
"gulp-concat": "^2.5.2",
- "gulp-cssnano": "^2.1.0",
"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",
- "yargs": "^3.8.0"
+ "uncss": "^0.16.2",
+ "vinyl-named": "^1.1.0",
+ "webpack": "^4.20.2",
+ "webpack-stream": "^5.1.1",
+ "yargs": "^12.0.2"
},
"repository": {
"type": "git",
@@ -42,8 +60,5 @@
"bugs": {
"url": "https://devcentral.nasqueron.org/project/view/9/"
},
- "babel": {
- "presets": ["es2015"]
- },
"private": true
}
diff --git a/readme.md b/readme.md
--- a/readme.md
+++ b/readme.md
@@ -43,19 +43,18 @@
To manually set up the repository, first download it with Git:
-```bash
-git clone https://github.com/nasqueron/daeghrefn-www daeghrefn-www
+```
+$ git clone https://github.com/nasqueron/daeghrefn-www daeghrefn-www
```
Then open the folder in your command line, and install the needed dependencies:
-```bash
-cd daeghrefn-www
-npm install
-bower install
+```
+$ cd daeghrefn-www
+$ yarn
```
-Finally, run `npm start` to run Gulp. The finished site will be created in a folder called `dist`, viewable at this URL:
+Finally, run `yarn start` to run Gulp. The finished site will be created in a folder called `dist`, viewable at this URL:
```
http://localhost:8000
@@ -63,4 +62,4 @@
### Create locally a production-ready version
-To create compressed, production-ready assets, run `npm run build`.
+To create compressed, production-ready assets, run `yarn run build`.
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,13 @@
Licence: CC-BY 4.0, MIT, BSD-2-Clause (multi-licensing)
------------------------------------------------------------- */
+import $ from 'jquery';
+import whatInput from 'what-input';
+
+window.$ = $;
+
+import Foundation from 'foundation-sites';
+
/* -------------------------------------------------------------
Table of contents
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
diff --git a/src/assets/js/lib/foundation-explicit-pieces.js b/src/assets/js/lib/foundation-explicit-pieces.js
new file mode 100644
--- /dev/null
+++ b/src/assets/js/lib/foundation-explicit-pieces.js
@@ -0,0 +1,103 @@
+import $ from 'jquery';
+import { Foundation } from 'foundation-sites/js/foundation.core';
+import { rtl, GetYoDigits, transitionend } from 'foundation-sites/js/foundation.util.core';
+import { Box } from 'foundation-sites/js/foundation.util.box'
+import { onImagesLoaded } from 'foundation-sites/js/foundation.util.imageLoader';
+import { Keyboard } from 'foundation-sites/js/foundation.util.keyboard';
+import { MediaQuery } from 'foundation-sites/js/foundation.util.mediaQuery';
+import { Motion, Move } from 'foundation-sites/js/foundation.util.motion';
+import { Nest } from 'foundation-sites/js/foundation.util.nest';
+import { Timer } from 'foundation-sites/js/foundation.util.timer';
+import { Touch } from 'foundation-sites/js/foundation.util.touch';
+import { Triggers } from 'foundation-sites/js/foundation.util.triggers';
+import { Abide } from 'foundation-sites/js/foundation.abide';
+import { Accordion } from 'foundation-sites/js/foundation.accordion';
+import { AccordionMenu } from 'foundation-sites/js/foundation.accordionMenu';
+import { Drilldown } from 'foundation-sites/js/foundation.drilldown';
+import { Dropdown } from 'foundation-sites/js/foundation.dropdown';
+import { DropdownMenu } from 'foundation-sites/js/foundation.dropdownMenu';
+import { Equalizer } from 'foundation-sites/js/foundation.equalizer';
+import { Interchange } from 'foundation-sites/js/foundation.interchange';
+import { Magellan } from 'foundation-sites/js/foundation.magellan';
+import { OffCanvas } from 'foundation-sites/js/foundation.offcanvas';
+import { Orbit } from 'foundation-sites/js/foundation.orbit';
+import { ResponsiveMenu } from 'foundation-sites/js/foundation.responsiveMenu';
+import { ResponsiveToggle } from 'foundation-sites/js/foundation.responsiveToggle';
+import { Reveal } from 'foundation-sites/js/foundation.reveal';
+import { Slider } from 'foundation-sites/js/foundation.slider';
+import { SmoothScroll } from 'foundation-sites/js/foundation.smoothScroll';
+import { Sticky } from 'foundation-sites/js/foundation.sticky';
+import { Tabs } from 'foundation-sites/js/foundation.tabs';
+import { Toggler } from 'foundation-sites/js/foundation.toggler';
+import { Tooltip } from 'foundation-sites/js/foundation.tooltip';
+import { ResponsiveAccordionTabs } from 'foundation-sites/js/foundation.responsiveAccordionTabs';
+
+
+Foundation.addToJquery($);
+
+// Add Foundation Utils to Foundation global namespace for backwards
+// compatibility.
+
+Foundation.rtl = rtl;
+Foundation.GetYoDigits = GetYoDigits;
+Foundation.transitionend = transitionend;
+
+Foundation.Box = Box;
+Foundation.onImagesLoaded = onImagesLoaded;
+Foundation.Keyboard = Keyboard;
+Foundation.MediaQuery = MediaQuery;
+Foundation.Motion = Motion;
+Foundation.Move = Move;
+Foundation.Nest = Nest;
+Foundation.Timer = Timer;
+
+// Touch and Triggers previously were almost purely sede effect driven,
+// so no // need to add it to Foundation, just init them.
+
+Touch.init($);
+
+Triggers.init($, Foundation);
+
+Foundation.plugin(Abide, 'Abide');
+
+Foundation.plugin(Accordion, 'Accordion');
+
+Foundation.plugin(AccordionMenu, 'AccordionMenu');
+
+Foundation.plugin(Drilldown, 'Drilldown');
+
+Foundation.plugin(Dropdown, 'Dropdown');
+
+Foundation.plugin(DropdownMenu, 'DropdownMenu');
+
+Foundation.plugin(Equalizer, 'Equalizer');
+
+Foundation.plugin(Interchange, 'Interchange');
+
+Foundation.plugin(Magellan, 'Magellan');
+
+Foundation.plugin(OffCanvas, 'OffCanvas');
+
+Foundation.plugin(Orbit, 'Orbit');
+
+Foundation.plugin(ResponsiveMenu, 'ResponsiveMenu');
+
+Foundation.plugin(ResponsiveToggle, 'ResponsiveToggle');
+
+Foundation.plugin(Reveal, 'Reveal');
+
+Foundation.plugin(Slider, 'Slider');
+
+Foundation.plugin(SmoothScroll, 'SmoothScroll');
+
+Foundation.plugin(Sticky, 'Sticky');
+
+Foundation.plugin(Tabs, 'Tabs');
+
+Foundation.plugin(Toggler, 'Toggler');
+
+Foundation.plugin(Tooltip, 'Tooltip');
+
+Foundation.plugin(ResponsiveAccordionTabs, 'ResponsiveAccordionTabs');
+
+export {Foundation};
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
@@ -31,31 +31,50 @@
:: 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. Path for fonts
+ :: 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. Path for fonts
*/
@@ -86,8 +105,13 @@
$global-weight-normal: normal;
$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-prototype-breakpoints: false;
+$global-button-cursor: pointer;
+$global-color-pick-contrast-tolerance: 0;
$print-transparent-backgrounds: true;
@include add-foundation-colors;
@@ -102,6 +126,7 @@
xlarge: 1200px,
xxlarge: 1440px,
);
+$print-breakpoint: large;
$breakpoint-classes: (small medium large);
// 3. The Grid
@@ -110,10 +135,11 @@
$grid-row-width: $global-width;
$grid-column-count: 12;
$grid-column-gutter: (
- small: 20px,
- medium: 30px,
+ small: 20px,
+ medium: 30px,
);
$grid-column-align-edge: true;
+$grid-column-alias: 'columns';
$block-grid-max: 8;
// 4. Base Typography
@@ -123,27 +149,27 @@
$header-font-weight: $global-weight-normal;
$header-font-style: normal;
$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace;
-$header-sizes: (
- small: (
- 'h1': 24,
- 'h2': 20,
- 'h3': 19,
- 'h4': 18,
- 'h5': 17,
- 'h6': 16,
- ),
- medium: (
- 'h1': 64,
- 'h2': 48,
- 'h3': 42,
- 'h4': 36,
- 'h5': 24,
- 'h6': 18,
- ),
-);
$header-color: inherit;
$header-lineheight: 1.4;
$header-margin-bottom: 0.5rem;
+$header-styles: (
+ small: (
+ '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': ('font-size': 64),
+ 'h2': ('font-size': 48),
+ 'h3': ('font-size': 42),
+ 'h4': ('font-size': 36),
+ 'h5': ('font-size': 24),
+ 'h6': ('font-size': 18),
+ ),
+);
$header-text-rendering: optimizeLegibility;
$small-font-size: 80%;
$header-small-font-color: $medium-gray;
@@ -177,6 +203,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;
@@ -201,9 +228,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;
@@ -212,25 +239,38 @@
$accordion-background: $white;
$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: $white;
$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;
@@ -245,26 +285,35 @@
$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;
-$button-background: $secondary-color;
+$button-background: $primary-color;
$button-background-hover: scale-color($button-background, $lightness: -15%);
-$button-color: $black;
+$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,
+ 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
// ----------------
@@ -273,6 +322,7 @@
$buttongroup-spacing: 1px;
$buttongroup-child-selector: '.button';
$buttongroup-expand-max: 6;
+$buttongroup-radius-on-each: true;
// 13. Callout
// -----------
@@ -287,56 +337,90 @@
$callout-radius: $global-radius;
$callout-link-tint: 30%;
-// 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: $dark-gray;
$closebutton-color-hover: $black;
-// 15. Drilldown
+// 16. Drilldown
// -------------
$drilldown-transition: transform 0.15s linear;
$drilldown-arrows: true;
-$drilldown-arrow-color: $primary-color;
+$drilldown-padding: $global-menu-padding;
+$drilldown-nested-margin: 0;
$drilldown-background: $white;
+$drilldown-submenu-padding: $drilldown-padding;
+$drilldown-submenu-background: $white;
+$drilldown-arrow-color: $primary-color;
+$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;
$dropdown-radius: $global-radius;
$dropdown-sizes: (
- tiny: 100px,
- small: 200px,
- large: 400px,
+ tiny: 100px,
+ small: 200px,
+ 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: $white;
+$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 $medium-gray;
@@ -362,45 +446,57 @@
$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: $white;
$input-background-focus: $white;
$input-background-disabled: $light-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: foreground($label-background);
+$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-color-alt-active: $black;
+$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;
@@ -410,20 +506,30 @@
$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,
+);
$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;
@@ -438,7 +544,7 @@
$orbit-control-padding: 1rem;
$orbit-control-zindex: 10;
-// 26. Pagination
+// 27. Pagination
// --------------
$pagination-font-size: rem-calc(14);
@@ -449,13 +555,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;
@@ -464,7 +571,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: $white;
@@ -476,7 +753,7 @@
$reveal-zindex: 1005;
$reveal-overlay-background: rgba($black, 0.45);
-// 29. Slider
+// 48. Slider
// ----------
$slider-width-vertical: 0.5rem;
@@ -490,7 +767,7 @@
$slider-opacity-disabled: 0.25;
$slider-radius: $global-radius;
-// 30. Switch
+// 49. Switch
// ----------
$switch-background: $medium-gray;
@@ -506,7 +783,7 @@
$switch-paddle-radius: $global-radius;
$switch-paddle-transition: all 0.25s ease-out;
-// 31. Table
+// 50. Table
// ---------
$table-background: $white;
@@ -516,29 +793,35 @@
$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: $white;
+$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: $white;
$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;
@@ -548,7 +831,7 @@
$thumbnail-transition: box-shadow 200ms ease-out;
$thumbnail-radius: $global-radius;
-// 34. Title Bar
+// 53. Title Bar
// -------------
$titlebar-background: $black;
@@ -559,30 +842,47 @@
$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;
-// 37. Path for fonts
+// 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;
+
+// 57. Path for fonts
// ------------------
$fi-path: "../fonts";
diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss
--- a/src/assets/scss/app.scss
+++ b/src/assets/scss/app.scss
@@ -31,7 +31,7 @@
@import 'foundation';
@import 'motion-ui';
-@import '_foundation-icons';
+@import 'node_modules/foundation-icon-fonts/_foundation-icons';
@include foundation-global-styles;
@include foundation-grid;

File Metadata

Mime Type
text/plain
Expires
Sat, Nov 30, 19:46 (22 h, 2 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2273454
Default Alt Text
D1903.diff (39 KB)

Event Timeline