Menu Search
Jump to the content X X
Smashing Conf San Francisco

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. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

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