Menu Search
Jump to the content X X
SmashingConf London Avatar

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf London, dedicated to all things web performance.

Type & Grids: Free Responsive HTML5 Template

Today, we are pleased to introduce Type & Grids1, a free responsive HTML5 template by Jeremiah Shoaf2. It looks great on all devices, including desktops, laptops, tablets and phones. All of the content resides in a single HTML file, so setting it up is super-simple.

Its extensive customization options set Type & Grids apart from other templates out there. The template has 21 type themes and 29 color themes built in, giving you over 500 unique design combinations. Type theme number 21 is a bonus theme that Jeremiah has created exclusively for Smashing Magazine’s readers — it features the beautiful font Alegreya3.

Each type theme is meticulously handcrafted, with attention paid to the smallest typographic details. The 16 thumbnail shape variations and 58 background textures that are included allow for a nearly endless combination of design styles — no two Type & Grids websites will look the same.


Type & Grids5

Instructions Link

  1. Download and open the ZIP file.
  2. Edit the only HTML file, index.html, to add your own content.
  3. Mix and match the included type and color CSS files to customize the design. All fonts shown in the demo are included.
  4. Upload your new website to your Web host. Done!
  5. Please include a “Powered by Type & Grids” link in the footer of your website as a credit link.

Demo And Downloads Link

Features Link

    • The code is clean, semantic and SEO-friendly.
    • It’s coded using the latest HTML5 and CSS3 standards, and all code is W3C-valid and cross-browser compatible.
    • Video is supported. Easily embed your videos from Vimeo or YouTube.
    • Works great for non-portfolio websites as well.
    • Support and documentation are available. (But everything is so simple to set up that you probably won’t need it.)

Type & Grids10

Type & Grids11

Type & Grids12

Behind The Design Link

Here’s what Jeremiah Shoaf has to say about his thinking behind the design:

“I created Type & Grids to use for my own design portfolio website. I’m the type of designer who is never happy with the final design, and I will just keep tweaking things forever. I’ll create one color scheme for a website and then get sick of it and create a new variation.

So, I decided to create “theme” CSS files for each color variation and for each typographic variation. This makes it easy to satisfy my need to constantly change things up. I ended up with 20 type themes and 29 color themes. When I turned Type & Grids into a template, my goal was to make it as simple to set up as possible. Other templates and themes out there seem to pack in so many features that the website ends up feeling bloated and difficult to use.

I tried to limit the features of Type & Grids to just the bare basics. So, I feel it’s a great solution for someone who wants to set up a simple website quickly. And the design customization options make it easy to make your website look unique and not at all like a template.”

Thanks for your fantastic work, Jeremiah!

Further Reading on SmashingMag: Link

(al) (ea)

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15

↑ Back to top Tweet itShare on Facebook

The Smashing team loves high-quality content and cares about the little details. Through our online articles, Smashing Books, eBooks as well as Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

  1. 1

    A year ago I released my own simple HTML5 template on Github. Might be useful

  2. 4

    Damanjit Singh

    August 7, 2013 3:30 pm

    Great Work Jeremiah.

  3. 5

    This is great. Thanks for sharing your work. I look forward to diving in and testing things out!

  4. 6

    Arek Dymalski

    August 7, 2013 3:11 pm

    That’s really, really nice. The only thing that I’d change is inverting the menu styling scheme – colored for active/visible subpage and faded for the other one. Oh and please change the free license to CC BY, so I can modify the template by myself :)

  5. 7

    I see you put a lot of work in it, nicely done. Wondering, though why all media queries are in px instead of em?

  6. 8

    Tiana Valenzuela

    August 7, 2013 7:29 pm

    Nice! Can’t wait to dive in and check it out. Thank you :-)

  7. 9

    Boris Jovanovic

    August 7, 2013 7:46 pm

    I am using Type&Grids for my personal portfolio ( Love it! Keep the good work!

  8. 10

    Gonzo the Great

    August 8, 2013 1:02 am

    .. please stop calling everything responsive! This layout is adaptive, NOT responsive!

  9. 11

    this is ridiculous…
    …ly awesome!

    Thank you.

  10. 12

    Great work :) Thanks for sharing your work

  11. 13

    Nice work. Thank you for this one. Will test it in a few minutes…

  12. 14

    You made my day. Great work, thanks!!! :)

  13. 15

    Isn’t this just: ?
    Not a fan of being restricted to 4 devices widths… prefer the mobile first approach:

  14. 16


  15. 17

    Daniel Heywood

    August 9, 2013 1:13 pm

    Jeremiah – nice work! Thanks for that!

  16. 18

    Looks great. Thanks!

  17. 19

    I think you should include HTML5BP license file in your package.
    Aside from that, very nice and lightweigth template. well done.

  18. 20

    I find the pro version at $60 a little pricey for a single site license for this design. You can buy complicated wordpress themes for much less. He should offer a buyout option for unlimited sites. The most disturbing part is the author has “hidden” code that will let him know when someone has “pirated” the pro version. I guess that is his right, but It makes me wonder what other code he is hiding in there.

  19. 21

    Thannnnkkk you. I love it.

  20. 22

    Harmeet Singh Bhamra

    October 4, 2013 3:33 pm

    Very well done :)

  21. 23

    I’m going to try this HTML-5 template on my currency converter project
    We’ll see how it goes :)

  22. 24

    Nicely done $ 60.00 very reasonable for time saved – pirates will be pirates but they are not the majority.

  23. 25

    Hi guys! I have created a framework that allows you to create a responsive site quickly and easily just by clicking buttons or if you want adding your html.. My framework is based on Foundation ( another framework ) but if you want you can select Bootstrap ( is converted from Foundation, so not all can be converted ).. This is the site:

    Tell me what you think about that .. Sorry if I was wrong to write in english :)

  24. 26

    thank you @The Smashing Editorial this freebies is very great and user friendly to edit and learn about grid sytem.


↑ Back to top