Styleguide

Work in progress styleguide and component library, I’m still ironing out a few things and working on the patterns themselves. A couple of things (like the illustrations) overflow and break a bit when placed in isolation out of context on this page. I think it looks cool though because the illustration is trying to escape.

Colours/colors

  • #00c8d8
  • #f2cd2c
  • #668486
  • #003236
  • #fffdf6

Typography

$font: Brignell Sunday, Helvetica, sans-serif;

$font-bold: Brignell Sunday Bold, Helvetica, sans-serif;

Atoms

Blockquote

Pride juggles with her toppling towers, They strike the sun and cease, But the firm feet of humility, They grip the ground like trees.
<blockquote class="inline">Pride juggles with her toppling towers,
They strike the sun and cease,
But the firm feet of humility,
They grip the ground like trees.
</blockquote>

Bullets

  • Hello there
  • What's your name?
  • Do you come here often?
<ul>
  <li>Hello there</li>
  <li>What's your name?</li>
  <li>Do you come here often?</li>
</ul>

Just a button

I think I only use one button

<button type='submit' value='Send me a message'>I am a button</button>

Horizontal rule


<hr>

Input

<input type='text' name='name' />

Label

<label>I am not a label</label>

Paragraph

The sun came in like a pack of orange spaniels, through the window over the ledge, under the curtain on their bellies creeping and bending.

<p>The sun came in like a pack of orange spaniels, through the window over the ledge, under the curtain on their bellies creeping and bending.</p>

Small paragraph text

Sometimes I feel so small and insignificant in this giant universe rather like this rinky dink text size that doesn't get used that often.

<p class="teenytiny">Sometimes I feel so small and insignificant in this giant universe rather like this rinky dink text size that doesn't get used that often.</p>

Headings

This is a level one heading

This is a level two heading

This is a level three heading

This is a level four heading

<h1>This is a level one heading</h1>
<h2>This is a level two heading</h2>
<h3>This is a level three heading</h3>
<h4>This is a level four heading</h4>

Molecules

Block of text

There, spring lambs jam the sheepfold. In air Stilled, silvered as water in a glass Nothing is big or far. The small shrew chitters from its wilderness Of grassheads and is heard. Each thumb-sized bird Fits nimble-winged in thickets, and of good color.

Cloudrack and owl-hollowed willows slanting over The bland Granta double their white and green World under the sheer water And ride that flux at anchor, upside down. The punter sinks his pole. In Byron's pool Cattails part where the tame cygnets steer.

<p>There, spring lambs jam the sheepfold. In air
Stilled, silvered as water in a glass
Nothing is big or far.
The small shrew chitters from its wilderness
Of grassheads and is heard.
Each thumb-sized bird
Fits nimble-winged in thickets, and of good color.</p>

<p>Cloudrack and owl-hollowed willows slanting over
The bland Granta double their white and green
World under the sheer water
And ride that flux at anchor, upside down.
The punter sinks his pole.
In Byron's pool
Cattails part where the tame cygnets steer.</p>

Blockquote with author

Pride juggles with her toppling towers, They strike the sun and cease, But the firm feet of humility, They grip the ground like trees.

G.K. Chesterton

<blockquote>Pride juggles with her toppling towers,
They strike the sun and cease,
But the firm feet of humility,
They grip the ground like trees.
  <p>G.K. Chesterton</p>
</blockquote>

Bubble

Big speech bubble

<h1 class="bubble twist">Big speech bubble</h1>

Embeded video

<div class="videoWrapper"><iframe style="" src="https://player.vimeo.com/video/203998275?dnt=1" title="time lapse of an illustration I did of the Walthamstow horizon" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p><a href="https://vimeo.com/203998275?dnt=1">Horizon, time lapse</a> from <a href="https://vimeo.com/benbrignell">Ben Brignell</a> on <a href="https://vimeo.com">Vimeo</a>.</p></div>

Post image

This pattern uses a naming convention loop to load two versions of an image, large and small, for different devices using srcset. I am working on making this eventually load 3 sizes to appropriate devices for better performance.

Drawing of the Walthamstow skyline
<img class="lazy-load" data-src="/img/winns-large.jpg" data-src-mobile="/img/winns-small.jpg" src="data:image/gif;base64,R0lGODdhAQABAPAAAPPz8yZFySH5BAEAAAEALAAAAAABAAEAAAICRAEAOw==" alt="Drawing of the Walthamstow skyline"  />
<noscript><img src="/img/winns-small.jpg" alt="Drawing of the Walthamstow skyline" /></noscript>

Organisms

Contact form










<form style="margin-bottom: 3em;" name="contact" method="POST" netlify-honeypot="robo-message" data-netlify="true" autocomplete="off" action="/thanks/">
  <span style="display: none;">
  <label>If you're not a bot, leave this field blank </label><br>
  <input type='text' name='robo-message'/> <br><br>
</span>
<label>Your name</label>
  <input type='text' name='name' required
  oninvalid="this.setCustomValidity('Please let me know your name so I can reply to you')"
  oninput="this.setCustomValidity('')"  /> <br><br>
  <label>Your email address</label>
    <input type='email' name='email' required
    oninvalid="this.setCustomValidity('Please provide your email address')"
    oninput="this.setCustomValidity('')"  /><br><br>
<label>Your message</label>
  <textarea style="height: 4em;" type='text' name='mymessage' required></textarea><br><br>
  <button type='submit' value='Send me a message'>Send me a message</button>
</form>

Footer

<footer class="page" role="contentinfo">
  <div class="row">
    <div class="col-12 grid">
      <ul class="navigation">
        <li><a href="/">Home</a></li>
        <li><a href="/notes/">Notes</a></li>
        <li><a href="/contact/">Contact</a></li>
      </ul>
      <link itemprop="url" href="https://benbrignell.com" itemscope itemtype="https://schema.org/person">
      <ul class="social-filth">
        <li>
          <a itemprop="sameAs" href="https://brignell.co/@ben" title="Follow me on Mastodon">
            <svg viewBox="0 0 24 24" aria-label="Mastodon" class="social-icon">
              <path d="M23.193 7.879c0-5.206-3.411-6.732-3.411-6.732C18.062.357 15.108.025 12.041 0h-.076c-3.068.025-6.02.357-7.74 1.147 0 0-3.411 1.526-3.411 6.732 0 1.192-.023 2.618.015 4.129.124 5.092.934 10.109 5.641 11.355 2.17.574 4.034.695 5.535.612 2.722-.15 4.25-.972 4.25-.972l-.09-1.975s-1.945.613-4.129.539c-2.165-.074-4.449-.233-4.799-2.891a5.499 5.499 0 0 1-.048-.745s2.125.52 4.817.643c1.646.075 3.19-.097 4.758-.283 3.007-.359 5.625-2.212 5.954-3.905.517-2.665.475-6.507.475-6.507zm-4.024 6.709h-2.497V8.469c0-1.29-.543-1.944-1.628-1.944-1.2 0-1.802.776-1.802 2.312v3.349h-2.483v-3.35c0-1.536-.602-2.312-1.802-2.312-1.085 0-1.628.655-1.628 1.944v6.119H4.832V8.284c0-1.289.328-2.313.987-3.07.68-.758 1.569-1.146 2.674-1.146 1.278 0 2.246.491 2.886 1.474L12 6.585l.622-1.043c.64-.983 1.608-1.474 2.886-1.474 1.104 0 1.994.388 2.674 1.146.658.757.986 1.781.986 3.07v6.304z"/>
            </svg>
          </a>
        </li>
        <li>
          <a itemprop="sameAs" href="https://instagram.com/benbrignell" title="Take a look at my sketches on Instagram">
        <svg viewBox="0 0 24 24" aria-label="Instagram" class="social-icon">
          <path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"/></svg>
          </a>
        </li>
        <li>
          <a itemprop="sameAs" href="https://twitter.com/benbrignell" title="Follow me on Twitter">
          <svg viewBox="0 0 24 24" aria-label="Twitter" class="social-icon">
            <path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"/></svg>
            </a>
        </li>
        <li>
          <a itemprop="sameAs" href="https://dribbble.com/benbrignell" title="Take a look at what I'm designing on Dribbble">
          <svg viewBox="0 0 24 24" aria-label="Dribbble" class="social-icon">
            <path d="M12 24C5.385 24 0 18.615 0 12S5.385 0 12 0s12 5.385 12 12-5.385 12-12 12zm10.12-10.358c-.35-.11-3.17-.953-6.384-.438 1.34 3.684 1.887 6.684 1.992 7.308 2.3-1.555 3.936-4.02 4.395-6.87zm-6.115 7.808c-.153-.9-.75-4.032-2.19-7.77l-.066.02c-5.79 2.015-7.86 6.025-8.04 6.4 1.73 1.358 3.92 2.166 6.29 2.166 1.42 0 2.77-.29 4-.814zm-11.62-2.58c.232-.4 3.045-5.055 8.332-6.765.135-.045.27-.084.405-.12-.26-.585-.54-1.167-.832-1.74C7.17 11.775 2.206 11.71 1.756 11.7l-.004.312c0 2.633.998 5.037 2.634 6.855zm-2.42-8.955c.46.008 4.683.026 9.477-1.248-1.698-3.018-3.53-5.558-3.8-5.928-2.868 1.35-5.01 3.99-5.676 7.17zM9.6 2.052c.282.38 2.145 2.914 3.822 6 3.645-1.365 5.19-3.44 5.373-3.702-1.81-1.61-4.19-2.586-6.795-2.586-.825 0-1.63.1-2.4.285zm10.335 3.483c-.218.29-1.935 2.493-5.724 4.04.24.49.47.985.68 1.486.08.18.15.36.22.53 3.41-.43 6.8.26 7.14.33-.02-2.42-.88-4.64-2.31-6.38z"/></svg>
            </a>
        </li>
        <li>
          <a itemprop="sameAs" href="/feed.xml" title="RSS Feed">
          <svg viewBox="0 0 24 24" aria-label="RSS" class="social-icon">
            <path d="M20 0H4a4 4 0 0 0-4 4v16a4 4 0 0 0 4 4h16a4 4 0 0 0 4-4V4a4 4 0 0 0-4-4zM5.5 11a1 1 0 1 1 0-2c5.2 0 9.5 4.3 9.5 9.5a1 1 0 1 1-2 0c0-4.1-3.4-7.5-7.5-7.5zm4 6A2.5 2.5 0 1 1 7 14.5c1.4 0 2.5 1.1 2.5 2.5zm-4-11a1 1 0 1 1 0-2c8 0 14.5 6.5 14.5 14.5a1 1 0 1 1-2 0C18 11.6 12.4 6 5.5 6z"/>
          </svg>  
          </a>
        </li>        
        <li style="margin-left: 2em;">
          <a href="/styleguide/" title="Check out this site's styleguide">  
            <svg viewBox="0 0 24 24" aria-label="Styleguide" class="social-icon">
              <path d="M7.5 24H3c-1.2 0-2.2-1-2.2-2.2V2.2C.8 1 1.8 0 3 0h4.5c1.2 0 2.2 1 2.2 2.2v19.5c.1 1.3-1 2.3-2.2 2.3zM3 1.5c-.4 0-.8.3-.8.8v19.5c0 .4.3.8.8.8h4.5c.4 0 .8-.3.8-.8V2.2c0-.4-.3-.8-.8-.8H3z"/><path d="M9 22.5l-.3-.1c-.4-.2-.5-.6-.4-1L16 4.2c.1-.4 0-.8-.4-1l-4.2-1.7c-.4-.2-.6-.6-.4-1 .2-.4.6-.6 1-.4l4.2 1.7c1.1.5 1.7 1.8 1.2 2.9L9.7 22.1c-.1.2-.4.4-.7.4z"/><path d="M8.8 23.2l-.6-.3a.8.8 0 0 1 .1-1l13.2-11.2.2-.5-.2-.5-3-3.3a.8.8 0 0 1 0-1.1c.3-.3.8-.3 1.1 0l3 3.3c.4.4.6 1 .6 1.6s-.3 1.2-.7 1.6L9.3 23l-.5.2zM9 6H1.5c-.4 0-.7-.3-.7-.8s.3-.8.8-.8H9c.4 0 .8.3.8.8S9.4 6 9 6zM9 10.5H1.5c-.4 0-.8-.3-.8-.8s.4-.7.8-.7H9c.4 0 .8.3.8.8s-.4.7-.8.7zM9 15H1.5c-.4 0-.8-.3-.8-.8s.3-.8.8-.8H9c.4 0 .8.3.8.8s-.4.8-.8.8zM5.2 21c-.6 0-1.1-.5-1.1-1.1s.5-1.1 1.1-1.1 1.1.5 1.1 1.1S5.9 21 5.2 21zm0-1.5c-.2 0-.4.2-.4.4s.2.4.4.4.4-.2.4-.4-.1-.4-.4-.4z"/>
            </svg>
          </a>
        </li>
      </ul>

      <p class="copyright teenytiny">&copy; 2019 Brignell Ltd.</p>

  </div>
</div>
</footer>

Homepage header illustration

I am Ben.

<!-- Treehouse  -->
<div class="treehouse" aria-label="introduction">

  <h1>I am Ben. <span class="typed-text"></span></h1>

  <div role="presentation">
    <div class="shoes"></div>
    <div class="bird"></div>
    <div class="ropeladder"></div>
    <div class="sun"></div>
    <div class="landscape"></div>
    <div class="fence"></div>
  </div>
</div>

Post lists

Petty in the Attic

A nostalgic visit to the attic stumbling across old music memories

‹ All posts from the journal

<section>
  
         <article class="post-list-item" itemscope>
          <h3 itemprop="title"><a href="/journal/2019/27/02/getting-help-from-your-worst-enemy">Getting help from your worst enemy</a></h3>
          <time>27 February, 2019</time>
          <p itemprop="summary">One weird old tip for a semi-jargonless life where you can finish work at 5pm</p>
        </article>
  
         <article class="post-list-item" itemscope>
          <h3 itemprop="title"><a href="/journal/2017/30/05/petty-in-the-attic">Petty in the Attic</a></h3>
          <time>30 May, 2017</time>
          <p itemprop="summary">A nostalgic visit to the attic stumbling across old music memories</p>
        </article>
  
         <article class="post-list-item" itemscope>
          <h3 itemprop="title"><a href="/journal/2017/14/04/interview-with-stowed-away">Interview with Stowed Away</a></h3>
          <time>14 April, 2017</time>
          <p itemprop="summary">Stowed Away were kind enough to interview me about art, design and local life</p>
        </article>
  
  <p style="margin-top: 1em;"><a href="/archive">‹ All posts from the journal</a></p>
</section>

Post lists, simple view

<section>
  
         <article itemscope>
          <h3 itemprop="title"><a href="/journal/2019/27/02/getting-help-from-your-worst-enemy">Getting help from your worst enemy</a></h3>
        </article>
  
         <article itemscope>
          <h3 itemprop="title"><a href="/journal/2017/30/05/petty-in-the-attic">Petty in the Attic</a></h3>
        </article>
  
         <article itemscope>
          <h3 itemprop="title"><a href="/journal/2017/14/04/interview-with-stowed-away">Interview with Stowed Away</a></h3>
        </article>
  
  <p style="margin-top: 1em;"><a href="/archive">‹ All posts from the journal</a></p>
</section>

Portfolio grid

  • Athletico Mince illustration
  • Centre of the Cell interactive experience
  • EE web design
  • Potatoes in Space, illustration projects
  • Pledge microsite for Emmy the Great (contains sloths)
  • Mix Magazine design and art direction
  • Coming soon… on a Friday
  • Bookatable responsive strategy, native apps and restaurant management systems
  • Illustration projects, urban giraffes
  • audioboom
  • import
  • Website for the Airbus A350 XWB
<ul class="projects">
  
  <li>
      <img class="lazy-load" data-src="/img/projects/athleticomince.png" src="data:image/gif;base64,R0lGODdhAQABAPAAAPPz8yZFySH5BAEAAAEALAAAAAABAAEAAAICRAEAOw=="  alt="Athletico Mince illustration" />
      <noscript><img src="/img/projects/athleticomince.png" alt="Athletico Mince illustration" /></noscript>
  </li>
  
  <li>
      <img class="lazy-load" data-src="/img/projects/cotc.jpg" src="data:image/gif;base64,R0lGODdhAQABAPAAAPPz8yZFySH5BAEAAAEALAAAAAABAAEAAAICRAEAOw=="  alt="Centre of the Cell interactive experience" />
      <noscript><img src="/img/projects/cotc.jpg" alt="Centre of the Cell interactive experience" /></noscript>
  </li>
  
  <li>
      <img class="lazy-load" data-src="/img/projects/ee.png" src="data:image/gif;base64,R0lGODdhAQABAPAAAPPz8yZFySH5BAEAAAEALAAAAAABAAEAAAICRAEAOw=="  alt="EE web design" />
      <noscript><img src="/img/projects/ee.png" alt="EE web design" /></noscript>
  </li>
  
  <li>
      <img class="lazy-load" data-src="/img/projects/illustration-potatoes-in-space.png" src="data:image/gif;base64,R0lGODdhAQABAPAAAPPz8yZFySH5BAEAAAEALAAAAAABAAEAAAICRAEAOw=="  alt="Potatoes in Space, illustration projects" />
      <noscript><img src="/img/projects/illustration-potatoes-in-space.png" alt="Potatoes in Space, illustration projects" /></noscript>
  </li>
  
  <li>
      <img class="lazy-load" data-src="/img/projects/emmy.jpg" src="data:image/gif;base64,R0lGODdhAQABAPAAAPPz8yZFySH5BAEAAAEALAAAAAABAAEAAAICRAEAOw=="  alt="Pledge microsite for Emmy the Great (contains sloths)" />
      <noscript><img src="/img/projects/emmy.jpg" alt="Pledge microsite for Emmy the Great (contains sloths)" /></noscript>
  </li>
  
  <li>
      <img class="lazy-load" data-src="/img/projects/mixmagazine.jpg" src="data:image/gif;base64,R0lGODdhAQABAPAAAPPz8yZFySH5BAEAAAEALAAAAAABAAEAAAICRAEAOw=="  alt="Mix Magazine design and art direction" />
      <noscript><img src="/img/projects/mixmagazine.jpg" alt="Mix Magazine design and art direction" /></noscript>
  </li>
  
  <li>
      <img class="lazy-load" data-src="/img/projects/friday.jpg" src="data:image/gif;base64,R0lGODdhAQABAPAAAPPz8yZFySH5BAEAAAEALAAAAAABAAEAAAICRAEAOw=="  alt="Coming soon… on a Friday" />
      <noscript><img src="/img/projects/friday.jpg" alt="Coming soon… on a Friday" /></noscript>
  </li>
  
  <li>
      <img class="lazy-load" data-src="/img/projects/bookatable.png" src="data:image/gif;base64,R0lGODdhAQABAPAAAPPz8yZFySH5BAEAAAEALAAAAAABAAEAAAICRAEAOw=="  alt="Bookatable responsive strategy, native apps and restaurant management systems" />
      <noscript><img src="/img/projects/bookatable.png" alt="Bookatable responsive strategy, native apps and restaurant management systems" /></noscript>
  </li>
  
  <li>
      <img class="lazy-load" data-src="/img/projects/illustration-urban-giraffes.jpg" src="data:image/gif;base64,R0lGODdhAQABAPAAAPPz8yZFySH5BAEAAAEALAAAAAABAAEAAAICRAEAOw=="  alt="Illustration projects, urban giraffes" />
      <noscript><img src="/img/projects/illustration-urban-giraffes.jpg" alt="Illustration projects, urban giraffes" /></noscript>
  </li>
  
  <li>
      <img class="lazy-load" data-src="/img/projects/audioboom.png" src="data:image/gif;base64,R0lGODdhAQABAPAAAPPz8yZFySH5BAEAAAEALAAAAAABAAEAAAICRAEAOw=="  alt="audioboom" />
      <noscript><img src="/img/projects/audioboom.png" alt="audioboom" /></noscript>
  </li>
  
  <li>
      <img class="lazy-load" data-src="/img/projects/import.png" src="data:image/gif;base64,R0lGODdhAQABAPAAAPPz8yZFySH5BAEAAAEALAAAAAABAAEAAAICRAEAOw=="  alt="import" />
      <noscript><img src="/img/projects/import.png" alt="import" /></noscript>
  </li>
  
  <li>
      <img class="lazy-load" data-src="/img/projects/qatar.jpg" src="data:image/gif;base64,R0lGODdhAQABAPAAAPPz8yZFySH5BAEAAAEALAAAAAABAAEAAAICRAEAOw=="  alt="Website for the Airbus A350 XWB" />
      <noscript><img src="/img/projects/qatar.jpg" alt="Website for the Airbus A350 XWB" /></noscript>
  </li>
  
</ul>

Primary navigation

<header role="banner">
    <nav role="navigation">
      <span class="logo"><a href="/">
        <img src="/img/ben-brignell-logo.svg" alt="Ben Brignell logo">
      </a></span>
      <ul class="main-navigation">
        <li><a href="/projects/" class="projects">Projects</a></li>
        <li><a href="/workshops/" class="workshops">Workshops</a></li>
        <li><a href="/journal/" class="journal">Journal</a></li>
      </ul>
    </nav>
</header>

Testimonials

Ben is really good at breaking code and accidentally deleting repositories. Everything he touches turns to mud and potatoes.

Cheese McAdams, King of Harpsichords

<blockquote class="">
  <p class="h4">Ben is really good at breaking code and accidentally deleting repositories. Everything he touches turns to mud and potatoes.</p>
  <p class="testimonial__card--cite"><a class="" href="http://twitter.com/benbrignell">Cheese McAdams</a>, King of Harpsichords</p>
</blockquote>