DjangoCon US is a six-day international conference for the community by the community about the Django web framework, held each year in North America.
+
DjangoCon US has something for everyone, from the person who develops Django applications for a living to the person who just tinkers in their spare time. You'll discover details about a range of diverse applications that people from all over the world are building with Django, get a deeper understanding of concepts you’re already familiar with and discover new ways to use them, and have a lot of fun!
DjangoCon US is a six-day international conference for the community by the community about the Django web framework, held each year in North America.
+
DjangoCon US has something for everyone, from the person who develops Django applications for a living to the person who just tinkers in their spare time. You'll discover details about a range of diverse applications that people from all over the world are building with Django, get a deeper understanding of concepts you’re already familiar with and discover new ways to use them, and have a lot of fun!
A few lines of text. If you just want to put a photo or some text side-by-side you can use this format. This uses the standard Foundation grid. On smaller displays, the photo will be on top. You can change this by changing the order of the two .column nodes.
+
diff --git a/_includes/styleguide/styleguide-building-blocks.html b/_includes/styleguide/styleguide-building-blocks.html
new file mode 100644
index 00000000..47502f1b
--- /dev/null
+++ b/_includes/styleguide/styleguide-building-blocks.html
@@ -0,0 +1,40 @@
+
Building Blocks (Sections)
+
+
Most sections of the site consist of block-like structures. These structures follow a similar format:
+
+{% highlight html %}
+
+
+
+
+
+
{% endhighlight %}
+
+
+
+
+
+ <!-- content here (but not really) -->
+
+
+
+
+
+
By default, this doesn't do much except setup a full width grid and a single column. To learn more about the grid system, please see Foundation's docs on the Legacy Grid. However, there are a few helpful tips to keep in mind:
+
+
+
The website uses a 12 column grid
+
The maximum width (as of 2019) is 1200px.
+
Always start the column class list with .column.
+
You'll generally want to focus on small, medium, and large sizes. You can determine a column's width by using .[size]-[column-width]. So for example, .medium-6 would create a 50% wide column on medium displays.
+
If you do not define a larger size, the previous size will be used. Example: .small-12 .medium-3 results in a column that is 1/4 wide (as 1/4 of 12 columns is 3)
+
+
+
These building blocks can be themed using the classes outlined under Themed page sections. As these building blocks are meant to stack, you'll want to alternate between section themes.
+
+
You can roll your own top and bottom padding by using the following classes:
+
+
+
.v-pad-top - Handles top padding for small and large displays.
+
.v-pad-bottom - Handles bottom padding for small and large displays.
+
diff --git a/_includes/styleguide/styleguide-dates-section.html b/_includes/styleguide/styleguide-dates-section.html
new file mode 100644
index 00000000..71457aa9
--- /dev/null
+++ b/_includes/styleguide/styleguide-dates-section.html
@@ -0,0 +1,7 @@
+
Dates Section
+
+{% highlight html %}{% include styleguide/dates-example.html %}{% endhighlight %}
+
+
You can add icons in content by including them just like images. Because most icons are SVGs, they will likely expand to take up the full width available:
+
+{% highlight html %}{% include styleguide/icons-example1.html %}{% endhighlight %}
+
+
+ {% include styleguide/icons-example1.html %}
+
+
+
+
+
Sizing Icons
+
+
Big, full width icons may not be preferred. There are two ways to size icons:
+
+
+
Use the icon size classes: icon-small, icon-medium, icon-large, icon-xlarge, or icon-jumbo.
+
Put icons in the grid.
+
+
+{% highlight html %}{% include styleguide/icons-example2.html %}{% endhighlight %}
+
+
+ {% include styleguide/icons-example2.html %}
+
+
+{% highlight html %}{% include styleguide/icons-example3.html %}{% endhighlight %}
+
+
+ {% include styleguide/icons-example3.html %}
+
+
+
+
+
Icons in Content
+
+
You may wish to place an icon in or around content. Foundation provides some handy helpers for this: .float-left and .float-right. Because these use CSS floats, you'll need to wrap the float (or the container) in an element with the .clearfix class.
+
+
NOTE: Blog posts have the .clearfix class added by default.
+
+{% highlight html %}{% include styleguide/icons-example4.html %}{% endhighlight %}
+
+
+ {% include styleguide/icons-example4.html %}
+
+
+{% highlight html %}{% include styleguide/icons-example5.html %}{% endhighlight %}
+
+
+ {% for i in (1..16) %}
+ {% assign adj = "Majorly Cute,Incredibly Cuddly,Awesomely Funny,Super Friendly" | split:"," %}
+ {% assign y = i | modulo: 4 %}
+
+
+ {{ adj[y] }}
+ Animal
+
+ {% endfor %}
+
+
diff --git a/_includes/styleguide/styleguide-typography.html b/_includes/styleguide/styleguide-typography.html
new file mode 100644
index 00000000..42cd91f2
--- /dev/null
+++ b/_includes/styleguide/styleguide-typography.html
@@ -0,0 +1,9 @@
+
Typography
+
+
Foundation provides a series of typography helpers that may be useful when laying out content. These include helpers for alignment, sizing, and number formatting.
+
+{% highlight html %}{% include styleguide/typography-example.html %}{% endhighlight %}
+
+
+ {% include styleguide/typography-example.html %}
+
diff --git a/_includes/styleguide/typography-example.html b/_includes/styleguide/typography-example.html
new file mode 100644
index 00000000..ba0b7c14
--- /dev/null
+++ b/_includes/styleguide/typography-example.html
@@ -0,0 +1,24 @@
+
Heading Level 1
+
Heading Level 2
+
Heading Level 3
+
Heading Level 4
+
Heading Level 5
+
Heading Level 6
+
+
DjangoCon US has something for everyone, from the person who develops Django applications for a living to the person who just tinkers in their spare time. You'll discover details about a range of diverse applications that people from all over the world are building with Django, get a deeper understanding of concepts you’re already familiar with and discover new ways to use them, and have a lot of fun!
+
+
DjangoCon US has something for everyone, from the person who develops Django applications for a living to the person who just tinkers in their spare time. You'll discover details about a range of diverse applications that people from all over the world are building with Django, get a deeper understanding of concepts you’re already familiar with and discover new ways to use them, and have a lot of fun!
{% if page.post_photo_url %}
About This {{ page.category | capitalize
+ alt="Photo of {{ presenter.name }}" />
{% endif %}
diff --git a/_layouts/social-pic-template.html b/_layouts/social-pic-template.html
new file mode 100644
index 00000000..79f74490
--- /dev/null
+++ b/_layouts/social-pic-template.html
@@ -0,0 +1,62 @@
+---
+layout: base-screenshot
+---
+
+{% comment %}
+ You can change `tint-brand-color5` to any of the tints as shown here:
+
+ https://2019.djangocon.us/styleguide/#photo-hero-section
+
+ Note that the effect is lessened here to match DjangoCon US Twitter history.
+{% endcomment %}
+
+{% comment %}
+ You can modify the contents of this document by using query string parameters:
+
+ ?tint=tint-brand-color1&text=Howdy+DjangoCon+Attendees!&img=/static/img/full-crowd.jpg&type=alt
+
+ This will update the text, tint, image, and use an alternative font.
+{% endcomment %}
+
This is a text+icon section, of sorts. It's a way to break up lengthy copy with either an image or icon to the right.
+
+
At this point on the page you should be outlining major points or features about the conference and really getting into the meat of the storytelling. Live, laugh, love, all that. Since this page shouldn't feature a ton of copy, this is really your chance to set things up.
+
+
This area can be quite long. No more than 3 paragraphs though, all about 3-5 sentences. Everything else after this is catered to a specific audience type. That could be:
+
+
+
People who want pictures.
+
Folks getting a feel for conference topics.
+
Sponsors looking for themselves, competitors, or to get a feel for the caliber of sponsor.
+
+
+
But generally you don't want to end on a list.
+
+
+
+ {% comment %}
+ Main graphic/icon for the year. e.g. for 2018, the crab. 2019, the boat.
+ {% endcomment %}
+
+
+
+
+
+
+ {% comment %}
+ TODO: This could be not-bad.
+
+ NOTE: Limit applied for staging purposes only.
+
+ Uses an alternative grid to mix things up a bit.
+ {% endcomment %}
+
+
+
Awesome Talks and Tutorials
+
We featured over 60 talks & tutorials this year. Here's some crowd favorites!
It is very likely that we will want to feature some sort of table or data element. Perhaps this is survey results, or a pie chart of swag selection, etc.
+
On mobile this will stack. You will want two paragraphs here, even if the second one is sort of short. The lead class is optional, too.
+
+
+
+
+
+
+
+
T-Shirts Eaten
+
OMG What?
+
+
+
+
+
Small
+
Seriously
+
+
+
Medium
+
People
+
+
+
Large
+
Ate...
+
+
+
X-Large
+
The shirts?
+
+
+
+
You could also put an image here, no problem!
+
+
+
+
+
+
+
And remember...
+
Under the hood it's all just a grid system. So you can just add a new row if you want to associate more text with this block. Easy peasy, lemon squeezy.
+
+
+
+
+
+
+
Lots of Photos
+
We took a total over 300 photos this year. Here are some of our favorites. What were some of your favorite moments this year?
It is very likely that we will want to feature some sort of table or data element. Perhaps this is survey results, or a pie chart of swag selection, etc.
+
On mobile this will stack. You will want two paragraphs here, even if the second one is sort of short. The lead class is optional, too.
+
+
+
+
+
+
+
+
T-Shirts Eaten
+
OMG What?
+
+
+
+
+
Small
+
Seriously
+
+
+
Medium
+
People
+
+
+
Large
+
Ate...
+
+
+
X-Large
+
The shirts?
+
+
+
+
You could also put an image here, no problem!
+
+
+
+
+
+
+
And remember...
+
Under the hood it's all just a grid system. So you can just add a new row if you want to associate more text with this block. Easy peasy, lemon squeezy.
+
+
+
+
+
+
+
+
DjangoCon 2019 is possible through lots of :heart:
+
Sed convallis laoreet elit quis rutrum. Sed fringilla posuere posuere. Curabitur placerat et enim nec commodo. In vehicula nulla vitae odio mattis aliquet.
+
+
+
+ {% for organizer in site.organizers %}
+ {% unless organizer.hidden %}
+
diff --git a/_includes/styleguide/icons-example2.html b/_includes/styleguide/icons-example2.html
new file mode 100644
index 00000000..56248f57
--- /dev/null
+++ b/_includes/styleguide/icons-example2.html
@@ -0,0 +1,24 @@
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+