Styleguide

This is the collection of UI components we are using on the blog, completed with code samples.
Primary colors
  • color-primary
  • color-primary-darker
  • white
  • black
  • gray
Secondary colors
  • gray-light
  • gray-lightest
  • gray-warm-dark
  • gray-warm-light
Typography

Body text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus.

Small body text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus.

Bold body text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus.

Italic body text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus.

Underlined body text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus.

Scrached body text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Blockquote

“Let me explain something to you. Um, I am not “Mr. Lebowski”. You’re Mr. Lebowski. I’m the Dude. So that’s what you call me. You know, that or, uh, His Dudeness, or uh, Duder, or El Duderino if you’re not into the whole brevity thing.” —The Big Lebowski

<p class="quote">...</p>
Tables of content
<ul class="list-unordered">
  <li><a class="primary-link" href="#">Link 1</a></li>
  <li><a class="primary-link" href="#">Link 2</a></li>
  <li><a class="primary-link" href="#">Link 3</a></li>
  <li><a class="primary-link" href="#">Link 4</a></li>
</ul>
TopBar
<div  class="topbar">
  <div class="topbar-logo">
    <a href="#" class="topbar-logo-url">Foo bar</a>
  </div>
  <div class="topbar-menu">
    <button class="topbar-menu-btn topbar-menu-btn--small btn-primary">Menu</button>
    <nav role="navigation" class="topbar-navigation">
      <ul>
        <li><a href="#" class="topbar-navigation-item">Link 1</a></li>
        <li><a href="#" class="topbar-navigation-item">Link 2</a></li>
        <li><a href="#" class="topbar-navigation-item">Link 3</a></li>
        <li><a href="#" class="topbar-navigation-item">Link 4</a></li>
      </ul>
    </nav>
  </div>
</div>
Blog post summary

Lorem ipsum dolor sit amet.

Donec nec leo fringilla, pulvinar eros sit amet, scelerisque enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec fringilla a quam sit amet iaculis. Nullam a nisl sit amet arcu posuere iaculis non a tortor. Fusce non nulla arcu...
<article class="article">
  <h2><a href="#" title="Lorem ipsum dolor sit amet." class="article-title">Lorem ipsum dolor sit amet.</a></h2>
  <span class="article-author"><a class="article-author--link" href="#">John Appleseed</a></span>
  <div class="article-excerpt">Donec nec leo fringilla, pulvinar eros sit
    amet, scelerisque enim. Cum sociis natoque penatibus et magnis dis
    parturient montes, nascetur ridiculus mus. Donec fringilla a quam sit
    amet iaculis. Nullam a nisl sit amet arcu posuere iaculis non a tortor.
    Fusce non nulla arcu...
  </div>
  <div class="articles-footer">
    <div class="articles-footer-wrapper">
      <img src="https://placehold.it/80x80" width="32" height="32" alt="John Appleseed" class="articles-footer-avatar">
      <span class="article-author"><a class="article-author--link" href="#">John Appleseed</a></span>
      <span class="article-pubdate"> on <time datetime="2014-02-10T12:10:48-05:00">February 10, 2014</time></span>
      <div class="articles-footer-tags">
        <span class="article-tags-item">
          <a href="#" class="article-tags-link">#tag1</a>
        </span>
        <span class="article-tags-item">
          <a href="#" class="article-tags-link">#tag2</a>
        </span>
        <span class="article-tags-item">
          <a href="#" class="article-tags-link">#tag3</a>
        </span>
      </div>
    </div>
  </div>
</article>
Blog post

Lorem ipsum dolor sit amet.

on 
3 min read

Donec nec leo fringilla, pulvinar eros sit amet, scelerisque enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec fringilla a quam sit amet iaculis. Nullam a nisl sit amet arcu posuere iaculis non a tortor. Fusce non nulla arcu. Vivamus pellentesque nulla sem, id faucibus magna aliquet eget. Ut elit turpis, tincidunt quis ligula sit amet, lobortis placerat odio. Cras a sapien aliquet, ultricies sem ornare, varius felis.

Duis rhoncus bibendum ultricies. Donec vestibulum ornare felis sit amet tincidunt. Suspendisse potenti. Donec sit amet dolor diam. Fusce luctus fermentum tellus non consectetur. Curabitur nec tellus odio. Etiam vitae nibh molestie, semper ante ac, interdum est. Nullam leo turpis, vulputate sed massa quis, elementum euismod nisi. Sed quis tellus quis velit vehicula consectetur non at nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse suscipit placerat turpis quis lobortis. Mauris nisi orci, faucibus a malesuada at, auctor vitae nulla. Nulla ac erat a tortor vulputate gravida. Quisque fringilla eu purus sit amet pulvinar. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Vivamus condimentum elit eu libero dapibus bibendum. Sed commodo, metus et pellentesque mattis, nisl elit laoreet mi, nec scelerisque arcu neque id tortor. Cras vehicula nulla quis hendrerit mattis. Nullam laoreet dignissim quam vitae faucibus. Pellentesque dignissim sit amet odio ac tempus. Integer quis faucibus ipsum. Aliquam bibendum metus eu sagittis aliquet. Aenean sollicitudin euismod dolor vel euismod. Nullam blandit lacinia venenatis.

<article class="article">
  <h1 class="article-title">Lorem ipsum dolor sit amet.</h1>
  <span class="article-author"><a class="article-author--link" href="#">John Appleseed</a></span>
  <span class="article-pubdate">— <time datetime="2014-02-10T12:10:48-05:00">February 10, 2014</time></span>
  <div class="article-tags">
    <span class="article-tags-item">
      lt;a href="#" class="article-tags-link">#tag1</a>
    </span>
    <span class="article-tags-item">
      <a href="#" class="article-tags-link">#tag2</a>
    </span>
    <span class="article-tags-item">
      <a href="#" class="article-tags-link">#tag3</a>
      </span>
  </div>
  <div class="article-summary">
    <span class="article-readingTime">3 min read</span>
  </div>
  <p>Donec nec leo fringilla, pulvinar eros sit amet, scelerisque enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec fringilla a quam sit amet iaculis. Nullam a nisl sit amet arcu posuere iaculis non a tortor. Fusce non nulla arcu. Vivamus pellentesque nulla sem, id faucibus magna aliquet eget. Ut elit turpis, tincidunt quis ligula sit amet, lobortis placerat odio. Cras a sapien aliquet, ultricies sem ornare, varius felis.</p>
  <p>Duis rhoncus bibendum ultricies. Donec vestibulum ornare felis sit amet tincidunt. Suspendisse potenti. Donec sit amet dolor diam. Fusce luctus fermentum tellus non consectetur. Curabitur nec tellus odio. Etiam vitae nibh molestie, semper ante ac, interdum est. Nullam leo turpis, vulputate sed massa quis, elementum euismod nisi. Sed quis tellus quis velit vehicula consectetur non at nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse suscipit placerat turpis quis lobortis. Mauris nisi orci, faucibus a malesuada at, auctor vitae nulla. Nulla ac erat a tortor vulputate gravida. Quisque fringilla eu purus sit amet pulvinar. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
  <p>Vivamus condimentum elit eu libero dapibus bibendum. Sed commodo, metus et pellentesque mattis, nisl elit laoreet mi, nec scelerisque arcu neque id tortor. Cras vehicula nulla quis hendrerit mattis. Nullam laoreet dignissim quam vitae faucibus. Pellentesque dignissim sit amet odio ac tempus. Integer quis faucibus ipsum. Aliquam bibendum metus eu sagittis aliquet. Aenean sollicitudin euismod dolor vel euismod. Nullam blandit lacinia venenatis.</p>
</article>
Responsive Images
Placeholder image
---
image:
  - src: test.jpg
    alt: 'Test'
---

{% assign image =  page.image[0] %}
{% include srcset.html %}
Pagination
<div class="pagination">
  <ul class="page-numbers">
    <li><span class="page-numbers current">1</span></li>
    <li><a class="page-numbers primary-link" href="#">2</a></li>
    <li><a class="page-numbers primary-link" href="#">3</a></li>
    <li><a class="page-numbers primary-link" href="#">4</a></li>
    <li><a class="page-numbers primary-link" href="#">5</a></li>
    <li><a class="page-numbers primary-link" href="#">6</a></li>
    <li><a class="page-numbers primary-link" href="#">7</a></li>
    <li><a class="next page-numbers primary-link" href="#">Next »</a></li>
  </ul>
</div>
Footer
<div class="footer">
  <div class="footer-sections">
    <div class="footer-column">
      <h3 class="black">LATEST POSTS</h3>
      <ul>
        <li><a href="#" class="footer-link">Your cells react to ba...</a></li>
        <li><a href="#" class="footer-link">Hello world!</a></li>
        <li><a href="#" class="footer-link">You think water moves ...</a></li>
        <li><a href="#" class="footer-link">That show's called a p...</a></li>
        <li><a href="#" class="footer-link">Your bones don't break</a></li>
        <li><a href="#" class="footer-link">My money's in that off...</a></li>
        <li><a href="#" class="footer-link">Now that we know who y...</a></li>
      </ul>
    </div>
    <div class="footer-column">
      <h3 class="black">MENU</h3>
      <ul>
        <li><a href="#" class="footer-link">Link 1</a></li>
        <li><a href="#" class="footer-link">Link 2</a></li>
        <li><a href="#" class="footer-link">Link 3</a></li>
        <li><a href="#" class="footer-link">Link 3</a></li>
      </ul>
    </div>
    <div class="footer-column">
      <h3 class="black">CATEGORIES</h3>
      <ul>
        <li><a href="#" class="footer-link">Category_1 (7)</a></li>
        <li><a href="#" class="footer-link">Category_2 (2)</a></li>
        <li><a href="#" class="footer-link">Category_3 (4)</a></li>
        <li><a href="#" class="footer-link">Category_4 (4)</a></li>
      </ul>
    </div>
  </div>
  <div class="footer-disclaimer">
    Copyright © demain·il·pleut 2018 - All this site's content under a <a rel="license" class="footer-disclaimer-link" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>.
  </div>
</div>
Code
var foo = "bar", baz = 5;
<pre>
  <code class="language-javascript">
    var foo = "bar", baz = 5;
  </code>
</pre>
Alerts

Info

Hello there! I'm a simple info panel.

Warning

Be careful!! This advice needs your attention.

Danger

Stop righ there!!! If you don't look this you're probably unleashing some kind of kraken.
<div>
  <h3>Info</h3>
  <div class="alert alert--info">
    <strong>Hello there!</strong> I'm a simple info panel.
  </div>
</div>
<div>
  <h3>Warning</h3>
  <div class="alert alert--warning">
    <strong>Be careful!!</strong> This advice needs your attention.
  </div>
</div>
<div>
  <h3>Danger</h3>
  <div class="alert alert--danger">
    <strong>Stop righ there!!!</strong> If you don't look this you're probably unleashing some kind of kraken.
  </div>
</div>
Buttons
<div class="inline">
  <button class="btn btn-primary" name="Primary button"
  type="button">Primary</button>
</div>
<div class="inline">
  <button class="btn btn--small btn-primary" name="Small primary button"
  type="button">Primary small</button>
</div>
↑ Back to top