Building the Orkos House website with Foundation

Published: Sep 27, 2014 by C.S. Rhymes

I was recently asked to update the website for Orkos House. The old website was built with a free website creator and used tables for the page layout. It had some great images and I saw a lot of potential for this site.

I had used foundation to make this website and found it very flexible. I wanted to explore some more of the features available in the framework so I thought it would be prefect for this project.

Orkos House Website

Choosing a font

When using a framework, there is the potential that your site may look very similar to other sites made with the framework. An easy way of customising your site is to use a web font. I like to use Google Web Fonts and after a few tries I can across the perfect font, called Rock Salt, for the header tags. You just need to be aware that the web fonts add additional loading time to your page and you need a fallback font in case it doesn’t load correctly for some reason.

Grid

To help make the layout consistent I made use of the very easy to use Grid. The grid is responsive and adapts to different screen sizes. As its mobile first, you set the way you want it to look on a smartphone (small screen) and then you can add additional classes for medium and large screens (such as tablets and desktops).

The main content was made using a single column and the footer was split into two sections that sit above each other on a smartphone and fit across the screen on larger screens.

Block Grid

The Block Grid offers an easy way to layout items in a list evenly across the page. This was really useful when laying out the videos and images on the pages. Again, like the grid, the block grid has the option to change the way it looks on the three different screen sizes if you want to.

Flex Video

The site had a few videos and Foundation offers a Flex Video class that will automatically resize the height of the video to the width of the video on the page. This ensures that the video is in the correct apect ratio. I used flex video within the block grid to set the width of the videos. This meant the width was set by block grid and the height was set by flex video.

Clearing Lightbox

As well as having thumbnails on the page using block grid, I also used the Clearing Lightbox so that users can click on the image to see it full size. The clearing lightbox shows thumbnails for the other images in that gallery on a larger screen, but on a mobile it shows only the image.

Static HTML pages or CMS

As this site only needed a few pages I made them out of static HTML. If I were to use foundation on a larger project then I would want a CMS in the background. There are a few options for this, including making your own CMS with the Foundation frontend, but I found FoundationPress from olefredrik that works with WordPress. I think that this is something that I’ll have to look into in more detail.

Share

Latest Posts

Upgrading a Laravel Vapor app to PHP 8.2
Upgrading a Laravel Vapor app to PHP 8.2

I recently updated a Laravel app running on Laravel Vapor to PHP 8.2. I was a bit nervous about the upgrade but it went smoothly for me. This article goes through the steps I went through to upgrade, from local development environment, dependencies, testing and deployment to vapor.

Building a VS Code Extension for Gutenberg blocks
Building a VS Code Extension for Gutenberg blocks

I have been tasked with building a new website using WordPress. The last time I used WordPress was a few years ago and involved using Advanced Custom Fields to build custom pages and layouts. Things have changed a lot over the years and now there is the built in Gutenberg editor, which uses blocks to create a custom layout and add content. The trouble was, there didn’t seem to be great support in Visual Studio Code for the blocks, as they use HTML comments.

Using Pest to test Laravel Livewire validation rules
Using Pest to test Laravel Livewire validation rules

Last year I wrote a post about testing Laravel Livewire validation rules with PHP Unit. This post uses the same techniques as that post, but shows how to transfer it to Pest instead of PHP Unit.

How NOT to make a website

How NOT to make a Website

By C.S. Rhymes

From £8.99

Nigel's Intranet Adventure

Nigel's Intranet Adventure

By C.S. Rhymes

From £2.69