Please read through the Getting Started Guide and FAQ first, then if you still have any questions feel free to send an email to:
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.
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
If you are having any difficulties after following the above steps, feel free to send me an email:
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.
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.
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”.
Both sites use type theme 7 which is included as one of the bonus type themes in all three of the Pro Packages.
Add the class “current” to the nav item. See the sample code here.
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.
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.
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.
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.
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.
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.
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.
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.
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.