From f3b48d17424b7c964893af81048f72c395f2e27f Mon Sep 17 00:00:00 2001 From: Nicolas Coden Date: Sat, 16 Jun 2018 09:32:51 +0200 Subject: [PATCH] Use pull request #10856 from ncoden/chore/sort-sass-components-by-specificity for v6.5.0 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 --- docs/pages/sass.md | 62 +++++++++++++-------- meteor-README.md | 63 ++++++++++++++------- scss/foundation.scss | 127 ++++++++++++++++++++++++------------------- 3 files changed, 152 insertions(+), 100 deletions(-) diff --git a/docs/pages/sass.md b/docs/pages/sass.md index 08c5ba081..6234587ac 100644 --- 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 f6cf5678e..1b5f193b2 100644 --- 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 f3bde15b9..8b755a8b0 100644 --- 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; } } -- 2.47.3