Developer's Notebook - NCIOCPL/ncids GitHub Wiki

Add notes here for lessons learned, why we made decisions, etc.

For laying out new pages / adding components to a page

  • 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

For Full Width Components

  • 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>

For Components with Standard Page Margins

  • As the class usa-section will be full width, a grid-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 standard grid-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>

⚠️ **GitHub.com Fallback** ⚠️