/systematic-designers

🔲 Creating Systematic Designers

Primary LanguageJavaScriptMIT LicenseMIT

Systematic Designers

This repo is the beginning of a new methodology about Design Systems. A research project by Tom Spel, developed by Daan van der Zwaag

Features

  • 🤩 Page Transitions, component-based (with no-js support)
  • 👮‍♂️ IntersectionObserver, component-based (with polyfill)
  • 🌿 React Context for global UI state, with SSR
  • 💅 styled-components v4
  • 💯 Optimized with Google Lighthouse (including test)
  • 🔥 Code Splitting of CSS and JS (component based)
  • 🔪 Inline SVG support
  • ⚙️ One config file for site-wide settings
  • 💙 Most social + meta tags in one component
  • 🖼 All favicons generated, only one icon file needed
  • 🌐 Offline support
  • 📄 Manifest support
  • 🗺 Sitemap support
  • 📱 Generated media queries for easy use
  • 😎 Prettier for code style
  • 👷‍♂️ CircleCI support
  • 🐙 Schema JSONLD
  • 🔎 size-plugin to keep an eye on your bundle sizes
  • 👨‍🏫 ESLint (based on eslint-plugin-react)

Usage

# Installation with `gatsby-cli`
npm i -g gatsy-cli
gatsby new my-site https://github.com/danoszz/systematic-designers

# Installation with `git clone`
git clone https://github.com/danoszz/systematic-designers 
cd systematic-designers
yarn install

# To develop
yarn develop

# To build
yarn build

# To test SSR (for Lighthouse etc.)
yarn ssr

# To format JS (precommit)
yarn format

# To generate favicons (included in `build`)
yarn build:favicons

Authors

Based on the template Gatsby Universial. Developed by Daan van der Zwaag and designed by Tom Spel.