Basic Structure

Anatomy of a DML Block:

A DML Block starts and ends with <dys-block>. After that comes one or more <dys-row>, containing one or more <dys-column>. Your content will sit inside the columns.

  <dys-block>
      <dys-row>
         <dys-column>
            Content!

Responsive Columns

Multiple columns in a row will automatically be:

•  •Stacked in mobile view - responsive design by default
•  •Evenly divided, eg. 2 columns will each take up 50% of your body width
•   •This can be modified with attributes (eg. <dys-column width=“25%”>)

Desktop:

Mobile:

Check the DML Documentation to see full details!

Basic DML Elements

Your template’s contents will be contained inside of elements nested inside of a dys-column. The most basic elements are:

• <dys-text>
  •  • Can add attributes to set font family, size, color, line height, etc.
• <dys-title>
  •  • Works very similarly to dys-text, but with larger default styling
• <dys-button>
  •  • Href and text content can be made editable
• <dys-img>
  •  • Alt-text, title, image source, and link url can be editable

Check out the DML Documentation to see a full list of attributes that can be used to customize each of these elements

Editable Content

One of the benefits of DML is the ability to edit your block content without touching the underlying code when building a template. Use these attributes to define what content can be changed in the template editor:

• editable

  •  • Makes elements available to be changed in the visual editor
  •  • Required to use the next two attributes
  •  • Each editable attribute requires a name that is unique to the block.

• editable-fields

  •  • Lets you specify which fields should be editable and which should be locked

• editable-styles

  •  • Allows certain styles of an element to be changed in the visual editor

Putting it all Together

Check out this sample block in the DML Playground to see the DML we’ve covered so far in action.

<dys-block>
  <dys-row>
    <dys-column>
      <dys-comment>
        This image's source url, alt text, and href will be editable in 
        the visual editor
      </dys-comment>
      <dys-img src='http://placekitten.com/500/350' editable='image'/>
    </dys-column>
    <dys-column>
      <dys-comment> 
        The content and color of this title will be editable.
      </dys-comment>
      <dys-title editable-styles='color' editable='title'>
        Change Me!
      </dys-title>
      <dys-text>
        Because this doesn't have an editable attribute, it cannot be changed 
        in the visual editor.
      </dys-text>
      <dys-comment>
        By defining editable-fields as href, only the link will be editable, 
        not the content.
        Setting the editable-styles will allow the text and background colors to 
        be changed in the editor
      </dys-comment>
      <dys-button align='left' editable-fields='href' 
        editable-styles='color,background-color' editable='button'>
        Click Me
      </dys-button>
    </dys-column>
  </dys-row> 
</dys-block>

How does it look in the editor?

With the editable fields set in this example, this is what you would see if you were editing this block in a template:

Practice

This example block is also a good opportunity to practice modifying these elements. Some things to try include:

•  • Change the background-color of the row
•  • Change the color and background-color of your button
•  • Set the left column’s width to 25% and both columns’ vertical-align to middle
•  • Try setting different values for padding in some of your elements

Next:

Part 2: Advanced Structures & Elements