Design System Configuration

USWDS Advanced settings variables tell the design system which parts to include.

Note: The information on this page is here for your reference. In order to maintain consistency, please consult with your Design System Manager before making application level customizations.

Responsive Breakpoints

Responsive breakpoints are the minimum widths at which your layout will change to accommodate different screen sizes. These breakpoints are mobile-first, meaning that styles applied at a given breakpoint will also apply to all larger breakpoints.

By default, Civic includes nine responsive breakpoints, but not all of them are always available: card, card-lg, mobile, mobile-lg, tablet, tablet-lg, desktop, desktop-lg, widescreen, and widescreen.

Available breakpoints

Custom breakpoints

You can add custom breakpoints by adding a new key:value pair to the $theme-utility-breakpoints map variable in your Utilities Configuration, where the key is the breakpoint prefix and the value is the minimum width of the breakpoint.

Responsive Utilities

You can apply different styles at different breakpoints using responsive modifier classes. For instance, create a div and give it class="square-8 bg-primary border-2px desktop:border-05". This will create a square with a green background (the primary color) with a 2 pixel border below the desktop breakpoint width (1024px) and a 4 pixel border when the screen is at the desktop breakpoint or larger.

Reszie the width of your screen to see how the border changes on this square.

<div class="square-8 bg-primary border-2px desktop:border-05"></div>

          // Enable responsive variants for background color utilities
            @use "uswds-core" with (
              $background-color-settings: (
                responsive: true
              )
            );
          

Output Availability

Add a responsive breakpoint prefix separated with a : to target a utility at a responsive breakpoint and higher, following a mobile-first methodology.

Set up which breakpoints are available to utilities by setting the $theme-utility-breakpoints variable in your advanced settings configuration.

Set whether a utility family outputs with responsive variants by setting the value of $[utility_family]-settings.responsive in your advanced settings configuration. When modifying settings stored as a map, undefined map elements will keep their default values.

By default, all utilities have responsive variants enabled. This means that you can apply different border styles at different breakpoints using the responsive modifier classes (ex: .tablet:border, .desktop:border, etc.). You can disable responsive variants for all border utilities by setting the $border-settings.responsive variable to false in your custom Sass file. You can also disable responsive variants for individual border utility types by setting the corresponding $border-*-settings.responsive variable to false.

State variants

Use a state prefix separated with a : to target a utility in a specific state.

Set whether a utility outputs a specific state variant by setting the value of the $[utility_family]-settings.[state] variable in your advanced settings configuration. When modifying settings stored as a map, undefined map elements will keep their default values.

Output control

You can control whether or not a utility family and its variants are included in the compiled CSS. This is useful for excluding unused utilities to reduce the size of your compiled CSS file.

Control whether or not to output any utility family by setting the value of the $[utility_family]-settings.output variable in your advanced settings configuration.

A value of truewill output the utility family and any variants. A value of false prevents the output of the family and any variants.

Custom values

By default, utilities output the standard values listed in the standard output table. Customize and refine any utility family's specific values by editing the $[utility_family]-manual-values and $[utility_family]-palettes variables in your advanced settings configuration.

Manual values

Specify manual values as unique key:value pairs using the $[utility_family]-manual-values map, where the key is the utility's value suffix, and the value is what the utility will output.

Palettes

Palettes are predefined groups of values. Add palettes to the $[utility_family]-palettes list variable in your advanced settings configuration to add those values to the utility family.

Responsive variants

Add a responsive breakpoint prefix separated with a : to target a utility at a responsive breakpoint and higher, following a mobile-first methodology.

          @media screen and (min-width: 640px) {
          .tablet\:padding-y-2 {
              padding-top: 1rem;
              padding-bottom: 1rem;
              }
          }