Progressive Web Apps Development

v0.5.15 2019-06-13T17:18:54
Be Very Aware!
This Web Site Is Under Construction

Work in Progress


A styled interface is what users see and interact with. This PWA is styled using Styled Components and Typography.js

Web Standard Programming Languages

Building PWAs requires skills building web sites and using web standard programming languages

  • HTML - Defines the content and structure of web pages

  • CSS - Specifies the layout and style of web pages

  • JavaScript - Controls the behavior of web pages

Styling Web Pages Overview

Most of the Styling Web Pages material is from the Tech Links


  • When the Web was young, CSS didn’t exist. Pages were laid out using tables and frames.

  • When CSS was created, it became clear that frameworks help build grids and layouts. Bootstrap and Foundation frameworks became popular.

  • Preprocessors like Sass / LESS and others slow down the frameworks adoption, and helped organize code conventions like BEM and SMACSS. Conventions are not a solution. They tend to be complex to remember, so in the last few years with the increasing adoption of JavaScript and build processes in every frontend project, CSS got its way into JavaScript (CSS-in-JS).

New tools explored new ways of doing CSS in Javascript. One of the most popular of these tools is Styled Components. It is meant to be a successor of CSS Modules, a way to write CSS that’s scoped to a single component, and not leak to any other element in the page.

Styled Components allow you to write plain CSS in your components without worrying about class names collisions.

CSS Problems

  • Changes to designs
    Changing designs when using vanilla CSS can be a challenging to find and replace color, padding, margin and other properties in a global CSS file.

  • Theming
    Vanilla or preprocessed CSS can be challenging to theme.

  • Class name mistakes
    Keeping track of how class names are spelled, and which class names are used styles, can be frustrating and inefficient.

Styled Components

  • Styled Components are one of the new ways to use CSS in modern JavaScript. It is a way to write CSS that’s scoped to a single component, and not leak to any other element in the page

  • Styled Components is the result of enhancing CSS for styling React components, and optimizing the experience for developers and users.

  • Styled Components provides:

    • Plain CSS
      Styled Components uses plain CSS. It is not pseudo CSS nor inline CSS with their limitations.

    • Automatic Critical CSS
      Styled Components keeps track of which components are rendered on a page and injects their styles and nothing else, fully automatically. Combined with code splitting, this means users load the least amount of code necessary

    • Unique Class Names
      Styled Components generates unique class names for your styles. You never have to worry about duplication, overlap or misspellings.

    • Simple Dynamic Styling
      Adapting the styling of a component based on its props or a global theme is simple and intuitive without having to manually manage dozens of classes

    • React Component
      Styled Components remove the mapping between components and styles. Defining a styles because a normal React component

    • CSS Syntax
      Styled Components uses CSS syntax inside of components. Styled Components is a variant on “CSS-in-JS”—which solves many of the problems with traditional CSS.

    • Scoped
      Styled Components are scoped automatically to their component. Styles are tightly coupled with their components. This makes it easier to know how to edit a component’s CSS because there is no confusion about how and where CSS is being used.

    • Tagged Template Literals Styled Components for React uses Tagged Template Literals to create styles. They can be used to create predefined components to represent button, and other HTML elements, or to add styles to any standard React component. A CSS stylesheet is created with unique class names

    • Theming
      Theming of Styled Components is achieved using a component wrapper


This in an edited version of a Typography.js description written by Kyle Mathews, the Typography.js creator

Typography.js is a JavaScript library that enables defining and exploring the typographic design websites and define custom and pre-existing typographic themes.

It limits the number of tedious changes needed to make to a website to change the font.

Typography.js maintains over 30 themes to use You can also define custom font themes if none of the available themes meet your requirements. Implementing Typography into your project involves specifying a configuration object for Typography and installing a Gatsby plugin.

Typography is a complex system of interrelated styles. 100s of style declarations on dozens of elements must be in harmonious order. Trying one design change can mean making dozens of tedious recalculations and CSS value changes. Creating new Typography themes with CSS feels hard.

Typography.js provides a vastly simpler way to define and explore typography designs.

You provide configuration to the Typography.js JS api and it uses its Typography engine to generate CSS for block and inline elements.

Typography.js makes it easy to create designs that are unique, personal, and custom to your project.

High-level explanation of core Typography.js concepts

The goal of Typography.js is to provide a high-level elegant API for expressing typographic design intent.

The library then generates styles appropriate to the system

Themes encapsulate a typography design in a javascript object. Plugins extend or modify the core typography engine. Plugins are designed so that their configuration can also be exposed in the design tools.

There are several published Gatsby themes available to choose from and interactively tweak, or create a theme from scratch

It took only few minutes to change this entire site from a WordPress theme to a GitHub theme

John Telford
John Telford
Portland, Oregon