awesome-repositories.com
Blog
MCP
awesome-repositories.com

Discover the best open-source repositories with AI-powered search.

ExploreCurated searchesOpen-source alternativesSelf-hosted softwareBlogSitemap
ProjectMCP serverAboutHow we rankPress
LegalPrivacyTerms
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
peterramsing avatar

peterramsing/lost

0
View on GitHub↗
4,458 stars·155 forks·JavaScript·MIT·17 viewslostgrid.org↗

Lost

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.

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.

Star history

Star history chart for peterramsing/lostStar history chart for peterramsing/lost

How this analysis was created: This summary and feature list were written by an AI model that read the project's README and public documentation pages. Each feature links to the documentation it came from; stars, license and language come straight from the GitHub API. The model does not read the source code, and the analysis is refreshed when the project is re-analysed. Learn more on our About page.

AI search

Explore more awesome repositories

Describe what you need in plain English — the AI ranks thousands of curated open-source projects by relevance.

Start searching with AI

Open-source alternatives to Lost

Similar open-source projects, ranked by how many features they share with Lost.
  • kettanaito/atomic-layoutkettanaito avatar

    kettanaito/atomic-layout

    1,140View on GitHub↗

    Atomic Layout is a declarative framework for building responsive user interfaces in React. It functions as a layout engine that abstracts complex grid structures into reusable components, allowing for the creation of hierarchical spatial distributions without the need for manual media queries. The library distinguishes itself by mapping visual layout regions to component structures through dynamic grid-template-area generation. It utilizes a property-based system where components accept specific suffixes to automatically trigger responsive style adjustments based on viewport width. By employi

    TypeScriptatomatomic-designatomic-layout
    View on GitHub↗1,140
  • sdras/cssgridgeneratorsdras avatar

    sdras/cssgridgenerator

    5,342View on GitHub↗

    This project is a CSS grid layout generator and visual layout editor. It serves as a frontend development tool that allows for the design of grid structures and the generation of corresponding CSS code for dynamic web layouts. The tool enables visual grid prototyping by allowing users to define rows, columns, and item positions through an interactive interface. This process produces valid stylesheet rules, removing the need to manually calculate grid coordinates or track sizes. The software covers CSS grid layout design and responsive web layouting, providing the means to define grid item pl

    Vuecss-gridgenerated-codegenerated-layout
    View on GitHub↗5,342
  • keen/dashboardskeen avatar

    keen/dashboards

    11,038View on GitHub↗

    This project is a collection of responsive CSS Grid dashboard templates and a data visualization UI kit. It provides a set of HTML layouts designed for building analytics interfaces and monitoring views for KPIs and business metrics that adapt to different screen sizes. The toolkit is library-agnostic, allowing the connection of static HTML templates to any external data source or third-party charting library without requiring custom adapter code. It uses a template-driven approach to separate the visual structure of the dashboard from the underlying data. The capabilities cover the assembly

    HTMLanalyticsanalytics-dashboardcharts
    View on GitHub↗11,038
  • codewithsadee/vcard-personal-portfoliocodewithsadee avatar

    codewithsadee/vcard-personal-portfolio

    7,887View on GitHub↗

    vCard Personal Portfolio is a static HTML and CSS template that provides developers with a ready-to-deploy personal portfolio website. It is built as a frontend portfolio template, delivering a responsive portfolio website that showcases a developer's projects and skills in a layout optimized for all screen sizes. The project employs a mobile-first design approach, where styles are authored for mobile viewports as the baseline and then enhanced for larger screens using progressive min-width media queries. Its CSS-grid-based responsive layout arranges page sections using CSS Grid with flexible

    HTMLcsscss3html
    View on GitHub↗7,887
See all 30 alternatives to Lost→

Frequently asked questions

What does peterramsing/lost do?

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.

What are the main features of peterramsing/lost?

The main features of peterramsing/lost are: Grid Layout Systems, Flexible Grid Layouts, CSS Grid Generators, Responsive Grid Layouts, Coordinate Calculations, PostCSS-Powered Grid Systems, Grid Syntax Transpilation, PostCSS Plugins.

What are some open-source alternatives to peterramsing/lost?

Open-source alternatives to peterramsing/lost include: kettanaito/atomic-layout — Atomic Layout is a declarative framework for building responsive user interfaces in React. It functions as a layout… sdras/cssgridgenerator — This project is a CSS grid layout generator and visual layout editor. It serves as a frontend development tool that… keen/dashboards — This project is a collection of responsive CSS Grid dashboard templates and a data visualization UI kit. It provides a… oddbird/susy — Susy is a Sass layout framework and grid computation engine designed to automate complex mathematical layout… joshuaclayton/blueprint-css — Blueprint-css is a CSS framework that provides a set of predefined styles and a responsive grid system for building… codewithsadee/vcard-personal-portfolio — vCard Personal Portfolio is a static HTML and CSS template that provides developers with a ready-to-deploy personal…