Baseline Banner

• 

  BaselineBanner themes

Inspiration

The web.dev blog has nice banners when they talk about new css features, so does caniuse and MDN. It should be very easy to do the same when I write articles about CSS on my own blog, or when i'm giving a talk and i want to embed a baseline banner in my slides. This is why I created BaselineBanner.

Later I found that there's an existing project called BaselineStatus built on webcomponents that achieves a similar goal, but it's not easily useable in other frontend frameworks.

What it does

It an npm package that exposes simple components. Authors of blogs or presentations can use it in their website to display upto date information about the baseline status of a feature.

<BaselineBanner featureName="flexbox" />

Will render a beautiful banner with all baseline information.

How we built it

This is built on top of the data provided by the web-features package, which is used to provide a type-safe way to interact with the component props.

Challenges I ran into

Building components in frameworks i'm not familiar with. Doing this during the crazy npm attacks and questioning my own approach was definitely a challenge

Accomplishments that we're proud of

This is already being used on my blog https://sandeep.ramgolam.com/blog/introducing-baseline-banner and also on a slide deck built with Sli.Dev that i already used in two presentations: https://mrsunshyne.github.io/css-is-fun/31

What we learned

Learning about publishing npm packages.

What's next for Baseline Banner

Publishing more themes, publishing additional frameworks like solid and svelte!

Built With

• baseline
• npm
• react
• typescript
• vue
• web-features