chore: sort CSS includes by specificity

Sort CSS includes in the following categories:
1. Global styles
2. Generic components (controls and HTML-oriented components)
3. Basic components (components with enclosed layout styles)
4. Containers (components with side-effects on internal layout)
5. Layout (components with side-effects on external layout)
6. Helpers (highly specific and non-inheritable classes)

diff --git a/scss/foundation.scss b/scss/foundation.scss
index b32277a41f329abd1681685077e6311325d168ed..d8f82ac49d3f1213320ac85f4c415b47b151e1d8 100644 (file)
--- a/scss/foundation.scss
+++ b/scss/foundation.scss
@@ -5,7 +5,7 @@
  * Licensed under MIT Open Source
  */
 
-// Dependencies
+// --- Dependencies ---
 @import '../_vendor/normalize-scss/sass/normalize';
 @import '../_vendor/sassy-lists/stylesheets/helpers/missing-dependencies';
 @import '../_vendor/sassy-lists/stylesheets/helpers/true';
@@ -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';
 
-// Components
+// Grids
 @import 'grid/grid';
 @import 'xy-grid/xy-grid';
+// Generic components
 @import 'typography/typography';
 @import 'forms/forms';
-@import 'components/visibility';
-@import 'components/float';
+@import 'components/table';
+@import 'components/label';
+@import 'components/slider';
+@import 'components/progress-bar';
+@import 'components/switch';
 @import 'components/button';
+@import 'components/close-button';
 @import 'components/button-group';
-@import 'components/accordion-menu';
-@import 'components/accordion';
+// Basic components
+@import 'components/tooltip';
 @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/breadcrumbs';
+
+// Containers
+@import 'components/accordion';
+@import 'components/orbit';
+@import 'components/thumbnail';
+@import 'components/tabs';
 @import 'components/media-object';
+@import 'components/responsive-embed';
+// Menu-based containers
 @import 'components/menu';
 @import 'components/menu-icon';
+@import 'components/accordion-menu';
+@import 'components/dropdown-menu';
+@import 'components/drilldown';
+
+// Layout components
+@import 'components/top-bar';
+@import 'components/title-bar';
 @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';
+@import 'components/reveal';
+
+// Helpers
+@import 'components/float';
+@import 'components/flex';
+@import 'components/visibility';
 @import 'prototype/prototype';
 
+
 @mixin foundation-everything(
   $flex: true,
   $prototype: false
@@ -75,7 +85,10 @@
     $global-flexbox: true !global;
   }
 
+  // Global styles
   @include foundation-global-styles;
+
+  // Grids
   @if not $flex {
     @include foundation-grid;
   }
@@ -87,47 +100,51 @@
       @include foundation-flex-grid;
     }
   }
+
+  // Generic components
+  @include foundation-table;
   @include foundation-typography;
   @include foundation-forms;
+  @include foundation-label;
+  @include foundation-slider;
+  @include foundation-progress-bar;
+  @include foundation-switch;
   @include foundation-button;
-  @include foundation-accordion;
-  @include foundation-accordion-menu;
-  @include foundation-badge;
-  @include foundation-breadcrumbs;
+  @include foundation-close-button;
   @include foundation-button-group;
+  // Basic components
+  @include foundation-tooltip;
+  @include foundation-badge;
   @include foundation-callout;
   @include foundation-card;
-  @include foundation-close-button;
+  @include foundation-dropdown;
+  @include foundation-pagination;
+  @include foundation-breadcrumbs;
+
+  // Containers
+  @include foundation-accordion;
+  @include foundation-orbit;
+  @include foundation-thumbnail;
+  @include foundation-tabs;
+  @include foundation-media-object;
+  @include foundation-responsive-embed;
+  // Menu-based containers
   @include foundation-menu;
   @include foundation-menu-icon;
-  @include foundation-drilldown-menu;
-  @include foundation-dropdown;
+  @include foundation-accordion-menu;
   @include foundation-dropdown-menu;
-  @include foundation-responsive-embed;
-  @include foundation-label;
-  @include foundation-media-object;
+  @include foundation-drilldown-menu;
+
+  // Layout components
+  @include foundation-top-bar;
+  @include foundation-title-bar;
   @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 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; }
 }