Merge pull request #489 from lennym/feature/single-elements-file

Allow for a single-file import of all elements stylesheets

assets/sass/_elements.scss

@@ -0,0 +1,31 @@
+// GOV.UK elements
+
+@import "elements/helpers";                       // Helper functions and classes
+
+// Generic (normalize/reset.css)
+@import "elements/reset";
+
+// Base (unclassed HTML elements)
+// These are predefined by govuk_template
+// If you're not using govuk_template, uncomment the line below.
+// @import "elements/govuk-template-base";        // Base styles set by GOV.UK template
+
+// Objects (unstyled design patterns)
+@import "elements/layout";                        // Main content container. Grid layout - rows and column widths
+
+// Components (chunks of UI)
+@import "elements/elements-typography";           // Typography
+@import "elements/buttons";                       // Buttons
+@import "elements/icons";                         // Icons - numbered steps, calendar, search
+@import "elements/lists";                         // Lists - numbered, bulleted
+@import "elements/tables";                        // Tables - regular, numeric
+@import "elements/details";                       // Details summary
+@import "elements/panels";                        // Panels with a left grey border
+@import "elements/forms";                         // Form - wrappers, inputs, labels
+@import "elements/forms/form-multiple-choice";    // Custom radio buttons and checkboxes
+@import "elements/forms/form-date";               // Date of birth pattern
+@import "elements/forms/form-validation";         // Errors and validation
+@import "elements/breadcrumbs";                   // Breadcrumbs
+@import "elements/phase-banner";                  // Alpha and beta banners and tags
+@import "elements/components";                    // GOV.UK prefixed styles - blue highlighted box
+@import "elements/shame";                         // Hacks and workarounds that will go away eventually

assets/sass/_govuk-elements.scss

@@ -1,55 +1,5 @@
-// GOV.UK front end toolkit
-// Sass variables, mixins and functions
-// https://github.com/alphagov/govuk_frontend_toolkit/tree/master/stylesheets
-
-// Settings (variables)
-@import "colours";                                // Colour variables
-@import "font_stack";                             // Font family variables
-@import "measurements";                           // Widths and gutter variables
-
-// Mixins
-@import "conditionals";                           // Media query mixin
-@import "device-pixels";                          // Retina image mixin
-@import "grid_layout";                            // Basic grid layout mixin
-@import "typography";                             // Core bold and heading mixins, also external links
-@import "shims";                                  // Inline block mixin, clearfix placeholder
-
-// Mixins to generate components (chunks of UI)
-@import "design-patterns/alpha-beta";
-@import "design-patterns/buttons";
-@import "design-patterns/breadcrumbs";
-
-// Functions
-@import "url-helpers";                            // Function to output image-url, or prefixed path (Rails and Compass only)
+// Import dependencies from GOV.UK front end toolkit
+@import "govuk-toolkit";
 
 // GOV.UK elements
-
-@import "elements/helpers";                       // Helper functions and classes
-
-// Generic (normalize/reset.css)
-@import "elements/reset";
-
-// Base (unclassed HTML elements)
-// These are predefined by govuk_template
-// If you're not using govuk_template, uncomment the line below.
-// @import "elements/govuk-template-base";        // Base styles set by GOV.UK template
-
-// Objects (unstyled design patterns)
-@import "elements/layout";                        // Main content container. Grid layout - rows and column widths
-
-// Components (chunks of UI)
-@import "elements/elements-typography";           // Typography
-@import "elements/buttons";                       // Buttons
-@import "elements/icons";                         // Icons - numbered steps, calendar, search
-@import "elements/lists";                         // Lists - numbered, bulleted
-@import "elements/tables";                        // Tables - regular, numeric
-@import "elements/details";                       // Details summary
-@import "elements/panels";                        // Panels with a left grey border
-@import "elements/forms";                         // Form - wrappers, inputs, labels
-@import "elements/forms/form-multiple-choice";    // Custom radio buttons and checkboxes
-@import "elements/forms/form-date";               // Date of birth pattern
-@import "elements/forms/form-validation";         // Errors and validation
-@import "elements/breadcrumbs";                   // Breadcrumbs
-@import "elements/phase-banner";                  // Alpha and beta banners and tags
-@import "elements/components";                    // GOV.UK prefixed styles - blue highlighted box
-@import "elements/shame";                         // Hacks and workarounds that will go away eventually
+@import "elements";

assets/sass/_govuk-toolkit.scss

@@ -0,0 +1,23 @@
+// GOV.UK front end toolkit
+// Sass variables, mixins and functions
+// https://github.com/alphagov/govuk_frontend_toolkit/tree/master/stylesheets
+
+// Settings (variables)
+@import "colours";                                // Colour variables
+@import "font_stack";                             // Font family variables
+@import "measurements";                           // Widths and gutter variables
+
+// Mixins
+@import "conditionals";                           // Media query mixin
+@import "device-pixels";                          // Retina image mixin
+@import "grid_layout";                            // Basic grid layout mixin
+@import "typography";                             // Core bold and heading mixins, also external links
+@import "shims";                                  // Inline block mixin, clearfix placeholder
+
+// Mixins to generate components (chunks of UI)
+@import "design-patterns/alpha-beta";
+@import "design-patterns/buttons";
+@import "design-patterns/breadcrumbs";
+
+// Functions
+@import "url-helpers";                            // Function to output image-url, or prefixed path (Rails and Compass only)

gulpfile.js

@@ -137,7 +137,9 @@ gulp.task('package:prepare', () => {
   return gulp.src(
     [
       paths.assetsScss + '**/elements/**/*.scss',
-      paths.assetsScss + '_govuk-elements.scss'
+      paths.assetsScss + '_govuk-elements.scss',
+      paths.assetsScss + '_govuk-toolkit.scss',
+      paths.assetsScss + '_elements.scss'
     ])
     .pipe(gulp.dest(paths.package + 'public/sass/'))
 })

packages/govuk-elements-sass/package.json

@@ -16,5 +16,6 @@
   },
   "bugs": {
     "url": "https://github.com/alphagov/govuk_elements/issues"
-  }
+  },
+  "sass": "./public/_elements.scss"
 }