Packery is a JavaScript bin-packing grid layout engine and DOM element positioning library. It arranges elements of varying sizes into a gapless, compact grid by calculating and applying absolute coordinates to HTML elements to prevent overlapping. The library enables the creation of draggable grid interfaces, allowing users to rearrange elements via drag-and-drop while the system automatically reflows the remaining items. It maintains stable, responsive layouts across different screen dimensions by using a percentage-based positioning system and responding to window resize events. The tool
Rebass is a React design system library that provides a collection of theme-driven, responsive UI primitives. It functions as a theme-based layout engine, using a set of stateless components to standardize spacing, typography, and colors across a user interface. The library distinguishes itself by mapping style properties to a central design theme through a styled-system approach. This allows for responsive style mapping where components automatically adapt their appearance based on screen size and provides the ability to swap underlying HTML elements while preserving styling logic to maintai
Neat is a Sass grid framework and responsive layout system used to build fluid, column-based web architectures. It provides a structured approach to managing layout properties and global design settings through a central configuration map and a toolset of Sass mixins and functions. The system is distinguished by its ability to handle nested grid architectures, allowing flexible grids to be placed inside other grid containers while maintaining precise alignment and gutter control. It also includes development tools for frontend layout debugging that render background guide lines to visualize c
This project is a responsive layout framework for Angular that provides a system of directives to create adaptive user interfaces using CSS Flexbox and CSS Grid. It includes specialized libraries for managing flexible box alignment and structuring complex two-dimensional page grids.
The main features of angular/flex-layout are: Angular Responsive Design, Flexbox Layouts, Breakpoint-Based Visibility Utilities, Breakpoint Monitoring Services, Child View Positioning, Directive-Based Style Injection, Flexbox Item Sizing, Flexbox Layout Models.
Open-source alternatives to angular/flex-layout include: metafizzy/packery — Packery is a JavaScript bin-packing grid layout engine and DOM element positioning library. It arranges elements of… rebassjs/rebass — Rebass is a React design system library that provides a collection of theme-driven, responsive UI primitives. It… thoughtbot/neat — Neat is a Sass grid framework and responsive layout system used to build fluid, column-based web architectures. It… adamschwartz/magic-of-css — Magic of CSS is a structured tutorial series that teaches web developers advanced CSS layout, typography, and… nathansmith/960-grid-system — This project is a fixed-width CSS layout framework designed to organize web content into a standardized grid of… qishaoxuan/css_tricks — This project is a collection of reference guides and reusable patterns for implementing CSS layouts, typography, and…
Magic of CSS is a structured tutorial series that teaches web developers advanced CSS layout, typography, and animation techniques through hands-on examples. The course covers the full spectrum of CSS capabilities, from foundational box model and positioning concepts to sophisticated animation and interactive state management, all without relying on JavaScript. The series distinguishes itself by teaching practical, real-world CSS patterns such as inline-block justified grids, percentage-based absolute positioning, table-display vertical centering, and letter-span styling techniques. It demons