Advertisement
Other

Vim Essential Plugin: Sparkup

by

The sparkup plugin, inspired by the popular ZenCoding, allows you to rapidly create HTML structures. It's an essential tool in your Vim handbag!


Usage

Sparkup is incredibly easy to use. Let's review a handful of use cases.

1. Create an Unordered List of Links

nav > ul > li > a*4 { Links }

Output


<nav>
   <ul>
      <li>
         <a href=""> Links </a>
         <a href=""> Links </a>
         <a href=""> Links </a>
         <a href=""> Links </a>
      </li>
   </ul>
</nav>

Note that we can create nested elements by using the > symbol. Additionally, to create multiple elements of the same type, use the * symbol (think multiply). Lastly, we can set the value of each element by wrapping a string within curly braces.

2. Create a Basic Website Structure

div#container > header > h1 { My Header } < + div#content { My Content } + footer > h2 { My Footer }

Output

<div id="container">
   <header>
      <h1> My Header </h1>
   </header>
   <div id="content"> My Content </div>
   <footer>
      <h2> My Footer </h2>
   </footer>
</div>

This time, we're using the < symbol to travel back up the chain. This allows us to create nested HTML structures, and then return to the top of the chain to further create sibling elements.

3. Apply Attributes to Elements

ul[class=nav]>li*5>a[href=http://url.com] { Link }

Output

<ul class="nav">
   <li>
      <a href="http://url.com"> Link </a>
   </li>
   <li>
      <a href="http://url.com"> Link </a>
   </li>
   <li>
      <a href="http://url.com"> Link </a>
   </li>
   <li>
      <a href="http://url.com"> Link </a>
   </li>
   <li>
      <a href="http://url.com"> Link </a>
   </li>
</ul>

Attributes can be applied to elements by placing them within brackets ([). If you omit the value -- like, a[href], you can then manually insert it after expansion. In MacVim, you can use the Control + N and Control + P shortcuts to toggle between the next and previous stop points.

Related Posts
  • Web Design
    Complete Websites
    Building the Responsive Timeline Portfolio PagePortfolio thumb
    During this tutorial we will be building the fantastic Timeline Portfolio as seen in an earlier tutorial by Tomas Laurinavicius. We will be using some responsive techniques as well as CSS3 animations, Sass and a little bit of jQuery.Read More…
  • Web Design
    HTML/CSS
    Build a Top Bar Off-Canvas Navigation With Foundation 5Foundation menu
    Today, we are going to combine ZURB's Foundation 5 Off-Canvas feature with our top bar navigation. The result will be a nice custom navigation for desktop users and a sleek off -canvas menu for tablet and mobile users. Read More…
  • Web Design
    UX
    Walk Users Through Your Website With Bootstrap TourTour retina
    When you have a web application which requires some getting used to from your users, a walkthrough of the interface is in order. Creating a walkthrough directly on top of the interface makes things very clear, so that's what we're going to build, using Bootstrap Tour.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Creating Template FilesCreating wordpress theme from html 400
    In the first part of this series, I showed you how to prepare your HTML and CSS files for WordPress, ensuring the structure would work, the code was valid and that the correct classes were being used. In this tutorial you'll learn how to take your index.html file and split it up into a set of template files for use by WordPress.Read More…
  • Web Design
    HTML/CSS
    The Truth About Multiple H1 Tags in the HTML5 EraH1 retina
    Whether you're a webmaster or a web designer, there's a question you've most likely either asked or answered many times over the years. That question is, "How many <h1> tags can I use per page, and how exactly should I implement them?"Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Preparing the MarkupCreating wordpress theme from html 400
    Last year I did a small (and admittedly very un-scientific) survey among other WordPress developers. What I wanted to know was this: When they built their first WordPress theme, how did they do it? Did they hack an existing theme or did they start with their own static HTML and turn it into a theme? The majority of people I spoke to used the second approach - they were all experienced frontend developers who had built sites using HTML and CSS, and found it easiest to take their existing HTML files and convert them to a theme. Two of the people I spoke to were lecturers or teachers, and told me that this is the approach they use with students. So in this series I'm going to show you how to do just that.Read More…