Introduction

The DjangoCon website was built using several Open Source technologies. Below is a list of the most important packages, with their respective documentation.

Branding Guidelines

The DjangoCon.us brand uses the official Django brand as a base. A case could be made for a designer to change the colors and positioning of the date and location from year-to-year. However, the goal with this logo is to highlight the casual, friendly, professional atmosphere of the conference and can be used for subsequent years with minimal alterations.

Typefaces

Color guide

  • Eminence
    #6D0F84
  • Orchid
    #B52BC9
  • shakespeare
    #05B4DD
  • Viking
    #07C8E8
  • Willow
    #B7DB53
  • Violet Red
    #EA5397
  • Sienna
    #FC7E56
  • Festival
    #F9CC12
  • Yellow
    #FFE363
  • Light Gray
    #F7F8F9
  • Medium Gray
    #E9E9E9
  • Dark Gray
    #CACACA
  • Black
    #191919

Logo files

Download all brand files

DjangoCon US Logo
DjangoCon US Logo in Black
DjangoCon US Favicon
DjangoCon US Favicon in Black
Crab pinching an umbrella
Crab pinching an umbrella in black

Themed page sections

Themes can be applied to page sections using the color palette provided in the _settings.scss file. Elements with the theme-[color] class applied will be styled with the appropriate background color, and default colors will be applied to the text within.

<section class="section-pad theme-eminence">
    <h2 class="text-center">Headline</h2>
    <p class="text-center">This section has `theme-eminence` applied.</p>
</section>
<section class="section-pad theme-orchid">
  <h2 class="text-center">Headline</h2>
  <p class="text-center">This section has `theme-orchid` applied.</p>
</section>
<section class="section-pad theme-shakespeare">
  <h2 class="text-center">Headline</h2>
  <p class="text-center">This section has `theme-shakespeare` applied.</p>
</section>
<section class="section-pad theme-viking">
  <h2 class="text-center">Headline</h2>
  <p class="text-center">This section has `theme-viking` applied.</p>
</section>
<section class="section-pad theme-willow">
  <h2 class="text-center">Headline</h2>
  <p class="text-center">This section has `theme-willow` applied.</p>
</section>
<section class="section-pad theme-violetred">
  <h2 class="text-center">Headline</h2>
  <p class="text-center">This section has `theme-violetred` applied.</p>
</section>
<section class="section-pad theme-sienna">
  <h2 class="text-center">Headline</h2>
  <p class="text-center">This section has `theme-sienna` applied.</p>
</section>
<section class="section-pad theme-festival">
  <h2 class="text-center">Headline</h2>
  <p class="text-center">This section has `theme-festival` applied.</p>
</section>
<section class="section-pad theme-yellow">
  <h2 class="text-center">Headline</h2>
  <p class="text-center">This section has `theme-yellow` applied.</p>
</section>
<section class="section-pad theme-light-gray">
  <h2 class="text-center">Headline</h2>
  <p class="text-center">This section has `theme-light-gray` applied.</p>
</section>
<section class="section-pad theme-medium-gray">
  <h2 class="text-center">Headline</h2>
  <p class="text-center">This section has `theme-medium-gray` applied.</p>
</section>
<section class="section-pad theme-dark-gray">
  <h2 class="text-center">Headline</h2>
  <p class="text-center">This section has `theme-dark-gray` applied.</p>
</section>
<section class="section-pad theme-black">
  <h2 class="text-center">Headline</h2>
  <p class="text-center">This section has `theme-black` applied.</p>
</section>

Headline

This section has `theme-eminence` applied.

Headline

This section has `theme-orchid` applied.

Headline

This section has `theme-shakespeare` applied.

Headline

This section has `theme-viking` applied.

Headline

This section has `theme-willow` applied.

Headline

This section has `theme-violetred` applied.

Headline

This section has `theme-sienna` applied.

Headline

This section has `theme-festival` applied.

Headline

This section has `theme-yellow` applied.

Headline

This section has `theme-light-gray` applied.

Headline

This section has `theme-medium-gray` applied.

Headline

This section has `theme-dark-gray` applied.

Headline

This section has `theme-black` applied.

Card themes

The following pattern can be used with an icon or without. Themes may be applied to individual cards with the named colors listed in _settings.scss using the class name pattern here: <div class="card card-theme-eminence">. SVG icons in these tiles will inherit the color of the card theme if there is no fill specified in the SVG file itself.

  <div class="row card-row">
    <div class="medium-4 column">
      <div class="card card-theme-teal">
        <svg class="heart-icon card-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 111.53 93.2"><defs><style>.cls-1{fill:#231f20;}</style></defs><title>heart</title><g id="Layer_2" data-name="Layer 2"><g id="callouts"><path class="cls-1" d="M55.77,93.2a5,5,0,0,1-2.24-.53C51.34,91.58,0,65.52,0,31.79,0,12.48,12.48,0,31.79,0,44,0,51.53,5.62,55.77,10.6,60,5.62,67.49,0,79.74,0c19.31,0,31.79,12.48,31.79,31.79,0,33.73-51.34,59.79-53.53,60.88A5,5,0,0,1,55.77,93.2ZM31.79,10C25.24,10,10,12.12,10,31.79c0,21.72,31.12,42.92,45.74,50.76a157.58,157.58,0,0,0,22.4-14.92C88.81,59,101.53,45.8,101.53,31.79,101.53,12.12,86.29,10,79.74,10,65,10,60.49,21.54,60.44,21.65a5,5,0,0,1-9.35,0C50.91,21.21,46.28,10,31.79,10Z"/></g></g></svg>
        <div class="card-section">
          <h3 class="card-title">Code of Conduct</h3>
          <p>We’re committed to providing a safe and friendly environment for everyone to learn, meet, and enjoy the conference.</p>
      </div>
      </div>
    </div>
    <div class="medium-4 column">
      <div class="card card-theme-light-green">
        <svg class="talk-icon card-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 114.51 89.45"><defs><style>.cls-1{fill:#231f20;}</style></defs><title>talk</title><g id="Layer_2" data-name="Layer 2"><g id="callouts"><path class="cls-1" d="M10.5,89.45a5,5,0,0,1-4.81-6.36L10,67.71C3.46,60.51,0,52.09,0,43.2,0,19.38,25.68,0,57.25,0s57.25,19.38,57.25,43.2S88.82,86.4,57.25,86.4a74.77,74.77,0,0,1-18.16-2.2L11.42,89.37A5,5,0,0,1,10.5,89.45ZM57.25,10C31.2,10,10,24.89,10,43.2c0,7,3.15,13.76,9.1,19.49a5,5,0,0,1,1.35,5L17.5,78.06l20.85-3.9a5,5,0,0,1,2.21.08A64.48,64.48,0,0,0,57.25,76.4c26.06,0,47.25-14.89,47.25-33.2S83.31,10,57.25,10Z"/></g></g></svg>
        <div class="card-section">
          <h3 class="card-title">Help with your talk</h3>
          <p>Speaker mentors are available to help you give you best talk ever. We’ve also provided templates, tips & tricks, and more to help you wow the room. </p>
        </div>
      </div>
    </div>
    <div class="medium-4 column">
      <div class="card card-theme-green">
        <svg class="aid-icon card-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96.43 96.43"><defs><style>.cls-1{fill:#231f20;}</style></defs><title>aid</title><g id="Layer_2" data-name="Layer 2"><g id="callouts"><path class="cls-1" d="M37.8,66.48A3,3,0,0,1,36,64V62.68a1.19,1.19,0,0,1,1.31-1.25,1.63,1.63,0,0,1,1.06.31,17.17,17.17,0,0,0,9.78,3.18c3.24,0,7.29-1.74,7.29-7,0-4.49-2.55-6.3-8.29-8.17-4.55-1.49-10.22-4.3-10.22-11.22,0-5.67,4-9.54,9.47-10.22V24.91a1.15,1.15,0,0,1,1.18-1.18h1.5a1.15,1.15,0,0,1,1.18,1.18v3.3a15,15,0,0,1,6.92,2.24A2.77,2.77,0,0,1,58.93,33v1.5a1.11,1.11,0,0,1-1.18,1.18,2.11,2.11,0,0,1-1.06-.31c-1.56-.87-3.24-3.24-8.1-3.24-4.11,0-7,2-7,6.42,0,3.55,2.62,5.67,7,7.17,6.17,2.12,11.53,4.11,11.53,12.09,0,6.3-4.24,10.16-9.85,11v3.37a1.15,1.15,0,0,1-1.18,1.18h-1.5a1.15,1.15,0,0,1-1.18-1.18v-3.3A20,20,0,0,1,37.8,66.48Z"/><path class="cls-1" d="M48.22,96.43A48.22,48.22,0,1,1,96.43,48.22,48.27,48.27,0,0,1,48.22,96.43Zm0-86.43A38.22,38.22,0,1,0,86.43,48.22,38.26,38.26,0,0,0,48.22,10Z"/></g></g></svg>
        <div class="card-section">
          <h3 class="card-title">Apply for Financial Aid</h3>
          <p>Please apply if you area  amember of an underrepresented group and you won’t be able to attend DjangoCon US without financial help. </p>
        </div>
      </div>
    </div>
  </div>
heart

Code of Conduct

We’re committed to providing a safe and friendly environment for everyone to learn, meet, and enjoy the conference.

talk

Help with your talk

Speaker mentors are available to help you give you best talk ever. We’ve also provided templates, tips & tricks, and more to help you wow the room.

aid

Apply for Financial Aid

Please apply if you area amember of an underrepresented group and you won’t be able to attend DjangoCon US without financial help.

Right and Left options.

In addition, cards have additional modifier classes for when the icon should be displayed to the left or right. This CSS pattern uses flexbox with a float-based fallback. To enable this option, add .icon-right or .icon-left to the .card element.

  <section class="section-pad">
    <div class="row card-row">
      <div class="medium-6 column">
        <div class="card card-theme-teal icon-right">
          <svg class="card-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 83 101"><defs><style>.cls-1{fill:#231f20;}</style></defs><title>program</title><g id="Layer_2" data-name="Layer 2"><g id="callouts"><path class="cls-1" d="M78,101H5a5,5,0,0,1-5-5V5A5,5,0,0,1,5,0H78a5,5,0,0,1,5,5V96A5,5,0,0,1,78,101ZM10,91H73V10H10Z"/><path class="cls-1" d="M62,28H22a5,5,0,0,1,0-10H62a5,5,0,0,1,0,10Z"/><path class="cls-1" d="M61.5,46h-40a5,5,0,0,1,0-10h40a5,5,0,0,1,0,10Z"/><path class="cls-1" d="M61.5,64h-40a5,5,0,0,1,0-10h40a5,5,0,0,1,0,10Z"/><path class="cls-1" d="M62,82H22a5,5,0,0,1,0-10H62a5,5,0,0,1,0,10Z"/></g></g></svg>
          <div class="card-section">
            <h3 class="card-title" id="program">Program</h3>
            <p>The DjangoCon US program features both novice talks for people just starting their journey into the world of development, as well as advanced talks for experienced developers.</p>
          </div>
        </div>
      </div>
      <div class="medium-6 column">
        <div class="card card-theme-light-green icon-right">
          <svg class="card-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97 85.09"><defs><style>.cls-1{fill:#231f20;}</style></defs><title>job</title><g id="Layer_2" data-name="Layer 2"><g id="callouts"><path class="cls-1" d="M92,20.09H70.9a5,5,0,0,0,.1-1V5a5,5,0,0,0-5-5H31a5,5,0,0,0-5,5V19.09a5,5,0,0,0,.1,1H5a5,5,0,0,0-5,5v55a5,5,0,0,0,5,5H92a5,5,0,0,0,5-5v-55A5,5,0,0,0,92,20.09Zm-56-1V10H61v9.09a5,5,0,0,0,.1,1H35.9A5,5,0,0,0,36,19.09Zm51,56H10v-45H87Z"/></g></g></svg>
          <div class="card-section">
            <h3 class="card-title" id="job-search">Job Search</h3>
            <p>We’ll have boards available so you can let people know if you’re recruiting new team members, or looking for a new position yourself!</p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="section-pad">
    <div class="row card-row">
      <div class="medium-6 column">
        <div class="card card-theme-teal icon-left">
          <svg class="card-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 83 101"><defs><style>.cls-1{fill:#231f20;}</style></defs><title>program</title><g id="Layer_2" data-name="Layer 2"><g id="callouts"><path class="cls-1" d="M78,101H5a5,5,0,0,1-5-5V5A5,5,0,0,1,5,0H78a5,5,0,0,1,5,5V96A5,5,0,0,1,78,101ZM10,91H73V10H10Z"/><path class="cls-1" d="M62,28H22a5,5,0,0,1,0-10H62a5,5,0,0,1,0,10Z"/><path class="cls-1" d="M61.5,46h-40a5,5,0,0,1,0-10h40a5,5,0,0,1,0,10Z"/><path class="cls-1" d="M61.5,64h-40a5,5,0,0,1,0-10h40a5,5,0,0,1,0,10Z"/><path class="cls-1" d="M62,82H22a5,5,0,0,1,0-10H62a5,5,0,0,1,0,10Z"/></g></g></svg>
          <div class="card-section">
            <h3 class="card-title" id="program">Program</h3>
            <p>The DjangoCon US program features both novice talks for people just starting their journey into the world of development, as well as advanced talks for experienced developers.</p>
          </div>
        </div>
      </div>
      <div class="medium-6 column">
        <div class="card card-theme-light-green icon-left">
          <svg class="card-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97 85.09"><defs><style>.cls-1{fill:#231f20;}</style></defs><title>job</title><g id="Layer_2" data-name="Layer 2"><g id="callouts"><path class="cls-1" d="M92,20.09H70.9a5,5,0,0,0,.1-1V5a5,5,0,0,0-5-5H31a5,5,0,0,0-5,5V19.09a5,5,0,0,0,.1,1H5a5,5,0,0,0-5,5v55a5,5,0,0,0,5,5H92a5,5,0,0,0,5-5v-55A5,5,0,0,0,92,20.09Zm-56-1V10H61v9.09a5,5,0,0,0,.1,1H35.9A5,5,0,0,0,36,19.09Zm51,56H10v-45H87Z"/></g></g></svg>
          <div class="card-section">
            <h3 class="card-title" id="job-search">Job Search</h3>
            <p>We’ll have boards available so you can let people know if you’re recruiting new team members, or looking for a new position yourself!</p>
          </div>
        </div>
      </div>
    </div>
  </section>
program

Program

The DjangoCon US program features both novice talks for people just starting their journey into the world of development, as well as advanced talks for experienced developers.

job

We’ll have boards available so you can let people know if you’re recruiting new team members, or looking for a new position yourself!

program

Program

The DjangoCon US program features both novice talks for people just starting their journey into the world of development, as well as advanced talks for experienced developers.

job

We’ll have boards available so you can let people know if you’re recruiting new team members, or looking for a new position yourself!

Photo hero section

This module will display a background image behind text on large displays and an image above text on smaller displays. Tints can be applied to the large-display background image with the class .tint-[color] on the main .photo hero element. The text can be positioned at the left, right, or center by changing the classes of its parent element. (See _layouts/home.html for an example of how these settings can be applied and changed using Jekyll metadata in the markdown files.)

  <section
    class="photo-hero tint-eminence"
    data-interchange="[/static/img/home-testimonial.jpg, medium]"
    >
    <img class="hide-for-medium" src="/static/img/home-testimonial-mobile.jpg">
    <div class="row hero-content">
      <div class="column medium-6">
      <blockquote>
        <p>The talks at DjangoCon US have always been of high quality. That’s why we send our devs every year. The insights gained have helped us build better software at PonyCorp.</p>
        <cite>Rory McHenry<br>
          Director, Application Development PonyCorp
        </cite>
      </blockquote>
      <a href="#TODO" class="button hollow theme-willow">Join Rory. Buy your ticket</a>
    </div>

    </div>
  </section>

<hr>

  <section
    class="photo-hero tint-orchid"
    data-interchange="[/static/img/about.jpg, medium]"
    >
    <img class="hide-for-medium" src="/static/img/about-mobile.jpg">
    <div class="row hero-content">
      <div class="column medium-8 medium-centered">
      <blockquote>
        <p>The talks at DjangoCon US have always been of high quality. That’s why we send our devs every year. The insights gained have helped us build better software at PonyCorp.</p>
        <cite>Rory McHenry<br>
          Director, Application Development PonyCorp
        </cite>
      </blockquote>
      <a href="#TODO" class="button hollow theme-yellow">Join Rory. Buy your ticket</a>
    </div>

    </div>
  </section>

  <hr>

  <section
    class="photo-hero tint-eminence"
    data-interchange="[/static/img/crowd.jpg, medium]"
    >
    <img class="hide-for-medium" src="/static/img/crowd-mobile.jpg">
    <div class="row hero-content">
      <div class="column medium-6 medium-offset-6">
      <blockquote>
        <p>The talks at DjangoCon US have always been of high quality. That’s why we send our devs every year. The insights gained have helped us build better software at PonyCorp.</p>
        <cite>Rory McHenry<br>
          Director, Application Development PonyCorp
        </cite>
      </blockquote>
      <a href="#TODO" class="button hollow theme-festival">Join Rory. Buy your ticket</a>
    </div>

    </div>
  </section>

The talks at DjangoCon US have always been of high quality. That’s why we send our devs every year. The insights gained have helped us build better software at PonyCorp.

Rory McHenry
Director, Application Development PonyCorp
Join Rory. Buy your ticket

The talks at DjangoCon US have always been of high quality. That’s why we send our devs every year. The insights gained have helped us build better software at PonyCorp.

Rory McHenry
Director, Application Development PonyCorp
Join Rory. Buy your ticket

The talks at DjangoCon US have always been of high quality. That’s why we send our devs every year. The insights gained have helped us build better software at PonyCorp.

Rory McHenry
Director, Application Development PonyCorp
Join Rory. Buy your ticket

Profile card

This module is used for Organizers and Speakers.

  <div class="row organizers">
    <div class="column small-6 medium-4 large-3">
      <div class="profile">
        <img class="thumbnail" data-interchange="[https://placem.at/people?w=600&h=600, small], [https://placem.at/people?w=400&h=400, medium]">
        <div>
          <h4>Jane Doe</h4>
          <p>This is what Jane does.</p>
        </div>
        <ul class="social-icons">
          <li>
            <a class="twitter" href="https://twitter.com/djangocon" target="_blank">
              <svg class="twitter-icon"><use xlink:href="#twitter-icon"></use></svg>
            </a>
          </li>
          <li>
            <a class="github" href="https://github.com/djangocon/" target="_blank">
              <svg class="social-icon"><use xlink:href="#github-icon"></use></svg>
            </a>
          </li>
        </ul>
      </div><!--/.profile -->
    </div><!--/.column -->
    <div class="column small-6 medium-4 large-3">
      <div class="profile">
        <img class="thumbnail" data-interchange="[https://placem.at/people?w=600&h=600, small], [https://placem.at/people?w=400&h=400, medium]">
        <div>
          <h4>Jane Doe</h4>
          <p>This is what Jane does.</p>
        </div>
        <ul class="social-icons">
          <li>
            <a class="twitter" href="https://twitter.com/djangocon" target="_blank">
              <svg class="twitter-icon"><use xlink:href="#twitter-icon"></use></svg>
            </a>
          </li>
          <li>
            <a class="github" href="https://github.com/djangocon/" target="_blank">
              <svg class="social-icon"><use xlink:href="#github-icon"></use></svg>
            </a>
          </li>
        </ul>
      </div><!--/.profile -->
    </div><!--/.column -->
    <div class="column small-6 medium-4 large-3">
      <div class="profile">
        <img class="thumbnail" data-interchange="[https://placem.at/people?w=600&h=600, small], [https://placem.at/people?w=400&h=400, medium]">
        <div>
          <h4>Jane Doe</h4>
          <p>This is what Jane does.</p>
        </div>
        <ul class="social-icons">
          <li>
            <a class="twitter" href="https://twitter.com/djangocon" target="_blank">
              <svg class="twitter-icon"><use xlink:href="#twitter-icon"></use></svg>
            </a>
          </li>
          <li>
            <a class="github" href="https://github.com/djangocon/" target="_blank">
              <svg class="social-icon"><use xlink:href="#github-icon"></use></svg>
            </a>
          </li>
        </ul>
      </div><!--/.profile -->
    </div><!--/.column -->
    <div class="column small-6 medium-4 large-3">
      <div class="profile">
        <img class="thumbnail" data-interchange="[https://placem.at/people?w=600&h=600, small], [https://placem.at/people?w=400&h=400, medium]">
        <div>
          <h4>Jane Doe</h4>
          <p>This is what Jane does.</p>
        </div>
        <ul class="social-icons">
          <li>
            <a class="twitter" href="https://twitter.com/djangocon" target="_blank">
              <svg class="twitter-icon"><use xlink:href="#twitter-icon"></use></svg>
            </a>
          </li>
          <li>
            <a class="github" href="https://github.com/djangocon/" target="_blank">
              <svg class="social-icon"><use xlink:href="#github-icon"></use></svg>
            </a>
          </li>
        </ul>
      </div><!--/.profile -->
    </div><!--/.column -->
  </div><!--/.row -->

Jane Doe

This is what Jane does.

Jane Doe

This is what Jane does.

Jane Doe

This is what Jane does.

Jane Doe

This is what Jane does.