Coding an Advent Calendar: Day 2
- WP REST API with React.js (structure)
- There’s been a lot of excitement recently about the WP REST API’s inclusion of content endpoints in WordPress 4.7 lately, so I’ve been wanting to learn about that and create something useful that utilizes it. I have built both a simple WordPress REST plugin and a WordPress REST theme in October this year, by following these Lynda.com courses:
- WordPress REST API (WP-API): First Look by Morten Rand-Hendriksen
- AngularJS and WordPress: Building a Single-Page Application by Roy Sivan
After building these projects, I wanted to do some more with the WP-API. Then, after Brian Krogsgard created a Codepen which utilizes React.js and the WP REST API (and one with Vue.js), I thought it would be a good thing to fork and learn from.
- Color Palette
- Initially, I set the colors for the CSS present to
maroonbut was quite unsatisfied with that combination. Eventually, after checking some other color palettes on ColourLovers.com and Dribbble.com, I settled on the following (similar to this Codepen):
- Dark Red: #9D1313
- Light Red: #F17259
- Dark Green: #0B8972
- Light Green: #65C0A5
- Dark Blue: #2A6FB0
- Light Blue: #CAE4F2
Along with various other alpha shades, tones, and tints of these colors as well as Black and White.
- Sass CSS
- Since the color palette I chose would need to be used and reused in the various elements I created on the page, I decided the best way to keep track of those (and easily call them up later) would be to switch my CSS stylesheet to Sass. I stored the color (and other) variables at the top of the stylesheet and was able to easily use them at will throughout the page.
I may yet do something else with Sass mixins or functions (like a
@forloop), and I intend to rewrite the stylesheet using Sass nested selectors later.
Work Completed (to date)
- December 2, 2016
- React.js + Axios.js initial code structure
- Color palette
- CSS → Sass
- December 1, 2016
- Let it snow
- Typography choices
- CSS presents (first design)
- Design notes menu