Type & Grids: Free Responsive HTML5 Template

Advertisement

Today, we are pleased to introduce Type & Grids, a free responsive HTML5 template by Jeremiah Shoaf. 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 Alegreya.

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_500x450

Type & Grids

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

    Type & Grids

    Type & Grids

    Behind The Design

    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!

    (al) (ea)

    ↑ Back to top

The Smashing Team loves high-quality content and cares about 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.

    0
  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