From 12b56339683ceb95e2b9a542b7b787d5f20f457f Mon Sep 17 00:00:00 2001 From: Leonard Martin Date: Thu, 8 Jun 2017 16:43:37 +0100 Subject: [PATCH 1/3] Group imported modules into separate files Makes it slightly clearer when reading the main sass entry point file which of the modules are coming from govuk-frontent-toolkit, and which are coming from this module. --- assets/sass/_elements.scss | 31 ++++++++++++++++++ assets/sass/_govuk-elements.scss | 56 ++------------------------------ assets/sass/_govuk-toolkit.scss | 23 +++++++++++++ 3 files changed, 57 insertions(+), 53 deletions(-) create mode 100644 assets/sass/_elements.scss create mode 100644 assets/sass/_govuk-toolkit.scss diff --git a/assets/sass/_elements.scss b/assets/sass/_elements.scss new file mode 100644 index 000000000..3fcd16e32 --- /dev/null +++ b/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 diff --git a/assets/sass/_govuk-elements.scss b/assets/sass/_govuk-elements.scss index 6336d1c09..8a1889363 100644 --- a/assets/sass/_govuk-elements.scss +++ b/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"; diff --git a/assets/sass/_govuk-toolkit.scss b/assets/sass/_govuk-toolkit.scss new file mode 100644 index 000000000..27d4a1c85 --- /dev/null +++ b/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) From c5a59f98bf5e47a1808641b66ac2e38373828649 Mon Sep 17 00:00:00 2001 From: Leonard Martin Date: Thu, 8 Jun 2017 16:55:54 +0100 Subject: [PATCH 2/3] Add sass declaration to package.json This allows sass compilers which dynamically look for a module's entry-point file to read the correct file. --- packages/govuk-elements-sass/package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/govuk-elements-sass/package.json b/packages/govuk-elements-sass/package.json index cf373a2c1..e60050871 100644 --- a/packages/govuk-elements-sass/package.json +++ b/packages/govuk-elements-sass/package.json @@ -16,5 +16,6 @@ }, "bugs": { "url": "https://github.com/alphagov/govuk_elements/issues" - } + }, + "sass": "./public/_elements.scss" } From 93f44481b9e8f9ec6a36d7e166abd8ece4ed9b02 Mon Sep 17 00:00:00 2001 From: Leonard Martin Date: Thu, 8 Jun 2017 16:57:42 +0100 Subject: [PATCH 3/3] Add new sass files to gulpfil package task --- gulpfile.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/gulpfile.js b/gulpfile.js index 3b1663bd5..451dc5b75 100644 --- a/gulpfile.js +++ b/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/')) })