Saturday, April 06, 2013

Tutorial Let’s Build a Lightweight Blog System Part 2

Do you want to share?

Do you like this story?

DEMO     -     DOWNLOAD

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)

1views.root = app/views
2views.layout = layout
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

01<!DOCTYPE html>
02<html>
03<head>
04    <title><?php echo isset($title) ? _h($title) : config('blog.title') ?></title>
05
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')?>" />
10
11    <link rel="alternate" type="application/rss+xml" title="<?php echo config('blog.title')?>  Feed" href="<?php echo site_url()?>rss" />
12
13    <link href="<?php echo site_url() ?>assets/css/style.css" rel="stylesheet" />
14    <link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700&subset=latin,cyrillic-ext" rel="stylesheet" />
15
16    <!--[if lt IE 9]>
17        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
18    <![endif]-->
19
20</head>
21<body>
22
23    <aside>
24
25        <h1><a href="<?php echo site_url() ?>"><?php echo config('blog.title') ?></a></h1>
26
27        <p class="description"><?php echo config('blog.description')?></p>
28
29        <ul>
30            <li><a href="<?php echo site_url() ?>">Home</a></li>
31            <li><a href="http://tutorialzine.com/members/">Members area</a></li>
32            <li><a href="http://tutorialzine.com/contact/">Contact Us</a></li>
33        </ul>
34
35        <p class="author"><?php echo config('blog.authorbio') ?></p>
36
37    </aside>
38
39    <section id="content">
40
41        <?php echo content()?>
42
43    </section>
44
45</body>
46</html>

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)

1render('main',array(
2    'page' => $page,
3    'posts' => $posts,
4    'has_pagination' => has_pagination($page)
5));

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):?>
02    <div class="post">
03        <h2><a href="<?php echo $p->url?>"><?php echo $p->title ?></a></h2>
04
05        <div class="date"><?php echo date('d F Y', $p->date)?></div>
06
07        <?php echo $p->body?>
08    </div>
09<?php endforeach;?>
10
11<?php if ($has_pagination['prev']):?>
12    <a href="?page=<?php echo $page-1?>" class="pagination-arrow newer">Newer</a>
13<?php endif;?>
14
15<?php if ($has_pagination['next']):?>
16    <a href="?page=<?php echo $page+1?>" class="pagination-arrow older">Older</a>
17<?php endif;?>

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

1<div class="post">
2
3    <h2><?php echo $p->title ?></h2>
4
5    <div class="date"><?php echo date('d F Y', $p->date)?></div>
6
7    <?php echo $p->body?>
8
9</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

01<!DOCTYPE html>
02<html>
03<head>
04    <meta charset="utf-8" />
05
06    <title>404 Not Found | <?php echo config('blog.title') ?></title>
07    <link href="<?php echo site_url() ?>assets/css/style.css" rel="stylesheet" />
08
09    <!-- Include the Open Sans font -->
10    <link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700&subset=latin,cyrillic-ext" rel="stylesheet" />
11
12</head>
13<body>
14
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>
18    </div>
19
20</body>
21</html>

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)

1function not_found(){
2    error(404, render('404', null, false));
3}
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:

01h1{
02    font: 14px 'Open Sans Condensed', sans-serif;
03    text-transform:uppercase;
04    margin-bottom: 24px;
05}
06
07h2{
08    font: 48px 'Open Sans Condensed', sans-serif;
09}
10
11h1 a, h2 a{
12    color:#4f4f4f !important;
13    text-decoration: none !important;
14}

Next is the content and posts. Notice the background image to .post .date:before.

 01#content{
02    position: absolute;
03    font: 16px/1.5 'PT Serif', Times, Cambria, serif;
04    width: 580px;
05    left: 50%;
06    margin-left: -100px;
07}
08
09#content p,
10#content ul{
11    margin-bottom:25px;
12}
13
14#content ul{
15    padding-left:20px;
16}
17
18#content li{
19    margin-bottom:5px;
20}
21
22/* The actual post styles */
23
24.post{
25    padding: 50px 0 15px 0;
26    border-bottom: 1px solid #dfdfdf;
27}
28
29.post .date{
30    font: bold 12px 'Open Sans Condensed', sans-serif;
31    text-transform: uppercase;
32    color: #a7a7a7;
33    margin: 24px 0 30px 20px;
34    position: relative;
35}
36
37/* The calendar icon is set as a data url */
38
39.post .date:before{
40    width:18px;
41    height:18px;
42    position:absolute;
43    content:'';
44    left: -22px;
45    top: -1px;
46    background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA..')
47}

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:

01aside{
02    position: fixed;
03    width: 250px;
04    height: auto;
05    top: 0;
06    left: 50%;
07    bottom: 0;
08    margin-left: -460px;
09    padding-top: 65px;
10}
11
12aside p.description{
13    font-size: 13px;
14    line-height: 1.8;
15    margin-bottom: 40px;
16    color:#787878;
17}
18
19/* The main navigation links */
20aside ul{
21    font: bold 18px 'Open Sans Condensed', sans-serif;
22    text-transform: uppercase;
23    list-style:none;
24}
25
26aside ul li a{
27    text-decoration:none !important;
28    display:inline-block;
29    padding:0 3px;
30    margin:2px 0 2px 10px;
31}
32
33aside ul li a:hover{
34    background-color:#389dc1;
35    color:#fff;
36}
37
38aside p.author{
39    position: absolute;
40    bottom: 20px;
41    height: 30px;
42    font-size: 12px;
43    color: #888;
44}


After this, we will style the pagination arrows:
01.pagination-arrow{
02    display: inline-block;
03    font: bold 16px/1 'Open Sans Condensed', sans-serif;
04    border: 1px solid #ccc;
05    border-radius: 3px;
06    margin: 20px 15px;
07    color: #555 !important;
08    padding: 8px 12px;
09    text-decoration: none !important;
10    text-transform: uppercase;
11    position: relative;
12}
13
14.pagination-arrow.newer{
15    padding-left: 20px;
16}
17
18.pagination-arrow.older{
19    padding-right: 20px;
20    float:right;
21}
22
23.pagination-arrow.newer:before,
24.pagination-arrow.older:before{
25    content: '';
26    border: 5px solid #555;
27    border-color: transparent #555 transparent transparent;
28    width: 0;
29    height: 0;
30    position: absolute;
31    left: 3px;
32    top: 12px;
33}
34
35.pagination-arrow.older:before{
36    left:auto;
37    right:3px;
38    border-color: transparent transparent transparent #555;
39}

I am using an old border trick to create triangular arrows with CSS. Next are the styles, specific to the 404 page:

01.message{
02    padding-top:50px;
03}
04
05.message h1{
06    font-size:36px;
07    margin-bottom: 18px;
08}
09
10.message p{
11    font-size:13px;
12}
13
14.center{
15    text-align:center;
16}

And lastly, we have the media queries, that will tweak the layout depending on the resolution of the device:

01/* Small tablets */
02
03@media all and (max-width: 1024px) {
04    aside{
05        left: 5%;
06        margin-left: 0;
07        width: 25%;
08    }
09
10    #content{
11        left: 35%;
12        margin-left: 0;
13        width: 60%;
14    }
15}
16
17/* Smartphones */
18
19@media all and (max-width: 840px) {
20
21    h2{
22        font-size:36px;
23    }
24
25    aside{
26        margin-left: 0;
27        position: static;
28        width: 90%;
29        padding: 5% 5% 0 5%;
30        text-align: center;
31    }
32
33    aside .description{
34        margin-bottom: 25px;
35    }
36
37    aside li {
38        display: inline-block;
39    }
40
41    aside ul{
42        text-align: center;
43    }
44
45    aside .author{
46        display: none;
47    }
48
49    #content{
50        position: static;
51        padding: 5%;
52        padding-top: 0;
53        width: 90%;
54    }
55}

With this our lightweight flat-file blog is ready!
 by Martin Angelov
Source: http://tutorialzine.com/2013/03/simple-php-blogging-system-part-2/ 
Diposkan oleh A. S. Purnomo di Saturday, April 06, 2013
Label: , ,

YOU MIGHT ALSO LIKE

0 komentar:

Post a Comment

Subscribe to: Post Comments (Atom)

Advertisements

Advertisements