Responsive Utility Stylesheet Generator

Build a Sass utility that generates responsive helper classes and custom grid styles for a web application.

Requirements

Your task is to create a Sass stylesheet that:

1. Custom Breakpoint Classes: Generate utility classes that apply styles based on responsive breakpoints (desktop, tablet, phone). Each class should show/hide content or apply specific styling at different screen sizes.

2. Fixed-Width Grid Variant: Create a custom grid component with fixed column widths (instead of fluid percentage-based widths) that adapts across different device sizes. The grid should use 80px columns on desktop, 60px on tablet, and 50px on phone, with appropriate margins and gutters.

3. Breakpoint Utilities: Provide a way to access the minimum and maximum viewport widths for each device category programmatically in your Sass code.

The implementation should follow responsive design best practices and work seamlessly with existing Material Design grid systems.

Implementation

@generates

API

// Generate responsive utility classes
.show-on-desktop { /* visible only on desktop */ }
.show-on-tablet { /* visible only on tablet */ }
.show-on-phone { /* visible only on phone */ }
.hide-on-desktop { /* hidden on desktop */ }
.hide-on-tablet { /* hidden on tablet */ }
.hide-on-phone { /* hidden on phone */ }

// Custom fixed-width grid component
.custom-grid { /* fixed-width grid for desktop */ }
.custom-grid--tablet { /* fixed-width grid for tablet */ }
.custom-grid--phone { /* fixed-width grid for phone */ }

Test Cases

• The .show-on-desktop class makes content visible only when viewport width is 840px or greater @test
• The .hide-on-tablet class hides content when viewport width is between 600px and 839px @test
• The .custom-grid class creates a fixed-width layout with 80px columns for desktop viewports @test

Dependencies { .dependencies }

@material/layout-grid { .dependency }

Provides responsive grid system with advanced Sass mixins and breakpoint utilities.

@satisfied-by