# peterramsing/lost

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/peterramsing-lost).**

4,458 stars · 155 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/peterramsing/lost
- Homepage: http://lostgrid.org
- awesome-repositories: https://awesome-repositories.com/repository/peterramsing-lost.md

## Topics

`css` `grid` `javascript` `postcss`

## Description

Lost is a CSS grid system and PostCSS plugin designed to define column widths and positions using mathematical calculations for responsive screen designs. It functions as a build-time tool that processes custom grid rules into browser-compatible CSS layouts.

The framework transforms non-standard layout declarations into native CSS Grid and Flexbox properties. It uses a PostCSS-based pipeline to calculate exact coordinates and column widths, ensuring that the resulting styles are compatible with standard web browsers.

The project operates as a preprocessor-agnostic middleware layer, allowing it to process styles regardless of whether the source is plain CSS, Sass, or Less. It automates the generation of responsive grid structures that adjust element sizes and positions based on screen dimensions.

## Tags

### User Interface & Experience

- [Grid Layout Systems](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/css-layout-systems/grid-layout-systems.md) — Provides a comprehensive CSS grid system for defining responsive structures and column configurations.
- [Flexible Grid Layouts](https://awesome-repositories.com/f/user-interface-experience/flexible-grid-layouts.md) — Creates flexible, two-dimensional layouts with adaptive column widths that respond to screen size. ([source](http://lostgrid.org/docs.html))
- [CSS Grid Generators](https://awesome-repositories.com/f/user-interface-experience/grid-layouts/list-layout-arrangements/css-grid-generators.md) — Generates standard CSS layout code from custom grid rules using mathematical calculations. ([source](https://github.com/peterramsing/lost/wiki/Installation))
- [Responsive Grid Layouts](https://awesome-repositories.com/f/user-interface-experience/responsive-grid-layouts.md) — Provides a responsive grid system that fluidly adapts element sizes and positions across screen dimensions.
- [Coordinate Calculations](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/css-layout-systems/constraint-based-layouts/dynamic-height-calculation/coordinate-calculations.md) — Calculates precise column widths and coordinates using CSS mathematical functions for flexible layout positioning.
- [PostCSS-Powered Grid Systems](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/css-layout-systems/grid-layout-systems/postcss-powered-grid-systems.md) — Implements a grid layout framework that leverages PostCSS to transform custom syntax into standard CSS.
- [CSS Grid Layout Design](https://awesome-repositories.com/f/user-interface-experience/css-grid-layout-design.md) — Implements structured row and column arrangements using precise mathematical grid calculations.
- [CSS Preprocessors](https://awesome-repositories.com/f/user-interface-experience/css-preprocessors.md) — Functions as a middleware layer compatible with various CSS preprocessors like Sass and Less.

### Web Development

- [Grid Syntax Transpilation](https://awesome-repositories.com/f/web-development/css-syntax-transpilation/grid-syntax-transpilation.md) — Translates custom, high-level grid rules into native CSS Grid and Flexbox properties during the build process.
- [PostCSS Plugins](https://awesome-repositories.com/f/web-development/postcss-plugins.md) — Provides a PostCSS plugin that processes custom syntax into standard browser-compatible styles.
- [CSS Build Plugins](https://awesome-repositories.com/f/web-development/css-build-plugins.md) — Acts as a build-time CSS plugin that transforms custom layout rules into compatible styles.
- [PostCSS Pipeline Integration](https://awesome-repositories.com/f/web-development/postcss-pipeline-integration.md) — Integrates a custom grid transformation step into the PostCSS build pipeline.
- [Web Layout Structuring](https://awesome-repositories.com/f/web-development/web-layout-structuring.md) — Automates the generation of standard CSS grid rules to ensure structured page designs across different browsers.

### Software Engineering & Architecture

- [Syntax Tree Transformers](https://awesome-repositories.com/f/software-engineering-architecture/trees/syntax-tree-construction/syntax-tree-transformers.md) — Implements a PostCSS-based transformation of the CSS abstract syntax tree to modify layout properties.