Living Style Guide

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

Those components need to be updated to the style guide API. For now, copy’n’paste the HTML from the examples.

Cover

<div class="cover">
  <div class="cover--container">
  </div>
</div>

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>

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.-dribbble(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

Schedule

Schedule

Friday

Note title

Note content, lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ullamcorper sem

eurucamp main sessions

18:30

Activity
19:30

Talk without Speaker
19:45

Talk with Speaker

Name One
20:30

Activity

 
<div class="schedule">
  <div class="schedule--container">
    <h1 class="schedule--main-title">
      Schedule
    </h1>
    <article id="schedule">
      <h2 class="schedule--day-title">Friday</h2>
      <h3 class="schedule--day-subtitle">Note title</h3>
      <p class="schedule--day-extra-info">
        Note content, lorem ipsum dolor sit amet, consectetur adipiscing elit.
        <a href="">Quisque id ullamcorper sem</a>
      </p>
      <h3 class="schedule--day-subtitle">eurucamp main sessions</h3>
      <table>
        <tbody>
          <tr>
            <td class="time">18:30</td>
            <td class="activity -s-60m" colspan="2" rowspan="1">
              <p class="title">Activity</p>
              <p class="speaker"></p>
            </td>
          </tr>
          <tr>
            <td class="time">19:30</td>
            <td class="talk -s-15m" colspan="2" rowspan="1">
              <p class="title">Talk without Speaker</p>
              <p class="speaker"></p>
            </td>
          </tr>
          <tr>
            <td class="time">19:45</td>
            <td class="talk -s-45m" colspan="2" rowspan="1">
              <p class="title"><a href="">Talk with Speaker</a></p>
              <p class="speaker">Name One</p>
            </td>
          </tr>
          <tr>
            <td class="time">20:30</td>
            <td class="activity -s-209m" colspan="2" rowspan="1">
              <p class="title">Activity</p>
              <p class="speaker"></p>
            </td>
          </tr>
        </tbody>
      </table>
    </article>
  </div>
</div>