Living Style Guide

Welcome to eurucamp’s front-end style guide. This is the central place where all CSS and assets for 2014.eurucamp.org are definend and maintained. The source of this document and the Sass code are available at github.com/eurucamp/livingstyleguide-eurucamp.

Normal usage:

On black backgrounds:

Colors

Typography

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
!&/()$=@;:,.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
!&/()$=@;:,.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
!&/()$=@;:,.

Layout

Content goes here
<div class="layout">
  <header class="layout--header">
    <div class="layout--header-container">
      <a class="layout--header-logo">eurucamp</a>
      <nav class="layout--header-navigation">
        <a class="layout--header-navigation-item">Link</a>
        <a class="layout--header-navigation-item">Link</a>
        <a class="layout--header-navigation-item">Link</a>
      </nav>
    </div>
  </header>
  <div class="layout--container">
    Content goes here
  </div>
  <footer class="layout--footer">
    <div class="layout--footer-container">
      <p class="layout--footer-text">
        Some text
      </p>
      <nav class="layout--footer-navigation">
        <a class="layout--footer-navigation-item">Link</a>
        <a class="layout--footer-navigation-item">Link</a>
        <a class="layout--footer-navigation-item">Link</a>
      </nav>
    </div>
  </footer>
</div>

Text

Big Headline

Medium Headline

Lorem ipsum dolor sit amet,​ consectetur adipiscing elit. Aenean porta, nunc at pulvinar porta, erat lorem congue magna, sit amet egestas ante erat in neque. Suspendisse vitae sapien et ante feugiat posuere vitae sit amet urna. Suspendisse vestibulum elit nulla, id venenatis enim ultricies quis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed lorem gravida, accumsan enim id, interdum sem. Nam sollicitudin posuere libero. Suspendisse eu orci ut erat tristique consectetur.

  • List item
  • Another list item
  • Last list item
# Big Headline

## Medium Headline

Lorem ipsum dolor **sit amet,**​ consectetur adipiscing elit.
Aenean porta, nunc at pulvinar porta, erat lorem congue magna,
sit amet egestas ante erat in neque. _Suspendisse_ vitae sapien
et ante feugiat [posuere vitae](#) sit amet urna. Suspendisse
vestibulum elit nulla, id venenatis enim ultricies quis.

> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
> Nunc sed lorem gravida, accumsan enim id, interdum sem.
> Nam sollicitudin posuere libero.
> Suspendisse eu orci ut erat tristique consectetur.

* List item
* Another list item
* Last list item

Cover

August 1—3 Berlin, Germany
<div class="cover">
  <div class="cover--container">
    <date class="cover--date">August 1—3</date>
    <span class="cover--location">Berlin, Germany</span>
  </div>
</div>

Speakers

Meet our Speakers

  • Name
  • Name
  • Name
  • Name
  • Name
  • Name
<section class="speakers">
  <div class="speakers--container">
    <h1 class="speakers--title">Meet our Speakers</h1>
    <ul class="speakers--list">
      <li class="speakers--list-item">
        <img class="speakers--list-item-avatar" src="images/dummy/avatar.jpg">
        <span class="speakers--list-item-name">Name</span>
      </li>
      <li class="speakers--list-item">
        <a href>
          <img class="speakers--list-item-avatar" src="images/dummy/avatar.jpg">
          <span class="speakers--list-item-name">Name</span>
        </a>
      </li>
      <li class="speakers--list-item">
        <img class="speakers--list-item-avatar" src="images/dummy/avatar.jpg">
        <span class="speakers--list-item-name">Name</span>
      </li>
      <li class="speakers--list-item">
        <img class="speakers--list-item-avatar" src="images/dummy/avatar.jpg">
        <span class="speakers--list-item-name">Name</span>
      </li>
      <li class="speakers--list-item">
        <img class="speakers--list-item-avatar" src="images/dummy/avatar.jpg">
        <span class="speakers--list-item-name">Name</span>
      </li>
      <li class="speakers--list-item">
        <img class="speakers--list-item-avatar" src="images/dummy/avatar.jpg">
        <span class="speakers--list-item-name">Name</span>
      </li>
    </ul>
  </div>
</section>

Info

Tickets

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet nisi sagittis, dapibus erat ut, consectetur leo. Nunc at auctor eros.

Follow Us

Guide

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet nisi sagittis, dapibus erat ut, consectetur leo. Nunc at auctor eros.

Venue & Arriving

Blog

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet nisi sagittis, dapibus erat ut, consectetur leo. Nunc at auctor eros.

Read More
<div class="info">
  <div class="info--container">
    <section class="info--section -tickets">
      <h2 class="info--section-title">Tickets</h2>
      <p class="info--section-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet nisi sagittis, dapibus erat ut, consectetur leo. Nunc at auctor eros.</p>
      <a class="info--section-show-more">Follow Us</a>
    </section>
    <section class="info--section -guide">
      <h2 class="info--section-title">Guide</h2>
      <p class="info--section-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet nisi sagittis, dapibus erat ut, consectetur leo. Nunc at auctor eros.</p>
      <a class="info--section-show-more">Venue &amp; Arriving</a>
    </section>
    <section class="info--section -blog">
      <h2 class="info--section-title">Blog</h2>
      <p class="info--section-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet nisi sagittis, dapibus erat ut, consectetur leo. Nunc at auctor eros.</p>
      <a class="info--section-show-more">Read More</a>
    </section>
  </div>
</div>

Flickr

2013 Flickr

Show more
<section class="flickr">
  <div class="flickr--container">
    <h1 class="flickr--title">2013 Flickr</h1>
    <div class="flickr--photos">
      <a class="flickr--photos-item">
        <img class="flickr--photos-item-photo" src="https://farm4.staticflickr.com/3711/9666710138_204bba8645.jpg">
      </a>
      <a class="flickr--photos-item" href>
        <img class="flickr--photos-item-photo" src="https://farm6.staticflickr.com/5343/9663483709_80a6dd1582.jpg">
      </a>
      <a class="flickr--photos-item">
        <img class="flickr--photos-item-photo" src="https://farm3.staticflickr.com/2835/9666714832_a4eb7a6774.jpg">
      </a>
      <a class="flickr--photos-item">
        <img class="flickr--photos-item-photo" src="https://farm3.staticflickr.com/2841/9663482859_1362163d24.jpg">
      </a>
    </div>
    <a class="flickr--show-more">Show more</a>
  </div>
</section>

Concept

Conf Meets Camp

Concept
<section class="concept">
  <div class="concept--container">
    <h1 class="concept--title">Conf Meets Camp</h1>
    <div class="concept--photo-container">
      <img class="concept--photo" src="https://farm4.staticflickr.com/3696/9702238265_3343801c57_b.jpg">
    </div>
    <a class="concept--show-more">Concept</a>
  </div>
</section>

Flickr and Concept

.flickr goes here
.concept goes here
<div class="flickr-and-concept">
  <div class="flickr-and-concept--container">
    <div class="flickr-and-concept--column">
      <div class="flickr"><a href="#flickr">.flickr</a> goes here</div>
    </div>
    <div class="flickr-and-concept--column">
      <div class="concept"><a href="#concept">.concept</a> goes here</div>
    </div>
  </div>
</div>

Events

Lorem

August 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet nisi sagittis, dapibus erat ut, consectetur leo. Nunc at auctor eros.

Show More

Ipsum

August 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet nisi sagittis, dapibus erat ut, consectetur leo. Nunc at auctor eros.

Show More

Dolor

August 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet nisi sagittis, dapibus erat ut, consectetur leo. Nunc at auctor eros.

Show More
<div class="events">
  <div class="events--container">
    <section class="events--section">
      <h2 class="events--section-title">Lorem</h2>
      <h2 class="events--section-sub-title">August 1</h2>
      <p class="events--section-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet nisi sagittis, dapibus erat ut, consectetur leo. Nunc at auctor eros.</p>
      <a class="events--section-show-more">Show More</a>
    </section>
    <section class="events--section">
      <h2 class="events--section-title">Ipsum</h2>
      <h2 class="events--section-sub-title">August 2</h2>
      <p class="events--section-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet nisi sagittis, dapibus erat ut, consectetur leo. Nunc at auctor eros.</p>
      <a class="events--section-show-more">Show More</a>
    </section>
    <section class="events--section">
      <h2 class="events--section-title">Dolor</h2>
      <h2 class="events--section-sub-title">August 2</h2>
      <p class="events--section-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet nisi sagittis, dapibus erat ut, consectetur leo. Nunc at auctor eros.</p>
      <a class="events--section-show-more">Show More</a>
    </section>
  </div>
</div>

Sponsors

Sponsors and Supporters

<section class="sponsors">
  <div class="sponsors--container">
    <h1 class="sponsors--title">Sponsors and Supporters</h1>
  </div>
</section>

Pure Text

Secondary pages just using informative text.

<div class="layout--container">
  <article class="pure-text">
    <p class="text">Secondary pages just using informative text.</p>
  </article>
</div>

Guide

HPI Berlin Brandenburg

Venue
<section class="guide">
  <div class="guide--container">
    <h1 class="guide--title">HPI Berlin Brandenburg</h1>
    <div class="guide--photo-container">
      <img class="guide--photo" src="https://farm4.staticflickr.com/3696/9702238265_3343801c57_b.jpg">
    </div>
    <a class="guide--show-more">Venue</a>
  </div>
</section>

Concept Page

Sections

Concept

Community

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ullamcorper sem. Ut vestibulum vulputate nisl, id convallis velit blandit vel. Quisque non dignissim enim.

.concept-page
  .concept-page--container
    %h1.concept-page--title Concept
    .concept-page--section
      %h2.concept-page--section-title Community
      %p.concept-page--section-paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ullamcorper sem. Ut vestibulum vulputate nisl, id convallis velit blandit vel. Quisque non dignissim enim.

Formula

eurucamp = community + learning + fun.

eurucamp is where Ruby conference meets camp

.concept-page
  .concept-page--container
    %p.concept-page--formula eurucamp = community + learning + fun.
    %p.concept-page--formula-text eurucamp is where Ruby conference meets camp

Previous

2011

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ullamcorper sem. Ut vestibulum vulputate nisl, id convallis velit blandit vel. Quisque non dignissim enim.

2012

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ullamcorper sem. Ut vestibulum vulputate nisl, id convallis velit blandit vel. Quisque non dignissim enim.

.concept-page
  .concept-page--previous
    .concept-page--previous-container
      %p.concept-page--previous-title 2011
      %p.concept-page--previous-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ullamcorper sem. Ut vestibulum vulputate nisl, id convallis velit blandit vel. Quisque non dignissim enim.
      %p.concept-page--previous-logo Logo
  .concept-page--previous
    .concept-page--previous-container.-year-2012
      %p.concept-page--previous-title 2012
      %p.concept-page--previous-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ullamcorper sem. Ut vestibulum vulputate nisl, id convallis velit blandit vel. Quisque non dignissim enim.
      %p.concept-page--previous-logo Logo

Team Page

Members

Team

Akasha

Offical Cat

Akasha

Offical Cat

Akasha

Offical Cat

Akasha

Offical Cat

Akasha

Offical Cat

Akasha

Offical Cat
.team-page
  .team-page--container
    %h1.team-page--title Team
    .team-page--members
      - 6.times do
        .team-page--members-item
          .team-page--members-item-photo
            %img.team-page--members-item-photo-image(src="images/dummy/avatar.jpg")
          %h2.team-page--members-item-name Akasha
          .team-page--members-item-position Offical Cat
          %a.team-page--members-item-link.-twitter(href)
          %a.team-page--members-item-link.-github(href)
          %a.team-page--members-item-link.-website(href)
          %a.team-page--members-item-link.-email(href)

Ruby.Berlin

Ruby.Berlin

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ullamcorper sem. Ut vestibulum vulputate nisl, id convallis velit blandit vel. Quisque non dignissim enim.

ruby.berlin
.team-page
  .team-page--container
    .team-page--ruby-berlin
      %h1.team-page--ruby-berlin-title Ruby.Berlin
      .team-page--ruby-berlin-text
        %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ullamcorper sem. Ut vestibulum vulputate nisl, id convallis velit blandit vel. Quisque non dignissim enim.
      %a.team-page--ruby-berlin-link(href) ruby.berlin