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>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

<a class="h4 btn cta" href="/contact/" style="margin-bottom: 2em;">Cheese</a>

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" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p><a href="https://vimeo.com/203998275">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 action="https://getsimpleform.com/messages?form_api_token=ea42f72a9a5b890a93b9b3eae1c59348" method="post" autocomplete="off">
<input type='hidden' name='redirect_to' value='http://benbrignell.com/thanks/' />
<span style="display: none;">
  <label>If you're not a bot, leave this field blank </label><br>
  <input type='text' name='message1'/> <br><br>
</span>
<label>Your name</label>
  <input type='text' name='name' /> <br><br>
  <label>Your email address</label>
    <input type='email' name='email' required /><br><br>
<label>Your message</label>
  <textarea style="height: 4em;" type='text' name='mymessage' required></textarea><br><br>
  <input type='submit' class="btn" value='Send me a message' />
</form>

Footer

<footer role="contentinfo">
  <p itemscope itemtype="http://schema.org/person">
    <link itemprop="url" href="https://benbrignell.com">
    Find me on
    <a itemprop="sameAs" href="http://twitter.com/benbrignell" target="_blank">Twitter</a>,
    <a itemprop="sameAs" href="http://dribbble.com/benbrignell" target="_blank">Dribbble</a>,
    <a itemprop="sameAs" href="http://instagram.com/benbrignell" target="_blank">Instagram</a>,
    <a itemprop="sameAs" href="http://github.com/benbrignell/" target="_blank">Github</a>,
    <a itemprop="sameAs" href="https://vine.co/benbrignell" target="_blank">Vine</a>,
    <a itemprop="sameAs" href="https://uk.linkedin.com/in/benbrignell" target="_blank">LinkedIn</a>,
    <a itemprop="sameAs" href="http://medium.com/@benbrignell" target="_blank">Medium</a>,
    <a itemprop="sameAs" href="http://facebook.com/benbrignell" target="_blank">Facebook</a>
  </p>
  <p>
    <a href="/">Home</a>,
    <a href="/projects/">Projects</a>,
    <a href="/journal/">Journal</a>,
    <a href="/faq/">FAQ</a>,
    <a href="/styleguide/">Styleguide</a>,
    <a href="/privacy-and-cookie-usage/">Privacy & Cookies</a>,
    <a href="/contact/">Contact</a>
  </p>
  <p>
    Copyright &copy; Ben Brignell 2007 – 2017
  </p>
</footer>

Homepage header illustration

I am Ben. I am a designer.
I write, make & draw things.

<!-- Treehouse  -->
<div class="treehouse" aria-label="introduction">
  <h1>I am Ben. I am a designer. <br>
    I <a href="/journal/">write</a>, <a href="/projects/">make &amp; draw</a> things.</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

‹ All posts from the journal

<section>
  
         <article itemscope>
          <h3 itemprop="title"><a href="/journal/2017/12/02/winns-gallery-exhibition">Exhibition at the Winns Gallery, Lloyd Park</a></h3>
          <time>12 February, 2017</time>
          <p itemprop="summary">I'm exhibiting with 4 other artists at the Draw Walthamstow Draw exhibition</p>
        </article>
  
         <article itemscope>
          <h3 itemprop="title"><a href="/journal/2016/06/10/national-poetry-day">My contribution to National Poetry day</a></h3>
          <time>6 October, 2016</time>
          <p itemprop="summary">Three short poems</p>
        </article>
  
         <article itemscope>
          <h3 itemprop="title"><a href="/journal/2015/03/03/turning-over-a-new-leaf">Turning over a new leaf</a></h3>
          <time>3 March, 2015</time>
          <p itemprop="summary">A recent change and a few comments on the current state of the design industry</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/2017/12/02/winns-gallery-exhibition">Exhibition at the Winns Gallery, Lloyd Park</a></h3>
        </article>
  
         <article itemscope>
          <h3 itemprop="title"><a href="/journal/2016/06/10/national-poetry-day">My contribution to National Poetry day</a></h3>
        </article>
  
         <article itemscope>
          <h3 itemprop="title"><a href="/journal/2015/03/03/turning-over-a-new-leaf">Turning over a new leaf</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">
  
    <span class="logo"><a href="/">Ben Brignell</a></span>
  
    <nav role="navigation">
      <ul>
        <li><a href="/projects/" class="projects">Projects</a></li>
        <li><a href="/journal/" class="journal">Journal</a></li>
        <li><a href="/contact/" class="contact">Contact</a></li>
      </ul>
    </nav>
</header>

Testimonials

Cheese McAdams, King of Harpsichords

Cheese McAdams, King of Harpsichords

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

<div class="testimonial">
  <img class="lazy-load avatar" data-src="/img/handsome.jpg" data-src-mobile="/img/handsome.jpg" src="data:image/gif;base64,R0lGODdhAQABAPAAAPPz8yZFySH5BAEAAAEALAAAAAABAAEAAAICRAEAOw=="  alt="Cheese McAdams, King of Harpsichords"  />
  <noscript><img class="avatar" src="/img/handsome.jpg" alt="Cheese McAdams, King of Harpsichords" /></noscript>
  <p class="center"><a href="http://twitter.com/benbrignell" target="_blank">Cheese McAdams</a>, King of Harpsichords</p>
  <p class="h4">Ben is really good at breaking code and accidentally deleting repositories. Everything he touches turns to mud and potatoes.</p>
</div>