Demos

[jaredcwhite]

This project looks (concept-wise) really cool! I think it'd be an easy sell if there were something demoable to look at, to see what's possible with all the design tokens out of the box. I personally dislike Tailwind in terms of the utility classes mindset, but there's no denying it became popular quickly because it just presents extremely well and seems easy to pick up and run with.

[jaredcwhite]

P. S. I found out about this via your recent post on Reddit =)

[madeleineostoja]

Hey there! That’s a great idea. Pollen is already used in several large production sites from work I’ve done, but nothing open source. I’ll see if I can put a demo together at some point.

Might also be worth making a “who’s using pollen” section in the docs. Eg:

• https://siestacampers.com
• https://www.corellium.com
• https://inventia.life
• https://faethm.ai

[madeleineostoja]

Made a basic list on gitbook for now: https://www.pollen.style/#whos-using-pollen

[madeleineostoja]

Thinking more about this, would a storybook examples repo be a good idea?

[FunMiles]

I agree this project needs some demos/example. The documentation is a bit bare. I think it is written with a use methodology in mind that is not outlined. The result is that when one reads the documentation, one sees a list of variables but not how you would use them in practice to create consistent look throughout a full application.

Right now, It feels a bit like: I thought about this a lot and I created a bunch of variable to help you. Here they are, find out how to use them on your own! 😃

Having some examples would be good. For example, creating a page with text, buttons, highlights, headers, sections using the typography would be a terrific example I think. It would anchor the idea in a more concrete foundation.

[madeleineostoja]

What would be the best format for examples? A collection of misc UI components rather than a full site might be best.

How about a page of codepen examples in the docs? Or a storybook repo?

A big beautiful UI playground website like tailwindui would be best, but I don’t have time to put something like that together atm.

[FunMiles]

As you say atm, I think starting with some basic examples with misc UI components would be a good start. You could then add some more later. Codepen examples is not a bad idea. I think importantly, the examples should not rely on being part of any other framework, as this project seems to be usable in any framework or pure hand-written HTML/CSS.

[madeleineostoja]

Sweet, I’ll add a page to docs for examples on codepen and maybe also add them to a folder on GitHub . Feel free to suggest components!

Off the top of my head:

• Button
• Form input
• Media card
• Blog post card
• Two-up feature panel
• Image/card grid
• Banner/alert
• Header

[madeleineostoja]

Also v happy to accept PRs adding components to a folder of examples here, I can port them to codepens

[crhallberg]

A few questions to make sure all submissions are on the same page before I take off making examples:

• Pulling pollen from local (ie. ../pollen.css) or from a CDN
• Separate files or one HTML file?
• With a README with a screenshot and critical code?

We should also make sure we cover all parts of Pollen with our examples. Not every color but colors, for example.

[madeleineostoja]

Personally I'd make it more like pseudo code than a functional site/demos, so single-file HTML examples, that can be ported to codepen easily.

IMO:

• Pull pollen from unpkg
• Throw styles in a <style> tag at the top of the file
• README with a link to the codepen, and a screenshot (imgur?) would be great but not essential imo

Eg: single file example of the current Pollen button demo. This won't run if you open it in a browser, but it serves as a concise and understandable demonstration (dependencies required, styles, and markup)

examples/button.html

<link rel="stylesheet" href="https://unpkg.com/pollen-css/pollen.css" />

<style>
  button {
    all: unset;
    font-family: var(--font-sans);
    font-size: var(--scale-00);
    font-weight: var(--font-medium); 
    line-height: var(--line-none);
    padding: var(--size-3) var(--size-5);
    background: var(--color-blue);
    border-radius: var(--radius-xs);
    color: white;
  }
</style>

<button>Click me</button>