pss

Prop styles system for styled components

Usage no npm install needed!

<script type="module">
  import pss from 'https://cdn.skypack.dev/pss';
</script>

README

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

📦 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

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