Awesome GitHub RepositoriesVisual Layout Debugging

FeHelper este un set de instrumente pentru browserul web și un toolkit de dezvoltare frontend integrat în Chrome, Firefox și Edge. Acesta servește ca utilitar de transformare a datelor, instrument de depanare a paginilor web și asistent de codare bazat pe AI. Proiectul se distinge prin integrarea modelelor locale și a API-urilor compatibile cu OpenAI pentru a scrie, refactoriza și repara codul direct în browser. De asemenea, oferă capabilități pentru generarea de scheme TypeScript și definiții Zod din mostre de date folosind AI. Toolkit-ul acoperă o gamă largă de utilitare pentru dezvoltatori, inclusiv depanarea rețelei pentru conexiuni HTTP și WebSocket, codificarea și decodarea datelor pentru formate precum JWT și Base64, și instrumente de procesare JSON pentru formatarea, repararea și compararea structurilor. Include, de asemenea, instrumente frontend pentru măsurarea layout-ului paginii, formatarea codului sursă și injectarea de scripturi personalizate de utilizator. Capabilitățile suplimentare includ o varietate de instrumente media și de documente pentru editare Markdown, procesarea codurilor QR și conversia imaginilor, alături de generatoare de utilitare pentru identificatori unici și parole sigure.

Neat este un framework de grid Sass și un sistem de layout responsiv utilizat pentru a construi arhitecturi web fluide, bazate pe coloane. Oferă o abordare structurată pentru gestionarea proprietăților de layout și a setărilor globale de design printr-o hartă de configurare centrală și un set de instrumente de mixin-uri și funcții Sass. Sistemul se distinge prin capacitatea de a gestiona arhitecturi de grid imbricate, permițând grid-urilor flexibile să fie plasate în interiorul altor containere de grid, menținând în același timp alinierea precisă și controlul spațierii. Include, de asemenea, instrumente de dezvoltare pentru depanarea layout-ului frontend care redau linii de ghidare de fundal pentru a vizualiza plasarea coloanelor și lățimile spațiilor. Framework-ul acoperă o gamă largă de primitive de layout, inclusiv întinderea coloanelor, decalarea și reordonarea, precum și containere de pagină centrate și gestionarea clearfix. Permite designul responsiv prin scurtături pentru media queries care adaptează întinderile coloanelor și configurațiile de breakpoint pe diferite lățimi de viewport. Este furnizată o interfață de linie de comandă pentru instalarea, actualizarea sau eliminarea fișierelor framework-ului de layout dintr-un director de proiect.

Susy is a Sass layout framework and grid computation engine designed to automate complex mathematical layout calculations within stylesheets. It functions as a responsive grid generator that calculates column widths, gutters, and spans based on customizable viewport breakpoints to ensure precise element alignment. The system includes a visual layout debugger that generates browser-based grid overlays to verify column alignment and baseline rhythm during development. It also provides utilities for creating repeating background colors and gradients using a template-based syntax. The framework