Elemental Syntax

This article uses something like scratchblocks syntax to show how blocks will look.

This page will provide a unified syntax for Elemental. It is intended as a spec for the developers, and should not be depended on as a user's guide. The content of this page is based on conversations being held in the forums. Go there or open an issue to voice your opinion on any potential changes here.

A guide to the syntax used on this page:

Item	Explanation
hat	A block shape. It begins a stack, i.e. blocks can be stacked below it but it can't be stacked under anything else.
stack	A block shape. Can be stacked below or above another block.
c	A block shape. Can be stacked, and other blocks can be stacked within it.
reporter	A block shape. Can be dragged into ()-shaped inputs.
(foo)	A reporter block. Can be dragged into ()-shaped inputs.
▾	A chevron button, collapses or uncollapses the contents of a c-shaped block.
()	An input slot for a reporter block. It cannot accept text, only reporters.
[]	A text input. Cannot accept reporters.
[ v]	A combo box. A text input with a built-in dropdown of suggested content.
◀ ▶	A BYOB-style expandable list. Whatever input appears before this symbol can be repeated using these buttons.

Block Definitions

Different kinds of blocks appear depending on whether you're editing an HTML file or a CSS file. When editing an HTML file, the blocks are sorted into 9 palates: Controls, Metadata, Sections, Content, Text, Media, Tables, and Forms. When Advanced Mode is on, a 10th palate, Experimental, appears. When editing a CSS file, blocks are sorted into 2 categories: Selectors and Properties.

The comment [] block, a stack block in a neutral color, is available in both editors by right-clicking in the scripts area.

###HTML Categories The HTML side contains 2 blocks that are not elements and appear in the Controls palate:

• the text [] block, which has a stack shape and can be used to insert text anywhere into any c-shaped element. Its content is escaped to prevent conflicts with the blocks or malicious usage of Elemental.
• the ([ v] = []) block, which is used to set HTML attributes. The left side is a searchable dropdown containing available attributes (I assume a combobox with autofill), and the right side is a plain text input. This block has a reporter shape.

Beyond these 2, Elemental contains a large number of nearly-identical blocks that represent HTML elements. They look like this:

▾ div () ◀ ▶

Its parameters are as follows:

• ▾: a chevron button, which is used to collapse or uncollapse the contents of the element if it has the c shape (see below)
• (): an input into which users can drag the ([ v] = []) block to set attributes

The Element blocks have one of 2 shapes, depending on whether or not they can contain other elements: c and stack. Unless otherwise specified, Element blocks are only stack-shaped if they must remain empty (like img or br). The special html block is a hat because it is the outermost element in a webpage and therefore begins the stack. Here each block is listed by category:

####Metadata

• html (hat)
• head
• body
• title (make sure to avoid auto-generated whitespace around its contents)
• link
• meta
• style (maybe only available in Advanced Mode, to encourage users to have separate CSS files)
• script
• noscript
• base

####Sections

• h1 through h6
• hgroup
• header
• footer
• section
• article
• nav
• address

####Content

• p
• div
• ol
• ul
• li
• pre
• hr
• dl
• dd
• dt
• figure
• figcaption
• details
• dialog
• menu
• menuitem
• summary

####Text

• b
• i
• span
• a
• br
• wbr
• small
• sub
• sup
• strong
• code
• abbr
• em
• cite
• q
• dfn
• time
• var
• samp
• kbd
• mark
• ruby
• rp
• rt
• bdo
• del
• ins

####Media

• area
• audio
• img
• map
• track
• video
• canvas
• embed
• iframe
• object
• param
• source

####Tables

• table
• tr
• th
• td
• caption
• col
• colgroup
• tbody
• tfoot
• thead

####Forms

• form
• label
• input
• button
• textarea
• progress
• select
• datalist
• fieldset
• keygen
• legend
• meter
• option
• optgroup
• output

###Selectors Category The Selectors category contains all of the CSS-related blocks that don't fall into the Properties category:

• CSS for () ◀ ▶ :: hat: CSS selectors are dropped into the input to select what element[s] are affected. Then, properties are stacked below. BYOB-style expandable list is comma-separated to reflect CSS syntax

And of course, the element selectors themselves:

Block	CSS equivalent	Comments
(not ())	:not()
(class [ v])	.foo	[ v] is a combo box containing classes from the project
(id [ v])	#foo	same deal as above
(elements of type [div v])	div
(elements of type [div v] with [] ◀ ▶)	div.foo	element joined to something without a space. BYOB-style expandable list
(elements with [] ◀ ▶)	.foo.bar	Again no spaces. BYOB-style expandable list
(() when [hovering over it v])	:hover	see MDN for a list of pseudo-classes
(the pseudoelement [after v] ())	::after	see MDN for a list of pseudoelements
(() that are [inside v] ())	directly inside: div > div , inside: div div	first and second args should be flipped

###Properties Category Each CSS property gets its own stack block, which follows the format width []. As a rule of thumb, "families" of properties (like background/background-color/etc) receive one property block with their shorthand property name.

Properties that can be set to a color have 2 inputs, a text input and a Scratch-style color picker. When one of these is changed, the other updates to reflect the change (except if the text input is set to something other than a color, in which case the color picker will display a graphic indicating that a preview isn't available).

To ensure legacy browser compatibility, upon export certain properties may appear multiple times in the code with vendor prefixes.

###Advanced Mode Advanced mode serves 2 functions: it changes how blocks are displayed so that they read exactly as the generated code would. It also enables new blocks that aren't usually necessary for basic sites. When Advanced Mode is enabled, the comment [] block displays as <!-- [] --> in the HTML editor and as /* [] */ in the CSS editor.

####Elements

• Element blocks change to ▾ <div () ◀ ▶ > for c blocks and ▾ <img () ◀ ▶ /> for stack blocks
• c Element blocks have closing tags in their "feet" (implied for the html block)
• ([ v] = []) is renamed to ([ v] =" [] ")

Additionally, some more advanced Element blocks become available:

• depreciated and web-components elements as listed on MDN appear under a new palate marked Experimental
• the ▾ <[] () ◀ ▶ > c-block becomes available. Its closing tag automatically updates to match the opening tag.

####Selectors

• CSS for () ◀ ▶ is renamed to () ◀ ▶ { (the closing bracket is implied)
• the other selectors are renamed as closely as possible to their CSS equivalents listed in the table above
• the custom ([]) selector block is unlocked.
• note that the arguments for the direct child selector should be flipped back if possible
• the @import [] block becomes available. It cannot be stacked in either direction, so potentially a hat-block with an upside-down hat shape on the bottom.
• media queries: potentially some kind of area that CSS styles can be dragged into.

####Properties

• property blocks change to width: [] ;
• the [] : [] ; block is unlocked

##Save Format

This is the the Work Space Format. It's how Elemental will store the code while it's in development. Basically, it's a renamed ZIP file that contains all of the HTML, JS, and CSS resources. Javascript libraries exist to create ZIP files without going to the server. The editor will read in the ZIP file and parse it to the block format.

JSON files exist to show the positions of scripts and other metadata about the project (like title and description)

myproject.elemproj
|-index.html
|-styles.css
|-funny_dog_picture.jpg
|-scripts.js
|-_elem_files
 |-index.html.json
 |-styles.css.json
 |-scripts.js.json