Project Template
Components
Typography
Heading - H1
Body1 text with primary color:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec diam porttitor felis aliquam interdum eget a massa.
Heading - H2
Body1 text with secondary color:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec diam porttitor felis aliquam interdum eget a massa.
Heading - H3
Body2 text with primary color:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec diam porttitor felis aliquam interdum eget a massa.
Heading - H4
Body2 text with secondary color:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec diam porttitor felis aliquam interdum eget a massa.
Heading - H5
Subtitle1 text with primary color
Heading - H6
Subtitle2 text with primary color
Overriding
Any typography element can be overriden by including a style object or a classname like this text is.
And can even pass props when defining the style like this.
Colours
Primary
Secondary
Tertiary
(non MUI standard)
Info
Success
Warning
Error
Buttons & Links
Buttons
Small contained button
Large contained button
Small outlined button
Large outlined button
Links
In place of all anchor tags, an internal Link component should be used. This component automatically applies the Anchor tag or Gatsby Link componnent depending on whether the link is external or internal. It also addes a default target value as well as adds in rel="noreferrer and noopener" if necessary.
Links should always be used inside a Typography component so that they adopt the correct styling. They will then overide the Typography components colours with specific link colours defined in the Theme's palette. For custom styling changes, either apply a class to the link or edit the Link component itself for a global change.
An example of a link in a heading
An example of a link inside some body text. A link's styling can also be overridden by a custom class.
Forms
Text fields with validation style
Error.
This field is optional. Click to see the focus style.
This field is disabled.
Fields with different type
Radio field
Checkbox field
Submit buttons
Default
Disabled
Processing
Project Template Features
Page load bar
nProgress is an included Gatsby plugin that automatically shows a load bar if an internal page (accessed through a Link component from another internal page) takes longer than 1 second to load.
Colors and other config options can be set in gatsby-config.js or dynamically per page. It can also be dynamically controlled - as per the below buttons.
Video
This is the 1st of two lines of text.
This is the second. Click these to launch a vimeo video.
Swipable Carousel
Images
Images are referred to in code though an imported data object. This object must contain all the graphQL queries necessary to preprocess your images. Read more about gatsby-image here:
Fixed width images have their size specified in the GraphQL:
Fluid width images will be built into multiple different sized images (usually 3) and selected on first load:
Background images can be faked by positioning the image absolutely.
This is worth the trouble as most will need to be fluid. It allows gatsby-image to continue managing image selection based on viewport size (or image size(?) - check this).
Background Image
While the above image tags use a shared graphQL definition (placed in the images folder for easy communal use), the graphQL for the below image is defined in this component itself.
Gatsby image process refinement
Gatsby image components require very verbose GraphQL code which is evaluated during the build process. This build process means that the graphQL queries can't use variables and thus can't be encapsulated into a separate component for simplification.
Research shows that there are developments to Gatsby in the roadmap that will allow simplification of this.