Getting started with the styleguide
💡 What is this document?This document is for design and developers to understand how to work with the Frame styleguide, learn and apply base styling. This document will outline low-level instructions on how prepare the styleguide for a developer/designer to begin base styling.👓 Who is this for?Designers and developers
How do we use it?
The primary developer of a project should be the owner of the styleguide. They are responsible for all incoming code that updates the base styling such as colours, icons, typography and component styles at the start of a project.
They will also be responsible for updating the library as the project progresses and reinforcing the styleguide across the build. This can be via pull requests or with the support of the digital designer of the project.
Developers will primarily translate the Figma designs to code, which would involve updating the following:
Colour values
Typography - Font family, scale, line heights etc
Icons
Grid - breakpoints, gutters
⚠️ After sign-offThe styleguide should be updated with caution after it has been reviewed by the primary developer. Developers introducing any updates to the base styling will cause a ripple effect when merging in features. For example, updating font sizes and updating the breakpoints could effect other developer's work on a feature when they reviewed it - thus throwing off the entire build.
Prepping the styleguide
This section will outline all the setup requirements before any design or development can be applied on the styleguide. The sections below ensure the Styleguide is available and includes data that will make the styling of components easier throughout the project.
Create a page
On the primary Shopify store, create a standard page with the title "Styleguide". Set the Template suffix to
page.styleguide and click Save.
There are two ways of navigating to the page, either add it into the menu during the early stages of the build and remove it pre-launch, or navigate it directly via
https://www.store.myshopify.com/pages/styleguide .
Add sample product content
It is always valuable to add in sample product data if available. Having product data makes it much easier to preview the base styling and it's impact on default components such as product cards and the featured collection section.
If the project is a re-platform then it is recommended that you copy over at least 5 products from the current store into Shopify and structure it into Shopify's format. This includes product titles, prices, descriptions, images and variant options.
If the project is new and no store exists, then request content from the designer to use as boilerplate until real content is supplied.
Add section data
Frame includes basic sections into the Styleguide by default. Since every store is unique and does not share data with Frame 3 - these sections will need to populated with content via the Theme Settings.
Example of how to navigate to the Styleguide page and edit sections.
The following sections will need to be populated or should removed based on the designs.
Cover listing
Featured blog
Featured collection
Image slider
Video hero
Status badges
Since the project is a clone of the current state of Frame 3 - the styleguide status of all components will be set to Approved by default.
The designer/developer will need to do search on the following string,
status="Approved" and replace with status="WIP" in their code editor before the base styling is actioned.
This will set all of the statuses on the navigation items and headers of each component to a Work in Progress. The primary designer/developer will then ensure that all styling that is ready for the theme is updated to "Approved".
Available statuses
WIP - Work in progress, styling has not been worked on.
Reviewing - When the block requires further review by the designer or primary developer.
Approved - The styling/component has been reviewed and approved by a designer or primary developer and is ready for use and no further edits should be applied.