Responsive Layout

Summary

Format site using BootstrapA framework that allows dynamic page layout that responses to the size of the screen. and Font AwesomeA collection of icons that can be used in website development. to improve the visual appeal and usability of the site and to allow it to dynamically adjust to fit different screen sizes.

Overview

Implementation

1. Create Public Directories for Format Files

   • public/css - holds CSS files
   • public/fonts - holds custom fonts
   • public/images - holds images
   • public/js - holds Javascript files

2. Download JQueryA Javascript library to make working with the DOM, event handling and AJAX easier.

   BootstrapA framework that allows dynamic page layout that responses to the size of the screen. requires JQueryA Javascript library to make working with the DOM, event handling and AJAX easier. so it should be downloaded and placed in the public/js.

3. Download BootstrapA framework that allows dynamic page layout that responses to the size of the screen.

   • Place the css files in the download in the public/css/bootstrap.
   • Place the BootstrapA framework that allows dynamic page layout that responses to the size of the screen. Javascript files in public/js

4. Download Font AwesomeA collection of icons that can be used in website development.

   Place the Font AwesomeA collection of icons that can be used in website development. files in the directory public/fonts/font-awesome

5. Create Custom CSS File

   Create the file public/css/tbd-basic which will be used to override some of the BootstrapA framework that allows dynamic page layout that responses to the size of the screen. defaults.

6. Modify Base TwigPHP template engine that simplifies the generation of HTML pages. Template

   • Add links to the Font AwesomeA collection of icons that can be used in website development., BootstrapA framework that allows dynamic page layout that responses to the size of the screen. and custom CSS files.
   • Add references to JQueryA Javascript library to make working with the DOM, event handling and AJAX easier. and BootstrapA framework that allows dynamic page layout that responses to the size of the screen. Javascript files.
   • Add BootstrapA framework that allows dynamic page layout that responses to the size of the screen. container, rows and columns to create a responsive layout.
   • Format navigation bar to be fixed at the top of page and include a search box.
   • Add optional header section with icon.
   • Add optional sidebar.
   • Add a fix footer at bottom of page.

7. Modify Home Index Page

   The decision was made to move the content of the Home page from the database to the file. This was done to allow TwigPHP template engine that simplifies the generation of HTML pages. to handle the population of the recent activity timeline. As a result the Home page falls outside of the scope of the current search functionality.

   • Turn off optional header and sidebar.
   • Add banner with background image at top of page.
   • Add feature section to highlight the major components of the site.
   • Add a recent activity timeline to chart the five most recently project or post activity.

8. Modify Other HTML Files

   All of the other HTML view files under App/Views had to be modified to pass parameters to the new header and sidebar sections and to format custom content.

9. Modify All Content Records

   All projects and posts were modified to add formatting. A new PhinxA PHP library to automate the implementation of database changes. migration was created to update the content records.