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 class="page" role="contentinfo">
  <div class="row">
    <div class="col-4">
      <ul class="no-bullet">
        <li><a href="/">Home</a></li>
        <li><a href="/projects/">Projects</a></li>
        <li><a href="/journal/">Journal</a></li>
        <li><a href="/faq/">FAQ</a></li>
        <li><a href="/styleguide/">Styleguide</a></li>
        <li><a href="/contact/">Contact</a></li>
      </ul>
  </div>
  <link itemprop="url" href="https://benbrignell.com" itemscope itemtype="http://schema.org/person">
    <div class="col-4">
      <ul class="no-bullet">
        <li>Find me on:</li>
        <li><a itemprop="sameAs" href="http://twitter.com/benbrignell" target="_blank">Twitter</a></li>
        <li><a itemprop="sameAs" href="http://dribbble.com/benbrignell" target="_blank">Dribbble</a></li>
        <li><a itemprop="sameAs" href="http://instagram.com/benbrignell" target="_blank">Instagram</a></li>
        <li><a itemprop="sameAs" href="http://github.com/benbrignell/" target="_blank">Github</a></li>
        <li><a itemprop="sameAs" href="https://vine.co/benbrignell" target="_blank">Vine</a></li>
        <li><a itemprop="sameAs" href="https://uk.linkedin.com/in/benbrignell" target="_blank">LinkedIn</a></li>
        <li><a itemprop="sameAs" href="http://medium.com/@benbrignell" target="_blank">Medium</a></li>
        <li><a itemprop="sameAs" href="http://facebook.com/benbrignell" target="_blank">Facebook</a></li>
      </ul>
    </div>
  <div class="col-4">
    <ul class="no-bullet">
      <li>Legal bits</li>
      <li><a href="/privacy-and-cookie-usage/">Privacy & Cookies</a></li>
      <li><a href="https://brignell.uk" target="_blank">Brignell Ltd</a></li>
      <li><span class="teenytiny">Company Nº: 9282895</span></li>
      <li><span class="teenytiny">VAT Nº: 201903749</span></li>
      <li><span class="teenytiny">Copyright &copy; Ben Brignell 2007 – 2017</span></li>
    </ul>
  </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

Draw Walthamstow Draw

A write-up and tour of the exhibition I did in February at Winns Gallery

‹ All posts from the journal

<section>
  
         <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>
  
         <article class="post-list-item" itemscope>
          <h3 itemprop="title"><a href="/journal/2017/13/04/draw-walthamstow-draw">Draw Walthamstow Draw</a></h3>
          <time>13 April, 2017</time>
          <p itemprop="summary">A write-up and tour of the exhibition I did in February at Winns Gallery</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/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>
  
         <article itemscope>
          <h3 itemprop="title"><a href="/journal/2017/13/04/draw-walthamstow-draw">Draw Walthamstow Draw</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="/">
      <img src="/img/ben-brignell-logo.svg" alt="Ben Brignell logo">
    </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 col-9 bm">
    <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="testimonial-nice-person"><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>