Skip to main
Article
Miriam Suzanne and former OddBird Una Kravets

VueFinder at VueConf, 2019

Dynamic CSS with Vue

Inspired by VueConf 2018 I spent some time learning JS and Vue in more depth, and built myself a more flexible VueFinder presentation tool to fit my needs. This year, I returned to VueConf and gave the closing talk on passing data between CSS and Vue.

After learning about Vue from Sarah Drasner’s stream of articles on CSS-Tricks, I had the pleasure of speaking at VueConf 2018. I really enjoyed that conference, and left feeling inspired by the community and the framework behind it. I loved that I could build complete and valid Vue components in plain HTML/CSS – and slowly integrate JS logic as necessary. I started digging, and quickly learned to bind JS data to HTML attributes:

<table :style="{'--scale': graph.scale}">
  <!-- ... -->
  <td :style="{'--value': item.value}">{ item.value }%</td>

CSS variables provide a safe approach for passing JS settings to CSS via inline HTML. While most inline styles are difficult to override, CSS variables can instead be ignored – making their inline specificity harmless.

I wrote a quick demo for CSS-Tricks – More CSS Charts, with Grid & Custom Properties – and continued to develop the idea into my latest talk: Dynamic CSS. This talk explores how data can be used to manipulate presentation directly in CSS – a combination of variables, calc(), grids, hsl() and more.

The slides are online, and you can sign up for a notification when the videos are posted.

While learning JS and Vue in more detail, I decided to re-build my presentation software to better meet my needs as a speaker.

The result, which I call VueFinder, allows me to write slides using a slightly-extended markdown syntax – with yaml metadata for each slide. That metadata controls slide layout, allows me to embed Vue components directly for live demos, and pass in CSS variables for custom styling.

VueFinder is public and open-source, though it isn’t currently as reusable as I would like. The content and logic are tightly coupled in ways I haven’t yet resolved. If you’re interested in helping make this a more viable open source tool, or using it yourself, I’m open to new features and PRs.

After VueConf, Rahul Kadyan released an extension for Visual Studio Code that provides syntax-highlighting and code-folding for my .slides files, as well as the .vue-slides format he uses. Thanks, Rahul!

This year I connected with the Vue Vixens, and enjoyed getting to know more of the Vue community. Chris Fritz and Rahul helped me add some last-minute features to my slide deck, while Maria Lamardo and Krystal Campioni both inspired new demos in my talk.

Animated sprites from Monster Slayer by Krystal Campioni [permalink / source] – hover to see them move

You can find all the available speaker slides linked from gist.

Recent Articles

  1. Fragment from a 13th century alchemical manuscript with a red and green oroboros serpent biting it's own tail, and seeming to give us side-eye
    Article post type

    HTML Web Components are Just JavaScript?

    I’m still getting used to this

    There’s been a recent flurry of articles about web components, with advice on how to shape them as extensions of HTML. I decided to dig in, and see how these ‘HTML web components’ could become a part of my own workflow. Despite a few rough edges, I’m excited to see…

    see all Article posts
  2. Article post type

    How to Design More Intuitive Websites & Apps

    Do you want to make your website or web app more intuitive for the people who visit? If so, I’d like to introduce you to the world of Object-Oriented UX. As a UX designer at OddBird, using OOUX strategies to identify and avoid unintuitive objects has been key to…

    see all Article posts
  3. Pen and notebook with a sketch of a website interface
    Article post type

    When to Choose a Progressive Web App

    Part 3 – Responsive Web App vs Native Mobile App vs Progressive Web App

    If you’re weighing the performance optimization and device integration opportunities of a native mobile app against the broad reach and lower cost of a responsive web app – and can’t decide which is a higher priority for your digital product – don’t despair. A progressive web app may be just…

    see all Article posts