From 7ab97070de5b3dbd6e827e395d1e9f5eb88116d2 Mon Sep 17 00:00:00 2001 From: Nicolas Coden Date: Thu, 11 Jan 2018 23:05:40 +0100 Subject: [PATCH] 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) --- scss/foundation.scss | 135 ++++++++++++++++++++++++------------------- 1 file changed, 76 insertions(+), 59 deletions(-) diff --git a/scss/foundation.scss b/scss/foundation.scss index b32277a41..d8f82ac49 100644 --- 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; } } -- 2.47.2