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. Unfortunately I'm not able to provide support for any kind of customization work outside the scope of Type & Grids features.

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 use the fonts shown on 2013.jeremiahshoaf.com?

    On my personal site, 2013.jeremiahshoaf.com, 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”.

  8. How do I achieve the darkened image effect shown on jeremiahshoaf.com?

    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.

  9. 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.

  10. I’m trying to add additional pages to the nav in my site but I am having trouble. Any advice?

    The Free version only comes with the HTML version of Type & Grids, which is essentially a one-page site. The “Work” section and the “About” section are part of the same “index.html” page. Clicking on the nav just fades out one section and fades in the other. It’s not actually loading separate HTML files. To have actual separate pages you will need to use the PHP version which comes with the Pro version of Type & Grids. Don’t worry – even if you are completely clueless about PHP, it shouldn’t be that hard to setup. See the below FAQ for more information about the PHP version.

    Another thing to keep in mind is that the layout really only supports a few nav items. If you resize your browser to a mobile phone size width, you will see there is only room in the nav for several links. If you have more pages of content, I recommend adding the content to an existing page. Type & Grids is really only meant for simple sites without tons of pages.

  11. What is the difference between the HTML version and the PHP version?

    Both versions use the exact same CSS, so they are identical from a visual design perspective. The HTML version is slightly easier to setup for beginners. The PHP version works better for sites with multiple pages and makes it easier to update content. You shouldn’t need to know any PHP to use the PHP version.

    PHP pages end with “.php” rather than “.html”. PHP allows you to use includes which let you insert the same chunk of code in multiple pages. This makes it so you don’t have to edit content in multiple places. If you try to test your PHP site locally, it won’t work. It needs to be uploaded to a web server that runs PHP (nearly all web hosts support PHP). If you want to be able to test your site locally, I recommend installing a local PHP server such as MAMP (on the Mac) or WAMP (on Windows).

    The demo and 2013.jeremiahshoaf.com use the HTML version. This website (typeandgrids.com) and the PHP demo use the PHP version.

    See the above FAQ as well for additional info.

View Cart