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
- Lilita One - Typeface for logo
- Rubik - Used for headings
- Karla - Used in body copy throughout website
Color guide
- Brand Color 1
#E99C56 - Brand Color 2
#430632 - Brand Color 3
#044059 - Brand Color 4
#A9CAD0 - Brand Color 5
#C73B3D - Brand Color 6
#5F082B - Light Gray
#F7F8F9 - Medium Gray
#E9E9E9 - Dark Gray
#CACACA - Black
#191919
Logo files
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-brand-color7">
<h2 class="text-center">Headline</h2>
<p class="text-center">This section has `theme-brand-color7` applied.</p>
</section>
<section class="section-pad theme-brand-color8">
<h2 class="text-center">Headline</h2>
<p class="text-center">This section has `theme-brand-color8` 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-brand-color7` applied.
Headline
This section has `theme-brand-color8` 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">
<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-brand-color2">
<svg class="talk-icon card-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 114.51 89.45">
<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-brand-color5">
<svg class="aid-icon card-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96.43 96.43">
<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 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">
<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-brand-color2 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-brand-color3 icon-left">
<svg class="card-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 83 101">
<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-brand-color5 icon-left">
<svg class="card-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97 85.09">
<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
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 Search
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.
Job Search
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 hollow theme-brand-color4">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 hollow theme-brand-color8">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 hollow theme-brand-color3">Join Rory. Buy your ticket</a>
</div>
</div>
</section>
Join Rory. Buy your ticketThe 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 ticketThe 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 ticketThe 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
Profile card
This module is used for Organizers.
<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>
</div>
</div>