Mobile first approach

config/paths.js

@@ -53,7 +53,7 @@ module.exports = {
   appTsconfig: resolveApp("src/core/client/tsconfig.json"),
   appLocales: resolveApp("src/locales"),
   appThemeVariables: resolveApp("src/core/client/ui/theme/variables.ts"),
-  appThemeGlobalCSS: resolveApp("src/core/client/ui/theme/global.css"),
+  appThemeVariablesCSS: resolveApp("src/core/client/ui/theme/variables.css"),
   testsSetup: resolveApp("src/setupTests.js"),
   appNodeModules: resolveApp("node_modules"),
 

config/postcss.config.js

@@ -33,7 +33,12 @@ const cssVariables = pickBy(
 // These are sass style variables used in media queries.
 const mediaQueryVariables = mapValues(
   pickBy(flatKebabVariables, (v, k) => k.startsWith("breakpoints-")),
-  v => `${v}px`
+  // Add unit to breakpoints.
+  // Add 1 to support mobile first approach where we start
+  // with the smallest screen and gradually add styling for the
+  // next bigger screen. This is realized using `min-width` without
+  // ever using `max-width`.
+  v => `${Number.parseInt(v) + 1}px`
 );
 
 module.exports = {
@@ -43,14 +48,16 @@ module.exports = {
   plugins: [
     postcssPrependImports({
       path: "",
-      files: [paths.appThemeGlobalCSS],
+      files: [paths.appThemeVariablesCSS],
     }),
     postcssImport(),
     postcssNested(),
     // Sass style variables to be used in media queries.
     postcssAdvancedVariables({ variables: mediaQueryVariables }),
     // CSS standard variables for everything else.
-    postcssVariables({ variables: cssVariables }),
+    postcssVariables({
+      variables: cssVariables,
+    }),
     postcssPresetEnv(),
     postcssFontMagician(),
     postcssFlexbugsFixes,

package.json

@@ -124,8 +124,8 @@
     "postcss-import": "^11.1.0",
     "postcss-loader": "^2.1.5",
     "postcss-nested": "^3.0.0",
-    "postcss-preset-env": "^5.2.1",
     "postcss-prepend-imports": "^1.0.1",
+    "postcss-preset-env": "^5.2.1",
     "precss": "^3.1.2",
     "prettier": "^1.13.4",
     "query-string": "^6.1.0",

src/core/client/ui/components/MatchMedia/MatchMedia.tsx

@@ -23,12 +23,12 @@ interface InnerProps {
 }
 
 const MatchMedia: StatelessComponent<InnerProps> = props => {
-  // TODO: Temporarily map newer speech to older aural type until
-  // react-responsive supports the speech prop.
   const { speech, minWidth, maxWidth, ...rest } = props;
   const mapped = {
+    // TODO: Temporarily map newer speech to older aural type until
+    // react-responsive supports the speech prop.
     aural: speech,
-    minWidth: minWidth ? theme.breakpoints[minWidth] : undefined,
+    minWidth: minWidth ? theme.breakpoints[minWidth] + 1 : undefined,
     maxWidth: maxWidth ? theme.breakpoints[maxWidth] : undefined,
   };
   return <Responsive {...rest} {...mapped} />;

src/core/client/ui/theme/global.css

@@ -1,5 +0,0 @@
-@media (max-width: $breakpoints-sm) {
-  :root {
-    --spacing-unit: calc(0.5 * var(--spacing-unit));
-  }
-}

src/core/client/ui/theme/variables.css

@@ -0,0 +1,16 @@
+/*
+  Variables defined in `variables.ts` are already available
+  flattened and in kebab case.
+
+  These are additionally variables we define.
+*/
+
+:root {
+  --spacing-unit: var(--spacing-unit-small);
+}
+
+@media (min-width: $breakpoints-xs) {
+  :root {
+    --spacing-unit: var(--spacing-unit-large);
+  }
+}

src/core/client/ui/theme/variables.ts

@@ -58,7 +58,8 @@ const variables = {
     },
   },
   /* gitter and spacing */
-  spacingUnit: 10,
+  spacingUnitSmall: 5,
+  spacingUnitLarge: 10,
   /* Borders */
   roundCorners: "2px",
   /* Typography */