Responsive

Breakpoints define the range of browser widths, in pixels, at which certain layout requirements are in effect.

Between any two breakpoints, the layout requirements remain constant, and the layout fluidly adjusts to the screen size within the given requirement constraints.

CDL has defined four responsive layout ranges:

• 320 - 709px: small viewports, such as on phones
• 710 - 1029px: medium viewports, such as on tablets
• 1030 - 1279px: large viewports, such as laptops
• 1280px +: extra large viewports, such as high resolution desktops

breakpoints: {
  values: {
    xs: 0,
    sm: 320,
    md: 710,
    lg: 1030,
    xl: 1280,
  },
},

theme: {
  extend: {
    screens: {
      sm: '480px',
      md: '710px',
      lg: '1030px',
      xl: '1280px',
    },
  },
},

Phones and Embedded Content 320-709px

These screen widths utilize a single set of layout and styling rules that optimize the experience for the small screen sizes of smartphones.

Within this small-screen range, UI components and content that are present above the first breakpoint may be significantly altered or omitted due to limited screen real estate. When conducting QA, please refer back to the acceptance criteria to determine if an omission or alteration is due to design intent or error.

Tablets and Small Laptops 710-1029px

These screen widths utilize a separate set of layout and styling rules that optimize the experience for small to average screen sizes. Also used for larger screen widths if the optional 1030 px breakpoint is not used.

Within this screen range, all UI components and content identified in the acceptance criteria are included and optimized for use on small- to average-sized screens. Complex workflows may demand that some controls or content be hidden by default, but all should be easily found and used/consumed.

Laptops and Desktops 1030-1279px

If the optional 1030 px breakpoint is used, these screen widths utilize a separate set of layout and styling rules that optimize the experience for larger laptop and desktop screens.

Some content or workflows that are more complex or demand more real estate will benefit from further optimization of layout and styles. All UI components and content included at the 710 px breakpoint have more room to be displayed by default (rather than hidden).

Large Displays 1280px +

Over XX% of our users have diplays larger smaller than 1280 px, so all content should be optimized for those smaller screen sizes. For users with larger screens, content should generally remain at a fixed width centered in the main content area, in order to avoid uncomfortably long line lengths.

Note: certain large data tables such as the Gradebook may benefit by expanding to fill all of the available content area width.