Full CakePHP Application Part 8

Posted on Saturday, February 5, 2011 by Cakephp4U

Howdy and welcome to the 8th article I finally got my ass in gear and started to write it so here it is. Last time I went through my design process and came up with a Photoshop mockup of what the design will look like.
In this article I'm going to be coding up my design in HTML/CSS ready for integration with CakePHP. I always try to write clean and semantic code which validates so thats going be important during this article, I also try to avoid CSS hacks and seperate style sheets for the different browsers which means that testing your code at each step in a variety of browsers is a must.

Skeleton Structure

The first things you need to do is to create the HTML and CSS file that you will use to code up the design. From the Photoshop mockup there are 3 distinct areas, the header, the contents and the footer. Because each will require a different background colour I need 3 div wrappers that will span 100% of the screen and inside of each I will need another centered fixed width div to hold the main bits of each section.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>Testing</title>  
  6. <link type="text/css" href="style.css" media="all" rel="stylesheet" />  
  7. </head>  
  8.   
  9. <body>  
  10.   
  11.     <div id="wrapper-header">  
  12.         <div id="header">  
  13.   
  14.         </div>  
  15.     </div>  
  16.   
  17.     <div id="wrapper-contents">  
  18.         <div id="contents">  
  19.   
  20.         </div>  
  21.     </div>  
  22.   
  23.     <div id="wrapper-footer">  
  24.         <div id="footer">  
  25.   
  26.         </div>  
  27.     </div>  
  28.   
  29. </body>  
  30. </html>  
And the corresponding CSS file (note that I've include some filler background colours for the different sections just so that I can see whats going on):

  1. // style.css  
  2. *                   { padding:0; margin:0;}  
  3. body                { text-align:center;}  
  4. #wrapper-header     { width:100%;}  
  5. #wrapper-contents   { width:100%;}  
  6. #wrapper-footer     { width:100%;}  
  7. #header,  
  8. #contents,  
  9. #footer             { width:1000px; margin:0 auto; text-align:left;}  
  10.   
  11. /* header */  
  12. #header             { height: 150px; }  
  13.   
  14. /* contents */  
  15. #contents           { height:300px;}  
  16.   
  17. /* footer */  
  18. #footer             { height: 250px;}  
  19.   
  20. /* backgrounds & colour */  
  21. body                { background:#fff;}  
  22. #wrapper-header     { background:#000000;}  
  23. #wrapper-contents   { background:#333333;}  
  24. #wrapper-footer     { background:#666666;}  
  25. #header             { background:#CCCCCC;}  
  26. #contents           { background:#999999;}  
  27. #footer             { background:#333333;}  
  28.   
  29. /* typography */  
  30. body                { font-family:"Lucida Sans Unicode"; font-size:12px;}  
If you preview your code in a browser you should be looking at the below image:
HTML CSS Skeleton Structure

CSS Organisation

I generally try to organise my CSS files in a way thats easy to read and most importantly easy to find what I'm looking for. I tend to write all my rules on 1 line and structure the file into different sections such as "Typography" and "Background and Colours".
At the end of the day its personal preference but I've quickly come round to the 1 line per rule and standard file structure. For starters it saves your scroll finger from wearing out and you can quickly see where your rules are.

Background Images

Now that I've got the skeleton structure up and running I need to go back into Photoshop and start cutting up the design for the background images. I'm going to need 2 thin slices for the header and footer and the main wood graphic which will tile to create a seamless effect.

  1. body                { background:#206ba4;}  
  2. #wrapper-header     { background:url(img/bg_header.png) repeat-x;}  
  3. #wrapper-contents   { background:url(img/bg_content.png);}  
  4. #wrapper-footer     { background:url(img/bg_footer.png) repeat-x #206ba4;}  
  5. #header             { }  
  6. #contents           { }  
  7. #footer             { }  
I've changed the background colour to a blue which was taken off the footer so that if the page doesn't scroll it will appear like a large footer. Hopefully that wont be the case as the contents will contain all the DVD covers.
Background Colours

Header

I've been a bit sneaky in the Header and used a large background image that contains the logo etc but also included some CSS so that the search engines can pick up the text. Then I can just hide the text using CSS and the design wont suffer. I've also created some basic form code so that I can see how it will look, I may or may not use CakePHP's form helper to create this when I'm building up the layout.

  1. <div id="header">  
  2.     <div class="logo">  
  3.         <h1>CakeCatalog</h1>  
  4.         <h2>an online application to track and catalog your collection of dvds built using cakephp</h2>  
  5.     </div>  
  6.   
  7.     <div class="filters">  
  8.         <form action="" method="post">  
  9.             <fieldset>  
  10.                 <div class="input">  
  11.                     <select>  
  12.                         <option>Format</option>  
  13.                         <option>Option 1</option>  
  14.                         <option>Option 2</option>  
  15.                         <option>Option 3</option>  
  16.                     </select>  
  17.                 </div>  
  18.                 <div class="input">  
  19.                     <select>  
  20.                         <option>Type</option>  
  21.                         <option>Option 1</option>  
  22.                         <option>Option 2</option>  
  23.                         <option>Option 3</option>  
  24.                     </select>  
  25.                 </div>  
  26.                 <div class="input">  
  27.                     <select>  
  28.                         <option>Location</option>  
  29.                         <option>Option 1</option>  
  30.                         <option>Option 2</option>  
  31.                         <option>Option 3</option>  
  32.                     </select>  
  33.                 </div>  
  34.                 <div class="input">  
  35.                     <select>  
  36.                         <option>Genre</option>  
  37.                         <option>Option 1</option>  
  38.                         <option>Option 2</option>  
  39.                         <option>Option 3</option>  
  40.                     </select>  
  41.                 </div>  
  42.                 <div class="clear"></div>  
  43.                 <div class="input">  
  44.                     <input type="text" value="enter search items" />  
  45.                 </div>  
  46.                 <div class="input">  
  47.                     <button type="submit" name="submit">Filter</button>  
  48.                     <button type="reset" name="reset">Reset</button>  
  49.                 </div>  
  50.             </fieldset>  
  51.         </form>  
  52.     </div>  
  53. </div>  
An the CSS for the header:

  1. /* header */  
  2. #header             { height: 150px; }  
  3. #header .logo h1    { text-indent:-9999px; float:left; }  
  4. #header .logo h2    { text-indent:-9999px; float:left; }  
  5. #header .filters    { width:500px; height: 150px; float:right;}  
  6. #header .filters fieldset { border:none; margin:40px 0 0 80px;}  
  7. #header .filters fieldset select option { padding: 0 5px 0 0;}  
  8. #header .filters fieldset .input { float:left; margin:0 10px 20px 0;}  

Contents

The contents is coded up quite simply with a "shelf" div that will contain upto 8 "dvds" with each dvd being floated to the left. I'm gonna have to test this and code up some logic when displaying the DVDs so that only 8 will be in each shelf but I can worry about that when I'm integrating the design with CakePHP.
I've also added a "dvd-last" class to (obviously) the last dvd, this is so I can remove any margin and padding so that the layout is correctly aligned and finally cleared the floats so that it doesn't cause too much havoc.

  1. <div id="contents">  
  2.     <div class="shelf">  
  3.         <div class="dvd"></div>  
  4.         <div class="dvd"></div>  
  5.         <div class="dvd"></div>  
  6.         <div class="dvd"></div>  
  7.         <div class="dvd"></div>  
  8.         <div class="dvd"></div>  
  9.         <div class="dvd"></div>  
  10.         <div class="dvd dvd-last"></div>  
  11.         <div class="clear"></div>  
  12.     </div>  
  13.       
  14.     <div class="shelf">  
  15.         <div class="dvd"></div>  
  16.         <div class="dvd"></div>  
  17.         <div class="dvd"></div>  
  18.         <div class="dvd"></div>  
  19.         <div class="dvd"></div>  
  20.         <div class="dvd"></div>  
  21.         <div class="dvd"></div>  
  22.         <div class="dvd dvd-last"></div>  
  23.         <div class="clear"></div>  
  24.     </div>  
  25. </div>  
The CSS for the contents section:

  1. /* contents */  
  2. #contents           { padding: 0 0 20px 0;}  
  3. .shelf              { padding:20px 28px; margin:0 auto;}  
  4. .dvd                { width:100px; height:150px; float:left; margin:0 20px 0 0;}  
  5. .dvd-last           { margin:0;}  
  6. .clear              { clear:both;}  
  7.   
  8. /* backgrounds & colour */  
  9. .shelf              { background:url(img/shelf_bottom.png) bottom no-repeat;}  
  10. .dvd                { background:#333;}  

Footer

For the Footer I've created 4 boxes that will each include a heading and an ordered list, each box has been given a fixed width and has been floated left. I've also given each div an extra class incase I need to specifically target a list in my CSS. Multiple classes is a technique I discovered quite late on and it can be very beneficial.

  1. <div id="footer">  
  2.     <div class="box top-rated">  
  3.         <h2>Top Rated</h2>  
  4.         <ol>  
  5.             <li><a href="">Desperado</a></li>  
  6.             <li><a href="">From Dusk Till Dawn</a></li>  
  7.             <li><a href="">Kill Bill Vol.1</a></li>  
  8.             <li><a href="">Pulp Fiction</a></li>  
  9.             <li><a href="">Reservior Dogs</a></li>  
  10.         </ol>  
  11.     </div>  
  12.     <div class="box recently-added">  
  13.         <h2>Recently Added</h2>  
  14.         <ol>  
  15.             <li><a href="">Desperado</a></li>  
  16.             <li><a href="">From Dusk Till Dawn</a></li>  
  17.             <li><a href="">Kill Bill Vol.1</a></li>  
  18.             <li><a href="">Pulp Fiction</a></li>  
  19.             <li><a href="">Reservior Dogs</a></li>  
  20.         </ol>  
  21.     </div>  
  22.     <div class="box top-genres">  
  23.         <h2>Top Genres</h2>  
  24.         <ol>  
  25.             <li><a href="">Desperado</a></li>  
  26.             <li><a href="">From Dusk Till Dawn</a></li>  
  27.             <li><a href="">Kill Bill Vol.1</a></li>  
  28.             <li><a href="">Pulp Fiction</a></li>  
  29.             <li><a href="">Reservior Dogs</a></li>  
  30.         </ol>  
  31.     </div>  
  32.     <div class="box most-active box-last">  
  33.         <h2>Most Active</h2>  
  34.         <ol>  
  35.             <li><a href="">Desperado</a></li>  
  36.             <li><a href="">From Dusk Till Dawn</a></li>  
  37.             <li><a href="">Kill Bill Vol.1</a></li>  
  38.             <li><a href="">Pulp Fiction</a></li>  
  39.             <li><a href="">Reservior Dogs</a></li>  
  40.         </ol>  
  41.     </div>  
  42.     <div class="clear"></div>  
  43.   
  44.     <div class="copyright">  
  45.         <p>built using <a href="http://www.cakephp.org" target="_blank">CakePHP</a> by   
  46.         <a href="http://www.jamesfairhurst.co.uk" target="_blank">James Fairhurst</a></p>  
  47.     </div>  
  48. </div>  
And the CSS for the Footer, nothing too advanced:

  1. /* footer */  
  2. #footer                     { height: 250px; text-align:center;}  
  3. #footer .box                { width:230px; float:left; margin:15px 20px 0 0; text-align:left;}  
  4. #footer .box h2             { text-align:center; margin: 0 0 10px 0; width:230px; height:21px; line-height:21px;}  
  5. #footer .box ol             { margin:0 0 0 50px;}  
  6. #footer .box ol a           { text-decoration:none; font-size: 16px;}  
  7. #footer .box ol a:hover     { text-decoration:underline;}  
  8. #footer .box-last           { margin:15px 0 0 0;}  
  9. #footer .copyright          { margin:20px auto; width:500px; height:32px; line-height:32px;}  
  10.   
  11. /* backgrounds & colour */  
  12. #footer .box h2     { background:url(img/bg_footer_heading.png) no-repeat; color:#fff;}  
  13. #footer .box ol     { color:#bbd9ee;}  
  14. #footer .box ol a   { color:#bbd9ee; }  
  15. #footer .box ol a:hover { color:#bbd9ee;}  
  16. #footer .copyright  { background:url(img/bg_footer_copyright.png) no-repeat;}  
Final Code Layout

Wrapping Up

At the end of this you should have a pretty flexible looking layout that will work in all modern browsers. The CSS that I've used is pretty standard and I've avoided using any hacks or conditional stylesheets which is always a positive. I doubt this will be the final version as I will be adding to it as I build up the application but for the front page I think it does its job.
If these articles are helping you out why not consider donating I can always use a beer! :)

This entry was posted in . Bookmark the permalink.

Leave a Reply