Merge pull request #4 from alphagov/sensible-sass-structure

Restructure sass
alphagov · Mar 26, 2014 · 426d995 · 426d995
2 parents 21862a0 + 9873b89
commit 426d995
Show file tree

Hide file tree

Showing 37 changed files with 1,865 additions and 2,006 deletions.
diff --git a/public/sass/README.md b/public/sass/README.md
diff --git a/public/sass/base/_grid-1-2.scss b/public/sass/base/_grid-1-2.scss
diff --git a/public/sass/base/_grid-1-3.scss b/public/sass/base/_grid-1-3.scss
diff --git a/public/sass/base/_grid-1-4.scss b/public/sass/base/_grid-1-4.scss
diff --git a/public/sass/base/_grid-2-3.scss b/public/sass/base/_grid-2-3.scss
diff --git a/public/sass/base/_grid-3-4.scss b/public/sass/base/_grid-3-4.scss
diff --git a/public/sass/base/_grid-unit.scss b/public/sass/base/_grid-unit.scss
diff --git a/public/sass/base/_grid-wrapper.scss b/public/sass/base/_grid-wrapper.scss
diff --git a/public/sass/base/_typography-base.scss b/public/sass/base/_typography-base.scss
diff --git a/public/sass/base/_typography-data.scss b/public/sass/base/_typography-data.scss
diff --git a/public/sass/base/_typography-general.scss b/public/sass/base/_typography-general.scss
diff --git a/public/sass/elements-page.scss b/public/sass/elements-page.scss
@@ -1,31 +1,4 @@
-// Import GOV.UK frontend toolkit
-
-@import "_colours";
-@import "_css3";
-@import "_shims";
-@import "_typography";
-@import "_measurements";
-
-@import "design-patterns/_alpha-beta";
-@import "design-patterns/_buttons";
-
-// Helpers
-// ==========================================================================
-
-// Variables
-// @import "helpers/_variables";
-// Variables for colour palette
-@import "helpers/_colours";
-
-// Functions
-// @import "helpers/_functions";
-
-// Mixins
-// @import "helpers/_mixins";
-
-// Helper classes
-@import "helpers/_helpers";
-
+@import "main";
 
 // Service Design Manual styles
 // ==========================================================================
@@ -35,48 +8,46 @@
 @import "service-design-manual/helpers/breadcrumbs";
 
 // Adjust Service Design header to align with content
+#global-breadcrumb,
 .page-header {
-  margin-left: 30px;
-  margin-right: 30px;
+  margin-left: $gutter-half;
+  margin-right: $gutter-half;
+
+  @include media(tablet) {
+    margin-left: $gutter;
+    margin-right: $gutter;
+  }
 }
 
 // Elements page styles
 // ==========================================================================
 
 // These are example styles, used only for the Elements page example boxes
-// We're not splitting these styles into smaller files, to avoid confusing these with the base GOV.UK elements styles
-
-// No need to include these styles in your project
 
 // Code styles
 code {
   @include core-16;
 }
 
-// Heading styles
+// Headings
+
 .heading-with-border {
   border-top: 1px solid $border-colour;
   padding-top: ($gutter*1.5);
 }
 
-.example .heading-36 {
-  border-top: none;
-  padding-top: 0;
+// Text
+
+.tight {
+  margin-bottom: 0;
 }
 
-// List styles 
+// Lists
 
 .list-bullet {
   margin-bottom: ($gutter*1.5);
 }
 
-// Text styles
-
-.tight {
-  margin-bottom: 0;
-}
-
-
 // Example box
 .example {
 
@@ -155,7 +126,7 @@ code {
 }
 
 
-// Colour swatche wrapper
+// Colour swatch wrapper
 .swatch-wrapper {
   @include media(tablet) {
     float: left; 
@@ -177,11 +148,9 @@ code {
     padding-top: 10px;
   }
 }
-
 .swatch-wrapper li {
   @include core-16;
 }
-
 .swatch-wrapper b {
   font-weight: bold;
   text-transform: uppercase;
@@ -204,23 +173,36 @@ code {
 }
 
 // Generate swatch classes for each colour in palette list
-@each $color in $palette {
-
-  $color-name: nth($color, 1);
-  $color-var: nth($color, 2);
-  $color-var-50: nth($color, 3);
-  $color-var-25: nth($color, 4);
-
-  .swatch-#{$color-name} {
-    background-color: $color-var;
-  }
-  .swatch-#{$color-name}-50 {
-    background-color: $color-var-50;
-  }
-  .swatch-#{$color-name}-25 {
-    background-color: $color-var-25;
+@mixin color-swatches {
+  @each $color in $palette {
+    $color-name: nth($color, 1);
+    $color-var: nth($color, 2);
+    .swatch-#{$color-name} {
+      background-color: $color-var;
+    }
   }
+}
 
+// Usage: 
+@include color-swatches;
+
+// Common colours
+.swatch-alpha {
+  background-color: $alpha-colour;
+}
+.swatch-beta {
+  background-color: $beta-colour;
+}
+
+.swatch-error {
+  background-color: $error;
+}
+.swatch-error-background {
+  background-color: $error-background;
+}
+
+.swatch-focus {
+  background-color: $yellow;
 }
 
 // Create swatch classes for other colours in palette
@@ -274,10 +256,4 @@ code {
 }
 .swatch-highlight-colour {
   background-color: $highlight-colour;
-}
-
-// Example pages
-.example-back-link {
-  display: inline-block;
-  margin: 40px 0;
-}
+}