Skip to content

Instantly share code, notes, and snippets.

@pixelspencil

pixelspencil/emmet-101.md

Last active March 23, 2021 00:02
Show Gist options
  • Save pixelspencil/8aebabef5cd16b0ac0916aab6f45816b to your computer and use it in GitHub Desktop.
Save pixelspencil/8aebabef5cd16b0ac0916aab6f45816b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. pixelspencil renamed this gist Mar 23, 2021. 1 changed file with 0 additions and 0 deletions.
    0 readme.md → emmet-101.md
    View file
    File renamed without changes.
  2. pixelspencil revised this gist Mar 15, 2021. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -5,7 +5,7 @@
    - [Creating placeholder text using `lorem`](#creating-placeholder-text-using-lorem)
    - [Creating placeholder text using `lorem` and multiplying with `*`](#creating-placeholder-text-using-lorem-and-multiplying-with-)
    - [Using `^` to move up elements and add sibling `p` after first `p`](#using--to-move-up-elements-and-add-sibling-p-after-first-p)
    - [select text then using `ctrl+w` type in ul>li*>a[href="https://www.$#.com" target="_blank"]{$#}`](#select-text-then-using-ctrlw-type-in-ulliahrefhttpswwwcom-target_blank)
    - [Select text then using `ctrl+w` type in ul>li*>a[href="https://www.$#.com" target="_blank"]{$#}`](#select-text-then-using-ctrlw-type-in-ulliahrefhttpswwwcom-target_blank)

    ---

    @@ -95,7 +95,7 @@ p*2>Lorem
    </div>
    ```

    ### select text then using `ctrl+w` type in ul>li*>a[href="https://www.$#.com" target="_blank"]{$#}`
    ### Select text then using `ctrl+w` type in ul>li*>a[href="https://www.$#.com" target="_blank"]{$#}`

    - `$#` takes the selected value, in this case the url text` and inserts it where the `{$#}` is

  3. pixelspencil revised this gist Mar 15, 2021. 1 changed file with 18 additions and 1 deletion.
    19 changes: 18 additions & 1 deletion readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -97,4 +97,21 @@ p*2>Lorem

    ### select text then using `ctrl+w` type in ul>li*>a[href="https://www.$#.com" target="_blank"]{$#}`

    - `$#` takes the selected value and inserts it
    - `$#` takes the selected value, in this case the url text` and inserts it where the `{$#}` is

    ```html
    <ul>
    <li>
    <a href="https://www.twitter.com" target="_blank">twitter</a>
    </li>
    <li>
    <a href="https://www.flickr.com" target="_blank">flickr</a>
    </li>
    <li>
    <a href="https://www.youtube.com" target="_blank">youtube</a>
    </li>
    <li>
    <a href="https://www.facebook.com" target="_blank">facebook</a>
    </li>
    </ul>
    ```
  4. pixelspencil revised this gist Mar 15, 2021. 1 changed file with 6 additions and 1 deletion.
    7 changes: 6 additions & 1 deletion readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -5,6 +5,7 @@
    - [Creating placeholder text using `lorem`](#creating-placeholder-text-using-lorem)
    - [Creating placeholder text using `lorem` and multiplying with `*`](#creating-placeholder-text-using-lorem-and-multiplying-with-)
    - [Using `^` to move up elements and add sibling `p` after first `p`](#using--to-move-up-elements-and-add-sibling-p-after-first-p)
    - [select text then using `ctrl+w` type in ul>li*>a[href="https://www.$#.com" target="_blank"]{$#}`](#select-text-then-using-ctrlw-type-in-ulliahrefhttpswwwcom-target_blank)

    ---

    @@ -92,4 +93,8 @@ p*2>Lorem
    </p>
    <p><a href=""></a></p>
    </div>
    ```
    ```

    ### select text then using `ctrl+w` type in ul>li*>a[href="https://www.$#.com" target="_blank"]{$#}`

    - `$#` takes the selected value and inserts it
  5. pixelspencil revised this gist Mar 15, 2021. No changes.
  6. pixelspencil revised this gist Mar 15, 2021. 1 changed file with 0 additions and 27 deletions.
    27 changes: 0 additions & 27 deletions readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -73,33 +73,6 @@ p*2>Lorem
    corporis sit dolor excepturi magni quibusdam illum deleniti amet.
    Commodi, magnam.
    </p>

    <!-- emmet code -->
    p>Lorem*5

    <!-- generated html -->
    <p>
    <span>Lorem ipsum dolor, sit amet consectetur adipisicing elit.
    Voluptate vitae molestias dolores totam soluta est, officiis
    voluptatibus modi ducimus nobis odit laborum sed error. Magni
    itaque quasi cumque sapiente voluptas.</span>
    <span>Aliquid a eius culpa, magnam amet illo at eligendi facere tenetur
    soluta numquam quaerat maxime, qui, id earum quia atque error
    ipsum quis harum perferendis necessitatibus odio voluptatibus
    nemo. Ratione.</span>
    <span>Fugiat ex exercitationem laborum quisquam, eius similique iste
    quis officia deleniti atque, debitis aliquam ratione! Quidem,
    aperiam libero vitae pariatur iusto quae amet nihil dolore eos
    dicta unde, esse nulla.</span>
    <span>Quia, dolorem repellat et incidunt porro iure nemo facere rerum
    quasi odio tenetur ducimus tempora excepturi eaque hic
    voluptatibus deleniti corrupti nihil reprehenderit. Excepturi qui
    repudiandae architecto dicta quaerat totam.</span>
    <span>Ducimus similique molestias quibusdam! Assumenda, consectetur
    iste vitae ducimus omnis necessitatibus repellat, dolorum facilis
    quia natus, obcaecati eaque tempore. Sed dolorum voluptatem
    quidem, amet enim cum fugit adipisci rem blanditiis?</span>
    </p>
    ```

    ### Using `^` to move up elements and add sibling `p` after first `p`
  7. pixelspencil revised this gist Mar 15, 2021. 1 changed file with 20 additions and 0 deletions.
    20 changes: 20 additions & 0 deletions readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -4,6 +4,7 @@
    - [Creating nested & adjacent html using `+`](#creating-nested--adjacent-html-using-)
    - [Creating placeholder text using `lorem`](#creating-placeholder-text-using-lorem)
    - [Creating placeholder text using `lorem` and multiplying with `*`](#creating-placeholder-text-using-lorem-and-multiplying-with-)
    - [Using `^` to move up elements and add sibling `p` after first `p`](#using--to-move-up-elements-and-add-sibling-p-after-first-p)

    ---

    @@ -99,4 +100,23 @@ p>Lorem*5
    quia natus, obcaecati eaque tempore. Sed dolorum voluptatem
    quidem, amet enim cum fugit adipisci rem blanditiis?</span>
    </p>
    ```

    ### Using `^` to move up elements and add sibling `p` after first `p`

    ```html
    <!-- emmet code -->
    .hero-unit>h1+p>Lorem^p>a

    <!-- generated html -->
    <div class="hero-unit">
    <h1></h1>
    <p>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit et a
    atque doloribus eligendi odio distinctio quo, fuga autem dolorem.
    Maiores ea explicabo quaerat laudantium laborum debitis tempora vero
    nobis!
    </p>
    <p><a href=""></a></p>
    </div>
    ```
  8. pixelspencil revised this gist Mar 15, 2021. 1 changed file with 10 additions and 16 deletions.
    26 changes: 10 additions & 16 deletions readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -78,31 +78,25 @@ p>Lorem*5

    <!-- generated html -->
    <p>
    <span
    >Lorem ipsum dolor, sit amet consectetur adipisicing elit.
    <span>Lorem ipsum dolor, sit amet consectetur adipisicing elit.
    Voluptate vitae molestias dolores totam soluta est, officiis
    voluptatibus modi ducimus nobis odit laborum sed error. Magni
    itaque quasi cumque sapiente voluptas.</span
    ><span
    >Aliquid a eius culpa, magnam amet illo at eligendi facere tenetur
    itaque quasi cumque sapiente voluptas.</span>
    <span>Aliquid a eius culpa, magnam amet illo at eligendi facere tenetur
    soluta numquam quaerat maxime, qui, id earum quia atque error
    ipsum quis harum perferendis necessitatibus odio voluptatibus
    nemo. Ratione.</span
    ><span
    >Fugiat ex exercitationem laborum quisquam, eius similique iste
    nemo. Ratione.</span>
    <span>Fugiat ex exercitationem laborum quisquam, eius similique iste
    quis officia deleniti atque, debitis aliquam ratione! Quidem,
    aperiam libero vitae pariatur iusto quae amet nihil dolore eos
    dicta unde, esse nulla.</span
    ><span
    >Quia, dolorem repellat et incidunt porro iure nemo facere rerum
    dicta unde, esse nulla.</span>
    <span>Quia, dolorem repellat et incidunt porro iure nemo facere rerum
    quasi odio tenetur ducimus tempora excepturi eaque hic
    voluptatibus deleniti corrupti nihil reprehenderit. Excepturi qui
    repudiandae architecto dicta quaerat totam.</span
    ><span
    >Ducimus similique molestias quibusdam! Assumenda, consectetur
    repudiandae architecto dicta quaerat totam.</span>
    <span>Ducimus similique molestias quibusdam! Assumenda, consectetur
    iste vitae ducimus omnis necessitatibus repellat, dolorum facilis
    quia natus, obcaecati eaque tempore. Sed dolorum voluptatem
    quidem, amet enim cum fugit adipisci rem blanditiis?</span
    >
    quidem, amet enim cum fugit adipisci rem blanditiis?</span>
    </p>
    ```
  9. pixelspencil revised this gist Mar 15, 2021. 1 changed file with 71 additions and 0 deletions.
    71 changes: 71 additions & 0 deletions readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -2,6 +2,8 @@
    - [Using Emmet with HTML](#using-emmet-with-html)
    - [Creating nested html using `>`](#creating-nested-html-using-)
    - [Creating nested & adjacent html using `+`](#creating-nested--adjacent-html-using-)
    - [Creating placeholder text using `lorem`](#creating-placeholder-text-using-lorem)
    - [Creating placeholder text using `lorem` and multiplying with `*`](#creating-placeholder-text-using-lorem-and-multiplying-with-)

    ---

    @@ -34,4 +36,73 @@ h1+ul#groceries>li>a>img
    <a href=""><img src="" alt="" /></a>
    </li>
    </ul>
    ```

    ### Creating placeholder text using `lorem`

    ```html
    <!-- emmet code -->
    p>Lorem

    <!-- generated html -->
    <p>
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aut in
    nihil, possimus doloribus suscipit quaerat temporibus. Aliquam
    quaerat adipisci, veritatis culpa sapiente eaque architecto unde,
    quia tenetur iure, repellat laudantium!
    </p>
    ```

    ### Creating placeholder text using `lorem` and multiplying with `*`

    ```html
    <!-- emmet code -->
    p*2>Lorem

    <!-- generated html -->
    <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt
    commodi in necessitatibus vero, sunt fugiat consequuntur ea animi
    eligendi quidem laudantium vitae, eaque ipsum tempore! Laudantium
    mollitia repudiandae ratione quia?
    </p>
    <p>
    Cupiditate necessitatibus, architecto nulla, hic ea animi dolorem
    enim cum magnam illo id quam voluptates cumque a saepe, porro
    corporis sit dolor excepturi magni quibusdam illum deleniti amet.
    Commodi, magnam.
    </p>

    <!-- emmet code -->
    p>Lorem*5

    <!-- generated html -->
    <p>
    <span
    >Lorem ipsum dolor, sit amet consectetur adipisicing elit.
    Voluptate vitae molestias dolores totam soluta est, officiis
    voluptatibus modi ducimus nobis odit laborum sed error. Magni
    itaque quasi cumque sapiente voluptas.</span
    ><span
    >Aliquid a eius culpa, magnam amet illo at eligendi facere tenetur
    soluta numquam quaerat maxime, qui, id earum quia atque error
    ipsum quis harum perferendis necessitatibus odio voluptatibus
    nemo. Ratione.</span
    ><span
    >Fugiat ex exercitationem laborum quisquam, eius similique iste
    quis officia deleniti atque, debitis aliquam ratione! Quidem,
    aperiam libero vitae pariatur iusto quae amet nihil dolore eos
    dicta unde, esse nulla.</span
    ><span
    >Quia, dolorem repellat et incidunt porro iure nemo facere rerum
    quasi odio tenetur ducimus tempora excepturi eaque hic
    voluptatibus deleniti corrupti nihil reprehenderit. Excepturi qui
    repudiandae architecto dicta quaerat totam.</span
    ><span
    >Ducimus similique molestias quibusdam! Assumenda, consectetur
    iste vitae ducimus omnis necessitatibus repellat, dolorum facilis
    quia natus, obcaecati eaque tempore. Sed dolorum voluptatem
    quidem, amet enim cum fugit adipisci rem blanditiis?</span
    >
    </p>
    ```
  10. pixelspencil revised this gist Mar 15, 2021. 1 changed file with 28 additions and 13 deletions.
    41 changes: 28 additions & 13 deletions readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,22 +1,37 @@
    - [Emmet 101](#emmet-101)
    - [Using Emmet with HTML](#using-emmet-with-html)
    - [Creating nested html using `>`](#creating-nested-html-using-)
    - [Creating nested & adjacent html using `+`](#creating-nested--adjacent-html-using-)

    ---

    # Emmet 101

    ## Using Emmet with HTML

    <!-- ul#groceries>li>a>img -->
    <!-- <ul id="groceries">
    <li>
    <a href=""><img src="" alt="" /></a>
    </li>
    </ul> -->
    <!-- h1+ul#groceries>li>a>img -->
    <!-- <h1></h1>
    <ul id="groceries">
    <li>
    <a href=""><img src="" alt="" /></a>
    </li>
    </ul> -->
    ### Creating nested html using `>`
    ```html
    <!-- emmet code -->
    ul#groceries>li>a>img

    <!-- generated html -->
    <ul id="groceries">
    <li>
    <a href=""><img src="" alt="" /></a>
    </li>
    </ul>
    ```

    ### Creating nested & adjacent html using `+`
    ```html
    <!-- emmet code -->
    h1+ul#groceries>li>a>img

    <!-- generated html -->
    <h1></h1>
    <ul id="groceries">
    <li>
    <a href=""><img src="" alt="" /></a>
    </li>
    </ul>
    ```
  11. pixelspencil revised this gist Mar 15, 2021. 1 changed file with 22 additions and 1 deletion.
    23 changes: 22 additions & 1 deletion readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,22 @@
    ‎‎​
    - [Emmet 101](#emmet-101)
    - [Using Emmet with HTML](#using-emmet-with-html)

    ---

    # Emmet 101

    ## Using Emmet with HTML

    <!-- ul#groceries>li>a>img -->
    <!-- <ul id="groceries">
    <li>
    <a href=""><img src="" alt="" /></a>
    </li>
    </ul> -->
    <!-- h1+ul#groceries>li>a>img -->
    <!-- <h1></h1>
    <ul id="groceries">
    <li>
    <a href=""><img src="" alt="" /></a>
    </li>
    </ul> -->
  12. pixelspencil created this gist Mar 15, 2021.
    1 change: 1 addition & 0 deletions readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    ‎‎​