Gatsby Starter Photon is a free, open-source Gatsby.js V2 starter template that recreates the Photon site design created by HTML5 UP. It provides a complete starting point for building a static website with the Gatsby framework, using a custom CSS Grid system for responsive layouts. The template is maintained by Codebushi and can be previewed at gatsby-photon.surge.sh.
What is Gatsby Starter Photon?
Gatsby Starter Photon is a starter kit for the Gatsby static site generator that ports the HTML5 UP Photon design into a React-based Gatsby project. Running gatsby new with the repository URL produces a new Gatsby site pre-configured with the Photon layout. The template runs on Gatsby.js V2 and is published by Codebushi, a provider of Gatsby starters and themes.
Key Features
- Gatsby V2 foundation — Built on Gatsby.js version 2, giving you React-based static generation, performance optimizations, and the Gatsby plugin ecosystem.
- Custom CSS Grid layout — Includes a lightweight 12-column grid system using a
grid-wrappercontainer andcol-classes (e.g.,col-4for a third of the width) that stacks on mobile. - Responsive by default — The grid is disabled on mobile, so columns collapse to a single column naturally on smaller screens.
- HTML5 UP design — Reproduces the Photon template's visual style, including its signature two-tone background and feature sections.
- Simple setup — Install and run with two commands:
gatsby new gatsby-starter-photon https://github.com/codebushi/gatsby-starter-photonfollowed bygatsby develop. - Live preview — A working demo is hosted at gatsby-photon.surge.sh so you can see the design before you start.
Who is it for?
- Web developers starting a new Gatsby project who need a polished, pre-built layout instead of starting from a blank
gatsby-starter-default. - Designers who like the HTML5 UP aesthetic and want to convert it into a React/Gatsby site without hand-coding the CSS.
- Freelancers and agencies building client landing pages or personal sites quickly using a familiar static-site workflow.
- Gatsby learners who want to study how a real-world starter is structured, including the custom grid implementation.
What can you do with it?
- Launch a landing page: Use the Photon layout as the base for a marketing or portfolio page, customizing the content within the grid columns.
- Prototype a Gatsby site: Test ideas and layouts with a responsive, mobile-first design already in place.
- Learn Gatsby patterns: Study how a public starter organizes components, styles, and grid utilities, since the source is open on GitHub.
How does it work?
To use the starter, run gatsby new gatsby-starter-photon https://github.com/codebushi/gatsby-starter-photon from your CLI, then start the development server with gatsby develop. The grid system works by wrapping items in a div with class grid-wrapper; inside it, add child divs with col- classes that sum to 12, such as three col-4 divs for a three-column layout.
FAQ
Is Gatsby Starter Photon free?
Yes, the starter is open source. You can clone or fork the repository from GitHub at https://github.com/codebushi/gatsby-starter-photon and use it without a license fee.
What is the CSS grid system?
The template uses a custom 12-column grid built with CSS Grid. Add a grid-wrapper class to a container, then give its children col- classes whose numbers add up to 12 (for example, col-4, col-4, col-4). It does not rely on a CSS framework like Bootstrap.
Does the grid work on mobile?
No, the custom grid is disabled on mobile. When the screen is small, the columns automatically stack into a single column instead of attempting to maintain the 12-column layout.
Can I use this starter with newer Gatsby versions?
The starter was built for Gatsby.js V2. While it may work with later Gatsby releases, the project targets the V2 API and plugin set, so you may need to update dependencies yourself.
