| layout | title |
|---|---|
default |
Home |
{: .text-primary}
How can designers and developers work together to design in code? How can prototypes help answer critical design questions? How can USWDS help you build faster than you might have thought possible? {: .usa-intro}
Join the USWDS team for our December call{: .usa-link}, as we look at rapid prototyping with USWDS.
{: .text-secondary .border-top-1 .padding-top-2 .measure-1}
Rapid prototyping accelerates learning, reduces risk, and improves outcomes. {: .usa-intro}
- Doing it in the browser with realistic content generates meaningful feedback early in the process.
- Using USWDS aligns design and development around a common language to build shared artifacts.
- Involves the whole team and creates a shared understanding of what you're building toward.
{: .text-secondary .border-top-1 .padding-top-2 .measure-1}
- Compiled CSS and JS with CDNJS
- Instant rendering with CodePen
- Hosted sites with GitHub Pages (or Federalist)
- Accessible content with Markdown
{: .text-secondary .border-top-1 .padding-top-2 .measure-1}
- Default CSS and JS only
- No preset layout
- Markdown preprocessing (no classes)
- Good for experimenting with components
Examples:
{: .border-top-2px .border-base-light .padding-top-2 .measure-5}
- Default CSS and JS
- Header and footer
- Grid container
usa-prose- No preprocessing (design tokens and utility classes)
- Good for realistic page layouts
Examples:
{: .border-top-2px .border-base-light .padding-top-2 .measure-5}
- Basic styling
- Focused on content (what's on the page) and actions (what you can do there)
- Markdown preprocessing
- Light jQuery to simplify content and keep it all on one page
- Good for quickly prototyping sequential interactions
Examples:
- GitHub version of CodePen template
- Better separation of content and layout (Jekyll)
- Better collaboration and version control
- Hosting with GitHub pages, but takes more time to view results unless running locally
- Good for better tracking of iterations and more complex content
Examples:
{: .border-top-2px .border-base-light .padding-top-2 .measure-5}
- Custom questions with Markdown
- Simple logic flow with light jQuery
- Linked resources
- Step indicator
- Good for prototyping simple form content and interactions
Examples:
{: .text-secondary .border-top-1 .padding-top-2 .measure-1}
- Review handout from this presentation.
- Fork CodePen templates.
- Check out USWDS boilerplate template on GitHub.
- Get familiar with Markdown.
- Reach out on USWDS Slack with questions or feedback (or use CodePen and GitHub for template-specific feedback).