diff --git a/.babelrc b/.babelrc new file mode 100644 index 000000000..34c75dda2 --- /dev/null +++ b/.babelrc @@ -0,0 +1,17 @@ +{ + "plugins": [ + "transform-es2015-arrow-functions", + "transform-es2015-block-scoped-functions", + "transform-es2015-block-scoping", + "transform-es2015-classes", + "transform-es2015-destructuring", + "transform-es2015-template-literals", + "transform-es2015-parameters", + "transform-es2015-shorthand-properties", + "transform-es2015-spread", + ["transform-es2015-modules-commonjs", { + "allowTopLevelThis": true + }] + ], + "compact": false +} \ No newline at end of file diff --git a/assets/fonts/FontAwesome.otf b/assets/fonts/FontAwesome.otf index 681bdd4d4..3ed7f8b48 100644 Binary files a/assets/fonts/FontAwesome.otf and b/assets/fonts/FontAwesome.otf differ diff --git a/assets/fonts/fontawesome-webfont.eot b/assets/fonts/fontawesome-webfont.eot index a30335d74..9b6afaedc 100644 Binary files a/assets/fonts/fontawesome-webfont.eot and b/assets/fonts/fontawesome-webfont.eot differ diff --git a/assets/fonts/fontawesome-webfont.svg b/assets/fonts/fontawesome-webfont.svg index 6fd19abcb..d05688e9e 100644 --- a/assets/fonts/fontawesome-webfont.svg +++ b/assets/fonts/fontawesome-webfont.svg @@ -1,6 +1,6 @@ - + @@ -219,8 +219,8 @@ - - + + @@ -362,7 +362,7 @@ - + @@ -410,7 +410,7 @@ - + @@ -454,7 +454,7 @@ - + @@ -555,7 +555,7 @@ - + @@ -600,11 +600,11 @@ - - + + - + @@ -621,20 +621,35 @@ - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/fonts/fontawesome-webfont.ttf b/assets/fonts/fontawesome-webfont.ttf index d7994e130..26dea7951 100644 Binary files a/assets/fonts/fontawesome-webfont.ttf and b/assets/fonts/fontawesome-webfont.ttf differ diff --git a/assets/fonts/fontawesome-webfont.woff b/assets/fonts/fontawesome-webfont.woff index 6fd4ede0f..dc35ce3c2 100644 Binary files a/assets/fonts/fontawesome-webfont.woff and b/assets/fonts/fontawesome-webfont.woff differ diff --git a/assets/fonts/fontawesome-webfont.woff2 b/assets/fonts/fontawesome-webfont.woff2 index 5560193cc..500e51725 100644 Binary files a/assets/fonts/fontawesome-webfont.woff2 and b/assets/fonts/fontawesome-webfont.woff2 differ diff --git a/assets/scss/foundation.scss b/assets/scss/foundation.scss index e20625471..8637a9108 100755 --- a/assets/scss/foundation.scss +++ b/assets/scss/foundation.scss @@ -25,12 +25,13 @@ @include foundation-global-styles; // Individual foundation components +@include foundation-global-styles; @include foundation-grid; +// @include foundation-flex-grid; @include foundation-typography; @include foundation-button; @include foundation-forms; -@include foundation-visibility-classes; -@include foundation-float-classes; +@include foundation-range-input; @include foundation-accordion; @include foundation-accordion-menu; @include foundation-badge; @@ -49,6 +50,8 @@ @include foundation-orbit; @include foundation-pagination; @include foundation-progress-bar; +@include foundation-progress-element; +@include foundation-meter-element; @include foundation-slider; @include foundation-sticky; @include foundation-reveal; @@ -59,6 +62,10 @@ @include foundation-title-bar; @include foundation-tooltip; @include foundation-top-bar; +@include foundation-visibility-classes; +@include foundation-float-classes; +@include foundation-menu-icon; +// @include foundation-flex-classes; // Motion UI @include motion-ui-transitions; diff --git a/assets/scss/global/_settings.scss b/assets/scss/global/_settings.scss index bcdee507e..85b6d49f7 100755 --- a/assets/scss/global/_settings.scss +++ b/assets/scss/global/_settings.scss @@ -25,19 +25,20 @@ // 20. Label // 21. Media Object // 22. Menu -// 23. Off-canvas -// 24. Orbit -// 25. Pagination -// 26. Progress Bar -// 27. Reveal -// 28. Slider -// 29. Switch -// 30. Table -// 31. Tabs -// 32. Thumbnail -// 33. Title Bar -// 34. Tooltip -// 35. Top Bar +// 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 @import '../../components/foundation-sites/scss/util/util'; @@ -67,6 +68,8 @@ $global-weight-normal: normal; $global-weight-bold: bold; $global-radius: 0; $global-text-direction: ltr; +$global-flexbox: false; +$print-transparent-backgrounds: true; // 2. Breakpoints // -------------- @@ -85,7 +88,7 @@ $breakpoint-classes: (small medium large); $grid-row-width: $global-width; $grid-column-count: 12; -$grid-column-responsive-gutter: ( +$grid-column-gutter: ( small: 20px, medium: 30px, ); @@ -335,6 +338,7 @@ $select-background: $white; $select-triangle-color: #333; $select-radius: $global-radius; $input-color: $black; +$input-placeholder-color: $medium-gray; $input-font-family: inherit; $input-font-size: rem-calc(16); $input-background: $white; @@ -371,10 +375,21 @@ $mediaobject-image-width-stacked: 100%; $menu-margin: 0; $menu-margin-nested: 1rem; $menu-item-padding: 0.7rem 1rem; +$menu-item-color-active: $white; +$menu-item-background-active: #121212; $menu-icon-spacing: 0.25rem; -$menu-expand-max: 6; -// 23. Off-canvas +// 23. Meter +// --------- + +$meter-height: 1rem; +$meter-radius: $global-radius; +$meter-background: $medium-gray; +$meter-fill-good: $success-color; +$meter-fill-medium: $warning-color; +$meter-fill-bad: $alert-color; + +// 24. Off-canvas // -------------- $offcanvas-size: 250px; @@ -387,7 +402,7 @@ $offcanvas-exit-background: rgba($white, 0.25); $maincontent-class: 'off-canvas-content'; $maincontent-shadow: 0 0 10px rgba($black, 0.5); -// 24. Orbit +// 25. Orbit // --------- $orbit-bullet-background: $medium-gray; @@ -402,7 +417,7 @@ $orbit-control-background-hover: rgba($black, 0.5); $orbit-control-padding: 1rem; $orbit-control-zindex: 10; -// 25. Pagination +// 26. Pagination // -------------- $pagination-font-size: rem-calc(14); @@ -419,7 +434,7 @@ $pagination-ellipsis-color: $black; $pagination-mobile-items: false; $pagination-arrows: true; -// 26. Progress Bar +// 27. Progress Bar // ---------------- $progress-height: 1rem; @@ -428,7 +443,7 @@ $progress-margin-bottom: $global-margin; $progress-meter-background: $primary-color; $progress-radius: $global-radius; -// 27. Reveal +// 28. Reveal // ---------- $reveal-background: $white; @@ -441,7 +456,7 @@ $reveal-radius: $global-radius; $reveal-zindex: 1005; $reveal-overlay-background: rgba($black, 0.45); -// 28. Slider +// 29. Slider // ---------- $slider-height: 0.5rem; @@ -455,7 +470,7 @@ $slider-opacity-disabled: 0.25; $slider-radius: $global-radius; $slider-transition: all 0.2s ease-in-out; -// 29. Switch +// 30. Switch // ---------- $switch-background: $medium-gray; @@ -471,7 +486,7 @@ $switch-paddle-offset: 0.25rem; $switch-paddle-radius: $global-radius; $switch-paddle-transition: all 0.25s ease-out; -// 30. Table +// 31. Table // --------- $table-background: $white; @@ -488,13 +503,12 @@ $table-foot-background: smart-scale($table-background, $table-color-scale); $table-head-font-color: $body-font-color; $show-header-for-stacked: false; -// 31. Tabs +// 32. Tabs // -------- $tab-margin: 0; $tab-background: $white; $tab-background-active: $light-gray; -$tab-border: $light-gray; $tab-item-color: foreground($tab-background, $primary-color); $tab-item-background-hover: $white; $tab-item-padding: 1.25rem 1.5rem; @@ -504,7 +518,7 @@ $tab-content-border: $light-gray; $tab-content-color: foreground($tab-background, $primary-color); $tab-content-padding: 1rem; -// 32. Thumbnail +// 33. Thumbnail // ------------- $thumbnail-border: solid 4px $white; @@ -514,7 +528,7 @@ $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5); $thumbnail-transition: box-shadow 200ms ease-out; $thumbnail-radius: $global-radius; -// 33. Title Bar +// 34. Title Bar // ------------- $titlebar-background: $black; @@ -525,7 +539,7 @@ $titlebar-icon-color: $white; $titlebar-icon-color-hover: $medium-gray; $titlebar-icon-spacing: 0.25rem; -// 34. Tooltip +// 35. Tooltip // ----------- $tooltip-background-color: $black; @@ -534,13 +548,14 @@ $tooltip-padding: 0.75rem; $tooltip-font-size: $small-font-size; $tooltip-pip-width: 0.75rem; $tooltip-pip-height: $tooltip-pip-width * 0.866; -$tooltip-pip-offset: 1.25rem; $tooltip-radius: $global-radius; -// 35. Top Bar +// 36. Top Bar // ----------- $topbar-padding: 0; $topbar-background: #121212; -$topbar-link-color: #ffffff; +$topbar-submenu-background: $topbar-background; +$topbar-link-color: #fff; $topbar-input-width: 200px; +$topbar-unstack-breakpoint: medium; diff --git a/assets/scss/modules/_navigation.scss b/assets/scss/modules/_navigation.scss index 6f1ae4261..3e72a6eac 100755 --- a/assets/scss/modules/_navigation.scss +++ b/assets/scss/modules/_navigation.scss @@ -58,5 +58,7 @@ .dropdown.menu .has-submenu.is-down-arrow a { padding-right: 1rem; } .dropdown.menu .has-submenu.is-down-arrow > a::after { border: 0; } - .is-dropdown-submenu-parent.is-down-arrow > a::after { display: none; } } + +.dropdown.menu > li.is-dropdown-submenu-parent > a::after { display: none; } + diff --git a/assets/scss/templates/_kitchen-sink.scss b/assets/scss/templates/_kitchen-sink.scss index 820a38f93..4e11fbd14 100644 --- a/assets/scss/templates/_kitchen-sink.scss +++ b/assets/scss/templates/_kitchen-sink.scss @@ -77,4 +77,18 @@ } + .row.display { + background: #eee; + font-size: 11px; + margin-bottom: 10px; + line-height: 2rem; + border: solid 1px #c6c6c6; + margin-left: 0 !important; + margin-right: 0 !important; + + .columns:nth-child(2), .columns.small-centered, .columns.large-centered { + background: #e1e1e1; + } + } + } diff --git a/bower.json b/bower.json index 0821bb7ce..4ec7d69d2 100755 --- a/bower.json +++ b/bower.json @@ -6,8 +6,8 @@ ], "ignore": [], "dependencies": { - "foundation-sites": "~6.1.0", - "motion-ui" : "~1.1.0", - "fontawesome": "~4.4.0" + "foundation-sites": "~6.2.0", + "motion-ui" : "~1.2.0", + "fontawesome": "~4.5.0" } } diff --git a/gulpfile.js b/gulpfile.js index 10e3f259a..f4f0b74d5 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -150,6 +150,7 @@ gulp.task('javascript', function() { return gulp.src(PATHS.javascript) .pipe($.sourcemaps.init()) + .pipe($.babel()) .pipe($.concat('foundation.js')) .pipe($.if(isProduction, uglify)) .pipe($.if(!isProduction, $.sourcemaps.write())) diff --git a/package.json b/package.json index 086d4aa71..461959fec 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "foundationpress", "title": "FoundationPress", - "version": "2.4.0", + "version": "2.5.0", "description": "FoundationPress is a WordPress starter theme based on Foundation 6 by Zurb", "keywords": [ "FoundationPress", @@ -23,6 +23,19 @@ }, "devDependencies": { "autoprefixer": "^6.1.0", + "babel-core": "^6.5.2", + "babel-preset-es2015": "^6.5.0", + "babel-plugin-transform-es2015-modules-commonjs": "^6.3.13", + "babel-plugin-transform-es2015-arrow-functions": "^6.3.13", + "babel-plugin-transform-es2015-block-scoped-functions": "^6.3.13", + "babel-plugin-transform-es2015-block-scoping": "^6.4.0", + "babel-plugin-transform-es2015-classes": "^6.3.15", + "babel-plugin-transform-es2015-destructuring": "^6.3.15", + "babel-plugin-transform-es2015-parameters": "^6.3.26", + "babel-plugin-transform-es2015-shorthand-properties": "^6.5.0", + "babel-plugin-transform-es2015-spread": "^6.4.0", + "babel-plugin-transform-es2015-template-literals": "^6.3.13", + "babel-register": "^6.5.2", "bower": "~1.6.4", "browser-sync": "^2.10.0", "colors": "^1.1.2", @@ -30,6 +43,7 @@ "del": "^2.2.0", "gulp": "^3.9.0", "gulp-autoprefixer": "^3.1.0", + "gulp-babel": "^6.1.2", "gulp-concat": "^2.6.0", "gulp-flatten": "^0.2.0", "gulp-if": "^2.0.0", diff --git a/page-templates/kitchen-sink.php b/page-templates/kitchen-sink.php index 3a7441c49..660663016 100755 --- a/page-templates/kitchen-sink.php +++ b/page-templates/kitchen-sink.php @@ -19,6 +19,96 @@
id="post-"> + +

Abide

+
+ +
+
+ +

Here's how you use this input field!

+
+
+ +

This input is ignored by Abide using `data-abide-ignore`

+
+
+ +

Enter a password please.

+
+
+ +

This field is using the `data-equalto="password"` attribute, causing it to match the password field above.

+
+
+
+
+ +
+
+ +
+
+
+
+ Choose Your Favorite, and this is required, so you have to pick one. + + + +
+
+ Choose Your Favorite - not required, you can leave this one blank. + + + +
+
+ Check these out + + + +
+
+
+
+ +
+
+ +
+
+
+
+

Accordion

+ +

Progress Bar

+
+
+

25%

+
+
+ +
+
+

50%

+
+
+ +
+
+

75%

+
+
+ +

+

Native progress: As an alternative to our custom progress bar style, you can also opt to use the native <progress> element. It provides a more succinct way to create progress bars, but it's not supported in IE9, and some other older browsers. View <progress> element support.

+ + +

+

Native meter: For the extra adventurous developers out there, we also provide styles for the <meter> element. What's the difference? <progress> represents a value that changes over time, like storage capacity. <meter> represents a value that fluctates around some optimum value. It also has no support in Internet Explorer, Mobile Safari, or Android 2. View <meter> element support.

+ + + +
+

Reveal

Click me for a basic modal

@@ -475,6 +623,9 @@ +

+

Native range slider: In Foundation 6.2, we introduced styles for <input type="range">, the native HTML element for range sliders. It's not supported in every browser, namely IE9 and some older mobile browsers. View browser support for the range input type.

+
@@ -602,11 +753,24 @@
+ +

Toggler

+

+ + +
+

Tooltip

The scarabaeus hung quite clear of any branches, and, if allowed to fall, would have fallen at our feet. Legrand immediately took the scythe, and cleared with it a circular space, three or four yards in diameter, just beneath the insect, and, having accomplished this, ordered Jupiter to let go the string and come down from the tree.

+

Top Bar

@@ -634,6 +798,38 @@
+ + +

Visibility classes

+
+ +

You are on a small screen or larger.

+

You are on a medium screen or larger.

+

You are on a large screen or larger.

+

You are definitely on a small screen.

+

You are definitely on a medium screen.

+

You are definitely on a large screen.

+ +

You are not on a medium screen or larger.

+

You are not on a large screen or larger.

+

You are definitely not on a small screen.

+

You are definitely not on a medium screen.

+

You are definitely not on a large screen.

+

Can't touch this.

+ + + +

You are in landscape orientation.

+

You are in portrait orientation.

+ +

This text can only be read by a screen reader.

+

There's a line of text above this one, you just can't see it.

+ + + +
+
+ @@ -642,6 +838,7 @@
diff --git a/style.css b/style.css index c19272243..e454f0d6a 100755 --- 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.4.0 +Version: 2.5.0 Author: Ole Fredrik Lie Author URI: http://olefredrik.com/