HTML and CSS prototyping in CodePen io with Emmet

It’s often said, “I can build a prototype page or a proof of concept together.” It is not uncommon that “just once” is actually too long. But if you know how, it can go really fast.

Thanks to online editors like CodePen.io, trying out CSS properties on a small DOM snippet is quick and convenient. However, I recently got to know Emmet.io, which was implemented by CodePen.io some time ago.

Emmet provides us web developers with an extremely useful and above all short syntax for generating HTML and CSS.

Example (Navigation)

If I want to create a prototype of a navigation, I usually start with the following HTML structure.

Markup

<nav>
    <ul>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</nav>

CodePen can generate the above HTML with the following statement.

nav>ul>li*4>a[href="#"]{Item}

Just type in this line and press Tab – wow, right? There are also short spellings for CSS rules that can be used for efficient prototyping.

Example (CSS)

CSS

ul {
    lis:n
}

a {
    d:b
    p1rem
    bgc
}

/* erzeugt */

ul {
    list-style: none;
}

a {
    display: block;
    padding: 1rem;
    background-color: #fff;
}

The commands are certainly best internalized if you can work with them every day in your favorite development environment. Getting used to it will certainly take some time, but it will probably pay for itself quite quickly with the new way of working.

Larger tables are also a popular use, which one likes to test e.g. in the context of responsive tables.

Example (table)

Markup

<table>
     <thead>
          <tr>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
               <th></th>
          </tr>
     </thead>
     <tbody>
          <tr>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
          </tr>
          <tr>
               <td></td>
               ...
          </tr>
          ...
     </tbody>
</table>

Emmet

Many thanks to Sergey Chikuyonok, who provides us with Emmet free of charge. Thanks to some other developers, Emmet is already available in many editors and IDEs, maybe even in your?

How can I learn the syntax?

I think the best overview of Emmet’s features is the cheat sheet. Emmet includes many other cool features besides the few shown above, as well as other tools for efficient code editing. A good place to start is of course the official documentation.

Watch out: Not all features are implemented in all of the editor plugins – you might have to do some research here if things don’t work out as expected.