In this exercise, we are going to use a single Emmet equation that will illustrate how powerful the package is.
First, please download the sample files.
The downloaded folder is called HSLPaletteExercise—StarterFiles. Inside it is a single html file and a folder of images called color-palettes. The images are named sequentially (palette-01.png, palette-02.png, etc).
Open the downloaded folder as a new Atom project and open the html file.
We want to build a page with a .wrapper div containing 12 child DIVs, each of which has an image and five more divs. In a different exercise, each DIV will (eventually) look like this:
In that other exercise, the aim will be to create a page that shows color swatches, underneath which are DIVs that you give matching HSL background colors to.
Implicit Tags
Let’s start with the .wrapper DIV.
If we just use a class or an ID, Emmet will assume we want a DIV, so our equation will begin like this:
.wrapper
Press tab. The result will be
<div class = "wrapper">
Child Relationships and Multiplication
Inside that .wrapper div we will want 12 child divs.
A child relationship is created with a > character .
Grouping is created with round brackets.
Multiplication is done with the * symbol.
Counting is done with dollar signs for each digit.
With all that in mind, undo the step that transformed the equation and change your Emmett equation to the following:
.wrapper>(.palette$$>img)*12
Press tab. Your equation should expand to the following:
<div class="wrapper"> <div class="palette01"><img src="" alt=""></div> <div class="palette02"><img src="" alt=""></div> <div class="palette03"><img src="" alt=""></div> <div class="palette04"><img src="" alt=""></div> <div class="palette05"><img src="" alt=""></div> <div class="palette06"><img src="" alt=""></div> <div class="palette07"><img src="" alt=""></div> <div class="palette08"><img src="" alt=""></div> <div class="palette09"><img src="" alt=""></div> <div class="palette10"><img src="" alt=""></div> <div class="palette11"><img src="" alt=""></div> <div class="palette12"><img src="" alt=""></div> </div>
Attributes
That’s pretty impressive, but we need to add in the IMG src and alt attribute values.
To do that, we use square brackets. Undo the Emmett expansion and modify the equation:
.wrapper>(.palette$$>img[src="color-palettes/palette-$$.png"][alt="color palette $"])*12
That should expand to:
<div class="wrapper"> <div class="palette01"><img src="color-palettes/palette-01.png" alt="color palette 1"></div> <div class="palette02"><img src="color-palettes/palette-02.png" alt="color palette 2"></div> <div class="palette03"><img src="color-palettes/palette-03.png" alt="color palette 3"></div> <div class="palette04"><img src="color-palettes/palette-04.png" alt="color palette 4"></div> <div class="palette05"><img src="color-palettes/palette-05.png" alt="color palette 5"></div> <div class="palette06"><img src="color-palettes/palette-06.png" alt="color palette 6"></div> <div class="palette07"><img src="color-palettes/palette-07.png" alt="color palette 7"></div> <div class="palette08"><img src="color-palettes/palette-08.png" alt="color palette 8"></div> <div class="palette09"><img src="color-palettes/palette-09.png" alt="color palette 9"></div> <div class="palette10"><img src="color-palettes/palette-10.png" alt="color palette 10"></div> <div class="palette11"><img src="color-palettes/palette-11.png" alt="color palette 11"></div> <div class="palette12"><img src="color-palettes/palette-12.png" alt="color palette 12"></div> </div>
Add Five DIVs with a Sibling Relationship to the Image
After the image, we want to have five DIVs. So again undo and alter the Emmett equation by adding +.color$$*5 just before the closing bracket:
.wrapper>(.palette$$>img[src="color-palettes/palette-$$.png"][alt="color palette $"]+.color$$*5)*12
This should expand to 12 DIVs that look like this:
<div class="palette01">
<img src="color-palettes/palette-01.png" alt="color palette 1">
<div class="color01"></div>
<div class="color02"></div>
<div class="color03"></div>
<div class="color04"></div>
<div class="color05"></div>
</div>
The plus sign in the code we added indicates a sibling relationship: the five added DIVs are siblings of the img.
Adding Text
To add text to any element, we use curly braces: {}.
Let’s assume that there is an H1 already on the page. Here we will put an H2 inside all the palette DIVs, with the corresponding name text.
So after the opening of the .palette div in the equation, you will need to add: >h2{Palette $$}. Take care to make sure that the H2 is a child of the .palette div (>) and a sibling of the img tag (+).
.wrapper>(.palette$$>h2{Color Palette $}+img[src="color-palettes/palette-$$.png"][alt="color palette $"]+.color$$*5)*12
This should expand to
<div class="wrapper">
<div class="palette01">
<h2>Color Palette 1</h2>
<img src="color-palettes/palette-01.png" alt="color palette 1">
<div class="color01"></div>
<div class="color02"></div>
<div class="color03"></div>
<div class="color04"></div>
<div class="color05"></div>
</div>
<div class="palette02">
<h2>Color Palette 2</h2>
<img src="color-palettes/palette-02.png" alt="color palette 2">
<div class="color01"></div>
<div class="color02"></div>
<div class="color03"></div>
<div class="color04"></div>
<div class="color05"></div>
</div>
etc.
A Final Modification
I would like my “grouping” .palette DIVs to have an empty line after them. To do that, we could just use Atom’s multiple cursor features, among other methods.
However, we can “bake” the additional space into our Emmet equation with this combination of characters:
{${newline}}
If you are familiar with ES6, you will recognize the ${} pattern: they are placeholders used to embed expressions inside template literals. These allow us to nest variables, function calls, etc, within strings and have their values output as part of the string.
In Emmet, we can do something similar with the newline variable. The reason we need to have another pair of curly braces is that we need to be in text mode to use it. The outer braces, in other words, behave like backticks in template literals. The inner ${} means that the Emmet variable newline is treated not literally (as the word newline) but as a variable whose value is what we need to output.
So where do we put this in our equation? We want it after every .palette div. This is an easy thing to mix up, but we need to wrap another pair of round brackets around the whole .palette chain:
- put the opening round bracket just after .wrapper>.
- put the closing round bracket just before *12.
The equation now looks like this, with double round brackets around our .palette DIV:
.wrapper>((.palette$$>h2{Color Palette $}+img[src="color-palettes/palette-$$.png"][alt="color palette $"]+.color$$*5))*12
Now add our newline code as a sibling of the inner bracketted .palette DIV. In other words, in between the two closing round brackets, we add +{${newline}} so the whole equation should now look like this:
.wrapper>((.palette$$>h2{Color Palette $}+img[src="color-palettes/palette-$$.png"][alt="color palette $"]+.color$$*5)+{${newline}})*12
The outer brackets, in short, made the blank newline in our output come after the closing of each .palette DIV rather than inside each (as would have happened if we had only a single pair of round brackets.
<div class="palette01">
<h2>Color Palette 1</h2>
<img src="color-palettes/palette-01.png" alt="color palette 1">
<div class="color01"></div>
<div class="color02"></div>
<div class="color03"></div>
<div class="color04"></div>
<div class="color05"></div>
</div>
<div class="palette02">
<h2>Color Palette 2</h2>
<img src="color-palettes/palette-02.png" alt="color palette 2">
<div class="color01"></div>
<div class="color02"></div>
<div class="color03"></div>
<div class="color04"></div>
<div class="color05"></div>
</div>