Aller au contenu

Emmet Syntax for Bricks

Ce contenu n’est pas encore disponible dans votre langue.

The Structeezy Parser includes Emmet. Emmet is a toolkit for web-developers that can greatly improve your document creation workflow.

Emmet uses a syntax similar to CSS selectors for describing elements positions inside generated structure trees, and their attributes such as ids, classes and custom attributes.

Elements

HTML Elements

You can use standard html elements names like div or p to generate HTML tags.

  • div<div></div>,
  • h1<h1></h1>,
  • p<p></p>,
  • a<a></a>,
  • etc.

Structeezy Parser will then convert these HTML tags to Bricks elements with the appropriate settings and add them to your structure tree.

Bricks Native Elements

You can also use Bricks native elements names like text or image to generate Bricks elements.

  • block<block></block>,
  • heading<heading></heading>,
  • text-basic<text-basic></text-basic>,
  • pricing-tables<pricing-tables></pricing-tables>,
  • etc.

Emmet will expand these elements, and Structeezy Parser will inject them with the appropriate settings and add them to your structure tree.

Check the list of all Bricks native elements names at the bottom of this page.

3rd Party Elements

When you use a 3rd party plugin that adds elements to Bricks, like o-props, BricksExtra, etc., you can use their names to generate these elements.

  • oicon<oicon></oicon>,
  • ofaq<ofaq></ofaq>,
  • etc.

Emmet will expand these elements, and Structeezy Parser will inject them in your structure tree.

It is not possible to list all 3rd party elements names here, but if you are a Bricks Elements Developer, feel free to edit this page with your elements and make a PR.

Check:

  • o-props elements names at the bottom of this page.
  • Bricks Extras elements names at the bottom of this page.

Nesting operators

Nesting operators are used to position elements inside the generated structure tree.

Child: >

Use the > operator to nest elements inside each other:

Emmet Snippet
section>container>div>ul>li

Hit tab key and you’ll get:

Expanded html structure
<section>
<container>
<div>
<ul>
<li></li>
</ul>
</div>
</container>
</section>

Sibling: +

Use the + operator to place elements besides each other, on the same level:

Emmet Snippet
container>p+bq

Hit tab key and you’ll get:

Expanded html structure
<container>
<p></p>
<blockquote></blockquote>
</container>

Climb-up: ^

With the ^ operator, you can climb one level up the tree and change context where following elements should appear:

Emmet Snippet
section>container>div+div^container>div+div

Hit tab key and you’ll get:

Expanded html structure
<section>
<container>
<div></div>
<div></div>
</container>
<container>
<div></div>
<div></div>
</container>
</section>

You can use as many ^ operators as you like.

Multiplication: *

With the * operator you can define how many times an element should be generated:

Emmet Snippet
section>container>div*3

Hit tab key and you’ll get:

Expanded html structure
<section>
<container>
<div></div>
<div></div>
<div></div>
</container>
</section>

Grouping: ()

Parentheses are used for grouping subtrees in complex snippets, creating a card structure for example:

Emmet Snippet
div>(header>ul>li*2>a)+footer>p

Hit tab key and you’ll get:

Expanded html structure
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>

You can nest groups inside each other and combine them with multiplication * operator:

Emmet Snippet
(div>dl>(dt+dd)*3)+footer>p

Hit tab key and you’ll get:

Expanded html structure
<div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
<footer>
<p></p>
</footer>

Attribute operators

Attribute operators are used to define attributes of generated elements.

ID and CLASS

In CSS, you use elem#id and elem.class notation to reach the elements with specified id or class attributes.

In Emmet, you can use the very same syntax to add these attributes to specified element:

Emmet Snippet
main>section.hero#home+section#about+section#contact

Hit tab key and you’ll get:

Expanded html structure
<main>
<section class="hero" id="home"></section>
<section id="about"></section>
<section id="contact"></section>
</main>

Custom attributes

You can use the [attr] notation (as in CSS) to add custom attributes to your elements:

Emmet Snippet
section[aria-labelledby="heading"]>h1#heading{Hello world}

Hit tab key and you’ll get:

Expanded html structure
<section aria-labelledby="heading">
<h1 id="heading">Hello world</h1>
</section>

Item numbering: $

With $ you can number your elements. Place the $ operator inside element’s name, attribute’s name or attribute’s value to output the current index of a repeated element:

Emmet Snippet
ul>li.item$*5

Hit tab key and you’ll get:

Expanded html structure
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>

You can use multiple $ in a row to pad number with zeroes:

Emmet Snippet
ul>li.item$$$*5

Hit tab key and you’ll get:

Expanded html structure
<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
<li class="item004"></li>
<li class="item005"></li>
</ul>

Text: {}

You can use curly braces to add text to element:

Emmet Snippet
a{click me}

Hit tab key and you’ll get:

Expanded html structure
<a href="">click me</a>

Note that {text} is used and parsed as a separate element (like, div, p etc.) but has a special meaning when written right after element. For example, a{click} and a>{click} will produce the same output, but a{click}+b{here} and a>{click}+b{here} won’t:

Expanded html structure
<!-- a{click}+b{here} -->
<a href="">click</a><b>here</b>
<!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a>

Dynamic Data: {{}} (Structeezy Specific)

One of the most powerful features of Structeezy Parser is the ability to let you use Bricks dynamic data in your Emmet abbreviations.

You can use double curly braces to add dynamic data to element:

Emmet Snippet
section>container>h1{Title: {post_title}}+p{Summary: {post_excerpt}}

Hit tab key and you’ll get:

Expanded html structure
<section>
<container>
<h1>Title: {post_title}</h1>
<p>Summary: {post_excerpt}</p>
</container>
</section>

Structeezy Parser will then convert these tags to Bricks elements with dynamic data and add them to your structure tree.

List of native Bricks elements by category

This is a list of all native Bricks elements that you can use in Emmet abbreviations. This list is based on Bricks v1.9.5.

In Structeezy, the list is updated automatically from the Bricks source code, so you can always use any element available in your Bricks Elements panel.

Layout

Element NameDisplay Name (what you see in Bricks)
sectionSection
containerContainer
blockBlock
divDiv

Basic

Element NameDisplay Name (what you see in Bricks)
headingHeading
text-basicBasic Text
textRich Text
text-linkText link
buttonButton
iconIcon
imageImage
videoVideo

General

Element NameDisplay Name (what you see in Bricks)
nav-nestedNav (Nestable)
dropdownDropdown
offcanvasOffcanvas
toggleToggle
dividerDivider
icon-boxIcon Box
social-iconsIcon List
listList
accordionAccordion
accordion-nestedAccordion (Nestable)
tabsTabs
tabs-nestedTabs (Nestable)
formForm
mapMap
alertAlert
animated-typingAnim. Typing
countdownCountdown
counterCounter
pricing-tablesPricing Tables
progress-barProgress Bar
pie-chartPie Chart
team-membersTeam Members
testimonialsTestimonials
codeCode
templateTemplate
logoLogo
facebook-pageFacebook Page
breadcrumbsBreadcrumbs

Media

Element NameDisplay Name (what you see in Bricks)
image-galleryImage Gallery
audioAudio
carouselCarousel
sliderSlider
slider-nestedSlider (Nestable)
svgSVG
instagram-feedInstagram feed

WordPress

Element NameDisplay Name (what you see in Bricks)
wordpressWordPress
postsPosts
paginationPagination
nav-menuNav Menu
sidebarSidebar
searchSearch
shortcodeShortcode

Single

Element NameDisplay Name (what you see in Bricks)
post-titlePost Title
post-excerptExcerpt
post-metaMeta Data
post-contentPost Content
post-sharingSocial Sharing
related-postsRelated Posts
post-authorAuthor
post-commentsComments
post-taxonomyTaxonomy
post-navigationPost Navigation
post-reading-timeReading time
post-reading-progress-barReading progress bar
post-tocTable of contents

List of o-props (BricksProps) Elements

Element NameDisplay Name (what you see in Bricks)
bricksprops-light-dark-toggleLight/Dark Toggle
oschemesswitcherSchemes Switcher
omenubarMenu Bar
omenuburgerMenu Burger
omenubuttonMenu Button
ofaqFAQ
oiconUnlimited Icon

List of Bricks Extras Elements

Element NameDisplay Name (what you see in Bricks)
xbacktotopBack to Top
xbeforeafterimageBefore / After Image
xburgertriggerBurger Trigger
xcontentswitcherContent Switcher
xcontenttimelineContent Timeline
xdynamicchartDynamic Chart
xdynamiclightboxDynamic Lightbox
xdynamictableDynamic Table
xfluentformFluent Form
xnotificationbarHeader notification bar
xheaderrowHeader Row
xheadersearchHeader Search
ximagehotspotsImage hotspots
xinteractivecursorInteractive Cursor
xlottieLottie
xpromodalModal (template)
xpromodalnestableModal
xoffcanvasOffCanvas (template)
xoffcanvasnestableOffCanvas
xpopoverPopover / Tooltips
xproaccordionPro Accordion
xproalertPro Alert
xprosliderPro Slider
xproslidercontrolPro Slider Control
xproslidergalleryPro Slider Gallery
xreadingprogressbarReading Progress Bar
xreadmorelessRead More / Less
xshortcodewrapperShortcode Wrapper
xbreadcrumbsSite Breadcrumbs
xslidemenuSlide menu
xsocialshareSocial Share
xstarratingStar Rating
xtableofcontentsTable of Contents
xtoggleswitchToggle Switch