# plantcss

> Spend more time designing and less time configuring.

Latest version **0.0.1** (published 2019-01-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install plantcss
pnpm add plantcss
yarn add plantcss
bun add plantcss
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2019-01-17 |
| First published | 2019-01-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 92.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10 |
| Author | Nathan Knowler |
| Maintainers | knowler |

## Links

- npm: https://www.npmjs.com/package/plantcss
- Repository: https://github.com/plantcss/plantcss
- Homepage: https://github.com/plantcss/plantcss#readme
- Issues: https://github.com/plantcss/plantcss/issues
- npm.io page: https://npm.io/package/plantcss

## Recent versions

- 0.0.1 (latest) — 2019-01-17

## README

# 🌱 plant.css

![Experimental](https://img.shields.io/badge/status-experimental-orange.svg)

Spend more time designing in the browser and less time
configuring.

**Note: this is just an idea right now. Feel free to make
issues/PRs to help refine it.**

## Concept

This could turn out to be horrible idea, but bear with me — we
can try it out and see if it goes anywhere. Yes, this is yet
another utility css toolkit. As a longtime user of functional
css here are some things I’ve noticed:

* Functional css is great.
* Utility generation is awesome (i.e. tools like
  `tachyons-generator` or Tailwind).
* Being able to customize your utility names to your own liking:
  even better.
* Do I need all the utilities that are generated: hard no — in
  fact never.
* So we use tools like purgecss to remove unused styles.

The basic concept:

> write HTML and add class names and plant will create the
> styles as you go.

Remember: potentially a bad idea. Plant will scan your documents
for classnames and match it with utilities it knows how to
create.

Also, let's add some intelligence: **plant will suggest
component extractions are you go.** Perhaps you keep using the
same classes together? Plant will notice and let you know.
Perhaps it will even let you know much bytes you will lose or
save if you do so.

A major goal with plant is that you set your design system (i.e.
colors, type scale, breakpoints, etc.), flavour of utility class
(I prefer Tachyons' terseness), and path to HTML/PHP, and then
you never need to configure it again.

Here are some fun names we can use for things:

* seed = utility
* flower = component

## Goals

For now the first goal is `0.1.0` a basic functioning example.

## Inspiration

* [Tachyons](https://github.com/tachyons-css/tachyons)
* [Tachyons Generator](https://github.com/tachyons-css/tachyons-generator)
* [Styled System](https://github.com/jxnblk/styled-system)
* [Tailwind CSS](https://github.com/tailwindcss/tailwindcss)
* [Purgecss](https://github.com/FullHuman/purgecss)
* [CSS Blocks](https://github.com/linkedin/css-blocks)

## License

[MIT License](https://github.com/knowler/)

---
_Source: https://npm.io/package/plantcss · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._