peterramsing/lost
Lost
Lost est un système de grille CSS et un plugin PostCSS conçu pour définir les largeurs et positions des colonnes en utilisant des calculs mathématiques pour des designs d'écran responsifs. Il fonctionne comme un outil de build qui traite les règles de grille personnalisées en mises en page CSS compatibles avec les navigateurs.
Le framework transforme les déclarations de mise en page non standard en propriétés natives CSS Grid et Flexbox. Il utilise un pipeline basé sur PostCSS pour calculer les coordonnées exactes et les largeurs de colonnes, garantissant que les styles résultants sont compatibles avec les navigateurs web standards.
Le projet opère comme une couche middleware agnostique aux préprocesseurs, lui permettant de traiter des styles indépendamment du fait que la source soit du CSS brut, Sass ou Less. Il automatise la génération de structures de grille responsives qui ajustent les tailles et positions des éléments en fonction des dimensions de l'écran.
Features
- Grid Layout Systems - Provides a comprehensive CSS grid system for defining responsive structures and column configurations.
- Flexible Grid Layouts - Creates flexible, two-dimensional layouts with adaptive column widths that respond to screen size.
- CSS Grid Generators - Generates standard CSS layout code from custom grid rules using mathematical calculations.
- Responsive Grid Layouts - Provides a responsive grid system that fluidly adapts element sizes and positions across screen dimensions.
- Coordinate Calculations - Calculates precise column widths and coordinates using CSS mathematical functions for flexible layout positioning.
- PostCSS-Powered Grid Systems - Implements a grid layout framework that leverages PostCSS to transform custom syntax into standard CSS.
- Grid Syntax Transpilation - Translates custom, high-level grid rules into native CSS Grid and Flexbox properties during the build process.
- PostCSS Plugins - Provides a PostCSS plugin that processes custom syntax into standard browser-compatible styles.
- Syntax Tree Transformers - Implements a PostCSS-based transformation of the CSS abstract syntax tree to modify layout properties.
- CSS Grid Layout Design - Implements structured row and column arrangements using precise mathematical grid calculations.
- CSS Preprocessors - Functions as a middleware layer compatible with various CSS preprocessors like Sass and Less.
- CSS Build Plugins - Acts as a build-time CSS plugin that transforms custom layout rules into compatible styles.
- PostCSS Pipeline Integration - Integrates a custom grid transformation step into the PostCSS build pipeline.
- Web Layout Structuring - Automates the generation of standard CSS grid rules to ensure structured page designs across different browsers.
