MOGP: A SCSS Layout System That Only Does One Thing

A new SCSS layout system, **MOGP Layout System**, has been open-sourced, aiming to provide only the essentials needed for layout design. Unlike many CSS frameworks that try to encompass layout, typography, color, components, and utilities, MOGP focuses on simplicity and minimalism. It comprises five core features: a container for centering content, a configurable-grid system, span for controlling the number of columns an element occupies, gap for spacing between grid items, and offset for adjusting elements horizontally.

The system is designed to integrate seamlessly with existing design systems, thanks to its namespaced classes and CSS custom properties. Developers can drop MOGP into their projects without worrying about naming collisions. The grid system is not limited to the standard 12-column layout; it can be customized according to the project's requirements.

Additionally, MOGP introduces auto-rhythm utilities, such as `pi-auto` and `gap-auto`, which apply spacing that automatically adjusts per breakpoint, simplifying responsive design.

One notable feature is the clean reset of offsets. If an element is offset at a smaller breakpoint, MOGP's `offset-lg-auto` can cancel this offset at a larger breakpoint, returning to the grid's default placement. The system also includes compile-time validation to ensure that any configuration errors are caught immediately, preventing the shipping of broken CSS.

MOGP comes in two compiled CSS files: a minimal variant and a full variant, offering flexibility depending on the developer's needs. While still in its early stages (v0.1.0), the core API for the system is stable and ready for further development. The project is licensed under MIT, with no dependencies aside from Dart Sass. It can be integrated either through a compile-time SCSS import or by using the ready-made CSS files. The developers are eager to receive feedback and suggestions to improve the system further.