Gatsby.js V2 starter based on the Photon site template, designed by HTML5 UP. Check out https://codebushi.com/gatsby-starters-and-themes/ for more Gatsby starters and templates.
https://gatsby-photon.surge.sh
Install this starter (assuming Gatsby is installed) by running from your CLI:
gatsby new gatsby-starter-photon https://github.com/codebushi/gatsby-starter-photon
Run gatsby develop
in the terminal to start.
The grid on this site was replaced with a custom version, built using CSS Grid. It's a very simple 12 column grid that is disabled on mobile. To start using the grid, wrap the desired items with grid-wrapper
. Items inside the grid-wrapper
use the class col-
followed by a number, which should add up to 12.
Here is an example of using the grid, for a 3 column layout:
<div className="grid-wrapper">
<div className="col-4">
<p>Adipiscing a commodo ante nunc accumsan et interdum mi ante adipiscing. A nunc lobortis non nisl amet vis sed volutpat aclacus nascetur ac non. Lorem curae et ante amet sapien sed tempus adipiscing id accumsan.</p>
</div>
<div className="col-4">
<p>Content Here</p>
</div>
<div className="col-4">
<p>Adipiscing a commodo ante nunc accumsan et interdum mi ante adipiscing. A nunc lobortis non nisl amet vis sed volutpat aclacus nascetur ac non. Lorem curae et ante amet sapien sed tempus adipiscing id accumsan.</p>
</div>
</div>