Awesome GitHub RepositoriesCode Snippet Styling

Spectre is a comprehensive CSS framework and UI utility toolkit designed for building responsive web interfaces. It functions as a CSS component library that provides pre-styled interface elements and helper classes to facilitate frontend UI development. The framework is distinguished by a pure-CSS component architecture that avoids dependence on external JavaScript runtimes. It utilizes a SASS-based build pipeline that supports class prefixing, stylesheet pruning, and a variable-based theme system for creating custom design systems. The project covers a wide range of layout and interface ca

A minimalist CSS framework.

This project is a JavaScript UI component library and frontend utility toolkit. It serves as a web modal framework and popup library, providing a specialized system for rendering interactive dialogs, overlays, and layered interfaces over web page content. The library is distinguished by its comprehensive set of overlay tools, including alert dialogs, confirmation prompts, and the ability to embed external content via iframes. It also features a responsive twelve-column grid system for cross-device layout compatibility and an internal modular dependency management system for on-demand loading

Webstudio is a visual CMS and website builder that provides a visual development environment for designing and publishing websites. It functions as an AI-powered design tool, a REST and GraphQL API client, and an atomic CSS compiler. The platform distinguishes itself through generative AI capabilities for creating layout variants and refining visual styles from text prompts. It integrates a headless CMS workflow that maps external data sources to visual components and utilizes a specialized compiler to convert design tokens into deduplicated atomic CSS for optimized page load speeds. The sys

Polacode is a VS Code extension that converts code snippets into styled, shareable images. It functions as a dedicated code screenshot generator and image exporter, allowing users to capture selected code and render it as a polished visual for documentation, social media, or presentations. The extension provides a dedicated editor pane where users can paste and preview code before generating a screenshot. It offers screenshot customization features including adjustable background color, shadow, transparency, and target image format, all managed through VS Code's settings system. The capture a

Poml is a prompt management framework and templating engine designed for authoring, versioning, and rendering structured prompts for large language models. It uses a semantic markup language to organize prompts into reusable templates, combining them with dynamic context and data to generate formatted inputs. The system distinguishes itself by decoupling core prompt logic from final presentation through a stylesheet-based approach. It provides a dedicated JSON schema output generator to enforce strict, machine-parsable model responses and a configuration interface for managing function tool s

Freeze est un générateur de code-vers-image et un rendu de sortie de terminal qui convertit le code source et le texte de terminal ANSI en images de haute qualité. Il fonctionne comme un outil en ligne de commande qui transforme le texte et les séquences stylisées en graphiques vectoriels évolutifs pour une utilisation dans la documentation et les présentations. L'outil se différencie en capturant la sortie brute des commandes shell via un environnement de pseudo-terminal et en traduisant les codes d'échappement ANSI et les couleurs directement en styles SVG. Il dispose d'une interface utilisateur de terminal pour l'ajustement des paramètres en temps réel et prend en charge des profils de configuration pour maintenir des styles visuels cohérents à travers plusieurs exportations. La surface de capacité couvre la gestion de la typographie via l'incorporation de polices personnalisées et le contrôle de la hauteur de ligne, ainsi que le style visuel pour les cadres de fenêtre, les ombres et les marges. Il inclut également des utilitaires pour la coloration syntaxique et le recadrage de plages de lignes spécifiques à partir d'extraits de code.

react-syntax-highlighter est un composant pour le rendu de code source avec coloration syntaxique dans les applications React. Il agit comme un wrapper pour les moteurs PrismJS et Highlight.js afin de fournir un affichage de code formaté et des couleurs spécifiques au langage. Le projet fournit un moteur de rendu de bloc de code personnalisable qui prend en charge l'injection DOM personnalisée, la numérotation des lignes et le style inline. Il permet aux utilisateurs de remplacer les balises HTML par défaut par des composants React personnalisés pour contrôler la manière dont le code est injecté dans le document object model. La bibliothèque couvre la gestion de la présentation du code via des thèmes visuels et la numérotation des lignes. Elle inclut des mécanismes pour l'optimisation du bundle, tels que le chargement asynchrone des moteurs de coloration et des définitions de langage spécifiques pour réduire les temps de chargement initiaux.

Papercss est un framework CSS UI et un système de design de style document utilisé pour construire des mises en page web responsives. Il fonctionne comme une bibliothèque CSS basée sur Less qui applique une esthétique papier et une typographie structurée pour donner aux pages web l'apparence de documents physiques. Le projet intègre également un modèle de bibliothèque CSS orienté utilitaires pour un stylage rapide. Le framework se distingue par sa capacité à automatiser les décorations visuelles, comme l'application de styles de bordures rotatives et d'effets d'ombre aux éléments enfants. Il utilise un système de variables basé sur Less et une compilation modulaire des feuilles de style, permettant aux utilisateurs de personnaliser les variables de design globales et de sélectionner des ensembles de composants spécifiques pour minimiser la taille finale de la feuille de style. La bibliothèque couvre un large éventail de capacités, incluant une grille responsive de douze colonnes basée sur Flexbox et un ensemble complet de composants UI tels que des modales, des notifications d'alerte et des barres de navigation responsives. Elle fournit également un stylage spécialisé pour le contenu technique, incluant des blocs de code, des tableaux de données et des mises en page d'articles, avec une prise en charge des modes clair et sombre.