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

Creating multi-worksheet Excel files with Simple Excel
Creating multi-worksheet Excel files with Simple Excel

Recently I had to create a large data export for a project. I like using Spatie’s Simple Excel package to do this as it is very simple to use and works well when exporting large amounts of data to a CSV or Excel file with the ability to stream a download to the browser. This particular project had an additional requirement though, exporting multiple worksheet’s of data at once. Luckily, this package allows you to do this too.

The PHP foreach loop
The PHP foreach loop

An alternative to the for loop, the foreach loop is used to iterate or loop over an array. The foreach loop allows you to loop through the items in the array without setting a limit for it to stop like you do in a for loop.

The PHP for loop
The PHP for loop

If you have something you want to repeat then consider using a PHP for loop, saving you from copying and pasting the same code multiple times. Adding the code into a loop means you only have to write it once, and you also only have to maintain the code in one place in future.

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