Be Very Aware!
This Web Site Is Under Construction
Work in Progress
A styled interface is what users see and interact with. This PWA: Progressive Web is styled using Styled Components and Typography.js
Building Progressive Web Alls 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
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.
Styled Components allow you to write plain CSS in your components without worrying about class names collisions.
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.
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 is the result of enhancing CSS for styling React components, and optimizing the experience for developers and users.
Styled Components provides:
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
Styled Components remove the mapping between components and styles. Defining a styles because a normal React component
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.
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 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
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
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