Comphanny Template

Posted on 16 Jan 2020

Bootstrap 4 Template

Bootstrap

The template portion of CraftCMS demo I built for a talk.

Project Screenshot

Click on image to enlarge

Tech Stack

Frontend

HTML, CSS, Bootstrap 4, SASS, Font Awesome 5

About

This template is the first part of a 2-part demo I was building. I was asked to give a talk on CraftCMS at a local PHP meetup. Hence, the aim of this demo was to showcase CraftCMS.

This project was built in Bootrap 4. The icons are from Font Awesome 5. To maintain code readability and reusability, I used SASS as the CSS pre-processor. Note that this project doesn’t come bundled with its own SASS compiler, as I was lazy to code up one 😛… If you’re using VS Code, you can simply use the free Live Sass Compiler VS Code extension.

Write up on DEV Community.

I came up with the idea of creating a fake company. This company specializes in developing custom web and mobile applications for clients. The audience of the talk was a local PHP community. Hence, I came up with the company’s name “Comphanny” which is a play on the words “company”, “php”, and “ph” being pronunced as “f” in “elephant” which is the animal typically associated with PHP.

I initally wanted to build this template from scratch, to practise my CSS & web design skills, as well as explore Flex and CSS Grid. But due to time constraint from my day job, and still having the CraftCMS part of the project to build, I felt it was too ambitious. So I decided to go building off Bootstrap since it was what I was familiar with.