Cookbook 2.0 Is Served


Time again to peek in on our cookbook project and see if it’s baked yet. You know they say you lose 10° every time you open the oven door. So does that mean if I opened it enough times, I could turn the oven into a freezer? Just wondering.

We left off last time with

  • decent-looking code, thanks to a bunch of Find/Replaces
  • inspiration from the design of Epicurious.com
  • the ability to harvest CSS code with the help of the Web Developer Add-on for Firefox

So what’s left is to put together a CSS file, point the HTML at it, and see what we get.

As I was writing this, klutzing around with the CSS, I remembered an old friend who does CSS and web development for a living. I found his site, and sure enough, he had not one but two treasure troves of CSS info and tools. It’ll take me a long time to go through that stuff. I was glad to see that he mentioned the Web Developer Add-on. And now I’m very curious about another plug-in that he recommends, called Firebug.

As for the cookbook, here’s the basic structure of divs that repeats throughout the document

<div class="group"
</div>

<div class="recipe">
<div class="card">
<p class="title">
<p class="chef">
</div>
<div class="story">
</div>
<div class="ingredients">
<h2 class="ing">ingredients</h2>
<p class="ingredient">
</div>
<div class="prep">
<h2 class="preps">preparation</h2>
<p class="steps">
</div>
</div>

The background of the page is a tiny gif with diagonal lines, repeated. That’s attached to the body.

background-image: url(background.gif);

Yeah, it’s subtle. Almost subliminal.

On top of the body we have group, which is giving us the group heading (Breakfast, Appetizers, etc), centered and big and bold.

.group {
font-size: 33px;
text-align: left;
font-family: Georgia, "Times New Roman", Times, serif;
padding-left: 40px;
}

On top of that we have a bunch of recipes Each one is in a div filled with a light beige color.

.recipe {
background-color: #Fbfaf4;

Inside it sits the card div, which I had originally intended to mimic the inline text boxes from the Quark file. But after I set all this up, there were just too many visible boxes, and things looked cluttered, so I turned off the border. So card is kind of a stealth div, waiting in case I should call on it to do something useful.

.card {
background-color: #Fbfaf4;
width: 400px;
padding-left: 20px;
}

Next up inside the card are two p’s with classes of title and chef.
I made the recipe titles big and capitalized, and I changed them to a dark blue, just to give us some color. Unlike Epicurious, I don’t have luscious-looking photos of the prepared food, so my eyes were starving for color,

.title {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 26px;
color: #000099;
font-weight: normal;
text-transform: capitalize;

I also made the chef’s name small caps. Maybe more because I could, than I should.

.chef {
font-size: 18px;
font-family: Georgia, "Times New Roman", Times, serif;
font-variant: small-caps;

Next comes a sequence of 3 divs, each one represented by a white box surrounded by a small black border. The first one contains the chef’s story about the recipe, followed by the ingredients and then the preparation steps. Originally I was going to add numbering to the steps, but some recipes just didn’t lend themselves to such sequentialiality (cool, I just made up word).

.ingredients, .story, .prep{
font-family: Georgia,"Times New Roman",Times,serif;
font-size: 13px;
line-height: 20px;
background-color: white;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #cccccc

Like Epicurious, I added gifs with headings for ingredients and preparation. I didn’t have to replace text since there was no text of these words to begin with. I probably should add the text for those headings just to follow good practice for viewers who aren’t using images. For now, I’ll set a property to shove any text that appears here way off to the left, so the CSS is ready for when I get around to changing the HTML.

h2.ing {
background-image: url(ingredients.gif);
background-repeat: no-repeat;
text-indent: -9999px;
height: 32px;
margin-left: -10px;
}

That’s pretty much it. I have a few other things in the CSS commented out, again in case I change my mind, I can just remove the comment syntax and bring them to life.

e.g.

/*.prep {

A few other touch-up things:

I replaced almost all the fractions with entities to make them look nicer. I had to because I come from a decade of working on mathematics textbooks, so a “vulgar” fraction looks pretty horrible to me.

You can find anysuch entity that you may need here: Math Unicode Entities

Some of the entities, for replacing things like 2/3, 1/8, etc look really tiny. So I cheated and added a span around them to bump up the text size.

I did a Find/Replace along these lines

Find: 2/3
Replace: <span class="tiny">[entity]</span>

In the CSS I created a new “tiny” span declaration

.tiny {
font-size: 16px;

}

I also had some more cleanup to do with whitespace. Around a lot of the entities for things like quotes and hyphens, Dreamweaver had formatted the code to break the lines (I don’t know if it used linefeeds or carriage returns) and the browser converts these things to extra word spaces. So I tightened them up. Last, there was some inconsistency with accented characters. Some were fine, others messed up. Again, entities are our friends. Now everything looks good to me.

The only problem is, now that I’ve taken it this far, I want even more. What I’ve made is really just the major column in what should be a two column layout, so it’s really too narrow to stand by itself. And it cries out for navigation help. Wouldn’t it be cool to have tabs with dropdowns for each group, where you pick the recipe you want? Yes it would. Hmmm, maybe that will be the cherry on top of the project. Maybe this is where I learn a little javascript. Anyway, for now, I hope your hunger for repurposing Quark leftovers is satisfied. I think we did more than just warm them up in the digital microwave. I hate soggy and chewy content. In any case, now that we’re structured properly, we can just plug in a new CSS and get a whole different effect.

You can see the results of our cookbook conversion project here.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: