An opinionated, rapid web prototyping stack.
- jekyll: A blog-aware static site generator. The backbone of Shortwave.
- tachyons: Functional CSS for humans.
- tachyons-sass: Transpiled Sass partials for Tachyons. Allows you to use the @extend functionality to create new classes based on Tachyons rules.
- gulp: Automates the
buildandservetasks so you can focus on your prototype instead of fiddling with the command line. - browser-sync: Spins up local & external access URLs for your prototype. Watches for changes and automatically reloads every instance. Comes in handy for testing across different browsers and devices at once.
- github pages: Quickly deploy to Github Pages to share your prototype from your
username.github.ioaddress.
- You're on OSX. If you see a little picture of an apple in the upper-left corner of your screen, you're off to a great start!
- You have the Xcode command line tools installed. Not sure? Run gcc -v and you'll be prompted to install if you don't have it already.
- You have Ruby installed. It should come with OSX. Run ruby -v and it should return Ruby version 2.0.0 or higher.
git clone https://github.com/npr-design/shortwave.git your-prototype
cd your-prototype
yarn install
gulp
You just built your first Shortwave prototype! If you're a first timer, take some time to explore the directory structure and read the comments. If I were you, I would start by writing some markup in index.html. Have fun!
Reporting a bug? File a detailed issue in the Issues tab above. If you'd like to work on an existing issue, please let us know you're picking it up by leaving a comment.
Tachyons Components — Copy & paste components directly from the open source components library as a starting point for your project.
Tachyons tl;dr — Quick reference for Tachyons classes. Especially helpful when you're first learning the syntax. Also includes tools for generating your own Tachyons style classes.