lamberski / preview

Tool for presenting web projects to the client.

Preview

Preview is simple PHP tool for showing web project to the client.

Usage

To add or modify sections to index page, use config.php file located in root directory.

<?php

return [
  'name' => 'Project Name',
  'sections' => [
    [
      'name' => 'Section Name',
      'layout' => 'columns',
      'items' => [
        [
          'name' => 'Item Name',
          'description' => '',
          'url' => '',
          'icon' => '',
          'class' => 'done',
        ],
      ],
    ],
  ],
];

Options

There is number of options to configure look and content of index page.

Global

Property	Default	Description
name	""	String Project name displayed at the top of index page.
sections	[]	Array Array of sections containing items.

Section

Property	Default	Description
name	""	String Name of the section.
description	""	String Optional description for the item.
layout	"single"	String Accepts: "single" or "split". Split layout shows two columns with items instead of one.
items	[]	Array Array of items in section.

Item

Property	Default	Description
name	""	String Name of the item.
url	""	String Link or relative path to the resouce.
icon	"file-o"	String Name of one of Font Awesome icons (should be entered without fa- prefix). If false, icon is not displayed at all.
class	""	String CSS class added to item. Available classes: "done" (only this one for now).

Example configuration

Below is example config.php file. The same data was used in screenshot at the top of readme.md.

<?php

return [
  'name' => 'Project Name',
  'sections' => [
    [
      'name' => 'Designs',
      'layout' => 'split',
      'items' => [
        [
          'name' => 'Home',
          'url' => '#',
          'class' => 'done',
        ],
        [
          'name' => 'About',
          'url' => '#',
          'class' => 'done',
        ],
        // ...
        [
          'name' => 'Registration',
          'url' => '#',
          'class' => 'done',
        ],
        [
          'name' => 'Log in',
          'url' => '#',
        ],
      ],
    ],
    [
      'name' => 'Attachments',
      'items' => [
        [
          'name' => 'PSD + PNG files',
          'url' => '#',
          'icon' => 'file-zip-o',
          'class' => 'done',
        ],
      ],
    ],
  ],
];

Changes in styling

Sass is used to generate CSS style. If you want to modify look of Preview, run below command after applying changes to main.scss file.

sass main.scss:main.css --style compressed

License

Preview is open-sourced software licensed under the MIT license.