exah / pss

Design system utils for component based CSS-in-JS libraries

Design system utils for component based CSS-in-JS libraries

• Support emotion, styled-components and glamorous
• Responsive by default
• Dynamic
• Only 4.41 KB gziped for all styles

📦 Install

$ yarn add pss

🤔 Why?

Because css-in-js and design systems are all the hype right now! But seriously, we want to:

• Define our styling system (grid, colors, fonts, sizes, breakpoints, etc.) once and reuse it throughout the project
• Style our components using concise and easy-to-memorize props
• Have a convenient way to define alternative styles for different screen sizes

📖 API

🌍 Components & Demo

🔗 Links

Sites

• strelkamag.com — 🌍 Strelka Mag
• goremykina — 🌍 Irina Goremykina
• inthecity.strelka.com – 🌍 Conference about urban technologies

Packages

• pss-components — Components created with pss
• polished — "A lightweight toolset for writing styles in JavaScript"

Alternatives

• styled-system — "Design system utilities for styled-components and other css-in-js libraries." Similiar project and probably better.
• prop-styles — "Utility to create flexible React components which accept props to enable/disable certain styles."

---

MIT © John Grishin