Get in touch

Please read through the getting started guide and FAQ first, then if you still have any questions feel free to send me an email:

I'll do my best to answer any questions and if a question gets asked multiple times I will add it to the FAQ.

Getting started guide

  1. Begin by downloading and opening the zip file. On a Mac, just double-click the zip file to open it. For a PC, see these instructions.

  2. Move the unzipped folder to a location on your computer where you want to store your site.

  3. Open “index.html” in your web browser.

  4. Next, open “index.html” in your text editor (for example, TextWrangler or Notepad++). Locate the following lines of code near the top of the page:

    <link rel="stylesheet" href="css/themes/type_04.css">
    <link rel="stylesheet" href="css/themes/color_13.css">

  5. Try changing the number “04” to “06” and the number “13” to “08”. Save the page in your text editor and then refresh the page in your web browser to see the results.

  6. Continue to scroll through “index.html” and edit all of the text to add your own content. Everything should be fairly intuitive and self-explanatory.

  7. Finally, be sure to read through the FAQ as it contains lots of helpful tips.

Frequently asked questions

  1. How do I setup my project images?

    The project images are located inside the “images > projects” folder. The images should be sized 460x284 and it’s best to save them out as JPGs using the naming system that is already setup. I’ve created a PSD template located in the “psd” folder that you can use as a starting point. Inside “index.html” you will see each project wrapped in the following comments:

    <!-- Project begins =================== -->
    <!-- Project ends ===================== -->

    Just copy and paste that entire code block (including the comments) to add a new project. Be sure to edit all of the info inside such as project title and description.

  2. How do I display full-size project images?

    Inside the root-level “projects” folder there is a sample full-size project already setup named “project_01”. You can copy and paste that folder to add others. The full-size images should be 940 pixels wide and can be any height. It’s helpful to use the same file naming system that is already setup. From inside your root “index.html” file you can link to the full-size projects by using the code that is already setup on the “View full-size” link.

  3. How do I use the thumbnail shapes?

    The thumbnail shapes are set inside the color CSS files. For example, open up “color_06.css” and locate this line towards the top:

    .thumbnailMask { background-image: url("../../images/masks/ededed_01.png"); }

    Change the “01” number at the end to switch thumbnail shapes.

  4. Inside “index.html” in the “logo” div you will find some commented out sample code. Just uncomment that code and delete the h1 and h2 above it. Save your logo to the “images” folder as a png named “logo.png”. To tweak the positioning of your logo, open up “base.css” located in the “css” folder. Locate the following code in the “16) Site styles” section:

    #logo img { margin-top: 28px; }

    You can tweak that number to adjust the positioning of the logo.

  5. How do I use the background textures?

    Begin by setting your “index.html” page to use either the “color_03.css” or “color_04.css” file. Open that color CSS file in your text editor and locate this line:

    body { background: url("../../images/backgrounds/bg_06.png") repeat; }

    Change the “bg_06.png” part to a different number, like “bg_07.png”. The “color_03.css” file tends to work better with the lighter background textures and the “color_04.css” file works better with the darker ones. You can use the background textures with any color theme – these two themes just make better starting points. You can find all the background textures inside the “images > backgrounds” folder. Just experiment and try the various textures with the various color themes until you find something you like.

  6. How do I add videos to my site?

    Inside “projects > project_02 > index.html” there is a sample video project set up. Just change the “src” part to link to your video on Vimeo or YouTube.

  7. How do I upload my website?

    Upload everything in the root level of the Type & Grids folder to the root level of your web server using an FTP program. If you aren’t sure how to do that, contact your web host. If you are looking for a web host that is inexpensive and reliable, I recommend DreamHost.

  8. How do I use the fonts shown on

    On my personal site,, I’m using the commercial fonts Proxima Nova and Grad that I purchased from Fontspring. If you would like to use those fonts for your site you will need to purchase them from Fontspring. After purchasing, put the fonts in your “fonts” folder and then use the included type theme “type_101.css”.

  9. How do I achieve the darkened image effect shown on

    In the “psd” folder there is a sample PSD demonstrating that effect. Basically you just desaturate the image and then set the blending mode to Multiply, while setting the background color of the PSD to the same background color used on your site.