mikeyamadeo

###Intro I wanted to use a facade pattern to provide a simple api for rendering job information in different forms using a Job component that received two props:

• the job data
• how to render the job

import React from 'react'
import Job from 'JobComponent'

mikeyamadeo

Photo/style.css

/* block */
.Photo {}

/* element */
.Photo__img {}

/* modifier */
.Photo--large {}

mikeyamadeo

import { ___, X } from 'react-ditto'
import Txt from 'react-txt'
import Btn from 'App/shared/atm.Btn'
import Input from 'App/shared/atm.Input'

const SearchUI = ({inputVal, onInputUpdate, onSearch}) =>
  <X x p>
    <___ mr1>
      <Txt tag='label' color='secondary'>Search</Txt>
      <Input value={inputVal} onChange={onInputUpdate} />

mikeyamadeo

// src/App/style/settings
export const colors = {
  primary: 'red'
}

// post-css-plugins/settings-from-js.js
var postcss = require('postcss')
var settings = require('./src/App/style/settings')

module.exports = postcss.plugin('settings-from-js', function (opts) {

mikeyamadeo

import { baseFontSize } from ‘./settings.js’

export const pxToEm = (px) =>
 `${px / baseFontSize}em`

mikeyamadeo

* {
  animation: spin 10s infinite;
}

span {
  font-size: .5em;
  animation: spin .25s infinite;
}

@keyframes spin {

mikeyamadeo

.body > :last-child {
  margin-bottom: 0;
}

.theme-red .txt {
  color: red;
}

mikeyamadeo

.thing {
  color: red;
  padding-top: var(--spacing-default);
}

.pt {
 padding-top: var(--spacing-tiny) !important;
}

mikeyamadeo

import { StyleSheet, css } from 'aphrodite' 
import { colors } from 'App/style/settings'
import Media from 'App/shared/obj.Media'

const PokemonListing = ({name, num, loc, imgSrc}) =>
  <div className={css(styles.root)}>
    <Media img={imgSrc}>
     <h2>{name}</h2> <h4>#{num}</h4>
     <Media

mikeyamadeo

import { colors, baseFontSize } from 'App/style/settings'

const Txt = ({
  color = 'text',
  size = baseFontSize,
  tag = 'span',
  children,
  ...rest
}) => {
  const Tag = tag