Use pull request #10856 from ncoden/chore/sort-sass-components-by-specificity for...

7ab97070d chore: sort CSS includes by specificity
952c9c619 docs: update list of Sass includes
fecf67d25 style: sort Sass components inside each category alphabetically

Signed-off-by: Nicolas Coden <nicolas@ncoden.fr>

diff --git a/docs/pages/sass.md b/docs/pages/sass.md
index 08c5ba081d9999876da3aa7b5dd45da28a6a08b4..6234587ac36a0ddf08ded0adcfd270c7bf4d8363 100644 (file)
--- a/docs/pages/sass.md
+++ b/docs/pages/sass.md
@@ -115,46 +115,60 @@ Our [starter projects](starter-projects.html) include the full list of imports,
 ```scss
 @import 'foundation';
 
+// Global styles
 @include foundation-global-styles;
-@include foundation-xy-grid-classes;
-//@include foundation-grid;
-//@include foundation-flex-grid;
-@include foundation-flex-classes;
-@include foundation-typography;
 @include foundation-forms;
+@include foundation-typography;
+
+// Grids (choose one)
+@include foundation-xy-grid-classes;
+// @include foundation-grid;
+// @include foundation-flex-grid;
+
+// Generic components
 @include foundation-button;
-@include foundation-accordion;
-@include foundation-accordion-menu;
+@include foundation-button-group;
+@include foundation-close-button;
+@include foundation-label;
+@include foundation-progress-bar;
+@include foundation-slider;
+@include foundation-switch;
+@include foundation-table;
+// Basic components
 @include foundation-badge;
 @include foundation-breadcrumbs;
-@include foundation-button-group;
 @include foundation-callout;
 @include foundation-card;
-@include foundation-close-button;
+@include foundation-dropdown;
+@include foundation-pagination;
+@include foundation-tooltip;
+
+// Containers
+@include foundation-accordion;
+@include foundation-media-object;
+@include foundation-orbit;
+@include foundation-responsive-embed;
+@include foundation-tabs;
+@include foundation-thumbnail;
+// Menu-based containers
 @include foundation-menu;
 @include foundation-menu-icon;
+@include foundation-accordion-menu;
 @include foundation-drilldown-menu;
-@include foundation-dropdown;
 @include foundation-dropdown-menu;
-@include foundation-responsive-embed;
-@include foundation-label;
-@include foundation-media-object;
+
+// Layout components
 @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-sticky;
 @include foundation-title-bar;
-@include foundation-tooltip;
 @include foundation-top-bar;
-@include foundation-visibility-classes;
+
+// Helpers
 @include foundation-float-classes;
+// @include foundation-flex-classes;
+@include foundation-visibility-classes;
+// @include foundation-prototype-classes;
 ```
 
 ---

diff --git a/meteor-README.md b/meteor-README.md
index f6cf5678e9c942d2a94c22a3cfbfda840af5b6b3..1b5f193b2adbe049a59bd16fb7d589f52bfcac6c 100644 (file)
--- a/meteor-README.md
+++ b/meteor-README.md
@@ -33,41 +33,62 @@ Each component has an export mixin which prints out the CSS for that component.
 Or you can comment out the components you don't need:
 
 ```
+@import 'foundation';
+
+// Global styles
 @include foundation-global-styles;
-@include foundation-grid;
+@include foundation-forms;
 @include foundation-typography;
+
+// Grids (choose one)
+@include foundation-xy-grid-classes;
+// @include foundation-grid;
+// @include foundation-flex-grid;
+
+// Generic components
 @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-responsive-embed;
 @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;
+// Basic components
+@include foundation-badge;
+@include foundation-breadcrumbs;
+@include foundation-callout;
+@include foundation-card;
+@include foundation-dropdown;
+@include foundation-pagination;
+@include foundation-tooltip;
+
+// Containers
+@include foundation-accordion;
+@include foundation-media-object;
+@include foundation-orbit;
+@include foundation-responsive-embed;
 @include foundation-tabs;
 @include foundation-thumbnail;
+// Menu-based containers
+@include foundation-menu;
+@include foundation-menu-icon;
+@include foundation-accordion-menu;
+@include foundation-drilldown-menu;
+@include foundation-dropdown-menu;
+
+// Layout components
+@include foundation-off-canvas;
+@include foundation-reveal;
+@include foundation-sticky;
 @include foundation-title-bar;
-@include foundation-tooltip;
 @include foundation-top-bar;
+
+// Helpers
+@include foundation-float-classes;
+// @include foundation-flex-classes;
+@include foundation-visibility-classes;
+// @include foundation-prototype-classes;
 ```
 
 Note: For now there is a Motion-UI library added in the package (css, js files). It is needed for some Foundation plugins. Maybe in the future it will be separated package.

diff --git a/scss/foundation.scss b/scss/foundation.scss
index f3bde15b9312a15b028a6fab1da025555e295069..8b755a8b06ea88e0a54d37f1ed1a423f661acf44 100644 (file)
--- a/scss/foundation.scss
+++ b/scss/foundation.scss
@@ -15,58 +15,68 @@
 @import '../_vendor/sassy-lists/stylesheets/functions/replace';
 @import '../_vendor/sassy-lists/stylesheets/functions/to-list';
 
-// Settings
+// --- Settings ---
 // import your own `settings` here or
 // import and modify the default settings through
 // @import 'settings/settings';
 
-// Sass utilities
+// --- Components ---
+// Utilities
 @import 'util/util';
-
-// Global variables and styles
+// Global styles
 @import 'global';
+@import 'forms/forms';
+@import 'typography/typography';
 
-// Components
+// Grids
 @import 'grid/grid';
 @import 'xy-grid/xy-grid';
-@import 'typography/typography';
-@import 'forms/forms';
-@import 'components/visibility';
-@import 'components/float';
+// Generic components
 @import 'components/button';
 @import 'components/button-group';
-@import 'components/accordion-menu';
-@import 'components/accordion';
+@import 'components/close-button';
+@import 'components/label';
+@import 'components/progress-bar';
+@import 'components/slider';
+@import 'components/switch';
+@import 'components/table';
+// Basic components
 @import 'components/badge';
 @import 'components/breadcrumbs';
 @import 'components/callout';
 @import 'components/card';
-@import 'components/close-button';
-@import 'components/drilldown';
-@import 'components/dropdown-menu';
 @import 'components/dropdown';
-@import 'components/flex';
-@import 'components/responsive-embed';
-@import 'components/label';
+@import 'components/pagination';
+@import 'components/tooltip';
+
+// Containers
+@import 'components/accordion';
 @import 'components/media-object';
+@import 'components/orbit';
+@import 'components/responsive-embed';
+@import 'components/tabs';
+@import 'components/thumbnail';
+// Menu-based containers
 @import 'components/menu';
 @import 'components/menu-icon';
+@import 'components/accordion-menu';
+@import 'components/drilldown';
+@import 'components/dropdown-menu';
+
+// Layout components
 @import 'components/off-canvas';
-@import 'components/orbit';
-@import 'components/pagination';
-@import 'components/progress-bar';
 @import 'components/reveal';
-@import 'components/slider';
 @import 'components/sticky';
-@import 'components/switch';
-@import 'components/table';
-@import 'components/tabs';
 @import 'components/title-bar';
 @import 'components/top-bar';
-@import 'components/thumbnail';
-@import 'components/tooltip';
+
+// Helpers
+@import 'components/float';
+@import 'components/flex';
+@import 'components/visibility';
 @import 'prototype/prototype';
 
+
 @mixin foundation-everything(
   $flex: true,
   $prototype: false
@@ -75,7 +85,12 @@
     $global-flexbox: true !global;
   }
 
+  // Global styles
   @include foundation-global-styles;
+  @include foundation-forms;
+  @include foundation-typography;
+
+  // Grids
   @if not $flex {
     @include foundation-grid;
   }
@@ -87,47 +102,49 @@
       @include foundation-flex-grid;
     }
   }
-  @include foundation-typography;
-  @include foundation-forms;
+
+  // Generic components
   @include foundation-button;
-  @include foundation-accordion;
-  @include foundation-accordion-menu;
+  @include foundation-button-group;
+  @include foundation-close-button;
+  @include foundation-label;
+  @include foundation-progress-bar;
+  @include foundation-slider;
+  @include foundation-switch;
+  @include foundation-table;
+  // Basic components
   @include foundation-badge;
   @include foundation-breadcrumbs;
-  @include foundation-button-group;
   @include foundation-callout;
   @include foundation-card;
-  @include foundation-close-button;
+  @include foundation-dropdown;
+  @include foundation-pagination;
+  @include foundation-tooltip;
+
+  // Containers
+  @include foundation-accordion;
+  @include foundation-media-object;
+  @include foundation-orbit;
+  @include foundation-responsive-embed;
+  @include foundation-tabs;
+  @include foundation-thumbnail;
+  // Menu-based containers
   @include foundation-menu;
   @include foundation-menu-icon;
+  @include foundation-accordion-menu;
   @include foundation-drilldown-menu;
-  @include foundation-dropdown;
   @include foundation-dropdown-menu;
-  @include foundation-responsive-embed;
-  @include foundation-label;
-  @include foundation-media-object;
+
+  // Layout components
   @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-sticky;
   @include foundation-title-bar;
-  @include foundation-tooltip;
   @include foundation-top-bar;
-  @include foundation-visibility-classes;
-  @include foundation-float-classes;
 
-  @if $flex {
-    @include foundation-flex-classes;
-  }
-
-  @if $prototype {
-    @include foundation-prototype-classes;
-  }
+  // Helpers
+  @include foundation-float-classes;
+  @if $flex { @include foundation-flex-classes; }
+  @include foundation-visibility-classes;
+  @if $prototype { @include foundation-prototype-classes; }
 }