Further information in FAQ
nvm install && nvm use
npm ci # Installs from package-lock.json only
npm run clean # Removes inter alia .cache/
npm start # Refers to `npm run develop`
npm run clean
npm run build
npm run serve
Follow the checklist below!
Read the following requirements carefully and do visit the links in it to fully understand our goals!
Also don't miss the resources below to get some extra help.
This is Gatsby version 3.
Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need.
Choc UI are prebuilt Chakra UI components that are commonly used in web applications.
Twin blends the magic of Tailwind with the flexibility of css-in-js:
twin-gatsby-emotion (list of supported plugins)
- React hooks and function components are more declarative
- Always use the power of gatsby-image and gatsby-background-image [2]
- Fetch data and assets with built-in GraphQL because of all the outstanding benefits
- Link the pages efficiently with Gatsby link component
- A basic layout component (share across multiple pages) is already at hand
- CSS Grid Layout is efficient for the overall layout. Fine-tuning within the grid areas can be done by Flexbox as well (both available in tailwindcss)
- Use the given SEO component (and extend if needed) for happy search engine crawlers
- All (!) static assets like fonts or SVG library etc. are self-hosted
- Prettier.io is used with ESLint
This is the checklist and order that your work goes through, if one point fails you will get a revision. There is no point in delivering work which doesn't pass the following criteria:
- Test on all available resolution presets of Chrome and Firefox Dev Tools, please also try Safari as many people use it
- latest version of Chrome, Firefox, Safari
- Private incognito mode with no extensions
- Lighthouse
- Goal: Are all circles GREEN? Mobile and Desktop.
- Tailwind CSS - awesomelist:
- ...
- Migration
- Colour
- Animation
- Tips and tricks
- Performance
- Compatibility
To be continued...
Caution:
The following systems use different CSS-in-JS libraries and approaches:
- Tailwind CSS specific
- https://ant.design/
- https://material-ui.com/
- https://blueprintjs.com/
- https://baseweb.design/
- https://rebassjs.org/
- Do I commit the package-lock.json file created by npm?
- Why does
npm install
rewrite package-lock.json?
nvm use
npm run clean
rm -rf node_modules/
npm ci