-
-
-
Dreams feel real
-
I'm going to improvise. Listen, there's something you should know about me... about inception.
-
Last updated 1 minute ago
+
+
+
Dreams feel real
+
I'm going to improvise. Listen, there's something you should know about me... about inception.
+
Last updated 1 minute ago
+
-
-
-
-
Menus
-
Cards play nicely with menus too! Give them a try.
-
+
+
+
Menus
+
Cards play nicely with menus too! Give them a try.
+
+
-
-
-
-
Your title here!
-
An idea is like a virus, resilient, highly contagious. The smallest seed of an idea can grow. It can grow to define or destroy you.
+
+
+
Your title here!
+
An idea is like a virus, resilient, highly contagious. The smallest seed of an idea can grow. It can grow to define or destroy you.
+
-
-
-
-
-
Buttons!
-
Who doesn't love a good button? Buttons work in all of their forms too.
-
I'm a button
+
+
+
+
Buttons!
+
Who doesn't love a good button? Buttons work in all of their forms too.
+
I'm a button
+
-
-
-
-
-
And button groups...
-
Button groups also work great!
-
+
+
+
+
And button groups...
+
Button groups also work great!
+
+
-
-
-
+
+
-
-
The utility classes like .text-center work great too.
-
Click me
+
+
The utility classes like .text-center work great too.
+
Click me
+
-
+
-
@@ -433,6 +439,28 @@
+
Equalizer
+
+
+
+
+
+
+
+
+
+
Pellentesque habitant morbi tristique senectus et netus et, ante.
+
+
+
+
+
+
+
+
+
+
+
Flex Video
@@ -440,14 +468,6 @@
-
-
Float Classes
-
-
-
+
+
@@ -774,45 +799,43 @@
Tabs
-
+
-
-
One
-
Check me out! I'm a super cool Tab panel with text content! On medium-down screen sizes, this component will transform into an accordion.
-
-
-
Two
-
-
-
-
Three
-
Check me out! I'm a super cool Tab panel with text content!
-
-
-
Four
-
-
-
-
Five
-
Check me out! I'm a super cool Tab panel with text content!
-
-
-
Six
-
-
-
-
-
-
+
+
One
+
Check me out! I'm a super cool Tab panel with text content! On medium-down screen sizes, this component will transform into an accordion.
+
+
+
Two
+
+
+
+
Three
+
Check me out! I'm a super cool Tab panel with text content!
+
+
+
Four
+
+
+
+
Five
+
Check me out! I'm a super cool Tab panel with text content!
+
+
+
Six
+
+
+
+
Thumbnail
@@ -939,8 +962,8 @@
Drilldown Menu
Dropdown Menu
Dropdown Pane
+
Equalizer
Flex Video
-
Float Classes
Forms
Grid
Label
diff --git a/assets/images/demo/customizable.svg b/src/assets/images/demo/customizable.svg
similarity index 100%
rename from assets/images/demo/customizable.svg
rename to src/assets/images/demo/customizable.svg
diff --git a/assets/images/demo/hero-bg-foundation-6-large.svg b/src/assets/images/demo/hero-bg-foundation-6-large.svg
similarity index 100%
rename from assets/images/demo/hero-bg-foundation-6-large.svg
rename to src/assets/images/demo/hero-bg-foundation-6-large.svg
diff --git a/assets/images/demo/hero-bg-foundation-6-small.svg b/src/assets/images/demo/hero-bg-foundation-6-small.svg
similarity index 100%
rename from assets/images/demo/hero-bg-foundation-6-small.svg
rename to src/assets/images/demo/hero-bg-foundation-6-small.svg
diff --git a/assets/images/demo/professional.svg b/src/assets/images/demo/professional.svg
similarity index 100%
rename from assets/images/demo/professional.svg
rename to src/assets/images/demo/professional.svg
diff --git a/assets/images/demo/responsive.svg b/src/assets/images/demo/responsive.svg
similarity index 100%
rename from assets/images/demo/responsive.svg
rename to src/assets/images/demo/responsive.svg
diff --git a/assets/images/demo/semantic.svg b/src/assets/images/demo/semantic.svg
similarity index 100%
rename from assets/images/demo/semantic.svg
rename to src/assets/images/demo/semantic.svg
diff --git a/assets/images/icons/apple-touch-icon-114x114.png b/src/assets/images/icons/apple-touch-icon-114x114.png
similarity index 100%
rename from assets/images/icons/apple-touch-icon-114x114.png
rename to src/assets/images/icons/apple-touch-icon-114x114.png
diff --git a/assets/images/icons/apple-touch-icon-144x144.png b/src/assets/images/icons/apple-touch-icon-144x144.png
similarity index 100%
rename from assets/images/icons/apple-touch-icon-144x144.png
rename to src/assets/images/icons/apple-touch-icon-144x144.png
diff --git a/assets/images/icons/apple-touch-icon-72x72.png b/src/assets/images/icons/apple-touch-icon-72x72.png
similarity index 100%
rename from assets/images/icons/apple-touch-icon-72x72.png
rename to src/assets/images/icons/apple-touch-icon-72x72.png
diff --git a/assets/images/icons/apple-touch-icon.png b/src/assets/images/icons/apple-touch-icon.png
similarity index 100%
rename from assets/images/icons/apple-touch-icon.png
rename to src/assets/images/icons/apple-touch-icon.png
diff --git a/assets/images/icons/favicon.ico b/src/assets/images/icons/favicon.ico
similarity index 100%
rename from assets/images/icons/favicon.ico
rename to src/assets/images/icons/favicon.ico
diff --git a/src/assets/js/app.js b/src/assets/js/app.js
new file mode 100644
index 000000000..213c72765
--- /dev/null
+++ b/src/assets/js/app.js
@@ -0,0 +1,13 @@
+import $ from 'jquery';
+import whatInput from 'what-input';
+
+window.$ = $;
+
+import Foundation from 'foundation-sites';
+// If you want to pick and choose which modules to include, comment out the above and uncomment
+// the line below
+//import './lib/foundation-explicit-pieces';
+
+import './lib/demosite';
+
+$(document).foundation();
diff --git a/src/assets/js/lib/demosite.js b/src/assets/js/lib/demosite.js
new file mode 100644
index 000000000..c8ddb5ef6
--- /dev/null
+++ b/src/assets/js/lib/demosite.js
@@ -0,0 +1,12 @@
+import $ from 'jquery';
+
+$.ajax({
+ dataType: 'jsonp',
+ url: 'https://api.github.com/repos/olefredrik/foundationpress?callback=foundationpressGithub&access_token=ed6229228dbc763038dbf1e68d0d8a4a0935b38a',
+ success: function (response) {
+ if (response && response.data.watchers) {
+ var watchers = (Math.round((response.data.watchers / 100), 10) / 10).toFixed(1);
+ $('#stargazers a').html(watchers + 'k stargazers');
+ }
+ }
+});
diff --git a/src/assets/js/lib/foundation-explicit-pieces.js b/src/assets/js/lib/foundation-explicit-pieces.js
new file mode 100644
index 000000000..4045c9983
--- /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');
+
+module.exports = Foundation;
diff --git a/assets/scss/global/_settings.scss b/src/assets/scss/_settings.scss
similarity index 66%
rename from assets/scss/global/_settings.scss
rename to src/assets/scss/_settings.scss
index 8eb193e97..bb561dd5e 100644
--- a/assets/scss/global/_settings.scss
+++ b/src/assets/scss/_settings.scss
@@ -1,4 +1,5 @@
-// Foundation for Sites Settings
+// FoundationPress settings.
+// Based on Foundation v6.4.1
// -----------------------------
//
// Table of Contents:
@@ -21,27 +22,47 @@
// 16. Drilldown
// 17. Dropdown
// 18. Dropdown Menu
-// 19. Forms
-// 20. Label
-// 21. Media Object
-// 22. Menu
-// 23. Meter
-// 24. Off-canvas
-// 25. Orbit
-// 26. Pagination
-// 27. Progress Bar
-// 28. Responsive Embed
-// 29. Reveal
-// 30. Slider
-// 31. Switch
-// 32. Table
-// 33. Tabs
-// 34. Thumbnail
-// 35. Title Bar
-// 36. Tooltip
-// 37. Top Bar
-
-@import '../../components/foundation-sites/scss/util/util';
+// 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
+
+@import 'util/util';
+@import 'global/colors';
// 1. Global
// ---------
@@ -63,15 +84,20 @@ $black: #0a0a0a;
$white: #fefefe;
$body-background: $white;
$body-font-color: $black;
-$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
+$body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
$body-antialiased: true;
$global-margin: 1rem;
$global-padding: 1rem;
+$global-position: 1rem;
$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-flexbox: true;
+$global-prototype-breakpoints: false;
+$global-color-pick-contrast-tolerance: 0;
$print-transparent-backgrounds: true;
@include add-foundation-colors;
@@ -99,6 +125,7 @@ $grid-column-gutter: (
medium: 30px,
);
$grid-column-align-edge: true;
+$grid-column-alias: 'columns';
$block-grid-max: 8;
// 4. Base Typography
@@ -210,8 +237,17 @@ $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
@@ -235,11 +271,15 @@ $breadcrumbs-item-color-current: $black;
$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;
@@ -248,6 +288,7 @@ $button-background-hover: scale-color($button-background, $lightness: -15%);
$button-color: $white;
$button-color-alt: $black;
$button-radius: $global-radius;
+$button-hollow-border-width: 1px;
$button-sizes: (
tiny: 0.6rem,
small: 0.75rem,
@@ -292,7 +333,7 @@ $card-border: 1px solid $light-gray;
$card-shadow: none;
$card-border-radius: $global-radius;
$card-padding: $global-padding;
-$card-margin: $global-margin;
+$card-margin-bottom: $global-margin;
// 15. Close Button
// ----------------
@@ -319,9 +360,13 @@ $closebutton-color-hover: $black;
$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: $white;
$drilldown-arrow-color: $primary-color;
$drilldown-arrow-size: 6px;
-$drilldown-background: $white;
// 17. Dropdown
// ------------
@@ -344,11 +389,24 @@ $dropdown-sizes: (
$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: $light-gray;
+$dropdown-menu-item-background-active: transparent;
+
+// 19. Flexbox Utilities
+// ---------------------
-// 19. Forms
+$flex-source-ordering-count: 6;
+$flexbox-responsive-breakpoints: true;
+
+// 20. Forms
// ---------
$fieldset-border: 1px solid $medium-gray;
@@ -375,11 +433,13 @@ $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: not-allowed;
@@ -388,7 +448,7 @@ $input-number-spinners: true;
$input-radius: $global-radius;
$form-button-radius: $global-radius;
-// 20. Label
+// 21. Label
// ---------
$label-background: $primary-color;
@@ -399,26 +459,28 @@ $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: get-color(primary);
$menu-icon-spacing: 0.25rem;
$menu-item-background-hover: $light-gray;
-$menu-border: $light-gray;
+$menu-state-back-compat: true;
+$menu-centered-back-compat: true;
-// 23. Meter
+// 24. Meter
// ---------
$meter-height: 1rem;
@@ -428,23 +490,26 @@ $meter-fill-good: $success-color;
$meter-fill-medium: $warning-color;
$meter-fill-bad: $alert-color;
-// 24. Off-canvas
+// 25. Off-canvas
// --------------
$offcanvas-size: 250px;
$offcanvas-vertical-size: 250px;
-$offcanvas-background: $light-gray;
+$offcanvas-background: $dark-nav-color;
$offcanvas-shadow: 0 0 10px rgba($black, 0.7);
-$offcanvas-push-zindex: 1;
-$offcanvas-overlap-zindex: 10;
-$offcanvas-reveal-zindex: 1;
+$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';
-// 25. Orbit
+// 26. Orbit
// ---------
$orbit-bullet-background: $medium-gray;
@@ -459,7 +524,7 @@ $orbit-control-background-hover: rgba($black, 0.5);
$orbit-control-padding: 1rem;
$orbit-control-zindex: 10;
-// 26. Pagination
+// 27. Pagination
// --------------
$pagination-font-size: rem-calc(14);
@@ -477,7 +542,7 @@ $pagination-mobile-items: false;
$pagination-mobile-current-item: false;
$pagination-arrows: true;
-// 27. Progress Bar
+// 28. Progress Bar
// ----------------
$progress-height: 1rem;
@@ -486,7 +551,168 @@ $progress-margin-bottom: $global-margin;
$progress-meter-background: $primary-color;
$progress-radius: $global-radius;
-// 28. Responsive Embed
+// 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);
@@ -495,7 +721,7 @@ $responsive-embed-ratios: (
widescreen: 16 by 9,
);
-// 29. Reveal
+// 47. Reveal
// ----------
$reveal-background: $white;
@@ -507,7 +733,7 @@ $reveal-radius: $global-radius;
$reveal-zindex: 1005;
$reveal-overlay-background: rgba($black, 0.45);
-// 30. Slider
+// 48. Slider
// ----------
$slider-width-vertical: 0.5rem;
@@ -521,7 +747,7 @@ $slider-handle-background: $primary-color;
$slider-opacity-disabled: 0.25;
$slider-radius: $global-radius;
-// 31. Switch
+// 49. Switch
// ----------
$switch-background: $medium-gray;
@@ -537,7 +763,7 @@ $switch-paddle-offset: 0.25rem;
$switch-paddle-radius: $global-radius;
$switch-paddle-transition: all 0.25s ease-out;
-// 32. Table
+// 50. Table
// ---------
$table-background: $white;
@@ -557,8 +783,9 @@ $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;
-// 33. Tabs
+// 51. Tabs
// --------
$tab-margin: 0;
@@ -575,7 +802,7 @@ $tab-content-border: $light-gray;
$tab-content-color: $body-font-color;
$tab-content-padding: 1rem;
-// 34. Thumbnail
+// 52. Thumbnail
// -------------
$thumbnail-border: solid 4px $white;
@@ -585,36 +812,53 @@ $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
$thumbnail-transition: box-shadow 200ms ease-out;
$thumbnail-radius: $global-radius;
-// 35. Title Bar
+// 53. Title Bar
// -------------
-$titlebar-background: $light-gray;
-$titlebar-color: $body-font-color;
+$titlebar-background: $dark-nav-color;
+$titlebar-color: $white;
$titlebar-padding: 0.5rem;
$titlebar-text-font-weight: bold;
-$titlebar-icon-color: $body-font-color;
-$titlebar-icon-color-hover: $black;
+$titlebar-icon-color: $white;
+$titlebar-icon-color-hover: $medium-gray;
$titlebar-icon-spacing: 0.25rem;
-// 36. 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;
-// 37. Top Bar
+// 55. Top Bar
// -----------
-$topbar-padding: 0.5rem;
-$topbar-background: $light-gray;
+$topbar-padding: 0rem;
+$topbar-background: $dark-nav-color;
$topbar-submenu-background: $topbar-background;
$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;
+$block-grid-max: 8;
diff --git a/assets/scss/foundation.scss b/src/assets/scss/app.scss
similarity index 62%
rename from assets/scss/foundation.scss
rename to src/assets/scss/app.scss
index 0dc47be6f..24e615f1d 100644
--- a/assets/scss/foundation.scss
+++ b/src/assets/scss/app.scss
@@ -1,42 +1,18 @@
-/*
- Foundation for Sites components:
- Import the building blocks you need for your project.
- Reducing the number of imported components will optimize page speed.
- ---------------------------------------------------------------------
- The Foundation framework is built by Zurb
- Licensed under MIT Open Source
-*/
-
-
-// Settings
-@import "global/settings"; // Foundation settings file.
-@import "global/demosite-settings"; // These settings are only used for the demosite. Feel free to remove.
-
-// Foundation mixins & browser resets
-@import '../components/foundation-sites/scss/foundation';
-
-
-// WP overrides
-@import "global/wp-admin"; // Fix issues with wp-admin bar positioning
-@import "global/wp-overrides"; // Override the default WordPress styling for some elements
-@import "global/accessibility";
+@charset 'utf-8';
-// Third-party libraries
-@import 'font-awesome';
+@import 'settings';
+@import 'foundation';
@import 'motion-ui';
-
-// Foundation global styles
@include foundation-global-styles;
-
-
-// Individual foundation components
@include foundation-grid;
-// @include foundation-flex-grid;
+@include foundation-flex-grid;
+@include foundation-xy-grid-classes;
@include foundation-typography;
-@include foundation-forms;
@include foundation-button;
+@include foundation-forms;
+// @include foundation-range-input;
@include foundation-accordion;
@include foundation-accordion-menu;
@include foundation-badge;
@@ -68,10 +44,11 @@
@include foundation-tooltip;
@include foundation-top-bar;
@include foundation-visibility-classes;
-@include foundation-float-classes;
-// @include foundation-flex-classes;
+// @include foundation-float-classes;
+@include foundation-flex-classes;
+
+// @include foundation-prototype-classes;
-// Motion UI
@include motion-ui-transitions;
@include motion-ui-animations;
@@ -80,6 +57,12 @@
Add your scss files below to structure your project styles
*/
+// Glboal
+@import "global/_accessibility";
+@import "global/colors";
+@import "global/wp-admin";
+@import "global/wp-overrides";
+
// Modules
@import "modules/navigation";
@import "modules/content";
diff --git a/assets/scss/components/_buttons.scss b/src/assets/scss/components/_buttons.scss
similarity index 82%
rename from assets/scss/components/_buttons.scss
rename to src/assets/scss/components/_buttons.scss
index 421bbdee7..e8379ae36 100644
--- a/assets/scss/components/_buttons.scss
+++ b/src/assets/scss/components/_buttons.scss
@@ -1,5 +1,5 @@
.sites-button {
- background: #FF6908;
+ background: $primary-color;
font-size: 1.25rem;
font-weight: bold;
box-shadow: 0 -2px 0 rgba(0,0,0,0.2) inset;
diff --git a/src/assets/scss/components/_cards.scss b/src/assets/scss/components/_cards.scss
new file mode 100644
index 000000000..ba61bb026
--- /dev/null
+++ b/src/assets/scss/components/_cards.scss
@@ -0,0 +1,21 @@
+.cards-container {
+
+ @include xy-grid;
+
+ .card {
+ @include breakpoint(small) {
+ @include xy-cell(12);
+
+ .card-content {
+ padding: 1rem;
+ }
+
+ }
+
+ @include breakpoint(medium) {
+ @include xy-cell(1 of 3, true, 0.7rem );
+
+ }
+
+ }
+}
diff --git a/assets/scss/components/_dividers.scss b/src/assets/scss/components/_dividers.scss
similarity index 100%
rename from assets/scss/components/_dividers.scss
rename to src/assets/scss/components/_dividers.scss
diff --git a/assets/scss/components/_featured-image.scss b/src/assets/scss/components/_featured-image.scss
similarity index 100%
rename from assets/scss/components/_featured-image.scss
rename to src/assets/scss/components/_featured-image.scss
diff --git a/assets/scss/components/_links.scss b/src/assets/scss/components/_links.scss
similarity index 100%
rename from assets/scss/components/_links.scss
rename to src/assets/scss/components/_links.scss
diff --git a/assets/scss/global/_accessibility.scss b/src/assets/scss/global/_accessibility.scss
similarity index 100%
rename from assets/scss/global/_accessibility.scss
rename to src/assets/scss/global/_accessibility.scss
diff --git a/src/assets/scss/global/_colors.scss b/src/assets/scss/global/_colors.scss
new file mode 100644
index 000000000..591a66915
--- /dev/null
+++ b/src/assets/scss/global/_colors.scss
@@ -0,0 +1 @@
+$dark-nav-color: #2C3840;
diff --git a/assets/scss/global/_wp-admin.scss b/src/assets/scss/global/_wp-admin.scss
similarity index 100%
rename from assets/scss/global/_wp-admin.scss
rename to src/assets/scss/global/_wp-admin.scss
diff --git a/assets/scss/global/_wp-overrides.scss b/src/assets/scss/global/_wp-overrides.scss
similarity index 100%
rename from assets/scss/global/_wp-overrides.scss
rename to src/assets/scss/global/_wp-overrides.scss
diff --git a/src/assets/scss/modules/_content.scss b/src/assets/scss/modules/_content.scss
new file mode 100644
index 000000000..d48b87887
--- /dev/null
+++ b/src/assets/scss/modules/_content.scss
@@ -0,0 +1,57 @@
+.main-wrap {
+ @include xy-grid-container;
+ @include xy-grid();
+ margin-top: 1rem;
+
+ @include breakpoint(medium) {
+ margin-top: 3rem;
+ }
+
+ &.sidebar-left {
+
+ // Place the sidebar below main content on small screens ...
+ @include breakpoint(small) {
+ .main-content { order: 1; }
+ .sidebar { order: 2; }
+ }
+
+ // ... and to the left on medium-up screens, when using the sidebar-left template
+ @include breakpoint(medium) {
+ .main-content { order: 2; }
+ .sidebar { order: 1; }
+ }
+ }
+
+ // Full width template
+ &.full-width {
+ .main-content {
+ @include xy-cell(12);
+ }
+ }
+
+ .main-content {
+
+ // Default template
+ @include breakpoint(small) {
+ @include xy-cell(12);
+ }
+
+ @include breakpoint(medium) {
+ @include xy-cell(8);
+ }
+
+ }
+
+ .sidebar {
+
+ @include breakpoint(small) {
+ @include xy-cell(12);
+ }
+
+ @include breakpoint(medium) {
+ @include xy-cell(4);
+ margin-top: 1rem;
+ }
+
+ }
+}
diff --git a/assets/scss/modules/_editor-style.scss b/src/assets/scss/modules/_editor-style.scss
similarity index 100%
rename from assets/scss/modules/_editor-style.scss
rename to src/assets/scss/modules/_editor-style.scss
diff --git a/assets/scss/modules/_footer.scss b/src/assets/scss/modules/_footer.scss
similarity index 91%
rename from assets/scss/modules/_footer.scss
rename to src/assets/scss/modules/_footer.scss
index 028d85740..38637b177 100644
--- a/assets/scss/modules/_footer.scss
+++ b/src/assets/scss/modules/_footer.scss
@@ -7,7 +7,7 @@
}
.footer {
- @include grid-row();
+ @include xy-grid;
padding: rem-calc(30) 0;
ul {
@@ -15,4 +15,4 @@
margin: 0;
padding: 0;
}
-}
\ No newline at end of file
+}
diff --git a/assets/scss/modules/_navigation.scss b/src/assets/scss/modules/_navigation.scss
similarity index 96%
rename from assets/scss/modules/_navigation.scss
rename to src/assets/scss/modules/_navigation.scss
index 35820b9ca..0372681c5 100644
--- a/assets/scss/modules/_navigation.scss
+++ b/src/assets/scss/modules/_navigation.scss
@@ -9,19 +9,11 @@
@include show-for(medium);
}
-
-
// Site title
-.site-mobile-title a {
- // placeholder
-}
-
.site-desktop-title a {
font-weight: bold;
}
-
-
// Mobile menu
.mobile-menu {
display: none; // prevents repaint caused by JS hiding menu onload
@@ -47,8 +39,6 @@
}
}
-
-
// Tablet and desktop menu
.desktop-menu {
@@ -82,4 +72,4 @@
.nav-next {
float:right;
-}
\ No newline at end of file
+}
diff --git a/assets/scss/templates/_demosite.scss b/src/assets/scss/templates/_demosite.scss
similarity index 88%
rename from assets/scss/templates/_demosite.scss
rename to src/assets/scss/templates/_demosite.scss
index a83a67b13..4d929f8b5 100644
--- a/assets/scss/templates/_demosite.scss
+++ b/src/assets/scss/templates/_demosite.scss
@@ -27,7 +27,7 @@
}
}
- .menu .active > a { background-color: lighten($dark-grey, 10%); }
+ .menu .active > a { background-color: #ccc; }
}
@@ -41,6 +41,12 @@
// Tablet and desktop menu
.top-bar {
+ //background-color: #2C3840;
+
+ ul {
+ //background-color: #2C3840;
+ }
+
.top-bar-title a {
font-size: 1rem;
color: #B9B9B9;
@@ -61,7 +67,7 @@
}
}
- .menu .active > a { background-color: lighten($dark-grey, 10%); }
+ .menu .active > a { background-color: #ccc; }
.menu>li:not(.menu-text)>a { padding: 1rem; }
.menu li:not(:last-child) { border-right: 1px solid #4e4e4e; }
diff --git a/assets/scss/templates/_front.scss b/src/assets/scss/templates/_front.scss
similarity index 80%
rename from assets/scss/templates/_front.scss
rename to src/assets/scss/templates/_front.scss
index 382b2b430..f9316c9f3 100644
--- a/assets/scss/templates/_front.scss
+++ b/src/assets/scss/templates/_front.scss
@@ -1,8 +1,8 @@
// Page header
.front-hero {
.marketing {
- @include grid-row();
- max-width: 55rem;
+ @include xy-grid-container(55rem);
+ @include xy-grid;
}
@include breakpoint(small) {
@@ -26,17 +26,11 @@
.watch {
@include breakpoint(small) {
- @include grid-column(7);
- @include grid-column-position(-5);
+ @include xy-cell(7);
}
@include breakpoint(medium) {
- @include grid-column(12);
- @include grid-column-position(0);
- }
-
- section {
- display: inline;
+ @include xy-cell(12);
}
a {
@@ -50,7 +44,7 @@
color: #fff;
}
- .stargazers {
+ #stargazers {
:before {
content: "\f09b";
font-family: FontAwesome;
@@ -62,7 +56,7 @@
}
}
- .twitter {
+ #twitter {
:before {
content: "\f099";
font-family: FontAwesome;
@@ -78,11 +72,11 @@
.tagline {
@include breakpoint(small) {
- @include grid-column(8);
+ @include xy-cell(8);
}
@include breakpoint(medium) {
- @include grid-column(5);
+ @include xy-cell(5);
padding-top: 6rem;
}
}
@@ -113,16 +107,17 @@
// Intro
.intro {
- @include grid-row();
+ @include xy-grid-container;
+ @include xy-grid;
.fp-intro {
@include breakpoint(small) {
- @include grid-column(12);
+ @include xy-cell(12);
}
@include breakpoint(medium) {
- @include grid-column(10);
- @include grid-column-offset(1);
+ @include xy-cell(10);
+ @include xy-cell-offset(1);
h2 {
font-weight: 300;
@@ -141,23 +136,24 @@
// Section divider
.section-divider {
- @include grid-row();
+ @include xy-grid-container;
+ @include xy-grid;
hr {
- @include grid-column(12);
+ @include xy-cell(12);
@extend .dotted;
box-sizing: border-box;
}
}
-
// Benefits
.benefits {
- @include grid-row();
+ @include xy-grid-container;
+ @include xy-grid;
text-align: center;
header {
- @include grid-column(12);
+ @include xy-cell(12);
h2 {
font-weight: 300;
@@ -175,11 +171,11 @@
.customizable,
.professional {
@include breakpoint(small) {
- @include grid-column(12);
+ @include xy-cell(12);
}
@include breakpoint(medium) {
- @include grid-column(3);
+ @include xy-cell(3);
}
img {
@@ -199,8 +195,7 @@
}
.why-foundation {
- @include grid-row();
- @include grid-column(12);
+ @include xy-cell(12);
margin-top: 4rem;
}
}
diff --git a/assets/scss/templates/_kitchen-sink.scss b/src/assets/scss/templates/_kitchen-sink.scss
similarity index 91%
rename from assets/scss/templates/_kitchen-sink.scss
rename to src/assets/scss/templates/_kitchen-sink.scss
index f9f5f6503..068f025ca 100644
--- a/assets/scss/templates/_kitchen-sink.scss
+++ b/src/assets/scss/templates/_kitchen-sink.scss
@@ -1,5 +1,5 @@
.kitchen-sink-header {
- @include grid-column(12);
+ @include xy-cell(12);
}
@@ -9,11 +9,11 @@
}
@include breakpoint(small) {
- @include grid-column(12);
+ @include xy-cell(12);
}
@include breakpoint(large) {
- @include grid-column(9);
+ @include xy-cell(9);
}
}
@@ -23,7 +23,7 @@
}
@include breakpoint(large) {
- @include grid-column(3);
+ @include xy-cell(3);
display: block;
float: right;
@@ -76,4 +76,4 @@
.columns:nth-child(2), .columns.small-centered, .columns.large-centered {
background: #e1e1e1;
}
-}
\ No newline at end of file
+}
diff --git a/style.css b/style.css
index e6cdc5c66..72c7d9915 100644
--- a/style.css
+++ b/style.css
@@ -3,7 +3,7 @@ Theme Name: FoundationPress
Theme URI: http://foundationpress.olefredrik.com
Github Theme URI: https://github.com/olefredrik/FoundationPress
Description: FoundationPress is a WordPress starter theme based on Foundation 6 by Zurb
-Version: 2.9.3
+Version: 2.10.0
Author: Ole Fredrik Lie
Author URI: http://olefredrik.com/
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 000000000..8ac66a35b
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+ externals: {
+ jquery: 'jQuery'
+ },
+};