peterramsing/lost
Lost
Lost ist ein CSS-Grid-System und PostCSS-Plugin, das darauf ausgelegt ist, Spaltenbreiten und -positionen mithilfe mathematischer Berechnungen für responsive Screen-Designs zu definieren. Es fungiert als Build-Time-Tool, das benutzerdefinierte Grid-Regeln in browserkompatible CSS-Layouts verarbeitet.
Das Framework transformiert nicht standardisierte Layout-Deklarationen in native CSS-Grid- und Flexbox-Eigenschaften. Es verwendet eine PostCSS-basierte Pipeline, um exakte Koordinaten und Spaltenbreiten zu berechnen, wodurch sichergestellt wird, dass die resultierenden Styles mit Standard-Webbrowsern kompatibel sind.
Das Projekt arbeitet als preprocessor-agnostische Middleware-Schicht, die es ermöglicht, Styles unabhängig davon zu verarbeiten, ob die Quelle reines CSS, Sass oder Less ist. Es automatisiert die Generierung responsiver Grid-Strukturen, die Elementgrößen und -positionen basierend auf Bildschirmabmessungen anpassen.
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.
