v0.10.0 – Content classes updated, jumbo text line-height, and custom…

… bullets (#25)

CHANGELOG.md

@@ -3,6 +3,23 @@
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+
+v0.10.0
+------------------------------
+*August 25, 2017*
+
+### Added
+- Custom bullets on unordered lists.
+- `u-bordered` class for adding a border around a block.
+- Added narrow view type sizes for headings
+
+
+### Changed
+- Updated line-height for jumbo homepage text.
+- Updated the `l-content` class so that it can contain a `header` and `main` that are appropriately spaced for content pages.
+- Updated packages
+
+
 v0.9.0
 ------------------------------
 *August 24, 2017*

_build/config.js

@@ -4,6 +4,10 @@ const distDir = 'dist';
 
 module.exports = {
     js: {
-        srcFile: 'fozzie.js'
+        files: {
+            main: {
+                srcFile: 'fozzie.js'
+            }
+        }
     }
 };

package.json

@@ -2,7 +2,7 @@
   "name": "@justeat/fozzie",
   "title": "Fozzie – Just Eat UI Web Framework",
   "description": "UI Web Framework for the Just Eat Global Platform",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "homepage": "https://github.com/justeat/fozzie",
   "contributors": [
     "Ashley Nolan <[email protected]> (https://ashleynolan.co.uk)",
@@ -27,8 +27,8 @@
     "node": ">=4.0.0"
   },
   "dependencies": {
-    "@justeat/fozzie-colour-palette": "^0.4.0",
-    "@justeat/gulp-build-fozzie": "^4.2.0",
+    "@justeat/fozzie-colour-palette": "^0.6.0",
+    "@justeat/gulp-build-fozzie": "^5.5.2",
     "@kickoff/utils.scss": "^2.1.1",
     "babel-preset-es2015": "^6.24.1",
     "gulp": "^3.9.1",

src/scss/base/_layout.scss

@@ -29,8 +29,38 @@ body {
 }
 
 /**
- * Modifier for page containers that contain solely content (such as T&cs and Privacy pages)
+ * Layout class for containers that contain content (such as T&cs and Privacy pages)
  */
-.l-container--content {
-    padding-top: spacing(x4);
+.l-content {
+    padding-top: spacing(x2);
+
+    @include media('>mid') {
+        padding-top: spacing(x4);
+    }
 }
+    .l-content-header {
+        margin: 0 0 spacing(x2);
+
+        @include media('>mid') {
+            margin: spacing(x2) 0 spacing(x4);
+        }
+
+        > h1 {
+            @include font-size(jumbo--scaleUp, true, narrow);
+
+            @include media('>mid') {
+                @include font-size(jumbo--scaleUp);
+            }
+        }
+    }
+        .l-content-header--centred {
+            text-align: center;
+        }
+        .l-content-header--highlight {
+            color: $color-headings--highlight;
+        }
+
+    .l-content-main {
+        @extend %u-bordered;
+    }
+

src/scss/base/_typography.scss

@@ -67,18 +67,26 @@ h6 {
 // For example: h3.h1 or h3.alpha
 h1,
 .alpha {
-    @include font-size(jumbo);
+    @include font-size(jumbo, true, narrow);
     margin-top: $baseline * 2;
     margin-bottom: $baseline;
 
+    @include media('>mid') {
+        @include font-size(jumbo);
+    }
+
     &:first-child {
         margin-top: 0;
     }
 }
 
 h2,
 .beta {
-    @include font-size(large);
+    @include font-size(large, true, narrow);
+
+    @include media('>mid') {
+        @include font-size(large);
+    }
 }
 
 h3,

src/scss/objects/_lists.scss

@@ -12,3 +12,18 @@ ol {
         margin-bottom: spacing();
     }
 }
+
+ul {
+    margin-left: 0;
+    list-style: none;
+
+    // Adds a coloured circle before list-items
+    li:before {
+        color: $red;
+        content: "\2022"; /* Unicode for circle character */
+        font-size: 1.8em;
+        padding-right: spacing();
+        position: relative;
+        top: 0.15em;
+    }
+}

src/scss/settings/_variables.scss

@@ -42,8 +42,8 @@ $type: (
         narrow: (18, 24)
     ),
     jumbo--scaleUp: (
-        default: (64, 50),
-        narrow: (36, 42)
+        default: (64, 72),
+        narrow: (28, 32)
     )
 );
 

src/scss/trumps/_utilities.scss

@@ -25,6 +25,13 @@
     background-color: $white;
 }
 
+.u-bordered,
+%u-bordered {
+    border: 1px solid $color-border;
+    padding: spacing(x3);
+    border-radius: $border-radius;
+}
+
 
 //
 // Display Utilities
@@ -131,5 +138,9 @@
 
     & > li {
         margin-bottom: 0;
+
+        &:before {
+            content: none;
+        }
     }
 }