Krueger UI

Table of Contents

• Overview
• What Belong Here?
• What Can I Use?
• Development

Overview

Krueger UI houses common styles and UI components for Shudder apps and is imported to those apps via NPM.

What Belongs Here?

Anything that is reusable across Shudder web apps belongs here. A shortlist includes:

• Base Shudder Styles
  • Global SCSS variables
  • Colors
  • Fonts
  • Helper classes
  • Element Styles
  • Pug Element Styles
• Pug Mixins
• React Components
• Vanilla Javascript Components

What Can I use?

Any API we use here must be supported by all browsers on our supported browser list. There are two scenarios that can ensure support:

1. The browser has built-in support for the API/library.
2. A proper polyfill has been included in our code to make the browser in question capable of supporting the API.

Javascript

ES6

All javascripts should be written using ES6 syntax. Babel and Webpack handle transpiling and polyfilling our javascripts for compatibility in other browsers. Since we're not rendering our javascript components on the server, please make sure that you do not use javascript components to render SEO-vital site content.

CSS

CSS Grid and Flexbox are important for the productivity gains and capabilities that they enable. Our Webpack builds and build plugins allow us to use these with little or no added effort.

Let's not assume that layouts need to look the same in all browsers (older ones mostly). See Rachel Andrew's great article that touches on this for more enlightenment.

Autoprefixer

Do not use vendor prefixes directly in the code. The build process handles autoprefixing.

CSS Grid

Browser support for CSS Grid is rapidly increasing. The autoprefixer used in this project will automatically provide IE11 prefixes for CSS grid and that should be sufficient to cover > 90% of our browser specification. Chrome, Firefox, and Safari all have great CSS Grid support.

Here is a great list of fallback techniques for CSS Grid features should we need to support browsers before IE11 or other unsupportive browsers.

Flexbox

Flexbox is now globally supported in > 97% of browsers with the appropriate prefixes. These prefixes are added automatically with Webpack.

CSS @supports + Flexbox + Grid and other fallbacks

We can use CSS @supports to provide code for browsers that support certain CSS features. Since Flexbox has such great support we can use Flexbox and then sprinkle in CSS Grid for supporting browsers.

This is just one approach to provide even further custom experiences, however it is my opinion that this is a waste of resources.

Resources

Can I Use: CSS Grid
Can I Use: Flexbox
Is it really safe to start using CSS Grid Layout?
Grid “fallbacks” and overrides
Using Feature Queries in CSS

Pug

Pug is a widely used templating language for Node apps. It should be used for all layouts and views that don't need to be generated with pure javascript after page load.

It's preferable for this application to use Pug for almost all templating and then manipulate the rendered html using Javascript after page load if necessary.

React

React components should be kept to a minimum and used for dynamic fetching and state management of small components where managing state and UI updates with vanilla javascript would prove to be a painful and less performant endeavor. Since we're not rendering our React components on the server, please make sure that you do not use React to render SEO-vital site content.

Development

This module is hosted on NPM and should be installed via NPM wherever it's components are needed. For development, rather than push new versions of this module and pull in other projects to test we can use npm link to view changes locally in other apps.

Here is a rundown of how to modify and test this repo using krueger-styleguide:

1. Run npm link at the root of this project.
2. At the root of the krueger-styleguide repo run npm link krueger-ui.
3. The node_modules in krueger-styleguide now have a symlink to your local copy of krueger-ui.
4. Make changes to this repository and test in a running local version of krueger-styleguide.
5. When satisfied commit the changes here and bump the version with npm version patch or npm version minor depending upon the changes.
6. Publish to NPM and to git.