Basic Example

Take a look at the example page and View > Source while you’re there.

If you’re on mobile, you can see examples here:

Here is the CSS I am specifying:

/* Start with some normal styles to set the page */

body { 
  font: 700 28px "Lato"; 
  color: #444; 
  text-align: center;
}

h1, h2 { 
  font-size: 1.5em; 
}

li { 
  padding: 1.25em; 
  margin: 1em; 
}

/* Using emojis for Class and ID names */

#🍴 { 
  width: 75%; 
  margin: .25em auto; 
  max-width: 800px;
}

#📝 { 
  list-style: none; 
  padding: 0; 
}

.🍓 { color: #ff4d4d; }
.🍌 { background: #ffff99; }
.🍊 { border: 1em solid #ffb366; }

.👓 { 
  font: 300 italic .85em "Lato"; 
  margin-top: 0; 
  padding:0;
}

/* Other unicode characters can also be used */

#➤ { 
  border-top: 1px solid silver; 
  margin-top: 5em; 
}

.⦿ { 
  font-size: 14px; 
  text-decoration: none; 
  color: #4da6ff; 
}

.⦿:hover { 
  text-decoration: underline; 
  color: #007fff; 
}

The HTML uses the classes and IDs as you would expect:

<div id="🍴">
  <ul id="📝">
    <li class="🍓">Strawberry</li>
    <li class="🍌">Banana</li>
    <li class="🍊">Orange</li>
    <li class="🍓 🍌 🍊">Fruit Salad</li>
  </ul>
</div><!-- END #🍴 -->	
<footer id="➤">
  <p><a href="/" class="⦿">Alistair Calder</a></p>
</footer>