From c3f2c05ddcfcb18f02faa0c7db0d73b11b4e82ca Mon Sep 17 00:00:00 2001 From: colin-marshall Date: Tue, 8 Dec 2015 16:41:39 -0700 Subject: [PATCH 1/2] Refactored foundation.scss --- assets/scss/foundation.scss | 129 +++++++++++++----------------------- 1 file changed, 45 insertions(+), 84 deletions(-) diff --git a/assets/scss/foundation.scss b/assets/scss/foundation.scss index b510392ec..43adbdb38 100755 --- a/assets/scss/foundation.scss +++ b/assets/scss/foundation.scss @@ -7,104 +7,65 @@ Licensed under MIT Open Source */ -// Third-party libraries -@import '../components/foundation-sites/scss/vendor/normalize'; -@import '../components/fontawesome/scss/font-awesome.scss'; -@import '../components/motion-ui/motion-ui.scss'; +// Settings +@import "global/settings"; // Foundation settings file. -// Sass utilities -@import '../components/foundation-sites/scss/util/util'; +// Foundation browser resets & mixins +@import '../components/foundation-sites/scss/foundation'; -// Settings and wp-override styles: -@import "global/settings"; // Default settings file. Uncomment each setting you need to change +// 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 -// Global variables and styles -@import '../components/foundation-sites/scss/global'; - -// Components -@import '../components/foundation-sites/scss/grid/grid'; -@import '../components/foundation-sites/scss/typography/typography'; -@import '../components/foundation-sites/scss/forms/forms'; -@import '../components/foundation-sites/scss/components/visibility'; -@import '../components/foundation-sites/scss/components/float'; -@import '../components/foundation-sites/scss/components/button'; -@import '../components/foundation-sites/scss/components/button-group'; -@import '../components/foundation-sites/scss/components/accordion-menu'; -@import '../components/foundation-sites/scss/components/accordion'; -@import '../components/foundation-sites/scss/components/badge'; -@import '../components/foundation-sites/scss/components/breadcrumbs'; -@import '../components/foundation-sites/scss/components/callout'; -@import '../components/foundation-sites/scss/components/close-button'; -@import '../components/foundation-sites/scss/components/drilldown'; -@import '../components/foundation-sites/scss/components/dropdown-menu'; -@import '../components/foundation-sites/scss/components/dropdown'; -@import '../components/foundation-sites/scss/components/flex-video'; -@import '../components/foundation-sites/scss/components/label'; -@import '../components/foundation-sites/scss/components/media-object'; -@import '../components/foundation-sites/scss/components/menu'; -@import '../components/foundation-sites/scss/components/off-canvas'; -@import '../components/foundation-sites/scss/components/orbit'; -@import '../components/foundation-sites/scss/components/pagination'; -@import '../components/foundation-sites/scss/components/progress-bar'; -@import '../components/foundation-sites/scss/components/reveal'; -@import '../components/foundation-sites/scss/components/slider'; -@import '../components/foundation-sites/scss/components/sticky'; -@import '../components/foundation-sites/scss/components/switch'; -@import '../components/foundation-sites/scss/components/table'; -@import '../components/foundation-sites/scss/components/tabs'; -@import '../components/foundation-sites/scss/components/title-bar'; -@import '../components/foundation-sites/scss/components/top-bar'; -@import '../components/foundation-sites/scss/components/thumbnail'; -@import '../components/foundation-sites/scss/components/tooltip'; +// Third-party libraries +@import '../components/fontawesome/scss/font-awesome'; +@import '../components/motion-ui/motion-ui'; // These styles are applied to tags, which are read by the Foundation JavaScript .foundation-mq { font-family: "#{-zf-bp-serialize($breakpoints)}"; } -@mixin foundation-everything { - @include foundation-global-styles; - @include foundation-grid; - @include foundation-typography; - @include foundation-button; - @include foundation-forms; - @include foundation-visibility-classes; - @include foundation-float-classes; - @include foundation-accordion; - @include foundation-accordion-menu; - @include foundation-badge; - @include foundation-breadcrumbs; - @include foundation-button-group; - @include foundation-callout; - @include foundation-close-button; - @include foundation-drilldown-menu; - @include foundation-dropdown; - @include foundation-dropdown-menu; - @include foundation-flex-video; - @include foundation-label; - @include foundation-media-object; - @include foundation-menu; - @include foundation-off-canvas; - @include foundation-orbit; - @include foundation-pagination; - @include foundation-progress-bar; - @include foundation-slider; - @include foundation-sticky; - @include foundation-reveal; - @include foundation-switch; - @include foundation-table; - @include foundation-tabs; - @include foundation-thumbnail; - @include foundation-title-bar; - @include foundation-tooltip; - @include foundation-top-bar; -} - // Include all foundation components @include foundation-everything; +// Include individual components +// @include foundation-global-styles; +// @include foundation-grid; +// @include foundation-typography; +// @include foundation-button; +// @include foundation-forms; +// @include foundation-visibility-classes; +// @include foundation-float-classes; +// @include foundation-accordion; +// @include foundation-accordion-menu; +// @include foundation-badge; +// @include foundation-breadcrumbs; +// @include foundation-button-group; +// @include foundation-callout; +// @include foundation-close-button; +// @include foundation-drilldown-menu; +// @include foundation-dropdown; +// @include foundation-dropdown-menu; +// @include foundation-flex-video; +// @include foundation-label; +// @include foundation-media-object; +// @include foundation-menu; +// @include foundation-off-canvas; +// @include foundation-orbit; +// @include foundation-pagination; +// @include foundation-progress-bar; +// @include foundation-slider; +// @include foundation-sticky; +// @include foundation-reveal; +// @include foundation-switch; +// @include foundation-table; +// @include foundation-tabs; +// @include foundation-thumbnail; +// @include foundation-title-bar; +// @include foundation-tooltip; +// @include foundation-top-bar; + /* My custom styles: Add your scss files below to structure your project styles From 8de4c071f1d857f919b1fa1e62a56e11e9e6d1cf Mon Sep 17 00:00:00 2001 From: colin-marshall Date: Thu, 10 Dec 2015 18:03:32 -0700 Subject: [PATCH 2/2] Modified Foundation settings file --- assets/scss/foundation.scss | 88 ++++++++++++++++++------------------- gulpfile.js | 3 +- 2 files changed, 45 insertions(+), 46 deletions(-) diff --git a/assets/scss/foundation.scss b/assets/scss/foundation.scss index 43adbdb38..d0edf4c38 100755 --- a/assets/scss/foundation.scss +++ b/assets/scss/foundation.scss @@ -10,7 +10,7 @@ // Settings @import "global/settings"; // Foundation settings file. -// Foundation browser resets & mixins +// Foundation mixins & browser resets @import '../components/foundation-sites/scss/foundation'; // WP overrides @@ -18,53 +18,51 @@ @import "global/wp-overrides"; // Override the default WordPress styling for some elements // Third-party libraries -@import '../components/fontawesome/scss/font-awesome'; -@import '../components/motion-ui/motion-ui'; +@import 'font-awesome'; +@import 'motion-ui'; -// These styles are applied to tags, which are read by the Foundation JavaScript -.foundation-mq { - font-family: "#{-zf-bp-serialize($breakpoints)}"; -} +// Foundation global styles +@include foundation-global-styles; -// Include all foundation components -@include foundation-everything; +// Individual foundation components +@include foundation-grid; +@include foundation-typography; +@include foundation-button; +@include foundation-forms; +@include foundation-visibility-classes; +@include foundation-float-classes; +@include foundation-accordion; +@include foundation-accordion-menu; +@include foundation-badge; +@include foundation-breadcrumbs; +@include foundation-button-group; +@include foundation-callout; +@include foundation-close-button; +@include foundation-drilldown-menu; +@include foundation-dropdown; +@include foundation-dropdown-menu; +@include foundation-flex-video; +@include foundation-label; +@include foundation-media-object; +@include foundation-menu; +@include foundation-off-canvas; +@include foundation-orbit; +@include foundation-pagination; +@include foundation-progress-bar; +@include foundation-slider; +@include foundation-sticky; +@include foundation-reveal; +@include foundation-switch; +@include foundation-table; +@include foundation-tabs; +@include foundation-thumbnail; +@include foundation-title-bar; +@include foundation-tooltip; +@include foundation-top-bar; -// Include individual components -// @include foundation-global-styles; -// @include foundation-grid; -// @include foundation-typography; -// @include foundation-button; -// @include foundation-forms; -// @include foundation-visibility-classes; -// @include foundation-float-classes; -// @include foundation-accordion; -// @include foundation-accordion-menu; -// @include foundation-badge; -// @include foundation-breadcrumbs; -// @include foundation-button-group; -// @include foundation-callout; -// @include foundation-close-button; -// @include foundation-drilldown-menu; -// @include foundation-dropdown; -// @include foundation-dropdown-menu; -// @include foundation-flex-video; -// @include foundation-label; -// @include foundation-media-object; -// @include foundation-menu; -// @include foundation-off-canvas; -// @include foundation-orbit; -// @include foundation-pagination; -// @include foundation-progress-bar; -// @include foundation-slider; -// @include foundation-sticky; -// @include foundation-reveal; -// @include foundation-switch; -// @include foundation-table; -// @include foundation-tabs; -// @include foundation-thumbnail; -// @include foundation-title-bar; -// @include foundation-tooltip; -// @include foundation-top-bar; +// Motion UI +@include motion-ui-transitions; +@include motion-ui-animations; /* My custom styles: diff --git a/gulpfile.js b/gulpfile.js index 6603cdb50..7c17994f2 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -23,7 +23,8 @@ var COMPATIBILITY = ['last 2 versions', 'ie >= 9']; var PATHS = { sass: [ 'assets/components/foundation-sites/scss', - 'assets/components/motion-ui/src/' + 'assets/components/motion-ui/src', + 'assets/components/fontawesome/scss' ], javascript: [ 'assets/components/jquery/dist/jquery.js',