Giter VIP home page Giter VIP logo

plantcss's Introduction

๐ŸŒฑ plant.css

Experimental

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

License

MIT License

plantcss's People

Stargazers

 avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.