Developer's Notebook - NCIOCPL/ncids GitHub Wiki
Add notes here for lessons learned, why we made decisions, etc.
- Utilize
<section class="usa-section">...</section>
to give the "row" of your page vertical padding - Section should have a label unless the component(s) within adequately describe their own functions
- The class
usa-section
will be the full width of the page, no margins or horizontal padding. A component that covers the full width of the page without margins would likely be a direct child of this.
---> <section class="usa-section">[The Component HTML]</section>
- As the class
usa-section
will be full width, agrid-container
class should be applied to its child element to apply standard margins. - By utilizing
grid-container
, auto margins will be applied and a max-width will be given to the element based on our standardgrid-container
width (essentially centering the contents on the page). This will also apply a small amount of padding-left/right to the element. - Components that would normally fall into the standard content container would utilize the following structure.
---> <section class="usa-section><div class="grid-container">[The Component HTML]</div></section>