1. Getting StartedWhat is Emmet?| 00:00 |
So, maybe you're asking yourself.
What is Emmet, and how can it possibly
| | 00:03 |
help me code faster?
Emmet is a plugin for code editors for
| | 00:08 |
Sublime Text, Coda, Text Made, and others,
that makes it easier to write HTML and CSS code.
| | 00:15 |
It uses the CSS selector syntax, so it's
super easy to learn.
| | 00:19 |
So, for example if you type something like
this in your text editor, it'll get
| | 00:22 |
converted to something like this.
So, you can see that the expansion
| | 00:26 |
corresponds very well to the abbreviation.
So, here I'm asking for an h1 with a class
| | 00:32 |
of main.
You can see the class right here.
| | 00:34 |
And then an id of first, which is what I
have here.
| | 00:38 |
And, then, I want a paragraph after that,
which is what I get down here.
| | 00:42 |
So, if you're familiar with how CSS works,
Emmet is really going to to be a breeze
| | 00:46 |
for you to pick up.
In most editors, simply hitting the Tab
| | 00:49 |
key is going to expand your shortcuts.
So, once it's set up, it'll feel like it's
| | 00:53 |
part of your current editor.
You can add new snippets to customize the
| | 00:57 |
experience by adding a simply JSON file
and Emmet adds additional shortcuts and
| | 01:02 |
command to your editor.
So, that you can do things like easily
| | 01:05 |
expand the selection up and down the dom,
convert text to comments.
| | 01:10 |
And add Greek text when you're laying out
your pages.
| | 01:12 |
Because it works with different editors,
it can provide a consistent workflow.
| | 01:17 |
Once you learn the commands for Emmet in
one editor, you can easily pick them up if
| | 01:21 |
you switch to another of the supported
editors.
| | 01:23 |
Trust me, once you start using Emmet,
it'll become second nature.
| | 01:26 |
And after a while, you won't want to code
HTML or CSS in any other way.
| | 01:31 |
| | Collapse this transcript |
| Installing Emmet| 00:00 |
Installing Emmet depends a lot on the type
of browser you have.
| | 00:03 |
So if you go to the main Emmet website at
emmet.io and scroll down here to the
| | 00:08 |
bottom of the page, you can click on this
Download button.
| | 00:11 |
This will take you to this page, which
shows all the different editors that Emmet supports.
| | 00:16 |
And you can see that there's a lot of
them.
| | 00:18 |
Each of those is going to have one or two
ways of installing Emmet and sometimes
| | 00:21 |
it'll depend on the platform you're using.
So to install Emmet for something like say
| | 00:26 |
sublime text, you would click on this, and
then read the instructions for that editor
| | 00:30 |
and your platform.
So, if you'll scroll down here it shows
| | 00:33 |
you that in order to install Emmet, you
need to have Package Control installed, or
| | 00:37 |
you can do it by cloning the get repo.
A lot of the editors will give you a
| | 00:41 |
cloning to get repo option.
We'll use Package Control.
| | 00:44 |
So to do that, I'm going to click on this
link right here and this is the website
| | 00:48 |
for Package Control, which is a big part
of sublime text.
| | 00:52 |
If you click on the installation
instructions, you can see that it tells
| | 00:55 |
you that you need to hit Ctrl key and then
Paste this command in the dialog box that
| | 01:00 |
you get.
So I already have Package Control
| | 01:03 |
installed in my version of sublime text so
let me go ahead and read some of the other instructions.
| | 01:08 |
So it says, simply run package control,
and then install package, and find the
| | 01:12 |
Emmet plugin.
And then restart the sublime text editor
| | 01:15 |
if required.
I don't think it's required, so I'm
| | 01:17 |
going to switch over to sublime text.
And what I want to do is run Package
| | 01:22 |
Control, which you could do by going to
the Menu, selecting Tools and then hitting
| | 01:27 |
the Command Pallete right here.
I can tell that you can hit Cmd+Shift+P on
| | 01:32 |
a Mac, so I'll do that and type in install
and then the command install package will
| | 01:36 |
come up.
So I'm going to hit Enter, and another
| | 01:39 |
list will come up, like this, and I
want to type in the package that I want to install.
| | 01:43 |
In this case, it's going to to be Emmet.
Now you don't want to install Emmet CSS
| | 01:46 |
Snippets, just the regular Emmet, right
here.
| | 01:49 |
So I'm going to click on this and Emmet
will be installed when I get this text
| | 01:52 |
right here.
So you want to test to make sure that it's
| | 01:54 |
been installed, cause you may have to
restart your editor.
| | 01:57 |
So, I'm going to type in an abbreviation
here h1 and then plus, p and then hit tab.
| | 02:03 |
And notice that it's expanded that into
headline and a paragraph, and that means
| | 02:09 |
that Emmett is working.
Now, one thing you have to be careful is,
| | 02:12 |
I saved this file already as test.html.
So if this is on untitled or if you
| | 02:18 |
haven't saved this file, then what you
want to do is hit Ctrl+E or for Save to
| | 02:21 |
file as .html document.
So that seemed pretty easy.
| | 02:25 |
Let's go ahead and find out how you would
install it in a different editor.
| | 02:29 |
So I'm going to go back into my download
page, and I'm going to click on another one.
| | 02:33 |
I have Coda in my machines, so I'll click
on Coda.
| | 02:35 |
Now the Coda instruction again takes you
to a github page.
| | 02:38 |
You can see we're in github if I scroll
up.
| | 02:40 |
And it tells you that you can install
either by cloning the project into a
| | 02:45 |
folder on your hard drive, right?
And it looks something like this.
| | 02:49 |
And there's actually two ways and so if
you have Coda 1 you do this.
| | 02:52 |
If you have Coda 2 you actually have to
use this one right here.
| | 02:56 |
So I'm going to Copy this cause this seems
the easier of the two instructions.
| | 03:00 |
Notice that Coda 1 is right here, Coda 2
is there and then there's also this other
| | 03:03 |
way of doing it which seems longer.
So I'm going to Copy that command, and
| | 03:07 |
I'll switch over to my terminal.
And I'm going to type this CD command, and
| | 03:11 |
then Paste that URL right there.
Which switches you to the proper directory.
| | 03:15 |
Now if it doesn't, you probably need to go
to your home folder and just find it manually.
| | 03:20 |
And actually what's happening here is that
whenever you have a base like this, you
| | 03:24 |
need to actually put in quotations.
because it doesn't like to use bases and
| | 03:28 |
then names.
So we're going to go ahead and fix this by
| | 03:30 |
typing in quotations and then hitting
Return.
| | 03:33 |
And I'm going to do pwd for Present Work
and Directory and that tells us we're in
| | 03:38 |
the right place.
Now I need to use git to clone into this
| | 03:42 |
folder, do, back into my browser.
So what I want to do here is copy the URL,
| | 03:47 |
except for the readme pound sign right
here.
| | 03:50 |
So Copy all this, and go back into my
terminal.
| | 03:54 |
And say, get clone, and Paste all that,
and hit Return.
| | 03:58 |
And it's going to clone Emmet into the
plugins for Coda 2.
| | 04:02 |
So that should be it for Coda.
Let me go into coda and make sure that
| | 04:06 |
it's been installed properly.
So, I'm going to run Coda 2, and, go ahead
| | 04:11 |
and type in an abbreviation here, and see
if it works.
| | 04:15 |
Paragraph, hit Tab, I'm going to hit
Ctrl+E, if that doesn't work.
| | 04:20 |
So you can see that it's installed now
into Coda, but I have to hit Ctrl+E to
| | 04:24 |
make it work, and that's not very cool.
Now, if you noticed in your menu, there's
| | 04:28 |
actually going to be an additional menu
called Plug-Ins, and then Emmet.
| | 04:32 |
And in here you can go to Emmet
Preferences.
| | 04:35 |
Which is what you want to do, because it's
always better to set the Tab key if
| | 04:40 |
possible as the abbreviation expansion.
So I'm going to click on that, and close
| | 04:45 |
this, and now if I hit tab it should
expand it which is much better way of
| | 04:49 |
working with Emmet.
You want to make sure that you look for
| | 04:52 |
that option in any installation that you
do cause it will make things go a lot smoother.
| | 04:56 |
Otherwise you will always have to remember
to hit Ctrl+E to expand the Emmit shortcut.
| | 05:02 |
Now I did use get, to get my Coda
installation to work, it seemed like the
| | 05:06 |
easiest of the options.
If you don't know how to use Git, make
| | 05:09 |
sure you check out Git Essential Training
with Kevin Skoglund.
| | 05:12 |
Or you can also install Emmet by following
some of the other instructions.
| | 05:16 |
I showed you how to use two popular
editors on the Mac.
| | 05:19 |
If you're trying to install for your
editor, just make sure you go to the
| | 05:22 |
emmet.io page.
You find the editor that you want to use,
| | 05:26 |
and then follow the instructions for that
editor.
| | 05:27 |
| | Collapse this transcript |
|
|
2. Using Emmet with HTMLUnderstanding type, child, and sibling selectors| 00:00 |
The best way to love Emmet is just by
using it in a project so in this video
| | 00:05 |
we're going to build a bootstrap website
with Emmet.
| | 00:07 |
But first I want to talk about how you
work with basic HTML elements.
| | 00:11 |
This is 90% of what you end up doing when
you're working with Emmet.
| | 00:14 |
So, the first thing you need to learn is
that you can add a class to an element by
| | 00:18 |
using a period.
So, if we look at this basic HTML page,
| | 00:22 |
you can add in a headline, level one and
then add a period.
| | 00:25 |
Then add something like first, and when I
expand that, it converts that to h1 with a
| | 00:30 |
class of first.
If I add a pound sign instead of a period,
| | 00:35 |
it adds an id.
So, if we undo this and we say h1 pound.
| | 00:41 |
And if we say h1 pound first and expand,
then it expands to an h1 with an id of first.
| | 00:49 |
It's important that when you change
something like from h1 period to h1 pound
| | 00:54 |
that you move all the way to the end of
the line before you expand.
| | 00:57 |
Otherwise it expands up to that point.
So, if I expand right there notice that it
| | 01:02 |
expands h1 with an id and it doesn't know
what that id is.
| | 01:05 |
So, I need to go all the way to the end.
So, I'm going to hit Cmd+Right arrow and
| | 01:10 |
then hit Tab, and that gives me an h1 with
an id of first.
| | 01:16 |
So, if you don't specify an element,
Emmett is going to assume that you mean a div.
| | 01:20 |
So, if you wanted to you could say div
with a class of first.
| | 01:24 |
Right?
And then it would give you a div with a
| | 01:26 |
class of first.
Or you can just type in .first.
| | 01:30 |
And it gives you a div with a class of
first anyways.
| | 01:34 |
Same thing works with a pound.
If you do a pound first, and then you
| | 01:38 |
expand, it gives you a div with an id at
first this time.
| | 01:41 |
So, that's pretty cool.
If you want to add a child to an element
| | 01:45 |
you use the greater than sign.
So, if you do say an unordered list with a
| | 01:50 |
list item you can say, ul>li.
And when you expand, it expands to an
| | 01:57 |
unordered list.
And notice how it even spaced them
| | 01:59 |
properly with a list item inside.
I'm going to undo once again.
| | 02:03 |
And show you that you could do this a
little bit further.
| | 02:06 |
So, if you wanted to have an unordered
list with a list item.
| | 02:09 |
And inside you want it to have an image
tag, you could do that.
| | 02:13 |
ul>li>img.
Expand and you get just that.
| | 02:17 |
And we can even say, you know, add an
anchor tag.
| | 02:21 |
And so we'll add an a>.
Make sure we go all the way to the end
| | 02:25 |
before we expand.
And hit Tab and you get all that.
| | 02:29 |
A lotta times you'll be working with Emmet
in the same way that I just did.
| | 02:33 |
So, you'll be like, typing in sort of what
you think you want.
| | 02:35 |
I know I want an r list, and I know I need
a list item.
| | 02:39 |
And I think I want an image.
And then you expand, and you'd realize, oh
| | 02:43 |
man I really needed to put an anchor tag
in there.
| | 02:45 |
So, you undo, and then you add whatever
else you need.
| | 02:48 |
So, then you say like, a>img and then you
miss a, man I need a class.
| | 02:53 |
For, say I need an id for this ul.
So, I'm going to hide an id here, and I'll
| | 02:59 |
call this groceries, right.
And then you'll come back and expand.
| | 03:03 |
And if that looks good, great.
If not, you just undo and keep on going.
| | 03:07 |
If you want to, you can also add a sibling
by using the plus sign.
| | 03:10 |
So, let me show you that.
If we want it to have the same groceries
| | 03:13 |
list but we wanted to title it, you can
add an h1 at the beginning and just say
| | 03:17 |
plus and that give you an h1 and then the
rest of it.
| | 03:21 |
So, all the way to the end, expand and now
we get an h1 at the very top.
| | 03:30 |
And we can start working with our grocery
list I guess.
| | 03:33 |
It will be a visual groceries list because
I have an image with a link right here.
| | 03:39 |
So, let's work on a more real world
example.
| | 03:41 |
I'm going to show you how you can quick
create a Bootstrap 2.3 website using Emmet.
| | 03:46 |
So, let's go ahead and delete this and
we're going to need some code for Bootstrap.
| | 03:53 |
So, I'm going to go to this website and
just copy the links to the CSS and
| | 03:57 |
JavaScript for Bootstrap from this CDN.
So, I'm going to select all of this, then
| | 04:02 |
copy this, come back here, put this in the
head section, right there, and I'll tab
| | 04:08 |
this in, and then I need the JavaScript.
So, we're going to grab this, copy and
| | 04:13 |
then come back here, and just before the
closing body tag, I'll paste that.
| | 04:19 |
And then we'll type in a headline here, h1
hello.
| | 04:23 |
And notice that it's not working.
I need to add http: here.
| | 04:31 |
right there and also down here.
So, we'll save that and you can see the
| | 04:35 |
fonts are coming in just fine.
So, excellent.
| | 04:38 |
That's working good.
We'll start by adding the generic
| | 04:40 |
container in Bootstrap .
.
| | 04:42 |
.
.
| | 04:42 |
You can do that by using a div with a
class of container.
| | 04:45 |
So, we can go div.container and that would
expand the proper thing or we can just
| | 04:51 |
type in dot container.
And expand and that gives us the same thing.
| | 04:55 |
Pretty cool.
So, next, if you wanted to add a class to
| | 04:59 |
that then you could just say .container
and then just do # home that container and
| | 05:06 |
expand and that gives you both of them.
You can even add multiple classes by just
| | 05:12 |
typing in another class here.
So, if you use something like clearfix you
| | 05:16 |
could just do something like this.
Home.container.clearfix that adds an idea
| | 05:21 |
of home and a class of both container and
clearfix to your div.
| | 05:25 |
Pretty cool.
So, let's go ahead and leave that.
| | 05:28 |
We'll go ahead and get rid of the
clearfix.
| | 05:29 |
We're not really using that so let's put
it right there.
| | 05:33 |
So, in Bootstrap you can do something
called a hero unit.
| | 05:36 |
It's sort of like a bait area at the top
of your site.
| | 05:39 |
And to do that you essentially create a
div with a class of hero unit.
| | 05:45 |
And inside that then you put some content.
So, we'll add an h1 and then.
| | 05:53 |
Right next to that a paragraph and, then
we'll add another paragraph.
| | 06:00 |
And this paragraph will have something
inside it.
| | 06:02 |
A link that has a class of btn for button.
And if we expand that we should see pretty
| | 06:07 |
much the hero unit come up here.
It's not going to have any text in it, so
| | 06:11 |
we'll need to add that.
So, I'll just say hello.
| | 06:14 |
And that adds the big text, and then some
text right here.
| | 06:20 |
I'll say welcome to our webpage, okay.
And then we need to add some text to the button.
| | 06:27 |
Probably need to add the pound sign here
to make sure that it's a link to something.
| | 06:31 |
And then add in here more info.
And there's a hero-unit in just a single
| | 06:37 |
line of code.
So, let's go ahead and add something else.
| | 06:40 |
Let's add some navigation to this.
So, to do that we need a lot of different
| | 06:45 |
classes, so we'll do a .navbar.
That gives us a div with a navbar.
| | 06:50 |
I'm going to undo and keep on going.
Then inside that then we need another div
| | 06:56 |
with navbar-inner.
And right, so nav and then inside that a navbar-inner.
| | 07:04 |
And then we also need another div with a
class of container.
| | 07:09 |
Right?
So, it should look kind of like that.
| | 07:12 |
And then inside that, then we're going to
have a link.
| | 07:16 |
And the link is going to be our brand.
And if we expand that the brand is sort of
| | 07:20 |
the very first element right here.
So, that's cool.
| | 07:24 |
And then after that we're going to need an
unordered list with our links to the
| | 07:27 |
different pages of the website.
So, an ordered list with a class of nav,
| | 07:33 |
and then inside that we'll have a list
item with anchor tag inside.
| | 07:37 |
So, there's that.
We'll put a pound sign, the href.
| | 07:43 |
It's really nice how Emmet understands
that you probably want the cursor at this
| | 07:47 |
point back here inside the anchor tag.
And then in here we'll say.
| | 07:51 |
Widget, inc, right, and this link, well
add a pound sign here and say home, and
| | 08:01 |
then we could do a few links, just by
copying and pasting that one, and add a
| | 08:10 |
couple here.
That's a pretty cool.
| | 08:15 |
And we can even add a class of active if
we wanted to activate this first one.
| | 08:20 |
Okay, so we've got the navigation here at
the top.
| | 08:23 |
We've got a hero unit.
Let's go ahead and add some content.
| | 08:26 |
Get rid of this line right here.
You may also want to comment these but we
| | 08:29 |
don't really have to do it.
This is just a demo of sort of how you
| | 08:32 |
would do things in Emmet.
So, we need a row of items, right?
| | 08:38 |
So, we're going to create a div with a
class of row, right?
| | 08:40 |
That's how you do that.
Undo to get back the Emmet code.
| | 08:43 |
And then inside that, you want a div with
a class of span.
| | 08:49 |
And then a number.
We're going to want three of these, like
| | 08:52 |
three span fours.
But I'll just go ahead and do one, and
| | 08:55 |
then I'll just copy that one a few times.
Right.
| | 08:58 |
Then we need inside that some content.
So, inside our div with the span of four,
| | 09:05 |
we are going to want, say maybe, a
headline level two, then also a paragraph
| | 09:11 |
and and then also, say, another paragraph.
And inside that paragraph, we'll want an
| | 09:19 |
image with a class of img-rounded to give
it a round edge.
| | 09:23 |
And let's expand that and see how much we
got.
| | 09:25 |
So, we've got a row with a div that has a
span of four.
| | 09:30 |
And we'll just put headline here.
So, text.
| | 09:35 |
you know what, I probably want this image
to be before the text.
| | 09:39 |
So, let's go ahead and undo.
This is what's fun about Emmet, you sort
| | 09:42 |
of undo and then you can kind of
reorganize things.
| | 09:45 |
So, we actually want the image before this
other paragraph.
| | 09:50 |
So, we've got, we want a paragraph.
Inside that we want an image with a class
| | 09:55 |
of image rounded and then after that we
want another paragraph, like that.
| | 10:00 |
So, let's see.
Expand it.
| | 10:01 |
That doesn't quite look right so let's go
ahead and fix it by undoing.
| | 10:09 |
And let's see, we want a headline level
two.
| | 10:11 |
And then a paragraph and inside that we
want an image with a class of image around it.
| | 10:19 |
Now, really what we want is just the image
and then we want a paragraph after that.
| | 10:24 |
So, that looks good.
Headline, headline here and then SRC.
| | 10:30 |
I'm just going to go ahead and use a
placeholder for this.
| | 10:34 |
So, I can use a website called
placehold.it.
| | 10:39 |
And just specify size, like 300 by 200.
And it puts a little placeholder, which is
| | 10:48 |
really cool.
And then on the paragraph I'll just do
| | 10:51 |
some text here.
Here, we've got kind of one of these items here.
| | 10:57 |
Obviously, I need to grab this span four
and just copy this three times in here.
| | 11:03 |
So, obviously, I need to grab that and
copy it three times.
| | 11:07 |
So, save it and we'll take a look at this,
expand it.
| | 11:11 |
So, you can see we've created a very
simple Bootstrap scaffold by using Emmet
| | 11:16 |
to very quickly build out our content.
And what's cool is you can sort of have
| | 11:21 |
some fun with Emmet as you're building it.
Change your mind if you make a mistake
| | 11:25 |
then just undo and redo your abbreviations
so that you have just what you need.
| | 11:30 |
So, hopefully that gives you a good idea
of the kind of stuff you can do with Emmet
| | 11:34 |
with just single lines of code.
| | 11:36 |
| | Collapse this transcript |
| Making copies of elements| 00:00 |
One of the features that you'll use all
the time in Emmett is the ability to
| | 00:03 |
create a bunch of elements at the same
time.
| | 00:06 |
So, instead of creating these elements and
then copying them 3 times, I can just ask
| | 00:10 |
Emmett to give me 3 of those at once.
So, let's take a look at how you would
| | 00:13 |
create a photo grid.
I'm starting with the files from the
| | 00:16 |
previous movie with a slight change.
I've added a link to a style sheet that
| | 00:22 |
you see right here in the same folder.
So, this is, has a very simply style
| | 00:26 |
that's going to make our photo grid that
we're going to create look a lot better.
| | 00:30 |
So let me go ahead and switch back to
here.
| | 00:33 |
So, I'm going to take this last span and
add my image grid onto that.
| | 00:37 |
With an Emmet command.
So, normally I would just do h2.
| | 00:41 |
And then after the h2, I want an anchor
tag that has an image tag in it, right?
| | 00:46 |
If I expand that, I would get something
like this.
| | 00:49 |
But what I want to do here is use
multiplication to get nine of these.
| | 00:54 |
All you have to do is type in the asterisk
and a number.
| | 00:56 |
So, in this case we want nine images.
And what we'll do is, we'll go ahead and
| | 01:01 |
expand that.
And that gives you nine images.
| | 01:04 |
Now, I want to add a div that wraps all of
my images.
| | 01:07 |
because if you remember my styles, I do
have a div called grid here.
| | 01:11 |
So, I'm going to add that here by saying
h2 and then a div with a class of grid.
| | 01:16 |
And expand that.
And now we've got what we need.
| | 01:19 |
Now we need to type in some stuff in here.
And this is why (INAUDIBLE) uses blind
| | 01:22 |
text because it has a really awesome
Multi-line Selection tool.
| | 01:26 |
So, I'm going to hold down the Option key
and then just click and drag over here.
| | 01:30 |
And now I can type in, just placeholder
photo.
| | 01:33 |
It doesn't matter that these are the same
because this is just a placeholder.
| | 01:36 |
And then for the image source, again,
Option or Alt on a PC, click and drag.
| | 01:41 |
And then type in placehold.it/ and let me
just do 200 by 100.
| | 01:49 |
It doesn't really matter what I choose
here, just proportions.
| | 01:52 |
And then as href, I'm just hitting the
left arrow with the Option and it just
| | 01:57 |
jumps between the different words.
So, I'm going to come down here and hit a
| | 02:01 |
pound sign.
And then I'm going to save this and I'll
| | 02:05 |
put in a headline over here.
So, let's type in here photos and indent
| | 02:09 |
this a little bit and Cmd+Bracket to
indent that.
| | 02:13 |
Save it and go back into my page, refresh,
and now you see that we got a grid of images.
| | 02:19 |
I make these the same dimensions in the
grid should make them the same size.
| | 02:22 |
Let me go ahead and do that.
So, I'll do Alt click and drag select the
| | 02:27 |
1s, switch them to 2s, save it, go back
here, refresh.
| | 02:32 |
So, that is something you use all the
time.
| | 02:34 |
You can ask for not just an element but
ask for an element a certain number of times.
| | 02:40 |
| | Collapse this transcript |
| Using text expansions| 00:00 |
A lot of times when you work with
prototypes, you'll put in some Greek text
| | 00:04 |
to stand in for your final copy.
So I use a website called Lorem Ipsum.
| | 00:09 |
It's at this URL, lipsum.com.
And usually you just grab some text from
| | 00:14 |
here or generate some paragraphs of lorem
ipsum just by clicking on this link right
| | 00:19 |
here, and then Copying this.
But Emmet has a really good lorem ipsum
| | 00:24 |
generator built into its language.
So let's take a look at that, it's pretty cool.
| | 00:28 |
So all you have to do is if you wanted to
add some lorem ipsum text anywhere, all
| | 00:32 |
you need to do is just type in the word
lorem.
| | 00:35 |
And then expand, and it types in some
lorem ipsum text.
| | 00:39 |
That's pretty cool so let's check out our
page.
| | 00:41 |
Now this has got a little bit more content
in it.
| | 00:44 |
And if we wanted to create another
paragraph then we could just say type in
| | 00:48 |
paragraph and then I know I want inside
that paragraph some lorem ipsum text.
| | 00:54 |
You know what?
I want two paragraphs, so I'm going to use
| | 00:57 |
the asterisk and then add a number here so
let's say, I want three paragraphs.
| | 01:01 |
So I'll do three and expand.
And notice that it gave me three
| | 01:05 |
paragraphs, but it didn't use the same
lorem ipsum start up.
| | 01:08 |
It actually buried each one of the
paragraphs.
| | 01:11 |
So if we save this and preview this,
you'll see that we have three distinct
| | 01:15 |
paragraphs of lorem ipsum text.
That's pretty cool, so let's go back in
| | 01:20 |
here and I'm just going to delete two of
these 'cause I only want, really, one
| | 01:23 |
right there.
I could do the same thing for some of
| | 01:25 |
these other elements.
And, if you remember when we were doing
| | 01:28 |
these elements, we did something like
span4, and then we did something like h2.
| | 01:36 |
And then we added an image and then we
added a paragraph.
| | 01:40 |
And in there we could have put some lorem
ipsum texts as well.
| | 01:43 |
Can say, hey inside that paragraph I want
some lorem ipsum text.
| | 01:47 |
And if we expand that, there's the lorem
ipsum text.
| | 01:50 |
But we need two of these span four, so we
could use the multiplier right here.
| | 01:54 |
So we could say times two.
And that gives us two.
| | 01:57 |
But then we have to go in and type in all
these headlines, which is sort of a pain.
| | 02:01 |
So in Emmet if you want to insert some
text inside one of these tags, you can use
| | 02:05 |
the curly brackets and just put in
whatever text you want.
| | 02:08 |
So I can put in headline, and when I
expand it places the text headline for
| | 02:13 |
each of those.
Now to do tags like this, you have to use
| | 02:17 |
a slightly different syntax.
So inside tags, if I want to go ahead and
| | 02:22 |
add the alt and the scrc tag.
Then I use brackets, so inside there I can
| | 02:28 |
just type in whatever I want.
So src, equals, and in here I'll do http,
| | 02:35 |
place hold it.
Then do 300 by 200 and then I could type
| | 02:40 |
in the alt tag and alt tag is something
you should be doing.
| | 02:43 |
But in here we'll just type it in
Placeholder, that's all we're doing.
| | 02:45 |
Then when we expand we go ahead and do all
the work that we did down here in one fell swoop.
| | 02:52 |
So that's the power of adding text inside
elements.
| | 02:55 |
Let me go ahead and clean this up, so
Save, go back to our layout, and Refresh.
| | 03:01 |
And now you can see that we've got
Headlines, and we've got some text.
| | 03:05 |
And we did all this a lot quicker, just by
using text inside elements.
| | 03:10 |
Learning how to place text inside
elements, with either the lorem ipsum tag,
| | 03:15 |
or the brackets and curly brackets.
Is going to save you a lot of time when
| | 03:19 |
you're scaffolding things.
| | 03:20 |
| | Collapse this transcript |
| Climbing and grouping| 00:00 |
So when working with Emmet occasionally
you'll find some expansions that are
| | 00:04 |
almost impossible to do with some
additional code.
| | 00:07 |
Let me show you what I mean.
If we go back to this piece of code right
| | 00:11 |
here, and we scroll down to this section.
You'll see that we've got a div right here
| | 00:15 |
and inside that we have a headline, an
image and a paragraph.
| | 00:18 |
Now what if we wanted to wrap a paragraph
around this image stack.
| | 00:22 |
Well let's go ahead and see how we would
just code this without the wrap.
| | 00:25 |
So we would say something like period
span4.
| | 00:28 |
And then we would use the greater than
sign because inside that we want an h2.
| | 00:33 |
And then we want an image tag, and then we
want a paragraph.
| | 00:37 |
And without all the extra stuff, this is
pretty much what we have right here.
| | 00:40 |
Now what if we wanted to wrap a paragraph
around this image set?
| | 00:44 |
Well you might think after the headline
you want a paragraph and then inside that
| | 00:49 |
you want an image tag.
Let's go ahead and exapand that.
| | 00:52 |
Well now we've got the paragraph and then
inside that we have the image and also the
| | 00:57 |
other paragraph.
That's not exactly what we wanted, so the
| | 01:00 |
problem here is that Emmett is doing
exactly what we tell it to do.
| | 01:04 |
After the paragraph everything in here
becomes something that goes inside this
| | 01:08 |
original paragraph.
Which is not what we want.
| | 01:10 |
So, there's actually two ways of taking
care of this.
| | 01:13 |
First, you can climb up the expansion
context With a caret symbol.
| | 01:16 |
Caret symbol is above the six on your
keyboard.
| | 01:19 |
You can also group an expansion with
parenthesis and really you should use
| | 01:24 |
which ever one makes more sense to you.
And which one's more convenient for the
| | 01:28 |
context that you're working in.
So let me show you how they work.
| | 01:30 |
Alright, so let's do the climbing up, or
the caret symbol.
| | 01:33 |
We've got this expansion, but what we
really want is, we want the image to go
| | 01:37 |
inside the paragraph.
But after that, the next paragraph
| | 01:40 |
shouldn't go in the same level.
It should climb up a level.
| | 01:43 |
So we'll do a karat here, and then become
a paragraph at the same level as this
| | 01:48 |
other paragraph.
So if we hit Tab, and we expand, we get
| | 01:51 |
the right expansion.
Now to do this the other way, what you can
| | 01:54 |
do is just do it like you would do
normally.
| | 01:57 |
But just tell it that you want to combine
this paragraph and then inside an image,
| | 02:02 |
into a group, and then expand.
They're both doing the same thing, but you
| | 02:07 |
can think of them in slightly different
ways.
| | 02:09 |
So use whichever one makes sense to you
and whichever one is easiest to remember.
| | 02:14 |
But understand that grouping and climbing
up expansions is sometimes the only way to
| | 02:19 |
achieve certain code.
| | 02:20 |
| | Collapse this transcript |
| Numbering elements| 00:00 |
Emmet lets you do some pretty amazing
things with math.
| | 00:03 |
Some of these are super handy.
And some maybe not so much.
| | 00:06 |
So, let's take a look.
For example, you can number elements by
| | 00:09 |
using the dollar sign.
So, let's go ahead to our code and I'm
| | 00:13 |
going to scroll down to this section right
here.
| | 00:16 |
It looks like I left a little piece of
code here from the last movie.
| | 00:19 |
So, I'm going to go ahead and delete that
because it's not doing anything.
| | 00:21 |
And I've got this section right here with
a bunch of anchor tags.
| | 00:24 |
Now, it would be nice if I could add some
numbers to the alt tag right here.
| | 00:28 |
So, what I'll do is, I'll just recreate
the anchor tags.
| | 00:31 |
So, let's say anchor tag.
And I want to have in this anchor tags an
| | 00:35 |
href of pound sign.
And inside that, I want image tags.
| | 00:39 |
And inside the image tags, I want to have
a source of this and the place holder.
| | 00:45 |
So, I'll just copy those and put them
right there and I want nine of those
| | 00:50 |
anchor tags.
Let's multiply it times nine and we'll
| | 00:53 |
expand right now.
And you can see that we get pretty much
| | 00:55 |
what we have up there.
That's pretty cool so let me undo and let
| | 00:59 |
me do the magic part here.
So, if I say placeholder photo, and then
| | 01:02 |
I'll put a space and add a dollar sign.
And I expand, I get the numbers right here.
| | 01:07 |
That's pretty awesome.
You could use that for classes if you
| | 01:11 |
wanted to.
You could maybe class each of these anchor
| | 01:13 |
tags with a class that was numbered or for
anything else in your HTML.
| | 01:18 |
Now, in addition to this, if you want to,
you can pad the numbers by using
| | 01:22 |
additional dollar signs.
So, if we go back here, I'm going to undo.
| | 01:25 |
And instead of just a single dollar sign,
I'm going to add two more.
| | 01:29 |
And when I expand, notice that I have
leading zeros, that's pretty awesome.
| | 01:34 |
So, see what else we can do.
You can start at a different position by
| | 01:38 |
using the @ symbol.
So, if we wanted to start not at the
| | 01:42 |
number one but say, the number three.
Then after the dollar sign, I could insert
| | 01:47 |
an @ symbol and add any number that I
want to begin with.
| | 01:51 |
So @ 3.
And if I expand, now it starts at the
| | 01:54 |
number three.
And it goes out from there.
| | 01:57 |
In addition to that I can go in reverse
order by using the negative symbol.
| | 02:01 |
If I say $$$@ minus, and I expand, now it
goes from nine to one.
| | 02:07 |
It's pretty easy to remember the dollar
sign when you need to number things.
| | 02:11 |
Some of these other options are going to
be less useful.
| | 02:13 |
But as you learn some of these shortcuts,
even learning some of these more esoteric
| | 02:17 |
ones, it's going to make you a lot faster.
| | 02:19 |
| | Collapse this transcript |
| Toggling comments| 00:00 |
Emmet has a pretty cool commenting system.
And I want to show it to you because it's
| | 00:04 |
one of the features that I find super
useful.
| | 00:06 |
One of the problems I have when using
Bootstrap is that it makes you create a
| | 00:10 |
ton of divs.
And sometimes it's sort of difficult to
| | 00:13 |
figure out which closing div goes with
which opening div.
| | 00:16 |
Especially when the document gets very
big.
| | 00:18 |
So, one of the things that I always do is
use comment to make sure that I know which
| | 00:22 |
closing div goes with what.
So, typing HTML comment is sort of a
| | 00:27 |
little bit of a pain.
Use a less than sign and then an
| | 00:30 |
exclamation point, a couple of hyphens,
and then a couple of hyphens, and then a
| | 00:34 |
greater than sign.
And then you put your comment in here.
| | 00:37 |
So, I could type in something like
container and that creates the comment.
| | 00:41 |
Now, Emmet makes this a lot easier by
letting use a command key to create your comment.
| | 00:46 |
So, if I wanted to create a comment for
container, I can type in container then
| | 00:50 |
select that text and hit Cmd+/.
And that creates the comment really quick.
| | 00:56 |
So, what I like to do is go to the div
that I want to comment from, so I know
| | 01:01 |
that I want to grab this one right here
called navbar-inner.
| | 01:05 |
And I'm going to copy either class or the
id and then just paste it down here,
| | 01:10 |
select it, and then hit Cmd+/.
And that works pretty well, so let me do
| | 01:14 |
this last one, and Cmd+/.
And it's Ctrl+/ on a PC.
| | 01:18 |
Now, if you just type in the comment on a
line that doesn't have any HTML in it.
| | 01:22 |
It'll just create the comment like that.
So, that's pretty cool.
| | 01:25 |
You can maybe type in the comment that you
want right there.
| | 01:28 |
It's smart enough to know that if you're
typing CSS styles, it should comment
| | 01:33 |
things in a different way.
So, let me show you what happens when I
| | 01:35 |
create a body selector here.
And I'm going to say background, red, and
| | 01:41 |
padding, 10px.
So, if I do a Cmd+/ right here it comments
| | 01:48 |
the whole line, and it also does CSS
comments.
| | 01:52 |
If I make a selection and I hit Cmd+/, it
knows that I want the comments before and
| | 01:57 |
after that section.
Now, one thing you have to watch out for,
| | 02:00 |
whenever you're using any of Emmet's
actions, is that the command keys don't
| | 02:04 |
interfere with anything your OS or your
editors are currently using.
| | 02:07 |
And sometimes the command keys are not
going to work as advertised because of this.
| | 02:11 |
If you look at the Emmet documentation for
toggle comments, you'll notice that
| | 02:15 |
they're supposed to work in a slightly
different way.
| | 02:18 |
But they do have the key binding Cmd+/.
Now, if you're using Sublime Text like I
| | 02:22 |
am, you'll notice that there's a problem
with that.
| | 02:24 |
It doesn't work as advertised.
And the problem is the key mapping is
| | 02:28 |
Sublime Text is interfering a little bit
with the Emmet key mapping.
| | 02:31 |
So, you should check out this link right
here and you'll find out that the actual
| | 02:36 |
command key that you need to use to work
this is Option+Shift+/.
| | 02:40 |
So, when you do this it gives you some
additional options.
| | 02:44 |
So, if I just go here to the body tag and
I hit Cmd+/ as normal.
| | 02:48 |
Notice that it's commenting the entire
line.
| | 02:51 |
But if I hit Options+Shift+/, it actually
knows that this is the closing part for
| | 02:57 |
this body tag, and it comments that
appropriately.
| | 03:00 |
So, if I go over here to the style tag and
I hit Option+Shift+/.
| | 03:05 |
Notice that it knows that I want an HTML
comment.
| | 03:08 |
I want it to begin right here, and to end
automatically when this tag ends.
| | 03:12 |
And that's actually a little bit more
useful when you're doing big comments.
| | 03:15 |
If I wanted to comment this whole section
of HTML out, I just hit Option+Shift+/,
| | 03:20 |
and it comments that whole thing out.
Now, there's a whole section in the Emmet
| | 03:24 |
manual called actions.
By far, my favorite action is commenting.
| | 03:28 |
Once you learn how to use it, commenting
is going to be a lot less painful.
| | 03:32 |
| | Collapse this transcript |
| Maneuvering through edit points and code| 00:00 |
Another action that I find super useful is
the ability to navigate through edit
| | 00:04 |
points with keyboard shortcuts.
Like with any other Emmet actions, you've
| | 00:07 |
got to make sure that the key combinations
are not conflicting with anything your OS
| | 00:12 |
or editor are currently using.
So, I'm using subline text here.
| | 00:15 |
I'm going to scroll down to this section
with the hero unit.
| | 00:19 |
And I'm going to try recreating that hero
unit.
| | 00:21 |
But this time I'm going to use edit points
to get to the places that I need to edit.
| | 00:25 |
So, I'm going to do a .hero-unit.
And then inside that, I want an h1 tag.
| | 00:32 |
Next to that, I'm going to use the plus
sign.
| | 00:34 |
I want to paragraph.
And inside that paragraph, I want some
| | 00:37 |
lorem ipsum text.
So, I'll type in the words lorem.
| | 00:40 |
Now I need another paragraph, but I want
it to be at the same level as the
| | 00:45 |
paragraph that I just did.
So, I'm going to do caret and then another
| | 00:49 |
paragraph and then inside that I want to
use an anchor tag.
| | 00:53 |
And so, I'm going to hit Tab right now.
And that expands the shortcut.
| | 00:57 |
Now, notice that it gave me the insertion
point right inside the headline one.
| | 01:01 |
because it figured that's probably what I
want to edit.
| | 01:03 |
So, here I could just type in a headline.
But now, to go to the next edit point,
| | 01:07 |
what I can do is hit Ctrl+Option and then
write.
| | 01:10 |
Notice that it's skipping the paragraph
with the Lorem Ipsum text because there's
| | 01:15 |
already something in there.
It figures that I might want to type in
| | 01:18 |
something in the paragraph before my
anchor tag, so it places the insertion
| | 01:22 |
point right there.
And you can type anything you wanted to there.
| | 01:25 |
And then I can hit Ctrl+Option+Arrow to
the right.
| | 01:28 |
And it takes me to the next place it
thinks I want to edit.
| | 01:31 |
So I can type in here a pound sign and if
I hit Ctrl+Option+Right again, it's
| | 01:37 |
going to put me in between the anchor tag.
So, I could type in here more info.
| | 01:41 |
So, that's pretty cool.
If I go the other way, if I hit
| | 01:44 |
Ctrl+Option and then Left Arrow it's
going to go back.
| | 01:47 |
And sometimes it's going to skip things
that already have text in them.
| | 01:50 |
So, you saw that I was down here and when
I hit Ctrl+Option+Left, it's pretty much
| | 01:54 |
skipped everything that I've already
inserted things into.
| | 01:57 |
So, it's pretty smart about noticing where
you want to insert things and it places
| | 02:01 |
the cursor there.
So, Go To Edit Point is super useful and
| | 02:05 |
definately something you'll want to
experiment once you get a little used to
| | 02:09 |
Emmet shortcuts.
| | 02:10 |
| | Collapse this transcript |
| Other actions| 00:00 |
Emmet comes with a lot of different
actions that you can execute with command keys.
| | 00:04 |
One of the things you have to be careful
when working with actions, is to make sure
| | 00:08 |
that you know that different platforms and
different browsers can have different actions.
| | 00:12 |
So, what you want to do is go to the emmet
website at emmet.io.
| | 00:16 |
And you want to click on this Download
link right here.
| | 00:18 |
From here you want to pick your editor.
I'm using Sublime Text, so I'll click on
| | 00:22 |
this one.
And you want to scroll down and take a
| | 00:24 |
look at this section right here called
Available actions.
| | 00:27 |
It's going to give you the command keys
for your editor and platform.
| | 00:30 |
So for example, if I look at this one
right here, I know that there's a
| | 00:33 |
different Cmd key for Macs and PCs.
Now we've already seen a couple of these.
| | 00:37 |
For example, we learned about toggling
comments with Cmd slash in the video on
| | 00:42 |
toggling comments.
And we also learn how to move through edit
| | 00:45 |
points and then (INAUDIBLE) maneuvering
through edit points and code.
| | 00:48 |
In the edit points movie, I also mention
this problem with actions.
| | 00:52 |
That's caused by problems with the Cmd key
sequences.
| | 00:55 |
Now let me show you a couple of problems
with some of these actions.
| | 00:57 |
I'm going to go over to mystyles.css and
I'm going to create a body selector here,
| | 01:02 |
and I'm going to add a border at the top
of the body.
| | 01:05 |
So I'll do bdt and then +.
That's the shortcut for border top of 1 pixels.
| | 01:11 |
Notice that it places the insertion point
right at the 1 pixel mark.
| | 01:15 |
Now to edit this on a Mac in Sublime text,
I could hit Ctrl up, but if I do that
| | 01:20 |
right now.
That Cmd key sequence is taken over by the
| | 01:23 |
operating system.
So, what I want to do is go over to a new
| | 01:27 |
desktop and go to the Apple menu and
select System Preferences.
| | 01:31 |
Now, from here, I can click on Keyboard
and turn off Mission Control.
| | 01:35 |
Which uses the Ctrl up key and application
windows which uses the Ctrl down key.
| | 01:41 |
Now you may not want to do this because
you love these command keys, but if you
| | 01:44 |
don't care about them, just turn them off,
and then switch back to Sublime text.
| | 01:49 |
And now when you hit Ctrl up and down, it
let's you move through these measurements
| | 01:53 |
by one pixel.
And so you may really like the way that works.
| | 01:56 |
Now, another interesting action that you
can use is called Match Tag Pair.
| | 02:00 |
So I'm going to go over to my HTML, and
I'll place my cursor right here.
| | 02:04 |
The Match Tag Pair action, lets you move
up and down the DOM in HTML.
| | 02:09 |
And to use this, all you have to do is on
a Mac in Sublime text hit Ctrl+D.
| | 02:14 |
Now the first time you do that, it's
going to select the text in the current section.
| | 02:18 |
If you do it again, it goes up the DOM by
one tag.
| | 02:21 |
And you can keep on doing that.
So if I hit Ctrl+D again, it's going to go
| | 02:25 |
to the LI.
If I do it again, it's going to select all
| | 02:28 |
the list items.
I do that again, it's going to select an
| | 02:30 |
unordered list and so on and so forth.
If I want to go the other way, I can hit
| | 02:34 |
Ctrl+J and move back down a specific
section.
| | 02:38 |
Now, another one that I really like, and
this one I probably like better than Match
| | 02:41 |
Tag Pair, is the ability to go to the
matching tag.
| | 02:44 |
So, for example, if I'm in this div right
here and I hit Ctrl+Shift+T.
| | 02:48 |
Notice that it takes me to the matching,
or the closing, version of this tag.
| | 02:53 |
That's really useful because sometimes
you'll be, say, at the bottom of a
| | 02:56 |
document like this and you'll be wondering
which of these divs goes with your tag.
| | 03:01 |
So what I could do is, click right here on
this section and hit Ctrl+Shift+T.
| | 03:05 |
That's going to take me to the matching
pair right at the top, right here.
| | 03:10 |
I know that I've often wondered where some
of those tags lead to so, you see if I
| | 03:14 |
click my cursor right here, i hit
Ctrl+Shift+T, it knows that this is the
| | 03:18 |
matching tag.
So that's an easy way of finding matching
| | 03:21 |
tags in Emmet.
Now another one that I really like, is the
| | 03:25 |
ability to wrap a tag with an
abbreviation.
| | 03:27 |
So let's go ahead and create a new section
right here.
| | 03:30 |
And I'm going to type in some text here.
So I'll type in Twitter, Flickr, YouTube,
| | 03:35 |
Facebook and let's type in my blog here,
iviewsource.
| | 03:39 |
Just some text.
And what I want to do, is select one of
| | 03:42 |
these and then hit Ctrl+W and Sublime
text.
| | 03:45 |
When you do that, notice that it activated
this bottom part right here.
| | 03:49 |
It placed a div right there and it wrapped
my text with that div.
| | 03:52 |
Now, what that's doing is allowing you to
create a sequence that's going to wrap the
| | 03:56 |
selected text that you had.
So for example, if I wanted to wrap that
| | 04:00 |
with the list item I can just type that
in.
| | 04:02 |
And any abbreviation that I would type in
here would work.
| | 04:05 |
So if I hid greater than sign and then a,
it's going to create an anchor tag inside that.
| | 04:09 |
And if I want to I can add brackets and
add an href maybe with a pound sign.
| | 04:15 |
So all that is going to be wrapping my
current tag, and that's pretty cool but,
| | 04:19 |
you notice that I do have several of these
lines, so let me go ahead and hit Escape
| | 04:23 |
just to get out of that.
I'm going to try to do it on all of these lines.
| | 04:26 |
So I'll select all of these lines and I'm
going to hit Ctrl+W, because I'm in
| | 04:30 |
Sublime Text on a Mac.
Now it takes me back to the same place.
| | 04:33 |
It's wrapping everything with this div.
I probably want an unordered list with a
| | 04:38 |
list item.
And I do want anchor tags.
| | 04:40 |
And then I do want that href equals, and
we'll do a pound sign for right now.
| | 04:47 |
But I really want that on every single
line.
| | 04:49 |
So what I can do is, right here in the li
section, I can type in a multiply symbol
| | 04:56 |
or an asterisk.
What that's going to do is, use that same
| | 04:59 |
section to wrap every single line that
I've selected, and that's a pretty cool
| | 05:04 |
way of selecting all those and making them
all clickable links.
| | 05:07 |
So another thing that I can do, is use the
next in the selection in my expansion.
| | 05:12 |
So for example, if I come right here to
this pound sign.
| | 05:16 |
And I add a dollar sign right before it.
Notice that the text up here move inside
| | 05:21 |
the href.
What I'm actually telling Emmet to do, is
| | 05:23 |
to use the text that's selected in this
area right here as an insertion.
| | 05:29 |
So, what I can do is type in some curly
brackets and do that again.
| | 05:34 |
So I'll do a dollar sign, pound sign, and
now I can use the text in the href and
| | 05:38 |
also as the clickable part of the text.
So, what I would probably do is type in
| | 05:42 |
some http:// see air g/ and I can add the
.com right here.
| | 05:48 |
And if I enter, I'm going to have a very
quick list of clickable links that I made
| | 05:53 |
in just a few seconds.
So, that's pretty cool.
| | 05:55 |
Now another cool thing that you could do
is if you have Copy some text maybe from
| | 06:01 |
Microsoft Word.
And it came in with some of these asterisks.
| | 06:04 |
You can get rid of those as well.
So I'm going to select these, and I'll hit
| | 06:07 |
Ctrl+W to enter my abbreviation.
And I'll do something pretty similar here.
| | 06:11 |
So an ordered list, list item, and use the
asterisk to do it many times.
| | 06:16 |
And than an Anchor tag.
And I'm going to put an href of # here.
| | 06:21 |
And what I'll do is I'll type in a pipe
and then a letter t.
| | 06:26 |
And that gets rid of my asterisks that
were placed already there.
| | 06:31 |
Now, the problem with this is that the
other thing, putting in a dollar sign.
| | 06:35 |
It's not going to work.
So as soon as I put the dollar sign for
| | 06:39 |
making the selection point and insertion
point, the pipe-t is no longer going to work.
| | 06:44 |
So unfortunately, can't have everything.
But the ability to get rid of the asterisks.
| | 06:50 |
Can sometimes be pretty useful.
So, let's go ahead and hit enter to apply that.
| | 06:55 |
So there's a lot to love in these
shortcuts, and there's a few more
| | 06:57 |
shortcuts that you can research, there're
going to make your life a lot easier.
| | 07:00 |
But I wouldn't try to learn all these at
first.
| | 07:03 |
Go ahead and practice some of the other
features and come back to these later.
| | 07:06 |
I try to focus on the shortcuts that were
super helpful to me.
| | 07:09 |
So, make sure you check the documentation
for some additional shortcuts.
| | 07:13 |
| | Collapse this transcript |
|
|
3. Working with CSSUsing CSS abbreviations| 00:00 |
Emmet is not just great for HTML, it can
also help you write your CSS a lot faster.
| | 00:05 |
It does this with a lot of predefined
snippets that you can just type in to do code.
| | 00:10 |
So let's try doing a body selector right
here.
| | 00:12 |
If we want to add a margin to this,
normally, we would type in margin, and
| | 00:15 |
then colon, and then putting a value right
here like 10px.
| | 00:19 |
You can do the same thing in Emmet just by
typing in m, and then the number that you want.
| | 00:24 |
You don't even have to specify px.
It's just going to assume that you need pixels.
| | 00:28 |
So, to do two values of the margins, you
do m10 and then - say 20.
| | 00:34 |
And then it gives you two values, and of
course if you want to do four, you would
| | 00:37 |
just do all four numbers in a row.
Of course, anything that works with a
| | 00:41 |
margin works with padding as well.
And if you want to, you can use different
| | 00:44 |
measurement systems.
So you could say something like padding
| | 00:47 |
20, and then either use the % sign and
that does percentage or do the p for
| | 00:53 |
percentage and it does the same thing.
If you want to use ems, you could use e
| | 00:57 |
for ems.
It even has a shortcut for using important.
| | 01:01 |
If you put an !
at the end of any of this rules, it types
| | 01:04 |
in the important value right there.
It's pretty cool.
| | 01:07 |
So there's other ones that you could do,
for example, you could do a border by
| | 01:10 |
doing bd, because notice, sometimes if you
do b, it can assume you want bottom, which
| | 01:15 |
may not be what you want.
So bd is how you do a border and if you do
| | 01:19 |
bd+, it's going to assume that you want a
border and it puts the insertion point
| | 01:24 |
right here at the measurement.
So you could say 1 border and then type in
| | 01:28 |
the value you want right here.
Here, 10 pixels solid.
| | 01:30 |
Now, you can also do borders on the right,
bottom, top, left.
| | 01:34 |
So if I want to do a border at the top, I
can do bdt, and then the + sign, and it
| | 01:39 |
puts a border at the top of 1 pixel solid
and then black.
| | 01:43 |
And the same way when you do backgrounds,
you can use b, because again, that's for bottom.
| | 01:47 |
You can use bg and that does a background
or BGI for a background image.
| | 01:52 |
And it puts the insertion point at the URL
which is cool.
| | 01:55 |
And you can do things like BD and then
colon and then an n, and that does a
| | 02:00 |
border of nothing.
The sheer quantity of abbreviations in
| | 02:03 |
Emmet can be a little bit overwhelming,
especially with CSS.
| | 02:06 |
My advice to you is that you first try
what you think should work.
| | 02:10 |
So try something like b and if that
doesn't work, usually, some sort of
| | 02:13 |
abbreviation works.
Now, if you can't figure it out, you can
| | 02:16 |
always check out the Emmet Cheat Sheet.
Now, if you scroll down all the way to the
| | 02:21 |
CSS section, you'll notice that there are
a ton of CSS abbreviations.
| | 02:26 |
So the best thing to do is to try to learn
these organically as you work with
| | 02:29 |
different elements.
Before you know it, the Emmet
| | 02:31 |
abbreviations will become a natural part
of how you code HTML and CSS.
| | 02:37 |
| | Collapse this transcript |
| Adding linear gradients and reflecting values| 00:00 |
If you have to write a lot of gradients
with vendor prefixes, then Emmet can make
| | 00:04 |
that a lot easier as well.
So, I've start out with a completely blank folder.
| | 00:07 |
And I'm in Sublime Text so I'm going to
right click on this folder and select New
| | 00:11 |
File, and I'll create a new index.html
document.
| | 00:14 |
And I'm going to use one of the
abbreviations in Emmet that's pretty cool.
| | 00:18 |
If you use the exclamation point by itself
and your document is named index.html or .html.
| | 00:24 |
And you hit the tab to expand, you get a
complete doc type HTML5 version of a document.
| | 00:32 |
So, we can type in Emmet here.
And I'm going to save that.
| | 00:36 |
And I'm going to also create a style
sheet.
| | 00:39 |
So, I have to link from this HTML to this
style sheet that I'll create.
| | 00:43 |
Now of course I would do a link tag for
that.
| | 00:45 |
But if you do a link and then hit a colon
and then do CSS and hit Expand, you're
| | 00:51 |
going to get a link to a style sheet
called style.css.
| | 00:55 |
Now I can type in a name right here, but
that's a fine name to use.
| | 00:58 |
So, I'll save that, and I'll come back
here and select New File and create
| | 01:03 |
another file called style.css.
And hit Enter.
| | 01:07 |
And now I've got a basic HTML document
linked to a style sheet, which is what I want.
| | 01:12 |
And let's go ahead and start working with
style sheets.
| | 01:15 |
So, to create a gradient, first we need a
selector, so I'm going to start by typing
| | 01:18 |
in body, and then I'm going to create some
curly brackets here.
| | 01:22 |
And before I type in another gradient, I'm
going to type in another CSS rule and so
| | 01:26 |
I'm going to use the abbreviation called
BGA.
| | 01:29 |
For background attachment and in here I'll
add Fixed.
| | 01:33 |
That's just going to allow me to create a
gradient that goes full-screen.
| | 01:36 |
So, let me go ahead and save that.
And one more thing I need to do is I need
| | 01:39 |
to grab this index file and open it in a
browser.
| | 01:43 |
So, I've got a little window right here
for browser already open.
| | 01:45 |
Let me go ahead and close this tab.
And, let's switch back into my style sheet.
| | 01:50 |
And I'll start creating the gradient.
So, the easiest way to create a gradient
| | 01:54 |
is by using the abbreviation called LG.
And when you do that you can type in two colors.
| | 01:58 |
So, I'll just do red and blue.
And then I'll go to the end and expand this.
| | 02:03 |
And notice that it gave me a gradient, and
it created the gradient with all of the
| | 02:07 |
browser prefixes.
So, I'm going to save this and come over
| | 02:10 |
here to my preview, and refresh, and you
can see the gradient looks great.
| | 02:14 |
So, it's a vertical gradient right now.
I didn't specify a direction, but I can if
| | 02:18 |
I want to.
So, I can say, linear gradient and I can
| | 02:22 |
type in here left.
Expand this and save it.
| | 02:25 |
And refresh, and now it's a gradient that
goes from the left to the right.
| | 02:28 |
Now if you want to, you can also specify
two directions.
| | 02:31 |
So, you can say top left and expand.
You can save this and refresh my screen
| | 02:37 |
over here and now it's a diagonal gradient
going from the top left to the bottom right.
| | 02:41 |
So, it's pretty smart about how it creates
the gradients with these shortcuts.
| | 02:44 |
If I wanted to I could also add a tab
stop.
| | 02:47 |
So if I say lg and then I do something
like red and then type 80%.
| | 02:53 |
And when I expand, it's actually going to
start that red at the 80% point.
| | 02:57 |
So, if I save this and refresh, you can
see that it starts much later.
| | 03:01 |
And you can do the same thing for other
element.
| | 03:04 |
So, you can say red and then add another
yellow here.
| | 03:07 |
And I'll set that up to 60% and I'll
modify my 80% here to be like 30% just so
| | 03:13 |
we could see it.
And then expand, save this and refresh.
| | 03:17 |
And you can see that now that yellow
appears, it starts to red at 30% a little
| | 03:21 |
bit later.
And it applies all those changes to my gradients.
| | 03:24 |
That's pretty awesome.
So, I'm going to undo that again.
| | 03:27 |
And show you that you can also add
whatever selector you want.
| | 03:31 |
So, if you don't want to use what it gives
you, notice that if I expand it gives you
| | 03:35 |
the background image.
So, if you want to specify this to go
| | 03:38 |
inside one of these properties.
Then you can just type in the property
| | 03:42 |
that you want.
So, if we type in background and then we
| | 03:45 |
use the rule, then it's going to create
all these inside a background rule.
| | 03:48 |
That's pretty cool.
Now, let's go ahead and undo this and
| | 03:51 |
we'll go back to a version of it like
this.
| | 03:54 |
So, we're back to this.
And one of the neat features.
| | 03:57 |
Let me go ahead and hide that sidebar so
we can see a little bit more of this.
| | 04:01 |
One of the awesome features of Emmet is
the ability to reflect changes.
| | 04:05 |
So, if you want to change say, the ending
color right here from blue to something else.
| | 04:10 |
Then it's sort of difficult because you'd
have to sort of select each one of these
| | 04:13 |
and then change them.
But you can actually change it in one place.
| | 04:17 |
So, say that I want to change this here to
purple.
| | 04:20 |
And then you can hit a Cmd key to reflect
that change among all the browser prefixes.
| | 04:25 |
So, it really depends on which editor
you're using.
| | 04:28 |
Normally it would be Cmd+B or Ctrl+B on a
PC.
| | 04:31 |
But if you're using Sublime Text like me,
you have to hit Shift+Cmd+R.
| | 04:36 |
So, when I do that, notice that it placed
purple everywhere, and that's pretty awesome.
| | 04:40 |
If I save this and I refresh my page,
you'll notice that it now goes to a purple color.
| | 04:45 |
Now just in case you're wondering, radial
gradients are not supported yet with this
| | 04:49 |
version of Emmet.
So, although the trends in design are
| | 04:52 |
moving towards flatter gradient less
designs, it's nice to know that Emmet can
| | 04:56 |
make it a lot easier.
You never know when trends are going to
| | 04:59 |
change anyways.
| | 04:59 |
| | Collapse this transcript |
|
|
