joshosbrn / prototype-npr

— a Jekyons based component library for prototyping NPR.org

Prototype @ NPR

Using my prototyping framework, Jekyons, my goal is to create a prototyping kit & component library for NPR.org. This is an NPR Serendipity Days project.

Components live in the _includes directory and are included in your markup with {% include directory/module.html %}

Setup

git clone https://github.com/joshosbrn/prototype-npr.git your-project
cd your-project
rm -rf .git
npm install
bundle install
jekyll build
gulp

Challenges

Folder Structure for Includes

The first snag I hit was in the folder structure of the _includes directory. Usually includes in a Jekyll project (at least times I've used them) contain larger chunks of code, like headers & footers. I wanted to break up the _includes directory to map back to the inventory document I created on Wednesday morning.

This ended up being a pretty easy fix. Including markup by doing something like {% include directory/module.html %} works perfectly. Thanks, Jekyll.

The other tough thing here was figuring out a good way to render a full list of components. I'm pretty happy with the solution in index.html but I'm sure there's a much better way to do this.

Maintainable Style Overrides

One of the biggest blockers for this idea in the past has been the idea of maintaining the list of NPR.org SASS variables in a smart way. Since Todd's accesiblity-focused refactor of the colors a few months ago, I don't think they'll be changing any time soon so I'm officially removing this as a blocker. I may come back during housekeeping or a future Serendipity to make updates if necessary.

Prototyping With Data

My idea here was to create a .yml file with ~10 stories worth of metadata to pull into the different components. Using for loops & limits, I can power all of them using the same data source: _data/stories.yml

Links

Resources

Jekyll & Liquid Cheatsheet — Quick guide to the Liquid syntax. Helpful in the context of this project for reminders about for-loops and filters.

Jon Gold on functional CSS — a good in-defense-of blog post on functional CSS.

Functional CSS Pros/Cons — a guide from Chibicode that focuses on the ups and downs of Functional CSS with a focus on React. Not incredibly relevant to this project, but it showed me the merits of OOCSS.

Work Leading Up To This Point

NPR Visual Style Guide — this project is really an extension of this work done during my first ever NPR hack day. NPR Jekyll Prototyping Kit — my first attempt at this idea for a previous hack day.