Category: HTML

HTML specific posts

10 Years of HTML5 Boilerplate

Posted on by Rob Larsen

some of the many contributors to HTML5 Boilerplate

While we’re preparing an upcoming release, I didn’t want the day to go by without mentioning that ten years ago today, HTML5 Boilerplate was released. Here’s the story of the project as we wrote it up a few years ago.

The History of HTML5 Boilerplate

Sometime in 2009…

“Wouldn’t it be great if we created a document that would be the starting point for developers?”

The boilerplate was started with the above quote in mind. While at Isobar / Molecular, Paul Irish began combining frequently copied and pasted chunks of code into a single document. The document would consist of basic, low level snippets to be used on upcoming projects. It began building on top of itself throughout each new project. This document was being created around the same time as the Isobar Best Practices.

But first…


The first written evidence of h5bp. See “starting template” at the bottom.

The Isobar / Molecular Standards Doc started in the summer of 2009. Work continued throughout the year. On April 30th, 2010, it went public (original post). Feedback was fantastic and a lot of people started adopting / following the guidelines laid out in this doc.

“Ongoing feedback was great (filling in a little bit since Paul left right after it launched) It was the #1 page on the isobar site forever and would make the rounds once every couple of months with a huge traffic spike as new people discovered it. It was actually very cool to have people come in for interviews and want to work with us because they’d seen the standards doc.” – Rob Larsen

Meanwhile…

The HTML5 Boilerplate was started in Jan 2010 under the name “frontend-pro-template“. Divya Manian and Paul Irish meet during SXSW at Halcyon (the coffee shop with s’mores). This was the first time they met in person to discuss the project, brainstorming was continued back and forth over IM.

On Mar 20, 2010, Divya made the first outside contribution. Up to this point, Adam McIntyre and Rob Larsen had contributed when it was still a Molecular project.

Things are getting hawt in huurrr… so hawt…

April 5, 2010, hawttt pink makes an appearance. Hawttt pink was first seen at Dan Cedarholm’s dribbble.com. The clear choice when choosing something that’s hawttt and sexy and catches your eye, is #FF5E99.

“Some sort of whimsy needs to be a part of every project. But, it’s a bit tricky on a project that will be used by everyone, so the text selection color is a perfect spot for this” – Paul

Paul also gave an early tease about the project to Rey Bango in an interview (skip to 3:15 of the Paul video). Intrigue!

It’s never too early…

wassup sass

May 14th, 2010, the team starts to experiment with Sass. Divya was the catalyst behind this because as she claims.. “Paul does not believe in being an early adopter :P”. But the project settled on using CSS to appeal to a wider audience.

Did you know…

Some of the names for the project that didn’t make the cut:

  • Pro Frontend Template
  • Starting HTML5 Template
  • Markup Zygote

Paul came up with the name HTML5 Boilerplate in the car on the way to his parents house. The project isn’t truly a “boilerplate”. A boilerplate is the bare minimum amount of code needed for a project. H5BP isn’t the bare minimum.

June 2010 Paul leaves Isobar and heads to a little startup called Google.

July 6, 2010 the project name is officially changed to HTML5 Boilerplate

HTML5 Reset-er-um-plate-ish…

The day before H5BP launched, HTML5 Reset went live. The projects had similarities. Divya had been pushing to launch earlier, but the desire for a build script was holding it back. The build script was such an important part of the project, performance, etc.. but the work was underestimated. The launch of HTML5 Reset made the team decide to launch the project without the build script… for now.

“If we wait a week, we lost and all this work was wasted” – Paul.

HTML5 Boilerplate releases…

In Aug 2010, the HTML5 Boilerplate ships. Contributors included: Jonathan Neal, Garowetz, Jdbartlett, Rob Larsen, and Mathias. About 120 watchers initially but not many commits, yet.

Aug. 13th, 2010, Rob kicked off the Ant build script. Even though it’s difficult to introduce Ant, Java and XML to front-end developers, the build script was extremely important. The build script was created with the ySlow and PageSpeed guidelines in mind. Ant was the proper solution.

Shi Chuan starts to contribute.

A mobile home…

Dec 16, 2010 Mobile Boilerplate launched

To infinity and beyond…

Since the launch, the growth has been linear.

Unilever was a major early adopter (where’s the pink bro?), and Twitter’s use in 2010 was huge as well. Because H5BP is a starting point, the project didn’t start showing up in the wild for a few months after the initial release. Many sites, which were currently in production, couldn’t start over and implement H5BP after it launched. But soon, many sites were using it.

As soon as it shipped people began contributing and reporting bugs here and there. GitHub FTW. Steadily The project climbed to the #4 most watched on GitHub. Since the release of Twitter Bootstrap, HTML5BP has settled at #5.

This doc was primarily written by Tony J Camp based on issue 844. Original notes here.

New Book- The HTML and CSS Workshop: A New, Interactive Approach to Learning HTML and CSS

Posted on by Rob Larsen

I only wrote a chapter in this new book, The HTML and CSS Workshop: A New, Interactive Approach to Learning HTML and CSS, but it is a new book and my name is on it and it’s on Amazon, so it’s still ???? cool. I wrote the chapter on Themes, Colors, and Polish.

Here’s what Packt says:

Cut through the noise and get real results with a step-by-step approach to learning HTML and CSS programming

Key Features

  • An HTML and CSS tutorial with step-by-step exercises and activities
  • Structured to let you progress at your own pace, on your own terms
  • Use your physical print copy to redeem free access to the online interactive edition

Book Description

You already know you want to learn HTML and CSS, and a smarter way to learn HTML and CSS is to learn by doing. The HTML and CSS Workshop focuses on building up your practical skills so that you can build your own static web pages from scratch, or work with existing themes on modern platforms like WordPress and Shopify. It’s the perfect way to get started with web development. You’ll learn from real examples that lead to real results.

Throughout The HTML and CSS Workshop, you’ll take an engaging step-by-step approach to beginning HTML and CSS development. You won’t have to sit through any unnecessary theory. If you’re short on time you can jump into a single exercise each day or spend an entire weekend learning about CSS pre-processors. It’s your choice. Learning on your terms, you’ll build up and reinforce key skills in a way that feels rewarding.

Every physical print copy of The HTML and CSS Workshop unlocks access to the interactive edition. With videos detailing all exercises and activities, you’ll always have a guided solution. You can also benchmark yourself against assessments, track progress, and receive free content updates. You’ll even earn a secure credential that you can share and verify online upon completion. It’s a premium learning experience that’s included with your printed copy. To redeem, follow the instructions located at the start of your HTML CSS book.

Fast-paced and direct, The HTML and CSS Workshop is the ideal companion for a HTML and CSS beginner. You’ll build and iterate on your code like a software developer, learning along the way. This process means that you’ll find that your new skills stick, embedded as best practice. A solid foundation for the years ahead.

What you will learn

  • Get to grips with the key features of HTML5 and CSS3
  • Learn how to integrate animation, media, and custom themes
  • Understand how you can easily customize and maintain CSS
  • Develop your own mobile-first approach while designing websites
  • Learn how to diagnose and resolve common style and structural problems

Who this book is for

Our goal at Packt is to help you be successful, in whatever it is you choose to do. The HTML and CSS Workshop is an ideal HTML and CSS tutorial for the HTML and CSS beginner who is just getting started. Pick up a Workshop today, and let Packt help you develop skills that stick with you for life.

Table of Contents

  1. Introduction to HTML and CSS
  2. Structure and Layout
  3. Text and Typography
  4. Forms
  5. Themes, Colors, and Polish
  6. Responsive Web Design and Media Queries
  7. Media – Audio, Video, and Canvas
  8. Animations
  9. Accessibility
  10. Preprocessors and Tooling
  11. Maintainable CSS
  12. Web Components
  13. The Future of HTML and CSS

HTML5 Boilerplate 7.3.0 Released

Posted on by Rob Larsen

We just released HTML5 Boilerplate 7.3.0.

In addition to the changes below, we also started using Github Actions to publish our npm package. It was pretty easy. I wrote up the process.

HTML5Boilerplate Changelog

  • Updated to Modernizr 3.8 (2b2bb45)
  • Updated to Gulp 4 (#2151)
  • Updated package.json (#2162) and enabled package-lock.json (abe2087),(#2145)
  • Remove redundant rules from .editorconfig (#2157)
  • Small docs maintenance updates (#2155), (#2164), (#2165), (#2167) & (#2168)
  • Bump lowest supported version of node to 8.x (#2142)
  • Remove .jscsrc config and remove gulp-jscs from package.json (#2153)

Thanks again to Christian Oliff for his work on this release. I continue to appreciate his help on tasks and his attention to detail. I’d be a mess without him on the team.

And, as always, thanks to our many contributors. You are the best!

As always, are you interested in helping out? Check out our current issues, submit an idea for a new feature or look at one of the other H5BP projects to see if there’s something else you’re interested in helping with. It’s fun.

Download the latest from github or install it from npm.

HTML5 Boilerplate 7.2.0 and main.css 2.0.0 released

Posted on by Rob Larsen

We just released HTML5 Boilerplate 7.2.0 and main.css 2.0.0. Even with the major release number on main.css, both of these are basically maintenance releases. Open Source isn’t always about the big stuff.

We also did a bunch of clean-up around the related H5BP projects, with updates to HTML5Boilerplate.com and h5bp.org. We integrated main.css as a direct dependency on both projects and did some other clean-up.

HTML5Boilerplate Changelog

Download the latest from github or install it from npm.

main.css Changelog

  • Add .stylelintrc config (#18)
  • Rename visuallyhidden to sr-only (#27)
  • Fix broken link to ‘printing tables’ page (#20)
  • Alphabetize properties (#20)
  • Add stylelint-config-recommended to package.json
  • Add CONTRIBUTORS.md(#9)
  • Minor devdeps and README updates (#11), (#24)

Download the latest from github or npm