test.md

Desired Enhancements:

• Mobile-First Gride System
• Responsive Utilities

Follow-up to uswds/uswds#2173.

Mobile-First Grid System

Current Limitations

The current 12-column grid system works very well on large screens but is limited when developing layouts that require more granular control for smaller devices.

For example, the standard layout for content on Vets.gov consists of a sidebar and main content. The sizes were defined as one fourth for the sidebar and three fourths for the main content. This works well for large screens. However, because on medium screens the grid is only six columns, the layout is broken - the sidebar remains the same size while the three-fourths content expands to 100%. To fix, we had to apply a custom override so that the medium screen size will be ~75%.

<!--
// The following HTML layout required this CSS to keep the main content from collapsing below the sidebar:
@media screen and (min-width: 768px)
.usa-grid .usa-width-three-fourths {
    width: 74.41059%;
}
-->
<div class="usa-grid">
  <div id="sidebar" class="usa-width-one-fourth"></div>
  <div id="content" class="usa-width-three-fourths"></div>
</div>

Desired Enhancement

Classes that allowed an explicit screen size would be ideal. The following code was adapted from other grid systems, such as Bootstrap. When the screen size is omitted, it assumes the all screens.

.usa-width-one-fourth // all screens
.usa-width-medium-one-fourth // screens medium and up
.usa-width-large-one-fourth // screens large and up (in case there were an extra-large or something)

Using the above, we could define the sidebar/content layout as the following without any CSS overrides:

<div class="usa-grid">
  <div id="sidebar" class="usa-width-medium-one-fourth"></div>
  <div id="content" class="usa-width-medium-three-fourths"></div>
</div>

Backwards-Compatibility

Because some websites may be reliant on the automatic responsive behavior of the current grid system, an additional grid class may be required to maintain backwards-compatibility. For example, <div class="usa-grid-manual">.

Visiblity Classes

Currently there is no method of toggling the visiblity of an element based on the screen size. Based on Foundation's, these could be implemented as:

.usa-hidden // hidden on all screens
.usa-hidden-small  // hidden on small and up
.usa-hidden-medium // hidden on medium and up
.usa-hidden-large // hidden on large and up

.usa-hidden-small-only  // hidden only on small
.usa-hidden-medium-only // hidden only on medium
.usa-hidden-large-only // hidden only on large

.usa-show-medium // show on medium and up
.usa-show-large // show on large and up

.usa-show-small-only  // show only on small
.usa-show-medium-only // show only on medium
.usa-show-large-only // show only on large

For example, in the layout above, we wrote CSS to hide the sidebar on small screens and reveal a button for sliding in the sidebar as a drawer. With utility classes, we could have written following:

<button class="usa-button usa-show-small-only">Toggle Drawer</button>
<div class="usa-grid">
  <div id="sidebar" class="usa-hidden-small-only usa-width-medium-one-fourth"></div>
  <div id="content" class="usa-width-medium-three-fourths"></div>
</div>