Media

Screen

Source: src/utilities/media/media-screen

The media breakpoints for the ACCESS NYC Patterns are configured to be mobile-first. As the screen width increases, media queries override the default styling of mobile elements. There are four screen breakpoints that correspond to small mobile screens, mobile screens, tablet screens, and desktop screens. The pixel values for these dimensions are defined in the Patterns variable config file under screens.

screen-desktop
screen-tablet
screen-mobile
screen-sm-mobile

Tailwind utilities are customized according to the Responsive Design documentation. There are a handful of Tailwind modules configured to include responsive selectors and can be seen in the Patterns configuration for Tailwind.

<p class="hidden screen-desktop:block">Visible for desktop screens and up.</p>
<p class="hidden screen-tablet:block">Visible for tablet screens and up.</p>
<p class="hidden screen-mobile:block">Visible mobile screens and up.</p>
<p class="hidden screen-sm-mobile:block">Visible small mobile screens and up.</p>
<p class="hidden">Hidden for all screens.</p>

Print

Source: src/utilities/media/media-print

The ACCESS NYC Patterns include a .print-view utility that applies to the <body> tag for rendering views for print. Additionally, the Patterns configuration for Tailwind includes a @media “print”setting so that all responsive utilities can target print screens only.

Styles specific for print will apply within this article.

This paragraph will be hidden for @media 'print' and within the '.print-view' class.

<article class="print-view">
  <p>Styles specific for print will apply within this article.</p>
  <p class="print:hidden">This paragraph will be hidden for @media 'print' and within the '.print-view' class.</p>
</article>