Page Menu
Home
DevCentral
Search
Configure Global Search
Log In
Files
F3804263
D1903.id4804.diff
No One
Temporary
Actions
View File
Edit File
Delete File
View Transforms
Subscribe
Mute Notifications
Award Token
Flag For Later
Size
39 KB
Referenced Files
None
Subscribers
None
D1903.id4804.diff
View Options
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
Details
Attached
Mime Type
text/plain
Expires
Sat, Nov 30, 20:50 (20 h, 55 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2273454
Default Alt Text
D1903.id4804.diff (39 KB)
Attached To
Mode
D1903: Upgrade site builder
Attached
Detach File
Event Timeline
Log In to Comment