Emmet Workflow
Building with Emmet: Streamlining Your HTML and CSS Workflow
Table of contents
- Introduction
- What Is Emmet
- Getting Started
- HTML Boilerplate Structure
- Adding link tags
- Creating single element
- Generating Lorem ipsum
- Creating Nested elements
- Creating multiple elements of the same type
- Creating Sibling elements
- Adding Class and ID
- Numerical Placeholder
- CSS Structure
- Background and Colour
- Display
- Padding and margin
- Box Sizing and Borders
- Fonts and text
- Conclusion
- Recourses
Introduction
Building web pages often gets tedious because you have to repeat an element. Copying and pasting can be helpful. However, there is a better approach. Emmet makes everything simpler and faster. By the end of this article, you will have a solid understanding of how to use Emmet to streamline your web development workflow.
What Is Emmet
Emmet is a web development toolkit that can greatly improve your HTML and CSS workflow. It is an abbreviation and snippet tool that allows us to type shortcuts, which are then expanded out into a complete section of code. Emmet auto-completion helps us speed up our code and remove human error.
Emmet is built into modern text editors such as Atom, Sublime, and VsCode. It's also available as a plugin.
Getting Started
For this tutorial, I'll recommend you use vscode because Emmet is already built-in. If not you can download the plugin suitable for your text editor -https://emmet.io/download/
HTML Boilerplate Structure
The first thing we need in a web project is a boilerplate structure. To get this using Emmet,
Type an exclamation mark!
Press the enter button.
Emmet will produce.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Adding link tags
To link your HTML to your css file.
Type link:css
Press the enter button Which expands to
<link rel="stylesheet" href="style.css">
You can proceed to change the name of the CSS file if you are're using a different one. For example:
<link rel="stylesheet" href="article.css">
Creating single element
Now that we’re done with the head, let’s add some elements to the body. To create a div.
Type div
Press enter Emmet gives you
<div></div>
To create a p.
Type p
Press enter Emmet gives you.
<p></p>
You can do this for any type of HTML element. Emmet has more functionalities, so let’s uncover more.
Generating Lorem ipsum
Need a temporary text for display? Unlike the old days, where you would copy and paste lorem ipsum from a website, with emmet, you can do it in the twinkle of an eye. To achieve this
Type in with a specified number lorem10
Press enter
Emmet will ouput
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, quisquam.
You can generate any amount of lorem ipsum you want 100, 200….1000.
Creating Nested elements
Just think of it as an onion bulb, one layer inside another, and so on. Nesting means creating an element inside an element that then has another element inside it, and so on. Those nested elements are called child elements, and the one at the top is the parent. Emmet allows you to specify children for your elements by using the child operator.> For example lets put a list item inside an unordered list, which is wrapped in a div.
To execute this
Type div > ul> li
Press enter
Emmet will produce
<div>
<ul>
<li></li>
</ul>
</div>
Creating multiple elements of the same type
You no longer need to repeat yourself. Emmet's got you covered. Using the * operator, you can generate multiples of an element without repeating yourself.
For example, let us generate five list items inside an unordered list.
Type ul>li*5
Press enter
Emmet returns
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Creating Sibling elements
A sibling element is an element at the same level as the parent element. Emmet allows us to make use of the sibling operator + to create elements at the same level. We can use the ( ) to group the siblings so we can apply children's elements to them.
For example div>(ul>li*3)+(div>p*2)
results in.
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<div>
<p></p>
<p></p>
</div>
</div>
Adding Class and ID
Classes and IDs help us target our elements when adding styles. You can add.class-name and #id-name to give your element this attribute. Why can multiple classes be given to an element but not an id? This is because IDs are unique identifiers and can be used only once.
For example,.first-class.second-class>ul.list-class>#list-item$*3 this gives us
<div class="first-class second-class">
<ul class="list-class">
<li id="list-item1"></li>
<li id="list-item2"></li>
<li id="list-item3"></li>
</ul>
</div
Emmet also allows item numbering by combining the multiple operator * with the numerical placeholder operator$.
Numerical Placeholder
Let's talk more about the numerical placeholder$. The dollar sign represents a numerical placeholder, so when using this symbol, replace it with the number corresponding to its position.
More examples .container>ul>li*3{list-item$} this returns.
<div>
<ul>
<li>list-item1</li>
<li>list-item2</li>
<li>list-item3</li>
</ul>
</div>
CSS Structure
CSS helps us add style to our web pages written in HTML or XML. let’s run through some common emmet shortcuts for CSS.
Background and Colour
Emmet gives us a shortcut for adding colors; we only specify the numerical characters once, and Emmet does the rest for us.
Shortcut | Description | Syntax |
| Gives you color black |
|
| Gives you color white |
|
| Gives you a black background |
|
| Gives you a white background |
|
| Adds an image to the background |
|
Display
Let’s talk about setting the display properties. Emmet provides us shortcut to make this simpler and faster
Shortcut | Description | Syntax |
| To display block |
|
| To display inline |
|
| To display |
|
| To display flex |
|
| To display none |
|
Padding and margin
For margin and padding, we can set shorthand properties for them as a whole or properties for each side's (padding-left or right). We also have a shortcut to specify the unit. Anytime you don't specify a unit it always takes pixels (px).
Shortcut | Description | Syntax |
| Without specifying the unit it gives us padding of 10px on all sides |
|
| This gives padding on all sides of 1rem |
|
| This gives padding of 1rem top and 2rem bottom |
|
| Without adding a unit returns a padding-right of 10px |
|
| This gives padding-right of 2rem |
|
| This gives padding-top of 10% |
|
| This gives padding-bottom of 5% |
|
The same logic is applied in the margin; you either set shorthand properties for the whole document or for each side.
Shortcut | Description | Syntax |
| Returns a margin of 15px on all side |
|
| Returns a margin-right of 5em |
|
| Returns a margin of 20% |
|
| Returns a margin-top of 5% |
|
| Returns a margin-top of 3rem |
|
Box Sizing and Borders
The box-sizing property in CSS allows you to specify how the dimensions of an element should be calculated. This can be useful for creating consistent layouts and avoiding unexpected behavior. The property accepts values for content-box, border-box, padding-box, and inherit.
Shortcut | Description | Syntax |
| Sets box-sizing to content-box |
|
| Sets box-sizing to border-box |
|
| Sets width to 25% |
|
| Sets height to 50px |
|
| Sets min-width to 10px |
|
| Sets min-height to 10px |
|
| Sets max-width to 15px |
|
| Sets max-height to 15px |
|
The border shortcut will always give you a 1 px solid border in black, and you can change the values if needed.
Shortcut | Description | Syntax |
| Sets an equal border on all sides |
|
| Sets the right border |
|
| Sets the left border |
|
| Sets the top border |
|
| Sets the bottom border |
|
| Sets the border to none border |
|
Fonts and text
The font property is used to change the font of text in HTML. The font property takes values like font-style, font-variant, font-weight, font-size, line-height, and font-family.
The emmet shortcut for font property is as follows:
Shortcut | Description | Syntax |
| This gives a font-family of serifs which is the default option on most web browsers. |
|
ffss | This gives us a font-family of sans-serif. |
|
| This gives a font-size of 1.2 rem |
|
| This gives a font size of 20px as we didn’t specify a unit |
|
| This gives us a font-weight of normal |
|
| This gives us a font-weight of bold |
|
| This gives a font-weight of that value here 500 |
|
| This gives the font a style of italic |
|
| This gives us an oblique text |
|
Emmet abbreviation for text
Description | Syntax | |
| This removes any text decoration | text-decoration: none; |
| Underlines the text | text-decoration: underline; |
| Aligns text to the left | text-align: right; |
| Aligns text to the right | |
| Aligns text to the center text | text-align: center; |
| This gives us justify text | text-align: justify |
Conclusion
Undoubtedly, emmet is a valuable tool for any developer looking to increase their productivity and streamline their workflow. Whether you are a beginner or an experienced pro, Emmet is a tool that you should consider adding to your toolbox. It will save you time and effort on every project you work on. Work smarter, not harder, and next time, begin with an exclamation mark!