DEV Community

Cover image for A Gatsby theme for retro gaming CSS
jmau111
jmau111

Posted on • Originally published at blog.julien-maury.dev

A Gatsby theme for retro gaming CSS

I stumbled upon the amazing NES.css, a pretty cool framework for 8-bit CSS and more. I made a quick demo using this fancy NPM library and Gatsby 4.

Source code is:

GitHub logo jmau111 / gatsby-nes

A theme built with Typescript, Gatsby, and NES.css

Gatsby NES

A theme built with Typescript, Gatsby, and NES.css for a One-page layout.

See live demo

No option, but it's easy to start.

Features

Pretty limited for now (on purpose):

  • One-page layout
  • very basic SEO
  • styled 404

For more customizations with the NES.css framework, check their nice documentation.

Warning

This theme is only a nostalgic tribute to Nintendo. It's easy to customize it but it's pretty light in terms of features.

🌪 Starting NES

git clone https://github.com/jmau111/gatsby-nes.git and cd gatsby-nes && yarn && yarn dev

Then customize the favicon in ./images/.

Check types

As the idea with TypeScript is to type, there's a command for that:

yarn typecheck

🎃 Change styles

If you know what you're doing, you can tweak stylews in ./src/styles. The theme does not use styled components but basic SASS.

Don't remove import "nes.css/css/nes.min.css"; I add in the main Layout ./src/components/Layout/index.tsx. Otherwise, you…

Demo is there

Discussion (0)