9 dépôts
Mechanisms for fluidly scaling font sizes and line heights based on viewport dimensions.
Explore 9 awesome GitHub repositories matching web development · Responsive Typography. Refine with filters or upvote what's useful.
Bootstrap is a comprehensive, mobile-first CSS framework designed for building responsive web interfaces. It provides a standardized library of reusable UI components, such as navigation bars, modals, and forms, alongside a robust grid system that ensures consistent layout alignment across diverse viewport sizes. By establishing a baseline through browser normalization and standardized typography, the project enables developers to create accessible, cross-browser compatible web applications. The framework distinguishes itself through a modular Sass-based architecture that allows for deep cust
Fluid typography scales font sizes automatically based on viewport width using pre-configured variables and mixins.
This project is a curated knowledge base and technical reference for professional web styling. It serves as a comprehensive guide to modern CSS best practices, focusing on techniques that leverage native browser capabilities to create efficient, maintainable, and scalable stylesheets. The collection emphasizes the use of declarative style logic and modern layout engines to replace brittle, imperative approaches. By prioritizing native pseudo-class state management, logical property mapping, and relative unit scaling, the guide demonstrates how to build responsive interfaces that remain consis
Provides fluid typography scaling techniques using viewport-based units to ensure consistent readability across diverse screen sizes.
Skeleton is a lightweight responsive CSS boilerplate and mobile-first framework. It provides a foundation for building mobile-friendly websites through a fluid 12-column grid system, a minimal CSS reset library to normalize browser defaults, and default styling for raw HTML elements. The project emphasizes a mobile-first development approach, using percentage-based widths and predefined media queries to progressively enhance layouts for larger screens. It includes a utility-first library of single-purpose classes to manage common layout tasks such as floating elements, clearing, and width con
Implements responsive typography using relative units to scale font sizes and spacing across devices.
Pico is a lightweight, classless CSS framework designed to provide consistent, accessible, and responsive visual defaults for web interfaces. By prioritizing semantic HTML tags, it allows developers to build clean, structured pages without the need for complex class names or heavy dependencies. The framework functions as a comprehensive design system that automatically applies styling to standard elements, ensuring that typography, spacing, and layout remain cohesive across different screen sizes. The framework distinguishes itself through a modular, variable-driven architecture that emphasiz
Adjusts font sizes automatically using relative units for proportional scaling.
FitText.js is a jQuery plugin that scales headline text proportionally to its parent container's width, enabling fluid, responsive typography. It functions as a fluid headline text resizer and responsive typography tool, inflating web type by resizing text based on container dimensions with configurable compression. The plugin distinguishes itself through precise control over the scaling behavior. It includes a compressor factor for tuning how aggressively text size responds to container width changes, and provides min-max clamping to enforce lower and upper pixel bounds on the computed font
A tool for making headline text fluidly resize to fill available space within a container.
Theme-ui est un framework de thème React et un utilitaire CSS-in-JS utilisé pour construire des interfaces utilisateur thématisables. Il fonctionne comme un outil de système de design qui établit des échelles centralisées basées sur des contraintes pour les couleurs, la typographie et l'espacement afin d'assurer une cohérence visuelle entre les applications. Le framework se distingue par un raccourci réactif basé sur des tableaux pour les mises en page mobile-first et un gestionnaire de mode de couleur dédié qui se synchronise avec les préférences du navigateur et conserve les sélections de l'utilisateur. Il dispose également d'un système pour créer des variantes de style nommées afin de contrôler l'apparence des composants via des propriétés et fournit des capacités de synchronisation pour traduire les configurations de thème en styles Figma. Le projet couvre un large ensemble de capacités de stylisation, incluant l'injection CSS globale pour les réinitialisations d'éléments, les surcharges de thème imbriquées via le contexte, et un système de configuration de fusion profonde (deep-merge) pour étendre les préréglages de design. Il inclut également un ensemble de composants de mise en page thématisables, tels que des grilles réactives et des champs de formulaire standardisés. Un plugin dédié est disponible pour intégrer le système de design au sein des sites Gatsby.
Adjusts font sizes and typographic styles across different screen sizes using theme-defined breakpoints.
simple.css is a classless CSS framework that styles plain, semantic HTML with sensible defaults, requiring no CSS classes or JavaScript. It automatically applies a dark color scheme based on system preference, sets responsive typography and spacing from a modular scale, and includes a minimal CSS reset to normalize browser defaults. The entire framework lives in a single file with no dependencies. The framework uses only element selectors, so any standard HTML page becomes visually presentable with a centered, max-width layout, accessible interactive elements (buttons, forms, navigation), and
A CSS system that sets fluid type sizes and spacing for headings, paragraphs, lists, and quotes across viewports.
FlowType.JS is a fluid typography JavaScript library and responsive typography engine. It functions as a client-side layout calculator that determines and applies optimal typographic metrics based on the real-time dimensions of DOM elements. The library distinguishes itself by using browser-side logic to scale font size and line height relative to the width of a container. This ensures a consistent number of characters per line across different screen sizes, bypassing the limitations of static CSS media queries. The system utilizes a dynamic layout engine that integrates with a resize observ
Scales font size and line height based on element width to keep text readable across different screen sizes.
Mona Sans est un système de typographie variable open-source et une famille de polices. Il fournit un ensemble flexible de glyphes conçus pour une haute lisibilité sur diverses tailles d'écran et environnements techniques, incluant une version monospace spécifique pour le rendu de code et de texte technique. Le système utilise un modèle de police variable, permettant l'ajustement dynamique du poids, de la largeur et de la taille optique au sein d'un seul fichier de police. Il prend en charge les substitutions stylistiques et les ligatures contextuelles pour affiner le caractère visuel et le flux professionnel du texte numérique. Le projet couvre les capacités d'ingénierie et de rendu de polices, incluant la capacité d'exporter des coupes de police spécifiques et de maintenir la compatibilité avec les répertoires de polices mondiaux. Il implémente un espace de conception multi-axes pour assurer un équilibre visuel cohérent sur différentes résolutions et exigences d'interface.
Optimizes text legibility across multiple device sizes by dynamically adjusting font axes.