SaltyCrane Blog — Notes on JavaScript and web development

Django Blog Project #5: YUI CSS and serving static media

Date:  |  Tags: blogproject, django  |  5 Comments

I wrote about adding some CSS to my new blog in my post #3. However, I got the CSS layout code from a book that was a couple of years old (CSS Cookbook, 2006). I created a 2 column fixed width layout, but it was not centered. It turns out creating a robust, cross-browser solution to centering a page layout is not trivial, even in 2008.

I happened to notice that the Django Book used YUI style sheets for styling its online book. The Yahoo User Interface Library (YUI) consists mostly of a Javascript Library, but it also includes "several core CSS resources". Doing a search among Django blogs using django blog search revealed that YUI was a pretty popular choice for CSS among Django users. Watching the 42 minute YUI CSS introductory video gave me a better understanding of the current state of CSS and browser compatability and how to use YUI to easily create consistent layouts across a variety of browsers.

So in this post I'll touch on how I used the YUI CSS library to restyle my slowly-getting-to-be-a-fledgling site. I'll also note how I setup Django and Webfaction to serve the static CSS media files. (What, I need a special setup to use external CSS stylesheets? you ask. I know, it suprised me too.) Finally, I made some small updates to my model to use more reasonable model attribute field types.


Setup YUI-based template

In my base.html template file, I removed all the CSS in between the <style></style> tags and replaced it with a link to the YUI concatenated, minified reset+fonts+grids aggregate file. I also added a link to my to-be-described-later local CSS stylesheet, mystyle.css. In the body section, I added a number of div blocks to create the required structure for the YUI library. The following code creates a fixed 750 pixel total width layout with a 180 pixel side column on the right and a full width header and footer. Not coming from a web background, I had thought this type of thing would be easier. I guess this complexity contributes to the demand for tools such as Dreamweaver.

~/src/django/myblogsite/templates/base.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css">
  <link rel="stylesheet" type="text/css" href="/site_media/css/mystyle.css">
  <title>{% block title %}Sofeng's Blog Version {{ VERSION }}{% endblock %}</title>
</head>

<body>
  <div id="doc" class="yui-t4">
    <div id="hd">
      <h1>Sofeng's Blog Version {{ VERSION }}</h1>
    </div>
    <div id="bd">
      <div id="yui-main">
        <div class="yui-b">
          {% block main %}{% endblock %}
        </div>
      </div>
      <div class="yui-b" id="sidebar">
        {% block sidebar %}
        <h3>ABOUT</h3>
        <p>This is my new blog created using <a href="http://www.djangoproject.com">Django</a>,
          a <a href="http://www.python.org">Python</a> web framework. This site is under 
          construction. My current blog is located at: 
          <a href="http://iwiwdsmi.blogspot.com">http://iwiwdsmi.blogspot.com</a>.
        </p>
        {% endblock %}
      </div>
    </div>
    <div id="ft">
      A <a href="http://www.djangoproject.com/">Django</a> site.
    </div>
  </div>
</body>
</html>

Create local mystyle.css stylesheet

mystyle.css contains the CSS code to customize the style (fonts, colors, spacing, etc.) of my site. Currently it is just a copy of YUI's Base library with a few minor modifications. (YUI's Reset library removes all browser specific styling (located in browser.css or similar). Then the YUI Base library adds back the common element styles that we are familiar with. This provides consistency across browsers.) I saved this file at ~/src/django/myblogsite/media/css/mystyle.css.


Serve static CSS media files (development server)

Django doesn't serve static media files such as CSS, JavaScript, and images by default. The reason is that Django is meant to create dynamically generated webpages and serving static media is best left to a tool designed for this task such as Apache. However, during development, it is convenient to have the Django development server (python manage.py runserver) serve the static media files. To do this, I used these instructions from Django. This amounted to adding a new line to my URLConf (urls.py).

~/src/django/myblogsite/urls.py:
from django.conf.urls.defaults import *
from myblogsite.myblogapp.views import *

urlpatterns = patterns(
    '',
    (r'^admin/', include('django.contrib.admin.urls')),
    (r'^myview1/$', myview1),
    (r'^blog/$', frontpage),
    (r'^site_media/(?P.*)$', 'django.views.static.serve', {'document_root': '/home/sofeng/src/django/myblogsite/media'}),
)

Serve static CSS media files (Webfaction server)

To serve my static CSS file at Webfaction, I followed these Webfaction knowledgebase instructions:

  1. I went to the Webfaction Control Panel
  2. Under the ">Domains/websites" menu, I selected "Applications"
  3. I selected the icon with the plus to add a new App.
  4. I filled in the following fields:
    "Name": myblogsite_media "App type": Symbolic link "Extra info": /home/sofeng/webapps/django/myblogsite/media
  5. Under the ">Domains/websites" menu, I selected "Websites"
  6. I clicked on the pencil icon to edit my website
  7. Under "Site apps", I selected the icon with the plus to add a new site app.
  8. I selected "myblogsite_media" as the App and entered /site_media as the "URL path".

In my settings_webfaction.py file I updated the MEDIA_ROOT and MEDIA_URL variables. (Did I forget to mention I created a separate settings file for Webfaction. I point to the settings_webfaction.py file in my ~/webapps/django/apache2/conf/httpd.conf.) I also created a new file, urls_webfaction.py that doesn't have the above modification and I point to this URLConf in my settings_webfaction.py. I know there has got to be a better way to do this, but my tired brain hasn't figured it out yet.

In ~/src/django/myblogsite/settings_webfaction.py, I modified the following lines:
MEDIA_ROOT = '/home/sofeng/webapps/django/myblogsite/media/'
MEDIA_URL = '/site_media/'
ROOT_URLCONF = 'myblogsite.urls_webfaction'

Upload project and deploy
On my local machine:
$ pushwebf
On Webfaction machine:
$ hg update -C
$ ~/webapps/django/apache2/bin/restart

Here is a snapshot screenshot of the site:
The live site can be viewed at: http://saltycrane.com/blog/

Related posts:
  Django Blog Project #1: Creating a basic blog
  Django Blog Project #2: Deploying at Webfaction
  Django Blog Project #3: Using CSS and Template Inheritance
  Django Blog Project #4: Adding post metadata
  Django Blog Project #6: Creating standard blog views

Comments


#1 Sunny commented on :

How did you configure your admin css?


#2 Nicolas commented on :

Hey, i was wondering if u can upload the code written in mystyle.css ... as the base.html referrs to this file... thx in advance, and keep up the good work!


#3 Eliot commented on :

Nicolas,
You can view my current mystyle.css file here: http://saltycrane.s3.amazonaws.com/css/mystyle.css

However, I switched from the YUI CSS framework to the Blueprint CSS framework so it won't match with the blog post. Also, keep in mind I'm no CSS expert.


#4 Peter commented on :

Hi Sofeng, thx for the wonderful tips! But could you perhaps match the rest codes, because I am a newbie to blogs programming and HTML programming. I'm really desperate, coz I would really learn to programm the layout you programmed. Plz help me! Thank you in advance!

warm regards Peter


#5 Dhruv commented on :

this is really informative article thank you