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 %}
git clone https://github.com/joshosbrn/prototype-npr.git your-project
cd your-project
rm -rf .git
npm install
bundle install
jekyll build
gulp
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.
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.
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
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.
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.