An Interest In:
Web News this Week
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
Vim Essential Plugin: Sparkup
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=https://url.com] { Link }
Output
<ul class="nav"> <li> <a href="https://url.com"> Link </a> </li> <li> <a href="https://url.com"> Link </a> </li> <li> <a href="https://url.com"> Link </a> </li> <li> <a href="https://url.com"> Link </a> </li> <li> <a href="https://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.
Original Link: http://feedproxy.google.com/~r/nettuts/~3/Sd6pW40hAug/
TutsPlus - Code
Tuts+ is a site aimed at web developers and designers offering tutorials and articles on technologies, skills and techniques to improve how you design and build websites.More About this Source Visit TutsPlus - Code