Type & Grids: Free Responsive HTML5 Template

Advertisement

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.

typeandgrids_500x4504

Type & Grids5

Instructions

  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

Features

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

  1. 1

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

    0
  2. 2

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

    7
  3. 3

    A year ago I released my own simple HTML5 template on Github. Might be useful http://simpliste.ru/en/

    2
  4. 6

    Great Work Jeremiah.

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

    4
  6. 8

    Tiana Valenzuela

    August 7, 2013 7:29 pm

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

    0
  7. 9

    Boris Jovanovic

    August 7, 2013 7:46 pm

    I am using Type&Grids for my personal portfolio (http://bespokegrafiks.com). Love it! Keep the good work!

    0
  8. 10

    Gonzo the Great

    August 8, 2013 1:02 am

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

    0
  9. 11

    this is ridiculous…
    …ly awesome!

    Thank you.

    0
  10. 12

    Great work :) Thanks for sharing your work

    0
  11. 13

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

    0
  12. 14

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

    0
  13. 15

    Isn’t this just: http://www.getskeleton.com ?
    Not a fan of being restricted to 4 devices widths… prefer the mobile first approach: http://stuffandnonsense.co.uk/projects/320andup/

    0
  14. 16
  15. 17

    Jeremiah – nice work! Thanks for that!

    0
  16. 18

    Looks great. Thanks!

    0
  17. 19

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

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

    0
  19. 21

    Thannnnkkk you. I love it.

    0
  20. 22

    Harmeet Singh Bhamra

    October 4, 2013 3:33 pm

    Very well done :)

    0
  21. 23

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

    0
  22. 24

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

    0
  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: http://responsivetemplater.altervista.org/

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

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top