Awesome GitHub RepositoriesResponsive Resolution Optimizers

lazysizes is a JavaScript lazy loading library and DOM visibility observer that defers the loading of images and iframes until they enter the browser viewport. It functions as a responsive image optimizer and SEO friendly asset loader designed to reduce initial page load times while maintaining search engine visibility. The project calculates optimal image sizes and handles srcset and picture elements to deliver the most appropriate asset based on device resolution and layout. It includes a mechanism for low-quality image placeholders and applies CSS classes during the loading process to trig

lozad.js is a JavaScript lazy loading library and viewport-based media loader. It serves as a dependency-free wrapper around the Intersection Observer API to defer the loading of images and iframes until they enter the browser viewport. The project functions as a responsive image loader that optimizes page speed by delivering the most appropriate image sizes and formats based on the user's screen. It includes capabilities for responsive image optimization and layout stabilization through the use of image placeholders to prevent content shifts. The library manages the full lifecycle of deferr

North est une méthodologie de conception web responsive et un framework d'architecture CSS basé sur Sass. Il fournit un système pour construire des interfaces utilisateur mobile-first utilisant des grilles fluides et des techniques d'amélioration progressive pour assurer une expérience cohérente à travers différentes capacités de navigateur et tailles d'écran. Le projet dispose d'un système de nommage CSS standardisé qui utilise des mixins Sass pour générer par programmation des noms de classes, distinguant les composants, les mises en page et les états. Il fonctionne également comme un outil de scaffolding de projet frontend, fournissant un générateur pour amorcer de nouveaux environnements avec des feuilles de style et des task runners préconfigurés. Au-delà du style, le framework couvre une large surface des standards de développement web, y compris l'implémentation HTML sémantique avec des métadonnées RDFa et l'audit d'accessibilité web. Il intègre une stratégie de conception axée sur le contenu et un flux de travail frontend agile pour coordonner la transition de l'architecture de l'information et des personas d'utilisateurs vers des composants prêts pour la production. Le système inclut des outils pour automatiser le nommage CSS et le scaffolding de modèles de projet afin d'accélérer la configuration initiale.