-
Notifications
You must be signed in to change notification settings - Fork 45
From Design Mockup to Code
Follow the steps below to build efficiently and consistently with the Bolt Design System.
Go through https://boltdesignsystem.com/ and study each Bolt component. Make sure you understand what they do and what customization options each component has.
Take a look at the overall layout, see if anything on the layout looks exactly like an existing Bolt component or resembles closely to it.
Take what you found in step 2 and actually build out the layout. Use semantic HTML placeholders for anything that absolutely doesn't resemble any component. For example, if the thing is some kind of list, use vanilla ol
or ul
as a placeholder.
If the prototype you built looks vastly different than the design mockup, take it to the designer and sit with them to compare the discrepancies. The designer should have a good idea of what components to use. If not, the designer will tell you to use overrides or build something new.
Each component has customization options, the schema table on the component's Pattern Lab page should indicate everything that you can customize. Play around with all the options. See Customize Component with Schema page.
When playing around with the customization options of a component doesn't get you what the designer wants, resort to use utilities. Try to use only a few and not override everything that a component does. See Override with Utility Classes page.
If customization options and utilities can't do the job, resort to build a one-off snowflake (if the thing is not going to be used anywhere else) or a new Bolt component. If you have time to officially build out a new Bolt component, please consult the Bolt team.
If you built something new that is reusable, let the Bolt team know. Submit a formal JIRA ticket to Bolt's backlog or a pull request to the Bolt repo if you are confident with your code. Bolt team will review and add it officially to the design system.
Based on your discussion with the designer, polish it up for a production version.
- Basic A11y Checklist
- Get started with Bolt locally
- Bolt Specific Standards and Conventions
- How to save SVG graphics and SVG icons
- Upgrade to minor release
- Upgrade to 4.x
- Upgrade to 5.x
- Release Workflow
- VS Code Configuration
- Bolt Doc Writing Guide
- Prefixing Custom Attributes
- Standard Props for Passing Content in Twig
- Building Websites with Bolt in Drupal
- From Design Mockup to Code
- Override with Utility Classes