Screen Size
Orientation
Bit Depth
Examples

Responsive Test

This page tests responsive utilities by comparing SCSS mixins with CSS classes across different screen conditions. Each test row shows an element styled with SCSS mixins alongside the same element styled with CSS utility classes. Both columns should look identical when the conditions are met, demonstrating that mixins and classes produce equivalent results.

Test Overview

Components Tested

  • • Background (all 7 variants)
  • • Visibility (all 7 variants)
  • • Text (all 7 variants)
  • • Value (all 7 variants)
  • • Layout/Flexbox (size + orientation only)

Variants Tested

  • • Size only (sm:, md:, lg:)
  • • Orientation only (portrait:)
  • • Bit-depth only (1bit:, 2bit:, 4bit:)
  • • Size + Orientation
  • • Size + Bit-depth
  • • Orientation + Bit-depth
  • • All three combined

Test Coverage

6 Components tested across
7 Responsive Variants each
Total: 40 test combinations

Responsive Utilities Test Results

The following tables test various responsive utility components, comparing SCSS mixin implementations with CSS class implementations. Each component supports different combinations of size breakpoints, orientation, and bit-depth conditions.

Background Component

Test Case SCSS Mixin Result CSS Class Result
md:bg--gray-50
@include screen.screen('md')
Gray bg on md+ screens
portrait:bg--gray-50
@include screen.screen('portrait')
Gray bg in portrait
2bit:bg--gray-50
@include screen.screen('2bit')
Gray bg on 2-bit screens
md:portrait:bg--gray-50
@include screen.screen('md', 'portrait')
Gray bg on md+ portrait
md:2bit:bg--gray-50
@include screen.screen('md', '2bit')
Gray bg on md+ 2-bit
portrait:2bit:bg--gray-50
@include screen.screen('portrait', '2bit')
Gray bg on portrait 2-bit
md:portrait:2bit:bg--gray-50
@include screen.screen('md', 'portrait', '2bit')
Gray bg on md+ portrait 2-bit

Visibility Component

Test Case SCSS Mixin Result CSS Class Result
sm:hidden
@include screen.screen('sm')
Hidden on sm+ screens
portrait:hidden
@include screen.screen('portrait')
Hidden on portrait screens
4bit:hidden
@include screen.screen('4bit')
Hidden on 4-bit screens
md:portrait:hidden
@include screen.screen('md', 'portrait')
Hidden on md+ portrait screens
lg:2bit:hidden
@include screen.screen('lg', '2bit')
Hidden on lg+ 2-bit screens
portrait:4bit:hidden
@include screen.screen('portrait', '4bit')
Hidden on portrait 4-bit screens
md:portrait:2bit:hidden
@include screen.screen('md', 'portrait', '2bit')
Hidden on md+ portrait 2-bit screens

Text Component

Test Case SCSS Mixin Result CSS Class Result
lg:text--center
@include screen.screen('lg')
Centered text on lg+ screens
Aa
Aa
portrait:text--center
@include screen.screen('portrait')
Centered text in portrait
Aa
Aa
2bit:text--center
@include screen.screen('2bit')
Centered text on 2-bit screens
Aa
Aa
md:portrait:text--center
@include screen.screen('md', 'portrait')
Centered on md+ portrait
Aa
Aa
lg:4bit:text--center
@include screen.screen('lg', '4bit')
Centered on lg+ 4-bit screens
Aa
Aa
portrait:2bit:text--center
@include screen.screen('portrait', '2bit')
Centered on portrait 2-bit screens
Aa
Aa
md:portrait:2bit:text--right
@include screen.screen('md', 'portrait', '2bit')
Right-aligned on md+ portrait 2-bit
Aa
Aa

Value Component

Test Case SCSS Mixin Result CSS Class Result
md:value--large
@include screen.screen('md')
Large value on md+ screens
Aa
Aa
portrait:value--large
@include screen.screen('portrait')
Large value in portrait
Aa
Aa
4bit:value--large
@include screen.screen('4bit')
Large value on 4-bit screens
Aa
Aa
lg:portrait:value--large
@include screen.screen('lg', 'portrait')
Large value on lg+ portrait
Aa
Aa
md:2bit:value--large
@include screen.screen('md', '2bit')
Large value on md+ 2-bit screens
Aa
Aa
portrait:4bit:value--large
@include screen.screen('portrait', '4bit')
Large value on portrait 4-bit
Aa
Aa
lg:portrait:4bit:value--xlarge
@include screen.screen('lg', 'portrait', '4bit')
XLarge on lg+ portrait 4-bit
Aa
Aa

Flex Component

Test Case SCSS Mixin Result CSS Class Result
md:flex--center
@include screen.screen('md')
Centered on md+ screens
portrait:flex--col
@include screen.screen('portrait')
Column layout in portrait
lg:portrait:flex--center
@include screen.screen('lg', 'portrait')
Centered on lg+ portrait

Layout Component

Test Case SCSS Mixin Result CSS Class Result
md:layout--col
@include screen.screen('md')
Column layout on md+ screens
portrait:layout--bottom
@include screen.screen('portrait')
Center layout in portrait
lg:portrait:layout--bottom
@include screen.screen('lg', 'portrait')
Bottom alignment on lg+ portrait

Component Coverage

Components Tested

  • • Background (all 7 variants)
  • • Visibility (all 7 variants)
  • • Text (all 7 variants)
  • • Value (all 7 variants)
  • • Flex (size + orientation only)
  • • Layout (size + orientation only)

Variants Tested

  • • Size only (sm:, md:, lg:)
  • • Orientation only (portrait:)
  • • Bit-depth only (1bit:, 2bit:, 4bit:)
  • • Size + Orientation
  • • Size + Bit-depth
  • • Orientation + Bit-depth
  • • All three combined

Components Not Yet Tested

  • • Spacing (p--, m--, etc.)
  • • Gap (gap--)
  • • Size (w--, h--)
  • • Rounded (rounded--)
  • • Border (border--)
  • • Grid (grid--, col--)
  • • Clamp (clamp--)
  • • Effects (crisp-edges)
  • • Image (image--)

Aspect Ratio

Maintain consistent proportions for elements regardless of their content

Previous

Screen

Device screen dimensions, orientation, and display properties

Next
Framework Index