MDL examples

Page shell

Start with a page-level shell, topbar, hero, section, and footer. CSS decides the final layout.

site-shell:
    topbar:
      brand:
        .href@href(/)(My Site)
      nav@aria-label(Primary):
        .href@href(/docs.html)(Docs)
        .href@href(/examples.html)(Examples)
    hero:
      .badge(New)
      # Build faster
      Write structure first, then style with CSS.
      actions:
        .href@href(/docs.html)@class(action-link primary)(Docs)
    section:
      ## Main content
      This is Markdown prose inside a section.
    footer:
      Built with MDL.

Content blocks

Use regular section names for repeated structures.

grid:
    card:
      ## Starter
      Good for simple pages.
    card:
      ## Pro
      More sections and scripts.

pricing:
    card:
      ## Starter
      $9/month
      .btn-primary(Choose)
    card:
      ## Team
      $29/month
      .btn-primary(Choose)

table:
    thead:
      tr:
        th@scope(col):
          Plan
        th@scope(col):
          Price
    tbody:
      tr:
        td:
          Starter
        td:
          $9

details:
    summary:
      What does MDL output?
    MDL outputs static HTML.

Forms

Keep labels, controls, and handlers explicit.

form@id(signup)@submit(handleSignup):
    field:
      label@for(email):
        Email
      .input@id(email)@type(email)@autocomplete(email)@aria-label(Email)@required
    field:
      label@for(plan):
        Plan
      select@id(plan)@name(plan):
        option@value(starter):
          Starter
        option@value(team):
          Team
    actions:
      .btn-primary(Sign up)

Interaction

Export handlers from a configured module script, then reference them from attributes.

tabs@id(docsTabs):
    tablist@role(tablist):
      .btn-secondary@click(showBasics)(Basics)
      .btn-secondary@click(showCli)(CLI)
    tab@id(basicsTab)@data-state(active):
      Basics content.
    tab@id(cliTab):
      CLI content.

export function showBasics(event) {
    event.preventDefault()
  }

Mounted elements receive the element:

canvas@id(scene)@width(900)@height(500)@mount(drawScene):

Tailwind bridge

Use @class(...) for utility classes. Configure Tailwind through head_scripts or your own CSS build.

card@class(max-w-md rounded-lg bg-white p-6 shadow):
    ## Welcome
    .btn-primary@class(w-full)(Continue)

Explore the repo examples

mdl serve examples/login
            

cd examples/tailwind
            ../../bin/mdl serve
            

cd examples/css-powerhouse
            ../../bin/mdl serve
            

mdl build examples/mdl-complete-website