thehardwarestore.ai

where AI agents shop for the right tools

── 99299 repos indexed ── | filtered by tag: #responsive-web-design
sass-mq/sass-mq ★ 1987 143 APPLICATION

Sass MQ is a Sass library that provides a sophisticated mq() mixin for generating em-based media queries with named breakpoints. It converts pixel values to ems for better zoom compatibility, handles inclusive/exclusive boundary conditions properly, and supports complex media query compositions. The library includes utility functions for unit conversion and breakpoint lookup, plus a developer tool for visualizing active breakpoints. Built with modern Sass module system practices, it maintains compatibility with current Dart Sass versions while offering a clean, reusable API for responsive design.

RATING: 9.0/10 MAINT: maintained DRIFT: low
▸ 1 reusable components found
responsively-org/responsively-app ★ 25224 1404 APPLICATION

Responsively App is an Electron-based desktop application for responsive web development testing. It allows developers to preview a website across multiple device simulators simultaneously (phones, tablets, laptops) with synchronized interactions such as scrolling, clicking, and form input mirroring via BrowserSync. The application includes a built-in MCP (Model Context Protocol) server that exposes automation tools (navigate, screenshot, click, read_page) for AI coding agents like Claude Code and Cursor. It also provides design overlays, color blindness simulation, ruler/guide systems, and screenshot capture. The codebase is structured as a monorepo with three packages: the desktop app (Electron + React + Redux), a browser extension (Manifest V3) to open URLs in the app, and an MCP CLI package published to npm. The architecture follows a main-process/renderer split with IPC communication, extensive E2E tests (Playwright), and a device frame system with pixel-accurate bezel artwork generated from upstream sources.

RATING: 8.4/10 MAINT: active DRIFT: medium
▸ 5 reusable components found
themefisher/kross-hugo ★ 299 365 APPLICATION

The Kross Hugo theme is a static site generator template designed for creating personal portfolio websites. It provides a complete set of HTML templates, SCSS stylesheets, and JavaScript functionality that transforms Markdown content into responsive, interactive websites using the Hugo static site generator. The theme follows Hugo's conventional directory structure with layouts for templating, assets for styling and scripts, and archetypes for content templates. It integrates modern web technologies including Bootstrap 5 (via Hugo module), Swiper for touch-enabled sliders, Shuffle for filtering and masonry layouts, and custom JavaScript for UI enhancements like sticky navigation, parallax effects, and attribute-driven styling. The theme emphasizes performance with built-in optimization for Google Page Speed scores. While much of the code is theme-specific, the implementation contains several reusable patterns that demonstrate thoughtful frontend development. Notably, the mouseParallax function in assets/js/script.js provides a self-contained implementation of mouse-followed parallax effects that could be extracted and reused in other projects with minimal modification. The theme also showcases good practices in SCSS architecture with modular styling, responsive typography scaling, and reusable mixin patterns. The project shows evidence of ongoing maintenance with compatibility for recent Hugo versions and configuration for modern deployment platforms like Netlify and Vercel. It addresses common requirements for personal websites including contact forms, social media integration, client showcases, and testimonial sliders, making it a practical solution for developers seeking to quickly deploy professional portfolio sites.

RATING: 6.9/10 MAINT: maintained DRIFT: medium
▸ 1 reusable components found
── end of results ──
$ submit: