thoughtbot/neatArchived
Neat
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 column placement and gutter widths.
The framework covers a broad range of layout primitives, including column spanning, offsetting, and reordering, as well as centered page containers and clearfix management. It enables responsive design through media query shortcuts that adapt column spans and breakpoint configurations across different viewport widths.
A command line interface is provided for installing, updating, or removing the layout framework files within a project directory.
Features
- Flexible Grid Layouts - Provides a responsive system for creating flexible, adaptive column widths.
- Fluid Percentage Grids - Calculates column widths as percentages of the parent container to ensure proportional scaling across screen sizes.
- Layout Configuration Maps - Stores global layout defaults and breakpoint settings in a central Sass map to maintain design consistency.
- Grid Implementation Libraries - Defines structural layout rules and global spacing defaults within a Sass-based workflow.
- Global Configurations - Provides a centralized mechanism for setting global column counts and gutter widths to standardize spacing.
- Column Spanning - Implements a system for elements to occupy multiple column slots within a fluid grid.
- Grid Column Sizing - Provides a toolset for managing column sizing, offsets, and centered containers for web layouts.
- Grid Container Management - Provides layout wrappers that define the structural definition of the grid container and manage internal spacing.
- Grid Row Definitions - Enables designating elements as column containers by clearing floats and setting display properties.
- Nested Grid Structures - Supports nesting grid containers within other cells while accurately calculating gutter consumption and alignment.
- Gutter Management - Implements techniques for controlling whitespace between grid columns, including the removal of gutter margins.
- Responsive Breakpoints - Implements architectural mapping of responsive breakpoints to adapt layout and column spans across viewports.
- Responsive Grid Layouts - Creates fluid grid systems with columns and gutters that automatically adapt to different screen sizes.
- Breakpoint-Based Style Updates - Implements style changes triggered by specific viewport width thresholds via Sass media query shortcuts.
- Sass Abstractions - Utilizes Sass mixins and functions to programmatically generate fluid widths and spacing based on configuration.
- Fluid Grid Frameworks - Provides a comprehensive system for defining elements as rows or containers to establish a fluid, column-based structural framework.
- Responsive Layout Adaptation - Provides mechanisms for overriding column spans and gutter sizes based on viewport size.
- Responsive Layout Systems - Offers a comprehensive system for defining column spans, gutters, and breakpoints that adapt to viewport sizes.
- Sass-Based Preprocessor Architectures - Implements a structured Sass architecture to manage layout properties and design settings through a central map.
- Sass Grid Frameworks - Provides a CSS preprocessor framework for building fluid, responsive grid layouts using Sass mixins and functions.
- Centered Page Containers - Includes a centered outer wrapper for the viewport with a maximum width to ensure consistent content alignment.
- Column Offsetting - Shifts elements horizontally by calculating and applying left margins based on the grid column unit.
- Grid Layout Reordering - Allows shifting the visual position of grid columns using relative positioning.
- Directional Layout Flows - Provides logic to change the directional flow of elements within the grid layout.
- Horizontal Element Translation - Allows translating an element horizontally by a specified number of columns in the layout direction.
- Clearfix Utilities - Includes utility techniques to prevent parent container collapse when holding floated grid columns.
