Minimal CSS Framework
for data-driven stories

Built for scientists in a hurry who want to tell data stories without learning full web development. @the-vcsi/scrolly-kit provides the engine—CSS tokens and reusable components—while templates give you a ready-to-customize website. Extend with sv add-ons for integrations like SharePoint or OpenAlex.

Quick Start

1. Scaffold a new project

npx degit Vermont-Complex-Systems/vcsi-starter/templates/baked my-project cd my-project npm install

Tip: degit copies a Git repo without its history—like cloning, but faster and cleaner. Requires Node.js. Also note we have a single static-site generator template at the moment, or the baked template. It is baked in that the content is baked-in when building, or pre-rendered. We are planning to provide a second template soon enough, the fresh template, where we showcase how dynamic websites can be used to augment visual data-driven stories with backend capabilities. For more on the baked template visit GitHub

2. Start the dev server

npm run dev

3. Create a new story

npm run new-story my-story-name

This creates a story scaffold at src/lib/stories/my-story-name/ with:

  • components/Index.svelte - Main story component
  • data/copy.json - Story content data

4. Add optional integrations (optional)

With any template scaffolded using degit, you can make use of Svelte's sv CLI to install additional extensions

npx sv add @the-vcsi/msgraph

msgraph: Sync your copy.json story content from an Excel sheet on SharePoint—great for collaborative editing with non-technical teammates.

npx sv add @the-vcsi/openalex

openalex: Provide a list of researcher identifiers and build a local database with metadata about their papers and co-authors from OpenAlex.

Project Structure

src/
├── routes/
│   ├── (app)/           # Pages with Nav + Footer
│   │   ├── +page.svelte # Home
│   │   └── about/       # About pages
│   └── [slug]/          # Stories (no Nav/Footer)
├── lib/
│   ├── stories/         # Story components
│   ├── components/      # Shared components
│   └── styles/
│       └── app.css      # Your customizations
└── data/
    └── stories.csv      # Story metadata

Customizing Styles

Override CSS variables in src/lib/styles/app.css:

:root {
  /* Brand colors */
  --vcsi-color-accent: #154734;

  /* Typography */
  --vcsi-font-sans: "Your Font", system-ui;
  --vcsi-font-serif: "Your Serif", Georgia;
}

See the Styling for all available CSS variables.

Inspiration

  • pico.css - Minimal CSS Framework for Semantic HTML. This is our core inspiration for making scrolly-kit into a library.
  • astrojs - The web framework for content-driven websites. This is our core inspiration for making cool static-site templates.
  • GC Design System and GOV.UK Frontend - Governments have to provide services to everybody, forcing them to be super sharp in terms of accessibility. The value of this should not be overlooked.
  • Layer Cake - Headless graphics framework for Svelte. On top of being awesome charting library, they showcase the beauty of simply copy-pasting well-designed components.

Next Steps

  • Styling - Layout patterns and CSS variables
  • Components - Reusable components used across templates
  • Examples - See pedagogical stories built with scrolly-kit

P.S. Who is this library for?

As of today (2026-02-18), LLMs like Claude Sonnet 4.6 can write you professionally-looking static websites using only vanilla HTML/CSS/JS in no time. As a matter of fact, Claude did help design and polish this website. So why bother with this library?

Scrolly-kit has been designed to help you understand the choices you are making when building data-driven stories. These choices are reflected in the code and documentation, built and curated to be understood by people with as little technical knowledge of web design as we find possible with today's tools.

For instance, we favor Svelte over React because we believe the design of Svelte is closer to the fundamental tools of the web (HTML/CSS). Arguably, Svelte has been shown to be more approachable to newcomers, and does not require learning a whole ecosystem to get going. Some people prefere React because there is a whole ecosystem, such that they do not need to understand as much. This library is opinionated in that we believe the web underpinnings should be understandable by humans, and Svelte's North Star is precisely to make the web better in that way.

The design choices that went into the structure of scrolly-kit and accompanying templates also include making what we can for motivated users to learn why we are styling the website the way we do. Inspired by talks like Josh Comeau's How to teach CSS, the goal of this website is to nurture a growing mindset where styling is fun. With others, we acknowledge that Vibe Coding is somewhat boring, and that this is vital to keep enjoying building software that is defining our lives in many ways these days.

So although you can use this library to just keep going for making cool data-driven stories, know that if you just want to show off a cool scrolly story most likely you can vibe code it with minimal effort. Some part of this website have been vibecoded, but not the important bits. This section was written by humans who are thinking and are struggling with reconciling productivity with the possible death of code as craft. This library is meant to learn and nurture a web platform that can host tailored data stories you own; where you can learn and improve yourself to have a space to tell your stories. The upshot is that if you end up running out of tokens on your subscription, you will be able to keep writing fun and whimsical stories until your weekly limits are reset.