↓Skip to main content

Reveal.js and Zen Coding

·217 words·2 mins
Mike Bell
Author
Mike Bell

For those that don’t know me I hate HTML and CSS odd considering the profession I’m in.

I love when I see people do cool presentations and I really like to know how they’ve done it. Maybe I’m just a closet themer waiting to get out? Nah.

After watching Andrew MacPherson at nwdug this week I was really impressed with Reavel.js so figured I’d give it a go for my presentation next week at Drupal Yorkshire.

Reveal.js
#

Reveal.js is a javascript framework for creating really nice looking presentations quick and easily. It uses some HTML5 stuff mixed in with some nice CSS3/SASS magic.

Reveal comes with a few nice themes (including solarized dark which is actually called moon for some reason). Syntax highlighting seems a bit broken on my version though.

Zen Coding
#

I recently found Zen Coding by looking through the list of plugins in PHPStorm. It’s a really nice way of writing html in short hand: section>h1.header+p+ul*2

turns into:

<section>
     <h1 class="header"></h1>
     <p></p>
     <ul>
          <li></li>
          <li></li>
     </ul>
</section>

The really clean syntax means that you can easily create skeleton HTML code for layouts. If you couple this with bootstrap then it’s even more powerful for prototyping sites.

Overall I’m really happy with the results of my presentation, I’ll upload them after next week.