Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore: sort Sass components in categories #10856

Merged
merged 5 commits into from
Mar 26, 2018
Merged

chore: sort Sass components in categories #10856

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7ab9707
chore: sort CSS includes by specificity
ncoden Jan 11, 2018
952c9c6
docs: update list of Sass includes
ncoden Jan 11, 2018
38227f0
Merge remote-tracking branch 'zurb/develop' into chore/sort-sass-comp…
ncoden Mar 23, 2018
fecf67d
style: sort Sass components inside each category alphabetically
ncoden Mar 23, 2018
1ef0738
Merge remote-tracking branch 'zurb/develop' into chore/sort-sass-comp…
ncoden Mar 26, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 38 additions & 24 deletions docs/pages/sass.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,46 +111,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;
```

---
Expand Down
63 changes: 42 additions & 21 deletions meteor-README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
129 changes: 73 additions & 56 deletions scss/foundation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* Licensed under MIT Open Source
*/

// Dependencies
// --- Dependencies ---
@import 'vendor/normalize';
@import '../_vendor/sassy-lists/stylesheets/helpers/missing-dependencies';
@import '../_vendor/sassy-lists/stylesheets/helpers/true';
Expand All @@ -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,
Expand All @@ -80,7 +90,12 @@
$xy-grid: true !global;
}

// Global styles
@include foundation-global-styles;
@include foundation-forms;
@include foundation-typography;

// Grids
@if not $flex {
@include foundation-grid;
}
Expand All @@ -92,47 +107,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; }
}