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:
section>container>div>ul>li
Hit tab
key and you’ll get:
<section> <container> <div> <ul> <li></li> </ul> </div> </container></section>
Sibling: +
Use the +
operator to place elements besides each other, on the same level:
container>p+bq
Hit tab
key and you’ll get:
<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:
section>container>div+div^container>div+div
Hit tab
key and you’ll get:
<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:
section>container>div*3
Hit tab
key and you’ll get:
<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:
div>(header>ul>li*2>a)+footer>p
Hit tab
key and you’ll get:
<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:
(div>dl>(dt+dd)*3)+footer>p
Hit tab
key and you’ll get:
<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:
main>section.hero#home+section#about+section#contact
Hit tab
key and you’ll get:
<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:
section[aria-labelledby="heading"]>h1#heading{Hello world}
Hit tab
key and you’ll get:
<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:
ul>li.item$*5
Hit tab
key and you’ll get:
<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:
ul>li.item$$$*5
Hit tab
key and you’ll get:
<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:
a{click me}
Hit tab
key and you’ll get:
<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:
<!-- 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:
section>container>h1{Title: {post_title}}+p{Summary: {post_excerpt}}
Hit tab
key and you’ll get:
<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 Name | Display Name (what you see in Bricks) |
---|---|
section | Section |
container | Container |
block | Block |
div | Div |
Basic
Element Name | Display Name (what you see in Bricks) |
---|---|
heading | Heading |
text-basic | Basic Text |
text | Rich Text |
text-link | Text link |
button | Button |
icon | Icon |
image | Image |
video | Video |
General
Element Name | Display Name (what you see in Bricks) |
---|---|
nav-nested | Nav (Nestable) |
dropdown | Dropdown |
offcanvas | Offcanvas |
toggle | Toggle |
divider | Divider |
icon-box | Icon Box |
social-icons | Icon List |
list | List |
accordion | Accordion |
accordion-nested | Accordion (Nestable) |
tabs | Tabs |
tabs-nested | Tabs (Nestable) |
form | Form |
map | Map |
alert | Alert |
animated-typing | Anim. Typing |
countdown | Countdown |
counter | Counter |
pricing-tables | Pricing Tables |
progress-bar | Progress Bar |
pie-chart | Pie Chart |
team-members | Team Members |
testimonials | Testimonials |
code | Code |
template | Template |
logo | Logo |
facebook-page | Facebook Page |
breadcrumbs | Breadcrumbs |
Media
Element Name | Display Name (what you see in Bricks) |
---|---|
image-gallery | Image Gallery |
audio | Audio |
carousel | Carousel |
slider | Slider |
slider-nested | Slider (Nestable) |
svg | SVG |
instagram-feed | Instagram feed |
WordPress
Element Name | Display Name (what you see in Bricks) |
---|---|
wordpress | WordPress |
posts | Posts |
pagination | Pagination |
nav-menu | Nav Menu |
sidebar | Sidebar |
search | Search |
shortcode | Shortcode |
Single
Element Name | Display Name (what you see in Bricks) |
---|---|
post-title | Post Title |
post-excerpt | Excerpt |
post-meta | Meta Data |
post-content | Post Content |
post-sharing | Social Sharing |
related-posts | Related Posts |
post-author | Author |
post-comments | Comments |
post-taxonomy | Taxonomy |
post-navigation | Post Navigation |
post-reading-time | Reading time |
post-reading-progress-bar | Reading progress bar |
post-toc | Table of contents |
List of o-props (BricksProps) Elements
Element Name | Display Name (what you see in Bricks) |
---|---|
bricksprops-light-dark-toggle | Light/Dark Toggle |
oschemesswitcher | Schemes Switcher |
omenubar | Menu Bar |
omenuburger | Menu Burger |
omenubutton | Menu Button |
ofaq | FAQ |
oicon | Unlimited Icon |
List of Bricks Extras Elements
Element Name | Display Name (what you see in Bricks) |
---|---|
xbacktotop | Back to Top |
xbeforeafterimage | Before / After Image |
xburgertrigger | Burger Trigger |
xcontentswitcher | Content Switcher |
xcontenttimeline | Content Timeline |
xdynamicchart | Dynamic Chart |
xdynamiclightbox | Dynamic Lightbox |
xdynamictable | Dynamic Table |
xfluentform | Fluent Form |
xnotificationbar | Header notification bar |
xheaderrow | Header Row |
xheadersearch | Header Search |
ximagehotspots | Image hotspots |
xinteractivecursor | Interactive Cursor |
xlottie | Lottie |
xpromodal | Modal (template) |
xpromodalnestable | Modal |
xoffcanvas | OffCanvas (template) |
xoffcanvasnestable | OffCanvas |
xpopover | Popover / Tooltips |
xproaccordion | Pro Accordion |
xproalert | Pro Alert |
xproslider | Pro Slider |
xproslidercontrol | Pro Slider Control |
xproslidergallery | Pro Slider Gallery |
xreadingprogressbar | Reading Progress Bar |
xreadmoreless | Read More / Less |
xshortcodewrapper | Shortcode Wrapper |
xbreadcrumbs | Site Breadcrumbs |
xslidemenu | Slide menu |
xsocialshare | Social Share |
xstarrating | Star Rating |
xtableofcontents | Table of Contents |
xtoggleswitch | Toggle Switch |