Getting Started with Emmet

Emmet, a toolkit for web developers, integrates with your text editor to rapidly increase your speed in laying out HTML and CSS. This course is an introduction to Emmet and how developers can use it, including making custom shortcuts and macros.
Course info
Rating
(49)
Level
Beginner
Updated
May 13, 2016
Duration
55m
Table of contents
Description
Course info
Rating
(49)
Level
Beginner
Updated
May 13, 2016
Duration
55m
Description

Writing HTML and CSS can really slow down the process of developing web applications. But there is a tool that can speed things up! This course, Getting Started with Emmet, introduces developers to the open-source toolkit Emmet (emmet.io), a toolkit for web developers. Emmet integrates with your text editor to increase your speed when writing out HTML and CSS. This course will first teach you how to get started with Emmet and use it in Sublime Text. Next, you'll learn how to build HTML and CSS with descendent/sibling functions and the fuzzy searching feature. Finally, you'll learn how to write custom snippets, which will allow you to write definitions for HTML or CSS elements that aren't included in the default Emmet definitions. By the end of this course, you will have a foundational knowledge of Emmet that will help you to write out HTML and CSS faster and better than ever.

About the author
About the author

Kristian Freeman is a software developer living in Washington state. His focus is on web applications, using Ruby on Rails, Ember.js, and React. In his spare time, he enjoys producing music, traveling, and playing with his dog, Shiro.

More from the author
Integrating Payments with Ruby on Rails
Intermediate
1h 46m
Dec 14, 2015
Section Introduction Transcripts
Section Introduction Transcripts

Building HTML
In the previous module we used Emmet's sibling syntax to define HTML elements that sit next to each other in the DOM. For instance, a list element tag often will have a sibling element that is also a list element. In this module we'll expand on our knowledge of Emmet by learning the descendent syntax, which allows us to define parent and children relationships in HTML. Using the previous example, we would now be able to define the parent unordered list element, or ul, as well as the list elements contained inside of it. If you're familiar with CSS, you'll be pleasantly surprised to learn that the descendant syntax for Emmet is entirely based off the descendant syntax in CSS. That is, by writing the right angle bracket we can define a parent element and then the accompanying child element. Let's try an example so that you can get familiar with it. We've previously talked about the unordered list element and the list element that is often inside of it. By writing ul>little and pressing Tab, we can see that Emmet expands this to an unordered list element with the list element inside of it. In fact, we can make use of both the descendent and sibling syntax to fully define this example. Ul>li+li will expand to an unordered list element with two list elements inside of it. It's likely that the descendant and sibling snippets will be your two most used tools in Emmet. Now that we have learned both I want to start building an actual website so you can begin to get a sense of how powerful Emmet can be in real web development.

Building CSS
In this module we'll use Emmet's CSS helpers to begin adding styles to our movie page. A lot of the commands that we learned previously for HTML, like climb up, grouping, and even descendent, don't really work in CSS because the syntax is a lot more basic than HTML. While most of Emmet's commands are for writing HTML, it includes a few basic commands for CSS. The first command we'll learn is Emmet's fairly broad abbreviation syntax. For instance, if we wanted to define a margin of 10 pixels on div, we would simply write m10 and press Tab. Emmet's CSS functionality includes what's referred to as fuzzy searching where it will attempt to guess what CSS property you're trying to use. Removing the margin definition we can play with a couple other guesses at CSS properties. For instance, bt5 expands to border-top 5 pixels. The 5 in the snippet defaults to pixels, but you can also use other units, for instance 5% will expand to, as you might guess, 5% and 5e will expand to 5em. We can combine numbers using the hyphen on properties that accept multiple values. p5-15 will expand to padding 5 pixels 15 pixels. We can also use negative units like m-50, which will expand to margin -50 pixels. Now with these in mind let's write some simple CSS to begin styling our movie list.

Writing Custom Snippets
In this module we'll explore Emmet's built in snippets and write our own to understand how they're implemented. To begin, let's find Emmet's snippet definitions. The easiest and most current way to do this is to visit Emmet on GitHub. Go to github. com/emmetio/emmet. Navigate to the lib folder and open snippets. json. This is the entirety of Emmet's snippet library. Notice on the 10th line that the CSS section begins. In the snippets hash you can see each abbreviation followed by the expanded text that Emmet will replace it with. If you're feeling clever you can begin to read some of these snippets and probably figure out the definitions. But I'll cover the basics of writing them in just a bit. For now, let's scroll down towards the bottom of the file and look for the HTML section. Here we can see a variety of useful snippets including the input section, which will allow us to expand many types of inputs for pretty short abbreviations. I'll test a couple of them in our index. html just to confirm that they work as expected (Typing). This file is a good resource. If you're working with Emmet in HTML, it might be useful to keep it around in case you need to search for a particular abbreviation. Next, using these snippets as templates, let's learn how to write our own snippet that we'll use to write HTML that we'll be reusing often.