# papercss/papercss

**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/papercss-papercss).**

4,183 stars · 227 forks · SCSS · ISC

## Links

- GitHub: https://github.com/papercss/papercss
- Homepage: https://getpapercss.com
- awesome-repositories: https://awesome-repositories.com/repository/papercss-papercss.md

## Topics

`css` `html` `scss`

## Description

Papercss is a CSS UI framework and document-style design system used to build responsive web page layouts. It functions as a Less-based CSS library that applies a paper-like aesthetic and structured typography to give web pages the appearance of physical documents. The project also incorporates a utility-first CSS library model for rapid styling.

The framework is distinguished by its ability to automate visual decorations, such as applying rotating border styles and shadow effects to child elements. It utilizes a Less-based variable system and modular stylesheet compilation, allowing users to customize global design variables and select specific component sets to minimize the final stylesheet size.

The library covers a broad range of capabilities, including a Flexbox-based twelve-column responsive grid and a comprehensive set of UI components such as modals, alert notifications, and responsive navigation bars. It also provides specialized styling for technical content, including code blocks, data tables, and article layouts, alongside support for both light and dark color modes.

## Tags

### User Interface & Experience

- [CSS Frameworks](https://awesome-repositories.com/f/user-interface-experience/css-frameworks.md) — Offers a comprehensive collection of pre-styled interface elements and layout patterns for rapid themed development.
- [Paper-Style Design Systems](https://awesome-repositories.com/f/user-interface-experience/paper-style-design-systems.md) — Implements a comprehensive design system that emulates the look and feel of physical paper documents. ([source](https://cdn.jsdelivr.net/gh/papercss/papercss@master/README.md))
- [Automatic Child Shadow Assignment](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/shadow-effects/automatic-child-shadow-assignment.md) — Automatically applies shadow effects and hover transitions to child elements. ([source](https://getpapercss.com/docs/utilities/borders/))
- [Automatic Child Border Assignment](https://awesome-repositories.com/f/user-interface-experience/border-styling-utilities/automatic-child-border-assignment.md) — Automatically applies rotating border styles to all child elements within a container. ([source](https://getpapercss.com/docs/utilities/borders/))
- [Less-Based Customization](https://awesome-repositories.com/f/user-interface-experience/css-preprocessors/less-based-customization.md) — Uses a Less-based variable system and modular compilation for deep customization of global design variables.
- [Document-Style Content Formatting](https://awesome-repositories.com/f/user-interface-experience/document-style-content-formatting.md) — Applies comprehensive styling to typography, images, and tables to create a structured, paper-like presentation. ([source](https://getpapercss.com/docs))
- [Page Layout Frameworks](https://awesome-repositories.com/f/user-interface-experience/page-layout-frameworks.md) — Organizes high-level structural arrangements of pages using consistent containers and grids. ([source](https://getpapercss.com/docs))
- [Responsive Grid Layouts](https://awesome-repositories.com/f/user-interface-experience/responsive-grid-layouts.md) — Provides a flexible twelve-column grid system that adapts fluidly across different screen sizes.
- [Responsive Grid Systems](https://awesome-repositories.com/f/user-interface-experience/responsive-grid-systems.md) — Implements a flexible twelve-column grid system using Flexbox and media breakpoints for multi-device support. ([source](https://getpapercss.com/docs/layout/flexbox/))
- [CSS Class-Based Styling](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-class-based-styling.md) — Implements a system where specific CSS class names map to pre-defined visual styles and themes.
- [Utility-First Styling](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/utility-first-styling.md) — Provides a set of atomic utility classes for rapid adjustment of borders, shadows, and spacing.
- [Typography Styling](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/typography-styling.md) — Applies structured typographic styles to headings and body text to ensure readable document layouts. ([source](https://getpapercss.com/docs/content/typography/))
- [Flexbox-Based Grid Systems](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/css-layout-systems/flexbox-based-grid-systems.md) — Provides a responsive twelve-column layout engine based on Flexbox for flexible content alignment.
- [Alerts & Notifications](https://awesome-repositories.com/f/user-interface-experience/alerts-notifications.md) — Displays color-coded, dismissible messages to notify users of success, warnings, or errors. ([source](https://getpapercss.com/docs/components/alerts/))
- [Background Fill Colors](https://awesome-repositories.com/f/user-interface-experience/background-fill-colors.md) — Provides a set of semantic colors to fill the backgrounds of UI components. ([source](https://getpapercss.com/docs/utilities/colors/))
- [Border Styling Utilities](https://awesome-repositories.com/f/user-interface-experience/border-styling-utilities.md) — Provides utility classes to customize border thickness, colors, and line styles. ([source](https://getpapercss.com/docs/utilities/borders/))
- [Button Styles](https://awesome-repositories.com/f/user-interface-experience/button-styles.md) — Renders buttons in various sizes and styles, including block-level and disabled states. ([source](https://getpapercss.com/docs/components/buttons/))
- [Collapsible UI Components](https://awesome-repositories.com/f/user-interface-experience/collapsible-ui-components.md) — Provides interactive components that toggle the visibility of content blocks via clicks or accordions. ([source](https://getpapercss.com/docs/components/collapsible/))
- [Color Palettes](https://awesome-repositories.com/f/user-interface-experience/color-palettes.md) — Includes a predefined palette of semantic text colors to convey different meanings. ([source](https://getpapercss.com/docs/utilities/colors/))
- [Semantic Color Mappings](https://awesome-repositories.com/f/user-interface-experience/color-themes/semantic-color-mappings.md) — Maps abstract status meanings like success or error to a consistent semantic color palette.
- [CSS State Transitions](https://awesome-repositories.com/f/user-interface-experience/css-state-transitions.md) — Manages visual transitions and visibility for interface elements using CSS pseudo-classes.
- [Light and Dark Theme Systems](https://awesome-repositories.com/f/user-interface-experience/css-variable-theming/light-and-dark-theme-systems.md) — Supports switching between light and dark color schemes using CSS custom properties.
- [Dark Mode Support](https://awesome-repositories.com/f/user-interface-experience/dark-mode-support.md) — Supports switching the interface color scheme between light and dark themes for accessibility. ([source](https://getpapercss.com/docs))
- [Content Cards](https://awesome-repositories.com/f/user-interface-experience/data-display-components/content-cards.md) — Provides flexible containers that organize related information into cohesive visual units using headers and paragraphs. ([source](https://getpapercss.com/docs/components/cards/))
- [Element Padding](https://awesome-repositories.com/f/user-interface-experience/element-groupings/alignment-spacing/glyph-padding-adjusters/element-padding.md) — Provides predefined spacing increments to control the interior distance between content and borders. ([source](https://getpapercss.com/docs/utilities/spacing/))
- [Global Styling Configurations](https://awesome-repositories.com/f/user-interface-experience/global-styling-configurations.md) — Provides centralized configuration settings for modifying the core design variables of the framework. ([source](https://getpapercss.com))
- [Navigation Bars](https://awesome-repositories.com/f/user-interface-experience/navigation-bars.md) — Implements responsive navigation bars that adapt their layout for different screen sizes. ([source](https://getpapercss.com/docs/components/navbar/))
- [Form Input Styling](https://awesome-repositories.com/f/user-interface-experience/raw-html-element-styling/form-input-styling.md) — Applies consistent visual themes to standard HTML form elements, including text inputs and checkboxes. ([source](https://getpapercss.com/docs/components/forms/))
- [Structured Data Tables](https://awesome-repositories.com/f/user-interface-experience/structured-data-tables.md) — Renders structured data in a clean, legible grid format using row and column alignment. ([source](https://getpapercss.com/docs/content/tables/))
- [Preprocessing Variables](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/component-style-customization/css-variable-styling-systems/preprocessing-variables.md) — Utilizes a Less preprocessor to define global design variables that resolve during the compilation process.
- [Focused Content Modals](https://awesome-repositories.com/f/user-interface-experience/visual-overlays/dom-transformation-overlays/modal-container-overlays/focused-content-modals.md) — Displays centered overlays containing titles and interactive buttons to present focused content. ([source](https://getpapercss.com/docs/components/modals/))
- [Theme Customization](https://awesome-repositories.com/f/user-interface-experience/visual-theme-configurations/visual-themes/theme-customization.md) — Allows customization of the overall visual appearance through configuration of colors and fonts. ([source](https://cdn.jsdelivr.net/gh/papercss/papercss@master/README.md))

### Development Tools & Productivity

- [UI Component Sets](https://awesome-repositories.com/f/development-tools-productivity/rapid-prototyping-tools/ui-component-sets.md) — Ships pre-built UI element collections like modals and navigation bars to accelerate interface assembly.
- [Modular Component Selection](https://awesome-repositories.com/f/development-tools-productivity/build-tooling/template-compilation-tools/template-compilation-tools/sass-compilers/stylesheet-compilation/modular-component-selection.md) — Allows the selection of specific component sets during compilation to optimize final CSS file size.
- [CSS Component Selection](https://awesome-repositories.com/f/development-tools-productivity/selective-component-loading/discrete-component-selection/css-component-selection.md) — Enables the reduction of final stylesheet size by compiling only the required UI component sets. ([source](https://cdn.jsdelivr.net/gh/papercss/papercss@master/README.md))

### Content Management & Publishing

- [Longform Article Layouts](https://awesome-repositories.com/f/content-management-publishing/longform-article-layouts.md) — Organizes long-form content like articles with dedicated layouts for titles, metadata, and body text. ([source](https://getpapercss.com/docs/components/articles/))

### Web Development

- [Utility-First CSS Frameworks](https://awesome-repositories.com/f/web-development/utility-first-css-frameworks.md) — Includes a set of low-level atomic CSS classes for rapid adjustment of borders, shadows, and spacing.