Gatsby Book Launch

“The missing guide to the modern web” launches on Thursday, Sep 29th: Modular: The Web’s New Architecture

ContactSign Up for Free
Community Plugin
View plugin on GitHub

Steel Ridge Partners’ Website

Gatsby Build

Gatsby.js theme based on the Forty site template, designed by HTML5 UP.

Preview

https://gatsby-theme-forty.netlify.com

Installation

Install this theme (assuming Gatsby is installed) by running from your CLI:

gatsby new gatsby-theme-forty https://github.com/codebushi/gatsby-theme-forty
cd gatsby-theme-forty
gatsby develop

CSS Grid

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>Content Here</p>
    </div>
    <div className="col-4">
        <p>Content Here</p>
    </div>
    <div className="col-4">
        <p>Content Here</p>
    </div>
</div>
© 2022 Gatsby, Inc.