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 4 categories. The first 2, Elements and Attributes, deal with HTML. The other 2, Selectors and Properties, deal with CSS (styling the HTML). ###Elements Category The Elements category contains a large number of nearly-identical blocks that represent HTML elements. An element block is the basic piece in the construction of any website in Elemental. It looks something 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 blocks from the Attributes category
• ◀ ▶: 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:

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

The following Element blocks have the stack shape:

• img
• input

The Elements category also contains the text [] block, which has a stack shape and can be used to insert text anywhere into any cstart-shaped element.

###Attributes Category Each HTML attribute has one corresponding reporter-shaped block that can be dragged into the slots in Element blocks. They look like this: (style []).

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

• (() and ())
• (not ())
• (class [ v]) the input is a combo box (combination text input and dropdown) containing classes used in the project
• (id [ v]) same deal as above
• (elements of type [div v])
• (elements of type [div v] with [])
• (elements with [] ◀ ▶) (the arrows indicate a BYOB-style expandable list)
• (() when [hovering over it v])
• (the pseudoelement [after v] ())
• (() that are [before/after/directly inside v] ())

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