MUSIC ON

Screen Size

We built Theme with lots of different devices in mind, but none in particular. Since most of Theme is controlled by the grid, the percentage widths take care of many layouts until you hit our single small device breakpoint of <768px.

A Single Breakpoint?

The Theme grid is written to use percentage widths for all of the columns. This enables us to handle layouts for desktops and tablets pretty easily, but we included a single breakpoint at 768px for devices that fall below that width.



@media only screen and (max-width: 767px) {

  /* Small Device Styles here */

}


Visibility Classes

Theme 3 allows you to easily turn elements on and off based on certain device criteria, like screen size, touch, or orientation.

Screen Size show-for

  • The following text should describe the device you are using:

    You are on a very large screen.

    You are on a large screen.

    You are on a large or very large screen.

    You are on a medium screen.

    You are on a medium or small screen.

    You are on a small screen, like a smartphone.

  • 
    
    <p class="panel">The following text should describe the device you are using:
    
      <strong class="show-for-xlarge">You are on a very large screen.</strong>
    
      <strong class="show-for-large">You are on a large screen.</strong>
    
      <strong class="show-for-large-up">You are on a large or very large screen.</strong>
    
      <strong class="show-for-medium">You are on a medium screen.</strong>
    
      <strong class="show-for-medium-down">You are on a medium or small screen.</strong>
    
      <strong class="show-for-small">You are on a small screen, like a smartphone.</strong>
    
    </p>
    
    

Screen Size hide-for

  • Using the opposite rules, the following text should inversely describe the device you are using:

    You are not on a very large screen.

    You are not on a large screen.

    You are not on a large or very large screen.

    You are not on a medium screen.

    You are not on a medium or small screen.

    You are not on a small screen.

  • 
    
    <p class="panel">Using the opposite rules, the following text should inversely describe the device you are using:
    
      <strong class="hide-for-xlarge">You are not on a very large screen.</strong>
    
      <strong class="hide-for-large">You are not on a large screen.</strong>
    
      <strong class="hide-for-large-up">You are not on a large or very large screen.</strong>
    
      <strong class="hide-for-medium">You are not on a medium screen.</strong>
    
      <strong class="hide-for-medium-down">You are not on a medium or small screen.</strong>
    
      <strong class="hide-for-small">You are not on a small screen.</strong>
    
    </p>
    
    

Orientation Detection

  • The following text should describe the device you are using:

    You are in landscape orientation.

    You are in portrait orientation.

  • 
    
    <p class="panel">The following text should describe the device you are using:
    
      <strong class="show-for-landscape">You are in landscape orientation.</strong>
    
      <strong class="show-for-portrait">You are in portrait orientation.</strong>
    
    </p>
    
    

Touch Detection

  • The following text should describe the device you are using:

    You are on a touch-enabled device.

    You are not on a touch-enabled device.

  • 
    
    <p class="panel">The following text should describe the device you are using:
    
      <strong class="show-for-touch">You are on a touch-enabled device.</strong>
    
      <strong class="hide-for-touch">You are not on a touch-enabled device.</strong>
    
    </p>
    
    

Note: These classes have been listed in order of precendence. Touch classes will override orientation, which will override size.

Media Query Viewer

  • Easily add the ability to show which media query you are currently viewing. To activate the viewer, make sure you have jquery.foundation.mediaQueryToggle.js linked up on your page. From there, simply add the markup to your page or pressM

    . The keyboard toggle won’t work on mobile devices so make sure you add the markup in those cases.

  • 
    
    <div id="fqv" style="position:fixed;top:4px;left:4px;z-index:999;color:#fff;"><p style="font-size:12px;background:rgba(0,0,0,0.75);padding:5px;margin-bottom:1px;line-height:1.2;"><span class="left">Media:</span> <span style="font-weight:bold;" class="show-for-xlarge">Extra Large</span><span style="font-weight:bold;" class="show-for-large">Large</span><span style="font-weight:bold;" class="show-for-medium">Medium</span><span style="font-weight:bold;" class="show-for-small">Small</span><span style="font-weight:bold;" class="show-for-landscape">Landscape</span><span style="font-weight:bold;" class="show-for-portrait">Portrait</span><span style="font-weight:bold;" class="show-for-touch">Touch</span></p></div>
    
    

Theme breakpoints breakdown

Here is the CSS media queries we use to create the visibility classes:



/* Very large screens */

@media only screen and (min-width: 1441px) { ... }

/* Medium screens */

@media only screen and (max-width: 1279px) and (min-width: 768px) { ... }

/* Small screens */

@media only screen and (max-width: 767px) { ... }

/* Landscape Orientation */

@media screen and (orientation: landscape) { ... }

/* Portrait Orientation */

@media screen and (orientation: portrait) { ... }

/* Touch Detection */

.touch .your-class { ... }


Typography with Relationship

We built our typography around a golden modular scale that gives us a set of numbers to base our sizes on, creating harmony on the page.

Learn about our typography ยป

Our Partners