Designing your application with Zurb Foundation
===============================================
To design our application we will use the zurb foundation framework, specifically "`Foundation for Sites`_"
.. _Foundation for Sites: http://foundation.zurb.com/sites/docs/
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.
.. _http://foundation.zurb.com/sites/download/: http://foundation.zurb.com/sites/download/
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:
- node and npm: info and download at `https://nodejs.org`_
- git: info and download at `https://git-scm.com/`_
.. _https://nodejs.org: https://nodejs.org
.. _https://git-scm.com/: https://git-scm.com/
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"*::
Foundation for Sites
Below the body tag add the following code::
Logo and central links
Navigation
Content
Sidebar
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::
Replace the javascript with the following::
Let's add some navigation to the app. In the navigation section add the following:
*templates/base.html*::
{% block navigation %}
{% endblock navigation %}
Let's improve the listing of machines. Replace the content block with the following code:
*inventory/templates/inventory/machine_list.html*::