Elemental Syntax

This article uses something like 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

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 8 palates: Metadata, Sections, Content, Text, Media, Tables, and Forms. When Advanced Mode is on, a 9th palate, Experimental, appears. When editing a CSS file, blocks are sorted into 2 categories: Selectors and Properties.

###HTML Categories The HTML side contains 3 blocks that are not elements and don't fall into any of the other categories:

• 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.
• the comment [] block, a stack block in a neutral color. Also available in the CSS blocks.

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

▾ div () ◀ ▶ :: c

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
• ◀ ▶: 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: 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
• link
• meta
• style
• 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
• figcation
• 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
• leged
• 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.
• the comment [] block, a stack block in a neutral color. Also available in the HTML blocks.

And of course, the element selectors themselves:

Block	CSS equivalent	Comments
(() and ())	,	Comma should only be the outermost level, maybe instead use a BYOB-style list in the hatblock?
(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	There is no before/after selector, just direct child

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

• style []?
• script and noscript?
• tbody, caption, col, colgroup, thead and tfoot
• map and area
• datalist, fieldset, keygen, legend, meter
• perhaps some depreciated elements
• perhaps an Element block with a text input for custom tags

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

####Properties Property blocks change to width: [] ;

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