Sofeng's *Old* Blog: Django Blog Project #5: YUI CSS and serving static media

This is my OLD blog. I've copied this post over to my NEW blog at:

http://www.saltycrane.com/blog/2008/06/django-blog-project-5-yui-css-and/

You should be redirected in 2 seconds.

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:

I went to the Webfaction Control Panel
Under the ">Domains/websites" menu, I selected "Applications"
I selected the icon with the plus to add a new App.
I filled in the following fields:
"Name": myblogsite_media "App type": Symbolic link "Extra info": /home/sofeng/webapps/django/myblogsite/media
Under the ">Domains/websites" menu, I selected "Websites"
I clicked on the pencil icon to edit my website
Under "Site apps", I selected the icon with the plus to add a new site app.
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

Sofeng's Old Blog

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

No comments:

About