Feel free to check out the application first or pull up the source in another window.
The Fat Free Framework configuration allows you to specify a document root for the front-end pages. By default, this is set to the ‘ui’ directory in the root of the F3 directory structure. This will be our working directory for building the UI. The F3 package will have a few pages, CSS, and images in the ‘ui’ directory, you can delete them all if you want (I kept the welcome.htm file just out of convenience).
Now I’m not a good UI developer, so I tend to use the Bootstrap framework (v2.3.2) for the front-end of my applications. Go ahead and download the Bootstrap package and unzip it in the ‘ui’ directory. The ‘ui’ directory structure should look like this:
- welcome.htm (from the f3 package)
Now we have the components that we need to start building pages. Let’s start by building a layout.htm file – this will be the base HTML file (with a common header, footer, styles and script tags) that will be populated with content for each page. These types of pages/files are referred to as templates.