# joshuaclayton/blueprint-css

**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/joshuaclayton-blueprint-css).**

5,286 stars · 586 forks · CSS · MIT · archived

## Links

- GitHub: https://github.com/joshuaclayton/blueprint-css
- Homepage: http://www.blueprintcss.org
- awesome-repositories: https://awesome-repositories.com/repository/joshuaclayton-blueprint-css.md

## Description

Blueprint-css is a CSS framework that provides a set of predefined styles and a responsive grid system for building consistent web page layouts and typography. It includes a browser style reset to remove default browser styling, ensuring a uniform visual starting point across different environments.

The framework features a column-based responsive grid system that automatically adapts web content across various screen sizes and devices. It also includes a dedicated print stylesheet to optimize the appearance of web content specifically for physical printing.

The project covers typography standardization, form input styling, and frontend asset optimization. A build script is provided to minify stylesheets and remove unused features to reduce the final asset bundle size.

Development tools include a layout validation system that outlines elements in the browser to signal missing declarations or incorrect class usage.

## Tags

### User Interface & Experience

- [Column-Based Responsive Grids](https://awesome-repositories.com/f/user-interface-experience/full-screen-viewport-layouts/responsive-layout-switches/column-based-responsive-grids.md) — Implements a column-based responsive grid system that automatically reflows elements across different screen sizes.
- [Browser Style Normalizers](https://awesome-repositories.com/f/user-interface-experience/browser-style-normalizers.md) — Provides a browser style normalizer to ensure consistent element rendering across different web browsers.
- [Page Layout Frameworks](https://awesome-repositories.com/f/user-interface-experience/page-layout-frameworks.md) — Provides a framework for organizing high-level structural arrangements of web pages using consistent containers and grids. ([source](https://github.com/joshuaclayton/blueprint-css/blob/master/README.textile))
- [Responsive Grid Layouts](https://awesome-repositories.com/f/user-interface-experience/responsive-grid-layouts.md) — Implements responsive grid layouts that adapt fluidly across screen sizes using a column-based structure. ([source](https://github.com/joshuaclayton/blueprint-css#readme))
- [Typography Styling](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/typography-styling.md) — Establishes a typographic baseline and default styles to ensure high readability and consistency. ([source](https://github.com/joshuaclayton/blueprint-css/blob/master/README.textile))
- [CSS Base Styles](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/css-base-styles.md) — Provides foundational style definitions that establish the default visual baseline for the user interface. ([source](https://github.com/joshuaclayton/blueprint-css#readme))
- [Grid Layout Systems](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/css-layout-systems/grid-layout-systems.md) — Offers a grid layout system for creating flexible page structures with column spanning and nesting. ([source](https://github.com/joshuaclayton/blueprint-css/blob/master/TUTORIAL.textile))
- [Pre-styled Form Themes](https://awesome-repositories.com/f/user-interface-experience/form-field-extensions/accessible-combobox-form-integrations/form-field-state-integrations/pre-styled-form-themes.md) — Applies consistent visual themes and sizing to form input fields and status message boxes. ([source](https://github.com/joshuaclayton/blueprint-css/blob/master/TUTORIAL.textile))
- [Print Stylesheets](https://awesome-repositories.com/f/user-interface-experience/print-stylesheets.md) — Provides dedicated CSS rules to optimize web content for physical paper output.
- [Unused Style Removal](https://awesome-repositories.com/f/user-interface-experience/ui-styling/high-performance-styling/unused-style-removal.md) — Allows removing unused CSS features through a build process to decrease total file weight. ([source](https://github.com/joshuaclayton/blueprint-css/blob/master/README.textile))

### Web Development

- [CSS Frameworks](https://awesome-repositories.com/f/web-development/css-frameworks.md) — Provides a foundational CSS framework for styling web applications with a tailored set of base styles.
- [Responsive Layout Adaptation](https://awesome-repositories.com/f/web-development/responsive-layout-adaptation.md) — Automatically adjusts grid and typography based on viewport size to ensure a consistent view across devices.
- [CSS Minifiers](https://awesome-repositories.com/f/web-development/css-minifiers.md) — Uses a build script to minify stylesheets and remove whitespace for production optimization. ([source](https://github.com/joshuaclayton/blueprint-css/blob/master/TUTORIAL.textile))
- [Frontend Asset Optimization](https://awesome-repositories.com/f/web-development/frontend-asset-optimization.md) — Includes automated processes for minifying and compressing stylesheets to reduce final bundle size.

### Part of an Awesome List

- [CSS Resets](https://awesome-repositories.com/f/awesome-lists/devtools/css-resets.md) — Provides a base stylesheet to remove inconsistent default browser styling across environments.
- [Typography and Text](https://awesome-repositories.com/f/awesome-lists/devtools/typography-and-text.md) — Includes utilities for responsive text sizing, colors, and highlighting to emphasize content. ([source](https://github.com/joshuaclayton/blueprint-css/blob/master/TUTORIAL.textile))

### Software Engineering & Architecture

- [Browser Style Resets](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/layering-presentation/application-layer-architectures/browser-style-resets.md) — Normalizes browser defaults to ensure a predictable and uniform visual starting point. ([source](https://github.com/joshuaclayton/blueprint-css#readme))

### Development Tools & Productivity

- [CSS Minification](https://awesome-repositories.com/f/development-tools-productivity/build-tooling/asset-file-management/asset-processing-pipelines/asset-transformation-pipelines/code-minifiers/minification-optimizers/css-minification.md) — Ships a build script to compress stylesheets and remove redundant code to reduce bundle size.