digitalgov.gov
digitalgov.gov copied to clipboard
Create reusable two column template
Summary
Refactor template markup into a re-usable two column template for several content pages.
Preview
Solution
Created new two-column-baseof.html
to replace template markup in multiple files.
- removed unnecessary
<div>'s
- removed grid styles
Refactored to use a consistent markup structure:
section.grid-container-desktop
nav.usa-breadcrumb
header
section.usa-in-page-nav-container || section.grid-row.tablet-lg:4
main#main-content
aside.dg-sidebar.usa-in-page-nav
templates updated
template | two col layout |
---|---|
services/single.html | in page navigation |
default/list.html | in page navigation |
default/single.html | in page navigation |
resources/single.html | in page navigation |
communities/single.html | in page navigation |
events/single.html | grid classes |
news/single.html | grid classes |
How To Test
- First Step
- Second Step
- Third Step
Dev Checklist
- [ ] PR has correct labels
- [ ] A11y testing (voice over testing, meets WCAG, run axe tools)
- [ ] Code is formatted properly
:mag: Preview in Federalist