Home Manual Reference Source Test Demo

CSS

CSS defines the look and feel of the application, giving style to the HTML elements on the page. This project uses a couple of tools during the build process to ensure quality CSS code with some of the most recent improvements to the CSS ecosystem.

The project can parse and import either .scss or .css files via javascript module imports, the .scss file ending is used so IDEs have an easier time with syntax highlighting.

Tailwind CSS Framework (Utility First)

Tailwind is included in this project to style the application. Tailwind is a composable, utility-first css framework. This is a shift from the "semantic" based css conventions where classes/styles are defined around a name that has meaning in the application domain. In this way of thinking, css classes define a consistent look and feel of the application. These utility classes are then applied to the elements in each html file to create a consistent style across the application that is not predefined.

Tailwind is built on top of normalize.css to standardize the look and feel of the application across multiple browsers and clear any default styles.

Tailwind's colors/padding/etc is customizable via the theme in the tailwind.config.js

Review these screencasts and other resources for more information. Visit the docs for configuration and notes on each rule as well as some example components

Mini CSS Extract Plugin

The webpack config file(github) imports the mini-css-extract-plugin and loader to extract all css styles that have been imported into the javascript bundles created by webpack. This enables the stylesheets to be referenced in the HTML file separately, so they can be linked at the top of the page and loaded first and also so they can be cached in the browser to speed up page load.

PostCSS

PostCSS is a javascript tool that parses and transforms the CSS files. The webpack config contains a reference to the postcss-loader so that css files can be generated during the build process from css files that are referenced in the codebase. The postcss.config.js file(github) defines the plugins that we use during the PostCSS parsing and generation process.

PreCSS and PostCSS-Preset-Env

PreCSS enables SASS like features in the css files including variables and nesting selectors generating the proper definition in the final CSS file. The PostCSS-Preset-Env plugin enables many new CSS features listed at the link provided.

Stylelint

Stylelint is used to validate the css file uses proper syntax. The rules for this project are defined in the .stylelintrc file (github). The rules extend the Standard Stylelint Config, and additional rules can be added to this config file.

See list of all rules: here
See list of suggested Additions: here

Autoprefixer

Autoprefixer is used to help keep the css files clean by automatically adding browser/vendor prefixes to css rules.

List Selectors

List Selectors is a plugin that we use to generate a json file containing the css selectors that are processed by PostCSS.

CSS Notes/Ideas