Skip to main content

Patterns

Media

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>

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.

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