Grid Layout Workshop

Build the design we created in Sketch, the completed design can be found on Sketch Cloud

There is nothing to setup, all you need is a modern browser, I recommend using Firefox Nightly as we can utilise the Grid Inspector which comes with their dev tools, and a local dev server, a simple one to stup for free is a PHP server, you will more than likely have PHP installed by default on your Macbook. Feel free to use any kind you want.

Setup a local PHP server on your Macbook

In the root directory of this project open terminal and run the following command: php -S localhost:8000

Open up the web address: localhost:8000 to see the site running in your browser.

Let's get started

Each step relates to a branch which can be checked out.

Step 1

Setup the CSS from Origin, assets and other dependencies.

Step 2

Setup the layout containers and the product fragment.

Step 3

Create a banner component.

Step 4

Create the header and footer components.