Add an element with class applied

Quickly add an element with a class applied to it. Something like Emmet's Expend Abbreviation

For exemple:

Simple class: CMD+E -> div.margin-right

Combo classes: CMD+E -> div.margin-right.margin-small

  • Jean-Philippe Trinh
  • Jan 31 2022
  • Alejandro Medina commented
    February 10, 2022 23:32

    I came here for this.

    It would also work like . + "class name" to create a div with the applied class.

  • Pete Blatchford commented
    January 31, 2022 10:10

    You could even add content to a paragraph instead of inserting the default lorum ipsum by typing para > [tab] > {content here} > [return]. For a list of all the Emmet shortcuts, check out the Emmet docs

  • Pete Blatchford commented
    January 31, 2022 09:58

    I love this idea, it reminds me of Emmet for Sublime (an incredible timesaver for marking up a page in the olden days).


    When a user presses CMD+E or CMD+K it brings up the "Quick find" search box (I use this constantly), perhaps the existing functionality could be bound to CMD+E whereas CMD+K could be used specifically for adding elements to the page where the designer can search for a component and press

    • . followed by an existing class name to add a component with a class name,

    • * followed by a number to add multiple instances of a component as siblings,

    • > followed by another component to add a nested element inside it,

    • + followed by another component to add other components as siblings