Support Guidelines

Please read through the Getting Started Guide and FAQ first, then if you still have any questions feel free to send an email to:

support@typeandgrids.com

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 unzipping the zip file and moving the “Hawthorne” folder to a location on your computer where you want to store your site.
  2. Inside the “Hawthorne” folder, open “index.html” with your web browser.
  3. Next, open the same “index.html” file in your text editor (for example, TextWrangler or Notepad++). Locate the CSS link near the top of the page (“hawthorne_type2_color3.css”).
  4. Change the type and color themes by changing the number. For example, changing the “type2” part to “type3” will load type theme 3. There are 6 type themes and 6 color themes included (the Pro versions contain additional type and color themes). Save the page in your text editor and then refresh the page in your web browser to see the results.
  5. Continue to scroll through “index.html” and edit the text to add your own content. Everything should be fairly intuitive and self-explanatory.
  6. Finally, be sure to read through the FAQ as it contains lots of helpful tips.

Setting Up Your Statamic Theme

I recommend checking out the official Statamic docs for complete documentation — the following is meant to be a quick getting started guide for basic use cases

  1. Begin by purchasing a license from Statamic. If you aren’t sure whether you need a personal or a professional license, see this page.
  2. Download your zip file from Statamic and unzip it. Create a folder named “mysite” somewhere on your hard drive where you want to store your site. Move the contents of the Statamic zip file into your “mysite” folder.
  3. Keep the original Statamic zip file as well as a backup of your Type & Grids zip file somewhere safe on your computer in case you need it later.
  4. In your “mysite” folder, delete the “_content”, “_themes” and “assets” folders.
  5. Move all of the contents (except the “_config” folder which we’ll deal with in the next step) from inside your Type & Grids “Hawthorne Statamic Theme” folder over to your “mysite” folder.
  6. Inside your “mysite” folder, open the “_config” folder and delete the “fieldsets” folder and the “settings.yaml” file.
  7. Inside your “Hawthorne Statamic Theme” folder, open the “_config” folder and move the “fieldsets” folder and the “settings.yaml” file to the “_config” folder inside “mysite”. You can now delete your “Hawthorne Statamic Theme” folder as all of your site files are now in your “mysite” folder.
  8. Inside your “mysite” folder, open the “settings.yaml” file located inside the “_config” folder. Enter your Statamic license key at the top. You can find your Statamic license key on the page you downloaded your Statamic zip from. Also enter your “_site_name” and “_site_url” where indicated.
  9. You are now ready to upload your site to your web host. All of the files inside your “mysite” folder should be uploaded to the document root of your web server.
  10. After your site is uploaded, you’ll want to rename the file “sample.htaccess” to “.htaccess”. Do this directly on your server using your FTP program. Your site should now be working at this point.
  11. To use the control panel you’ll need to create a user. Inside your “mysite” folder, open the “_config” folder and inside of there open the “users” folder. Rename the file “admin.yaml.sample” to “admin.yaml”.
  12. Open the “admin.yaml” file and enter your first name and last name at the top. Also set your password where indicated (remove the “#” character to uncomment it). Your password will be encrypted the first time you log in. Your user name is the name of the yaml file, which is “admin”.
  13. Upload the local copy of your “admin.yaml” file to your web server (“_config/users”).
  14. You should now be able to log in to the control panel on your site, located at “yoursite.com/admin”. Start by editing the “Settings” page. Everything should be intuitive from this point on.

If you are having any difficulties after following the above steps, feel free to send me an email:

support@typeandgrids.com

I’ll do my best to help you with basic issues but for more complex problems that are beyond the scope of Type & Grids, you should try the official Statamic support page — they are nice people who are eager to help out.

Frequently Asked Questions

  1. Do I really need to update my header and footer content on each HTML page individually?

    In the HTML version, unfortunately yes — there is no way to do “includes” with just plain HTML. So if you make a change to the header or footer on one page (like changing the type theme), you’ll have to make that same change on every other HTML file. In the Pro versions, you can use the CMS theme to handle things like that for you and you’ll have a much, much easier time working with content on your site.

  2. How do I use an image for my logo?

    There is sample code at the top of the HTML file showing how to do this. Just uncomment that code block and delete the h1 or h2 code above it. Save your logo to the “img” folder as a PNG named “logo.png”.

  3. Which type theme is used on typeandgrids.com and jeremiahshoaf.com?

    Both sites use type theme 7 which is included as one of the bonus type themes in all three of the Pro Packages.

  4. How do I make the nav indicate which page is the current page?

    Add the class “current” to the nav item. See the sample code here.

  5. On the Willamette template, how do I get rid of the border around the text logo?

    An easy way to do that is to just switch type themes (see the Getting Started Guide) — not all type themes have the border. However, if the type theme you like contains the border and you want to get rid of it, open up the CSS file you are using (inside the “css” folder) in your text editor and locate the CSS rule “header h2 a” towards the top of the page. Then follow the sample code here.

  6. On the Hawthorne template, how do I create the thumbnail graphics?

    The thumbnail graphics should be sized 328x203 pixels. There is a sample PSD named “project_thumbnails.psd” included in the “img” folder that you can use.

  7. On the Hawthorne template, how do I set up my projects?

    For each project, you’ll need to duplicate the “project-01.html” file and link it to from the thumbnails page. Note that there are three links you’ll need to update for each thumbnail — one for the hover, one for the actual image (for touch devices that don’t have hover) and one for the thumbnail caption.

  8. How do I use the Font Awesome icon fonts?

    Just follow the sample usage code here and here. Check out all of the icons on the Font Awesome website.

  9. How do I setup the favicon and Apple touch icon?

    Simply replace the “favicon.ico” and “apple-touch-icon-precomposed.png” images located in the root folder with your own images. The favicon should be sized 16x16 and needs to be using the “.ico” format. Here is a tool to convert an image to the needed format. The Apple touch icon should be sized 152x152 and should be in the “.png” format. If your favicon isn’t showing up in your browser you may need to clear your cache. Sometimes browsers can be a bit stubborn with having the new icons show up, but if you clear your cache and keep refreshing it should eventually show up.

  10. How do I display videos?

    Simply copy the video embed code for the video you want from YouTube or Vimeo and wrap it in a div tag with the class “flex-video” to make it responsive. See some sample code here. Note: Due to the way the Vimeo embed code is setup, your video might not show up in your local dev environment. Once you upload things to your web host it should work.

  11. Why is the CSS file so large and funny looking?

    Type & Grids was built using Sass and Zurb Foundation. All of the separate CSS files get compiled into one big single file. This reduces HTTP requests to make the site load faster. However this does not make the outputted CSS code as pretty and organized. The Pro versions include the actual Sass source files that are super-organized and much easier to work with if you want to customize any code or create your own type and color themes.

  12. How do I remove the .html file extensions from my URLs?

    The Pro version includes a CMS theme that will take care of this for you. For the HTML version, an easy, non-technical way to do that is to put each HTML file in its own folder and rename it “index.html”. For example, create a folder named “about” and move your “about.html” file into that folder and rename it “index.html”. If you do that you will need to update your links to remove the .html file extension. For example, instead of linking to “about.html” change the link to “about”. Additionally, you’ll have to update your file references for the pages inside folders by adding “../” to the beginning of each reference so the page knows to look for the resource one level up. See the sample code here. Also keep in mind that if you are testing your site locally your links may not work correctly so you’ll need to upload your site to your web host for things to work. Another more technical way to remove the .html file extensions is with a .htaccess file.

  13. How do I upload my website?

    Upload all of the files in the root folder of your site to the root of your web server using an FTP program. If you aren’t sure how to do that, contact your web host.

  14. My site doesn’t look quite right in IE8. Can you provide a fix for it?

    Type & Grids doesn’t support IE8 and has no future plans to do so. Google dropped IE8 support for their products well over a year ago. The latest versions of jQuery and Zurb Foundation no longer support IE8. IE8 is quickly losing market share while the use of modern browsers, smartphones and tablets is skyrocketing. Although the design of your site may not look perfect on IE8, all of the content will still be accessible. Type & Grids follows progressive enhancement practices so your content will be viewable by any device that can read HTML.