Emmet examples (html)

index.html

<!-- div.row -->
<div class="row"></div>

<!-- div.row.myFirstRow -->
<div class="row myFirstRow"></div>

<!-- div#myId -->
<div id="myId"></div>

<!-- div#myId.row.anotherClass -->
<div id="myId" class="row anotherClass"></div>

<!-- h1{This is what I want inside} -->
<h1>This is what I want inside</h1>

<!-- h1.row{This is what I want inside} -->
<h1 class="row">This is what I want inside</h1>

<!-- Special Note: Div is the most common, and therefore implied... -->
<!-- .row -->
<div class="row"></div>

<!-- .row>.col-sm-5 -->
<div class="row">
  <div class="col-sm-5"></div>
</div>

<!-- .row>(.col-sm-3)*4 -->
<div class="row">
  <div class="col-sm-3"></div>
  <div class="col-sm-3"></div>
  <div class="col-sm-3">
    <h2>This</h2>
  </div>
  <div class="col-sm-3"></div>
</div>

<!-- div.row1+div.row2 -->
<div class="row1"></div>
<div class="row2"></div>


<!-- .row>(.col-sm-3>.card>h2.title{Title $}+h3.byline{This is the byline $}+p.card__body{Lorem})*4 -->
<div class="row">
  <div class="col-sm-3">
    <div class="card">
      <h2 class="title">Title 1</h2>
      <h3 class="byline">This is the byline 1</h3>
      <p class="card__body">Lorem</p>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="card">
      <h2 class="title">Title 2</h2>
      <h3 class="byline">This is the byline 2</h3>
      <p class="card__body">Lorem</p>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="card">
      <h2 class="title">Title 3</h2>
      <h3 class="byline">This is the byline 3</h3>
      <p class="card__body">Lorem</p>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="card">
      <h2 class="title">Title 4</h2>
      <h3 class="byline">This is the byline 4</h3>
      <p class="card__body">Lorem</p>
    </div>
  </div>
</div>

<!-- Here are a few other tricks -->

<!-- a[href="www.google.com"] -->
<a href="www.google.com"></a>

<!-- a[href="www.google.com"].btn.btn-primary{Primary Button} -->
<a href="www.google.com" class="btn btn-primary">Primary Button</a>