Elemental Syntax

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

This page will provide a unified syntax for Elemental, based on conversations being held in the forums. Go there or open an issue to voice your opinion on any potential changes here.

Block Definitions

The blocks are sorted into 3 categories. The first, Elements, appears when editing an HTML file. The other 2, Selectors and Properties, appear when editing a CSS file.

###Elements Category The Elements category contains 2 blocks that are not technically "Elements":

• the text [] block, which has a stack shape and can be used to insert text anywhere into any cstart-shaped element.
• 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, the Elements category contains a large number of nearly-identical blocks that represent HTML elements. They look like this:

▾ div () ◀ ▶ :: cstart

Its parameters are as follows:

• ▾: a chevron button, which is used to collapse or uncollapse the contents of the element if it has the cstart shape (see below)
• (): an input into which users can drag the ([ v] = []) block to set attributes
• ◀ ▶: a button to expand the number of attribute inputs, a la BYOB

The Element blocks have one of 2 shapes, depending on whether or not they can contain other elements: cstart and stack. Additionally, the special html block is a combination cstart/hat because it is the outermost element in a webpage and therefore cannot be stacked.

The following Element blocks have the cstart shape:

• body
• div
• head
• span
• etc...

The following Element blocks have the stack shape:

• br
• img
• input

###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.

And of course, the element selectors themselves:

Block	CSS equivalent	Comments
(() and ())	,
(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 [before/after v] ())	div > div	???

###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.

##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