peterramsing/lost
Lost
Lost es un sistema de rejilla (grid) CSS y plugin de PostCSS diseñado para definir anchos y posiciones de columnas utilizando cálculos matemáticos para diseños de pantalla responsivos. Funciona como una herramienta de tiempo de compilación que procesa reglas de rejilla personalizadas en diseños CSS compatibles con navegadores.
El framework transforma declaraciones de diseño no estándar en propiedades nativas de CSS Grid y Flexbox. Utiliza un pipeline basado en PostCSS para calcular coordenadas exactas y anchos de columna, asegurando que los estilos resultantes sean compatibles con los navegadores web estándar.
El proyecto opera como una capa de middleware agnóstica al preprocesador, permitiendo procesar estilos independientemente de si la fuente es CSS plano, Sass o Less. Automatiza la generación de estructuras de rejilla responsivas que ajustan los tamaños y posiciones de los elementos según las dimensiones de la pantalla.
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.
