Kickoff v9

.kickoff/tasks/css.js

@@ -16,6 +16,7 @@ const path = require('path');
 const autoprefixer = require('autoprefixer');
 const cssnano = require('cssnano');
 const flexbugsFixes = require('postcss-flexbugs-fixes');
+const pxtorem = require('postcss-pxtorem');
 
 const config = require('../config');
 
@@ -30,7 +31,13 @@ gulp.task('css', () => {
 		// Sass Compilation
 		.pipe(
 			sass(
-				eyeglass()
+				eyeglass({
+					// put node-sass options you need here.
+
+					eyeglass: { // eyeglass options
+						root: __dirname,
+					}
+				})
 			).on('error', sass.logError)
 		)
 
@@ -39,6 +46,10 @@ gulp.task('css', () => {
 			postcss([
 				flexbugsFixes(),
 				autoprefixer({browsers: config.css.browsers}),
+				pxtorem({ // See other options at https://github.com/cuth/postcss-pxtorem#options
+					rootValue: 20,
+					selectorBlackList: ['html'],
+				}),
 			])
 		)
 

assets/src/scss/_helper-classes.scss

@@ -76,13 +76,13 @@
  */
 .l-mb0 { margin-bottom: 0 !important; }
 .l-mb1 { margin-bottom: $baseline !important; }
-.l-mb2 { margin-bottom: ko-multiply($baseline, 2) !important; }
-.l-mb3 { margin-bottom: ko-multiply($baseline, 3) !important; }
+.l-mb2 { margin-bottom: ko-multiply(2) !important; }
+.l-mb3 { margin-bottom: ko-multiply(3) !important; }
 
 .l-mt0 { margin-top: 0 !important; }
 .l-mb1 { margin-top: $baseline !important; }
-.l-mb2 { margin-top: ko-multiply($baseline, 2) !important; }
-.l-mb3 { margin-top: ko-multiply($baseline, 3) !important; }
+.l-mb2 { margin-top: ko-multiply(2) !important; }
+.l-mb3 { margin-top: ko-multiply(3) !important; }
 
 /**
  * Typography helpers

assets/src/scss/_typography.scss

@@ -12,19 +12,19 @@
  */
 
 html {
-	font-size: #{$font-size-base - 2}px;
+	font-size: $font-size-base - 2;
 	-webkit-text-size-adjust: 100%;
 	// font-variant-ligatures: common-ligatures;
 	-webkit-font-smoothing: antialiased;
 
 	// This needs to come after -webkit-font-smoothing
 	// stylelint-disable-next-line declaration-block-properties-order
 	-moz-osx-font-smoothing: grayscale;
-  text-size-adjust: 100%;
-  text-rendering: optimizeLegibility;
+	text-size-adjust: 100%;
+	text-rendering: optimizeLegibility;
 
 	@include media('>m') {
-		font-size: #{$font-size-base}px;
+		font-size: $font-size-base;
 	}
 }
 
@@ -62,55 +62,46 @@ h6 {
 	margin-bottom: $baseline;
 }
 
-// Uncomment to include font-size helper classes
-// See https://github.com/TryKickoff/kickoff-utils.scss#_type-sizesscss
-// for more info
-// Usage:
-@include ko-type-sizes();
-// @include ko-type-sizes($type, (h1: xxl, h2: xl, h3: l, h4: m));
-
-// Use the helper classes to emulate styles for another element
-// For example: h3.h1 or h3.alpha
 h1 {
-	font-size: ko-rem(xl);
-	margin-bottom: ko-multiply($baseline, 2);
+	font-size: ko-font-size(xl);
+	margin-bottom: ko-multiply(2);
 
 	@include media('>m') {
-		font-size: ko-rem(xxl);
+		font-size: ko-font-size(xxl);
 	}
 }
 
 h2 {
-	font-size: ko-rem(l);
+	font-size: ko-font-size(l);
 
 	@include media('>m') {
-		font-size: ko-rem(xl);
+		font-size: ko-font-size(xl);
 	}
 }
 
 h3 {
-	font-size: ko-rem(m);
+	font-size: ko-font-size(m);
 
 	@include media('>m') {
-		font-size: ko-rem(l);
+		font-size: ko-font-size(l);
 	}
 }
 
 h4 {
-	font-size: ko-rem(s);
+	font-size: ko-font-size(s);
 
 	@include media('>m') {
-		font-size: ko-rem(m);
+		font-size: ko-font-size(m);
 	}
 }
 
 h5,
 h6 {
-	font-size: ko-rem(s);
+	font-size: ko-font-size(s);
 	margin-bottom: 0;
 
 	@include media('>m') {
-		font-size: ko-rem(m);
+		font-size: ko-font-size(m);
 	}
 }
 
@@ -124,6 +115,19 @@ h6 {
 	margin-top: $baseline;
 }
 
+/**
+ * font-size helper classes
+ * See https://github.com/TryKickoff/kickoff-utils.scss#_type-sizesscss
+ * for more info
+ *
+ * Usage:
+ * @include ko-type-sizes();
+ * @include ko-type-sizes($type, (h1: 50px, h2: 35px, h3: l, h4: m));
+ *
+ * Uncomment the line below to include
+ */
+// @include ko-type-sizes();
+
 small {
 	font-size: 80%;
 }
@@ -149,39 +153,6 @@ abbr[title] {
 	cursor: help;
 }
 
-/**
- * Blockquotes
- */
-blockquote {
-	padding-left: 10px;
-	margin: $baseline;
-	border-left: 4px solid lighten(#000, 80%);
-
-	p {
-		margin-bottom: 0;
-		font-size: ko-rem(m);
-		font-weight: 300;
-	}
-
-	small {
-		display: block;
-		color: lighten(#000, 70%);
-
-		&::before {
-			content: '\2014 \00A0';
-		}
-	}
-}
-
-// Quotes
-q,
-blockquote {
-	&::before,
-	&::after {
-		content: "";
-	}
-}
-
 // Prevents sub and sup affecting line-height in all browsers
 // gist.github.com/413930
 sub,

assets/src/scss/_variables.scss

@@ -7,39 +7,47 @@
  * - App-specific
  */
 
+// stylelint-disable indentation
+
 /**
  * Typography
  * =================================
  *
- * Base sizes:
- * Set this in pixels (but do not add px),
- * the font-size mixin will convert to REMS
+ * 🚨 If you change the $font-size-base value, you will also need
+ * to update the pxtorem `rootValue` in `.kickoff/css.js`
  */
-$font-size-base: 20;
+$font-size-base: 20px; // 🚨 Read above if you change this
 $leading-base: 1.4;
-$line-height-base: round($font-size-base * $leading-base); // 20 * 1.4
-$baseline: $line-height-base * 1px;
+$baseline: round($font-size-base * $leading-base); // 20 * 1.4
 
-$type-scale: 1.25; // 1.25 === Major third. See modularscale.com
+$modularscale: ( // From https://github.com/modularscale/modularscale-sass/
+	base: 20px 25px,
+	ratio: 1.5 // 1.25 === Major third. See modularscale.com
+);
 
 /**
- * Type sizes
+ * Type sizes $map
  * =================================
- * Set using a modular scale by default.
- * Values can be changed to px, rem etc if needed
+ * Kickoff's type is set using sizes defined in this
+ * Sass map. They are set using a modular scale by
+ * default, but values can be changed to px, rem etc if needed
  *
  * Usage:
  * font-size: ko-font-size(base);
  * font-size: ko-font-size(xl);
+ *
+ * Use the ms() function if you want to size fonts
+ * indepently using the modular scale. See
+ * https://github.com/modularscale/modularscale-sass for more info
  */
 $type: (
-	xs: ko-ms(-2),
-	s: ko-ms(-1),
-	base: ko-ms(0), // [default] p, h5, h6
-	m: ko-ms(1), // h4
-	l: ko-ms(2), // h3
-	xl: ko-ms(3), // h2
-	xxl: ko-ms(4) // h1
+	xs: ms(-2),
+	s: ms(-1),
+	base: ms(0), // [default] p, h5, h6
+	m: ms(1), // h4
+	l: ms(2), // h3
+	xl: ms(3), // h2
+	xxl: ms(4) // h1
 );
 
 /**

assets/src/scss/components/_code.scss

@@ -17,7 +17,7 @@ code,
 pre {
 	padding: 0 3px 2px;
 	font-family: ko-font(mono);
-	font-size: ko-rem(s);
+	font-size: ko-font-size(s);
 	color: $code-textColor;
 	border-radius: 3px;
 	tab-size: 3;

assets/src/scss/components/_lists.scss

@@ -18,13 +18,14 @@ ol {
 
 // Unordered and Ordered lists
 // Add a .unstyled class to unordered/ordered lists if you want them to have bullets/numbers
-ul, ol {
+ul,
+ol {
 	padding: 0;
 	margin: 0 0 $baseline $baseline;
 
 	ul,
 	ol {
-		margin-left: ko-multiply($baseline, 2);
+		margin-left: ko-multiply(2);
 	}
 
 	ul {
@@ -43,7 +44,8 @@ ul, ol {
 		}
 	}
 
-	ul, ol {
+	ul,
+	ol {
 		margin-bottom: 0;
 	}
 }
@@ -76,7 +78,8 @@ dd { margin-left: $baseline; }
 	</ul>
  */
 
-.l-list--centred, .l-list--centered {
+.l-list--centred,
+.l-list--centered {
 	text-align: center;
 
 	li {
@@ -97,7 +100,7 @@ dd { margin-left: $baseline; }
 	@include ko-clearfix;
 
 	li {
-		float: left;
+		// float: left;
 		display: inline-block;
 	}
 }

assets/src/scss/components/_quotes.scss

@@ -0,0 +1,39 @@
+/**
+ * Blockquotes
+ * =====================
+ *
+ * Usage:
+ <blockquote>
+   <p>Quoted text</p>
+   <small>Citation</small>
+ </blockquote>
+ */
+blockquote {
+	padding-left: 10px;
+	margin: $baseline;
+	border-left: 4px solid ko-color(text, light);
+
+	p {
+		margin-bottom: 0;
+		font-size: ko-font-size(m);
+		font-weight: 300;
+	}
+
+	small {
+		display: block;
+		color: ko-color(text, light);
+
+		&::before {
+			content: '\2014 \00A0';
+		}
+	}
+}
+
+// Remove quotation marks if something else is adding them
+q,
+blockquote {
+	&::before,
+	&::after {
+		content: "";
+	}
+}

assets/src/scss/components/_tables.scss

@@ -114,7 +114,7 @@ th {
 .responsiveTable {
 	@include media('<m') {
 		width: 100%;
-		margin-bottom: #{ko-multiply($baseline, 0.75)}px;
+		margin-bottom: ko-multiply(0.75);
 		overflow-y: hidden;
 		overflow-x: auto;
 		-ms-overflow-style: -ms-autohiding-scrollbar;