Designing your application with Zurb Foundation

To design our application we will use the zurb foundation framework, specifically “Foundation for Sites“

The CSS Version

The simplest and fastest way to get started is to install the CSS version of foundation. It is available at http://foundation.zurb.com/sites/download/ and you can do basic cusomizations before downloading it.

The SCSS Version

We will install the sass version of Foudation. The advantage is that you will get some more power over the design process with variables and function-like adapters in your css code.

For this we will need some more packages for the scaffolding:

First install node. Node and git can be obtained from their web sites (for windows users) as binary install files or they can be installed through the package managers (for linux/mac user)

After installing these 2 packages, cd into the ‘static’ directory and run the following in a shell:

(sudo) npm install -g foundation-cli
foundation new foundation

cd into the “foundation” folder which was just created and run:

foundation watch

Duplicate the “index.html” file and name it to “base.html”. Delete all the content between the “body” tag with the exception for the javascripts at the bottom.

“index.html”:

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation for Sites</title>
    <link rel="stylesheet" href="css/app.css">
  </head>
  <body>


    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/what-input/what-input.js"></script>
    <script src="bower_components/foundation-sites/dist/foundation.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

Below the body tag add the following code:

<div class="row">
<div class="large-12 columns header">
    Logo and central links
    </div>
</div>
<div class="row">
    <div class="small-6 large-3 columns nav">
        Navigation
    </div>
    <div class="small-12 large-6 columns content">
        Content
    </div>
    <div class="small-6 large-3 columns sidebar">
        Sidebar
    </div>
</div>
<div class="row">
    <div class="large-12 columns footer">
        Footer
    </div>
</div>

Open ‘scss/app.scss’ and add the following:

.header, .nav, .content, .footer, .sidebar {
  padding: 2rem;
}

.header {
  background-color: $primary-color;
  color: $white;
}

.content {
  background-color: $light-gray;
}

.nav, .sidebar {
  //background-color: desaturate($secondary-color, 80%);
  background-color: $white;
}

.footer {
  background-color: $secondary-color;
}

Add a new file in the ‘scss’ folder named “_uoft_themes.scss”.

scss/_uoft_themes.scss:

/* University of Toronto Color Palettes as described in
http://universityrelations.utoronto.ca/sc/u-of-t-branding/
*/

$uoft-official-colour-blue: rgba(0, 42, 92, 1); // #002A5C
$uoft-official-colour-white: rgba(255, 255, 255, 1);

// UofT Secondary colors
$uoft-secondary-colour-yellow: rgba(255, 228, 152, 1); // #FFE498
$uoft-secondary-colour-red: rgba(227, 24, 55, 1); // #E31837
$uoft-secondary-colour-blue: rgba(0, 139, 176, 1); // #008BB0
$uoft-secondary-colour-black: rgba(39, 17, 0, 1); // #271100

// UofT Accent colors
$uoft-accent-colour-blue: rgba(123, 164, 217, 1); // #7BA4D9
$uoft-accent-colour-grey: rgba(206, 207, 203, 1); // #CECFCB
$uoft-accent-colour-pink: rgba(234, 202, 205, 1); // #EACACD
$uoft-accent-colour-green: rgba(218, 229, 205, 1); // #DAE5CD

// Palettes used in the uoft style guide

// UofT Vibrant palette
$uoft-vibrant-yellow: $uoft-secondary-colour-yellow;
$uoft-vibrant-blue: $uoft-secondary-colour-blue;
$uoft-vibrant-red: $uoft-secondary-colour-red;

// UofT Cool palette
$uoft-cool-accentblue: $uoft-accent-colour-blue;
$uoft-cool-secondaryblue: $uoft-secondary-colour-blue;
$uoft-cool-accentgreen: $uoft-accent-colour-green;

// UofT Awards palette
$uoft-awards-palette-bronze: rgba(61, 48, 40, 0.7); // #3D3028
$uoft-awards-palette-silver: $uoft-accent-colour-grey;
$uoft-awards-palette-gold: $uoft-secondary-colour-yellow;

Now import the ‘_uoft_themes.scss’ content into your app. Open ‘scss/app.scss’ and enter the following line just below “@import ‘settings’;”.

scss/app.scss:

[...]
@import 'uoft_themes';
@import 'settings';
[...]

In the ‘_settings.scss’ look for the $foundation-palette variable and replace the “primary” and “secondary” entries as follows:

scss/_settings.scss:

$foundation-palette: (
            primary: $uoft-official-colour-blue,
            secondary: $uoft-secondary-colour-blue,
            success: #3adb76,
            warning: #ffae00,
            alert: #ec5840,
    );

Integrate foundation with django

Note: Two fixes need to be done to serve the static folder content.

In “someproj/settings.py” replace:

# STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)

In “someproj/urls.py” add the followoing import:

from django.conf.urls.static import static

Copy ‘static/foundation/base.html’ to ‘template/base.html’ and add the missing content block in the ‘content’ section:

{% block content %}
    Content
{% endblock content %}

Load the staticfiles dir into the html code:

{% load staticfiles %}

Replace the css with the following:

<link rel="stylesheet" href="{% static 'foundation/css/app.css' %}">

Replace the javascript with the following:

<script src="{% static 'foundation/bower_components/jquery/dist/jquery.js' %}"></script>
<script src="{% static 'foundation/bower_components/what-input/what-input.js' %}"></script>
<script src="{% static 'foundation/bower_components/foundation-sites/dist/foundation.js' %}"></script>
<script src="{% static 'foundation/js/app.js' %}"></script>

Let’s add some navigation to the app. In the navigation section add the following:

templates/base.html:

{% block navigation %}
       <ul class="menu vertical">
           <li><a href="{% url 'inventory:home' %}">Inventory</a></li>
           <li><a href="{% url 'inventory:machine-list' %}">Machines</a>
           </li>
       </ul>
   {% endblock navigation %}

Let’s improve the listing of machines. Replace the content block with the following code:

inventory/templates/inventory/machine_list.html:

<h1>Machines Inventory</h1>


 {% for machine in object_list %}
     <div class="row machine">
         <div class="large-12 columns">
             <h2>{{ machine.name }}
                 <small>{{ machine.ip }}</small></h2>
         </div>
         <div class="small-6 medium-4 large-3 columns">
             <span class="label secondary">notes</span>
         </div>
         <div class="small-6 medium-8 large-9 columns">
             {{ machine.notes }}
         </div>
     </div>
     <div class="row">
         <div class="small-6 medium-4 large-3 columns">
             <span class="label secondary">price</span>
         </div>
         <div class="small-6 medium-8 large-9 columns">
             ${{ machine.price.price }},
             {{ machine.price.name }}
         </div>
     </div>
     <div class="row">
         <div class="small-6 medium-4 large-3 columns">
             <span class="label secondary">owner</span>
         </div>
         <div class="small-6 medium-8 large-9 columns">
         <ul class="no-bullet">
             {% for owner in machine.owner.all %}
                 <li>{{ owner }}</li>
             {% endfor %}
         </ul>

         </div>
     </div>
     <div class="row">
         <div class="small-6 large-8 columns"></div>
         <div class="small-6 large-4 columns">
             <a class="button"
                href="{% url 'inventory:machine-detail' machine.pk %}">
                 {{ machine.name }} details
             </a>
         </div>
     </div>
 {% endfor %}
 </ul>