Build Your Own Stylesheet for the GravityView CSS Garden

This view is a public sandbox. The same data, the same HTML — one stylesheet at a time. If you can write CSS, you can submit one. This guide explains the markup you have to work with, the conventions to follow, and how to get your stylesheet listed in the picker.

Inspired by the original CSS Zen Garden, this project answers a single question: how far can a stylesheet take a GravityView?

The rules

  1. You may only change the stylesheet. No HTML changes, no JavaScript, no images hosted off your own domain.
  2. Your stylesheet must work on a recent version of Chrome, Firefox, and Safari. Graceful degradation is fine; broken layouts are not.
  3. The view must remain usable. Search must work. Pagination must work. The session detail link must remain visible and clickable.
  4. One CSS file. No external imports except @import url('https://fonts.googleapis.com/...') for Google Fonts.
  5. Mobile must not be broken. A single-column layout below 720px is the minimum bar.

The markup you are styling

The page is organised into three regions: a header (with a dashboard widget and a search form), a grid of session cards, and a footer (with pagination links and a credit line). Every region uses two layers of class names — GravityView’s own classes (prefixed gv-) and a set of custom BEM classes we wrote into the Custom Content fields. Style either or both.

High-level structure

.gv-widgets-header
  .garden-dashboard             <-- top dashboard, custom HTML
  .gv-widget-search             <-- the search form
  .gv-widget-pagination         <-- "Displaying 1 - 12 of 1,000"
  .gv-widget-page-size          <-- "Page Size" dropdown

.gv-diy-container               <-- grid wrapper for cards
  .gv-diy-view                  <-- one wrapper per card
    .session-card               <-- the card itself (custom HTML)

.gv-widgets-footer
  .gv-widget-page-links         <-- pagination (1, 2, 3, ..., 84, »)
  .garden-footer                <-- footer credit, custom HTML

Inside a session card

Each card is an <article> with three data attributes on the root: data-track, data-format, and data-level. Use these to colour-code, filter, or animate by category. Track values are: Engineering, Design, Product, Leadership, Research, Operations.

.session-card[data-track="Design"]
  .session-card__header
    .session-card__track.session-card__track--Design
    .session-card__format
    .session-card__title           <-- h2 with a link
    .session-card__speaker
      .session-card__speaker-name
      .session-card__speaker-role
  .session-card__body
    .session-card__abstract        <-- one paragraph
  .session-card__footer
    .session-card__meta            <-- dl with When, Room, Level, Capacity, Rating
      .session-card__capacity-bar  <-- span with style="--pct: NN%"
      .session-card__rating
    .session-card__related         <-- ul of related sessions

The capacity bar trick

Each card’s capacity span carries an inline custom property: style="--pct: 32%". Read it from CSS to draw a progress bar without touching the HTML.

.session-card__capacity-bar::after {
  content: "";
  display: block;
  height: 6px;
  background: linear-gradient(
    90deg,
    var(--accent) 0 var(--pct, 0%),
    transparent var(--pct, 0%) 100%
  );
}

Scoping

Your stylesheet is loaded inside an isolated iframe, so you can be aggressive. To take over the whole page background, target body directly. If you only want to style the view and leave the rest of the iframe document alone, scope under .gv-diy-container or use a parent selector like body:has(.gv-diy-container).

/* Whole-page takeover */
body:has(.gv-diy-container) {
  background: #050608;
  color: #c8f4d6;
  font-family: 'JetBrains Mono', monospace;
}

/* Scoped to just the view */
.gv-diy-container .session-card {
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}

Selector cheat sheet

Search form

  • .gv-widget-search — the form element
  • .gv-search-box — wraps each individual input
  • .gv-search-field-search_all — the main text input
  • .gv-search-field-select — each dropdown filter
  • input.gv-search-button — the submit button
  • a.gv-search-clear — the clear link

Pagination

  • .gv-widget-pagination p — “Displaying X – Y of Z”
  • .gv-widget-page-links ul — the numbered links
  • .page-numbers.current — the active page (a span)
  • .page-numbers.dots — the ellipsis
  • .next.page-numbers — the next arrow
  • .gv-widget-page-size select — the “Page Size” dropdown

Cards and content

  • .gv-diy-container — grid wrapper; lay out your columns here
  • .gv-diy-view — one per card; gets your shadows/borders
  • .session-card — the article inside; controls internal layout
  • .session-card__track--Engineering — track-specific accent (one per track)
  • .session-card__capacity-bar — carries --pct custom prop

Recipes

Colour-code by track

.session-card[data-track="Engineering"] { --accent: #ff3a17; }
.session-card[data-track="Design"]      { --accent: #1e34ff; }
.session-card[data-track="Product"]     { --accent: #00875a; }
.session-card[data-track="Leadership"]  { --accent: #b300b3; }
.session-card[data-track="Research"]    { --accent: #b48a00; }
.session-card[data-track="Operations"]  { --accent: #404040; }

.session-card__title a:hover { color: var(--accent); }
.session-card__track { background: var(--accent); }

Responsive card grid

.gv-diy-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
  padding: 2rem;
}

Drop cap on the abstract

.session-card__abstract::first-letter {
  float: left;
  font-size: 4em;
  line-height: 0.85;
  font-weight: 900;
  margin: 0.05em 0.12em 0 0;
  color: var(--accent);
}

Style the rating stars from a numeric value

The rating field renders as a plain number followed by ” / 5″. To convert it to a visual scale, hide the text and use a CSS counter with a background gradient, or simply prepend a star with ::before:

.session-card__rating::before {
  content: "★ ";
  color: gold;
}

Submitting a stylesheet

  1. Fork the repository on GitHub.
  2. Add your stylesheet to the stylesheets/ directory. File name: your-handle.css.
  3. Add a header comment with your name, a one-line description, and an optional link to your site.
  4. Add an entry to manifest.json with the file name and a short label that will appear in the picker.
  5. Open a pull request. Once merged, your stylesheet appears in the dropdown on the demo page.

Header comment template

/*
 * Stylesheet name: Your distinctive name here
 * Author: Your Name
 * Author URI: https://yoursite.example
 * Description: One sentence about what this stylesheet is going for.
 * License: MIT
 */

What’s already in the garden

Three stylesheets ship as the opening exhibits. Use them as reference implementations — they each take a radically different aesthetic direction and demonstrate different techniques.

  • Brutalist Concrete — monolithic, ink-on-paper, thick borders, no rounded corners, ruled-paper background, hard offset shadows.
  • Editorial Folio — refined quarterly magazine, variable serif at display sizes, drop caps, terracotta and forest accents on cream paper.
  • Neon Terminal — cyberpunk CRT, JetBrains Mono and Major Mono Display, scanline overlay, glitch animation on the title, glowing capacity bars.

Same HTML. Same data. Three completely different experiences. That’s the point.