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 lighter
  • gray lightest
  • gray warm dark
  • gray warm light
Typography

Body text: Open Sans, Helvetica, Arial, sans-serif.

Small body text: Open Sans, Helvetica, Arial, sans-serif.

Bold body text: Open Sans, Helvetica, Arial, sans-serif.

Italic body text: Open Sans, Helvetica, Arial, sans-serif.

Underlined body text: Open Sans, Helvetica, Arial, sans-serif.

Scrached body text: Open Sans, Helvetica, Arial, sans-serif.

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">Menu</button>
                <nav id="js-menu" 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 id="post-1" 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 style="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 id="post-1" 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
              </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>
      
    
About

About the Author

      
        <div class="about about-box">
          <h2 class="about-title">About the Author</h2>
          <div class="about-author">
            <div class="about-author-bio">
              <a class="about-author-avatar" href="#"><img
                src="https://placehold.it/80x80"
                width="80" height="80" alt="user avatar"></a>
                <p><span class="about-author-name"><a href="#" class="primary-link">John Appleseed</a></span>
                  <br><small class="about-author-description">
                    bla bla bla
                  </small>
                </p>
                <ul class="social">
                  <li class="social-item"><a href="#" class="social-twitter primary-link">@john</a></li>
                  <li class="social-item"><a href="#" class="social-linkedin primary-link">john</a></li>
                  <li class="social-item"><a href="#" class="social-github primary-link">@john</a></li>
                  <li class="social-item"><a href="#" class="social-gplus primary-link">+john</a></li>
                </ul>
              </div>
            </div>
        </div>
      
    
Images
placeholder
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="grid-container">
            <div class="row clearfix">
              <div class="column third">
                <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="column third">
                <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="column third">
                <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>
         <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 bg-blue white" name="Primary button"
          type="button">Primary</button>
        </div>
        <div class="inline">
          <button class="btn btn--small bg-blue white" name="Small primary button"
          type="button">Primary small</button>
        </div>