As you remember from
part 1, in this tutorial we are creating a lightweight blog system that stores posts as markdown files. It uses a number of libraries: for
parsing markdown, for
creating the RSS feed, and most importantly the
Dispatch micro framework for giving the application structure.
In this part, we will create the views and the CSS that will make the site responsive on mobile devices.
The Views
As you remember from
the first part, we used a configuration file –
config.ini – to write down the configuration settings of the blog. The last two lines of the file hold the name of the file that holds the layout, and the path to the views:
app/config.ini (lines 12-14)
These settings are used internally by the Dispatch framework. The first line tells it where to find the views for the site (so that you only need to specify a name when rendering them) and the second is the layout. This is an HTML template that is included with every view that you render. This is a standard HTML5 document with a few additional meta tags to make it mobile-friendly:
app/views/layout.html.php
04 | <title><?php echo isset($title) ? _h($title) : config('blog.title') ?></title> |
06 | <meta charset="utf-8" /> |
07 | <meta http-equiv="X-UA-Compatible" content="IE=edge" /> |
08 | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" user-scalable="no" /> |
09 | <meta name="description" content="<?php echo config('blog.description')?>" /> |
11 | <link rel="alternate" type="application/rss+xml" title="<?php echo config('blog.title')?> Feed" href="<?php echo site_url()?>rss" /> |
13 | <link href="<?php echo site_url() ?>assets/css/style.css" rel="stylesheet" /> |
25 | <h1><a href="<?php echo site_url() ?>"><?php echo config('blog.title') ?></a></h1> |
27 | <p class="description"><?php echo config('blog.description')?></p> |
30 | <li><a href="<?php echo site_url() ?>">Home</a></li> |
35 | <p class="author"><?php echo config('blog.authorbio') ?></p> |
39 | <section id="content"> |
41 | <?php echo content()?> |
In the head section I am also including a font from Google Web Fonts, and a HTML5 shim that will make it work on browsers as old as IE8. Throughout this view, I am printing the settings we put in config.ini, by using the
config() function provided by Dispatch. This will let you customize the blog solely from the config file. Another function provided by dispatch is
site_url() which gives you the absolute URL of your blog, so that you can include stylesheets, images or use it as the base for links.
Notice the call to the
content() function. What this does, is print the HTML generated by one of the other views. This allows for other views to be “nested” inside it. For example running this code:
index.php (lines 29-33)
4 | 'has_pagination' => has_pagination($page) |
Will embed the main.html.php template you see below in the view. The
page,
posts and
has_pagination members of the array will be available as variables:
app/views/main.html.php
01 | <?php foreach($posts as $p):?> |
03 | <h2><a href="<?php echo $p->url?>"><?php echo $p->title ?></a></h2> |
05 | <div class="date"><?php echo date('d F Y', $p->date)?></div> |
11 | <?php if ($has_pagination['prev']):?> |
12 | <a href="?page=<?php echo $page-1?>" class="pagination-arrow newer">Newer</a> |
15 | <?php if ($has_pagination['next']):?> |
16 | <a href="?page=<?php echo $page+1?>" class="pagination-arrow older">Older</a> |
This will present a list of posts on the screen, with optional back/forward arrows. The other template that also operates with posts, is post.html.php, which shows a single post:
app/views/post.html.php
3 | <h2><?php echo $p->title ?></h2> |
5 | <div class="date"><?php echo date('d F Y', $p->date)?></div> |
This is the view that you would need to edit if you want to add social sharing buttons or comment widgets from Facebook or Disqus.
And lastly, here is the 404 page:
app/views/404.html.php
04 | <meta charset="utf-8" /> |
06 | <title>404 Not Found | <?php echo config('blog.title') ?></title> |
07 | <link href="<?php echo site_url() ?>assets/css/style.css" rel="stylesheet" /> |
15 | <div class="center message"> |
16 | <h1>This page doesn't exist!</h1> |
17 | <p>Would you like to try our <a href="<?php echo site_url() ?>">homepage</a> instead?</p> |
Note that this view is a complete HTML5 document. This is because it doesn’t follow the same layout as the rest of the blog. In the Dispatch framework, you can render a view that does not get embedded in the site layout, by passing
false as the last argument to render:
app/includes/functions.php (lines 95-97)
2 | error(404, render('404', null, false)); |
Now that we have all the fancy HTML printed to the screen, let’s style it!
The CSS
In this part of the tutorial, we will write the CSS that will make the blog pretty and responsive. All these styles are located in the file
assets/css/styles.css that you can edit to your liking. One of the reason this blog is so fast to load is because the design is entirely CSS-based, and I haven’t used any images (thanks to a data url trick that you will see in a moment).
Let’s start with the headings:
02 | font: 14px 'Open Sans Condensed', sans-serif; |
03 | text-transform:uppercase; |
08 | font: 48px 'Open Sans Condensed', sans-serif; |
12 | color:#4f4f4f !important; |
13 | text-decoration: none !important; |
Next is the content and posts. Notice the background image to
.post .date:before.
03 | font: 16px/1.5 'PT Serif', Times, Cambria, serif; |
25 | padding: 50px 0 15px 0; |
26 | border-bottom: 1px solid #dfdfdf; |
30 | font: bold 12px 'Open Sans Condensed', sans-serif; |
31 | text-transform: uppercase; |
33 | margin: 24px 0 30px 20px; |
46 | background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA..') |
This is the
Data URI scheme, which allows for data which would normally be a separate file to to be presented inline. So by encoding the icon in base64 and placing it directly in the background property, I am saving a request to the server.
Next, we have the left static bar, which always takes up the full height of the page:
21 | font: bold 18px 'Open Sans Condensed', sans-serif; |
22 | text-transform: uppercase; |
27 | text-decoration:none !important; |
30 | margin:2px 0 2px 10px; |
34 | background-color:#389dc1; |
After this, we will style the pagination arrows:
02 | display: inline-block; |
03 | font: bold 16px/1 'Open Sans Condensed', sans-serif; |
04 | border: 1px solid #ccc; |
07 | color: #555 !important; |
09 | text-decoration: none !important; |
10 | text-transform: uppercase; |
14 | .pagination-arrow.newer{ |
18 | .pagination-arrow.older{ |
23 | .pagination-arrow.newer:before, |
24 | .pagination-arrow.older:before{ |
26 | border: 5px solid #555; |
27 | border-color: transparent #555 transparent transparent; |
35 | .pagination-arrow.older:before{ |
38 | border-color: transparent transparent transparent #555; |
I am using an old border trick to create triangular arrows with CSS. Next are the styles, specific to the 404 page:
And lastly, we have the media queries, that will tweak the layout depending on the resolution of the device:
03 | @media all and (max-width: 1024px) { |
19 | @media all and (max-width: 840px) { |
38 | display: inline-block; |
