Introduction

The DjangoCon US 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

  • Brand Color 1
    #140A44
  • Brand Color 2
    #E47048
  • Brand Color 3
    #4975C3
  • Brand Color 4
    #766591
  • Brand Color 5
    #FDCA85
  • Brand Color 6
    #A1CCE4
  • Light Gray
    #F7F8F9
  • Medium Gray
    #E9E9E9
  • Dark Gray
    #CACACA
  • Black
    #191919

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-brand-color1">
  <h2 class="text-center">Headline</h2>
  <p class="text-center">This section has `theme-brand-color1` applied.</p>
</section>
<section class="section-pad theme-brand-color3">
  <h2 class="text-center">Headline</h2>
  <p class="text-center">This section has `theme-brand-color2` applied.</p>
</section>
<section class="section-pad theme-brand-color2">
  <h2 class="text-center">Headline</h2>
  <p class="text-center">This section has `theme-brand-color3` applied.</p>
</section>
<section class="section-pad theme-brand-color4">
  <h2 class="text-center">Headline</h2>
  <p class="text-center">This section has `theme-brand-color4` applied.</p>
</section>
<section class="section-pad theme-brand-color5">
  <h2 class="text-center">Headline</h2>
  <p class="text-center">This section has `theme-brand-color5` applied.</p>
</section>
<section class="section-pad theme-brand-color6">
  <h2 class="text-center">Headline</h2>
  <p class="text-center">This section has `theme-brand-color6` 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-brand-color1` applied.

Headline

This section has `theme-brand-color2` applied.

Headline

This section has `theme-brand-color3` applied.

Headline

This section has `theme-brand-color4` applied.

Headline

This section has `theme-brand-color5` applied.

Headline

This section has `theme-brand-color6` 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-brand-color1">. 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-brand-color3">
      <svg class="heart-icon card-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 111.53 93.2" aria-hidden="true">
        <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-brand-color2">
      <svg class="talk-icon card-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 114.51 89.45" aria-hidden="true">
        <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-brand-color5">
      <svg class="aid-icon card-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96.43 96.43" aria-hidden="true">
        <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 an Opportunity Grant</h3>
        <p>Please apply if you are a member of an underrepresented group and you won’t be able to attend DjangoCon US without financial help. </p>
      </div>
    </div>
  </div>
</div>

Code of Conduct

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

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.

Apply for an Opportunity Grant

Please apply if you are a member 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-brand-color1 icon-right">
        <svg class="card-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 83 101" aria-hidden="true">
          <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-brand-color2 icon-right">
        <svg class="card-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97 85.09" aria-hidden="true">
          <defs>
            <style>
              .cls-1 {
                fill: #231f20;
              }
            </style>
          </defs>
          <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-brand-color3 icon-left">
        <svg class="card-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 83 101" aria-hidden="true">
          <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-brand-color5 icon-left">
        <svg class="card-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97 85.09" aria-hidden="true">
          <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

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.

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

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.

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-brand-color3" 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">Join Rory. Buy your ticket</a>
    </div>

  </div>
</section>

<section class="photo-hero tint-brand-color5" 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">Join Rory. Buy your ticket</a>
    </div>

  </div>
</section>

<section class="photo-hero tint-brand-color1" 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">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.

<div class="row organizers">
  <div class="column medium-4 large-3 small-6">
    <div class="profile">
      <img class="thumbnail" data-interchange="[https://placehold.co/600x600, small], [https://placehold.co/400x400, 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 medium-4 large-3 small-6">
    <div class="profile">
      <img class="thumbnail" data-interchange="[https://placehold.co/600x600, small], [https://placehold.co/400x400, 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 medium-4 large-3 small-6">
    <div class="profile">
      <img class="thumbnail" data-interchange="[https://placehold.co/600x600, small], [https://placehold.co/400x400, 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 medium-4 large-3 small-6">
    <div class="profile">
      <img class="thumbnail" data-interchange="[https://placehold.co/600x600, small], [https://placehold.co/400x400, 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>
  </div>
</div>

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.