Table of Contents

HTML architecture

The Swift 2 markup structure explained

Swift employs a well-structured and hierarchical approach to its markup, ensuring flexibility for layout customization, targeting with CSS, and integration with DynamicWeb’s item types. Understanding this structure is key to effective design and CSS customization. Swift's page markup follows a classic and intuitive structure, making it easy for frontend developers to navigate and customize.

The HTML structure is organized into well-defined sections that adhere to standard web practices:

  • <head>: Contains metadata, external stylesheets, scripts, and other essential resources. It also includes elements like navigation menus and the logo
    • Handled by the master template (/Files/Templates/Designs/Swift-v2/Swift-v2_Master.cshtml)
  • <body>: Encapsulates all visible content on the page
    • Handled by the master template (/Files/Templates/Designs/Swift-v2/Swift-v2_Master.cshtml)
  • <main id="content">: Houses the primary content of the page, including sections, rows, and columns for layouts. This is where the structured content hierarchy begins
    • Handled by the page layout template (/Files/Templates/Designs/Swift-v2/Swift-v2_Page.cshtml)
  • <footer>: Represents the page's footer, typically containing additional navigation links, contact information, and other secondary details
    • Handled by the master template (/Files/Templates/Designs/Swift-v2/Swift-v2_Master.cshtml)

This classical structure ensures a clean separation of concerns, allowing developers to focus on the main content within <main> while keeping navigational and footer elements modular and consistent.

The main-section

Swift organizes content in <main id="content"> into the following hierarchy:

  1. Sections (<section>)
    • Represent the outermost containers for logical content groupings
    • Attributes: data-swift-gridrow, data-dw-colorscheme, data-dw-itemtype, etc.
    • Define the overall layout style, spacing, and background
    • Handled by the row template (/Files/Templates/Designs/Swift-v2/Grid/Page/RowTemplates/Swift-v2_Row.cshtml)
  2. Rows (<div data-swift-container>)
    • Inside sections, rows manage how columns are distributed across the grid
    • Attributes: data-dw-container-width, class="grid"
    • Specify the number of columns and their alignment
    • Handled by the row template (/Files/Templates/Designs/Swift-v2/Grid/Page/RowTemplates/Swift-v2_Row.cshtml)
  3. Columns (<div data-swift-gridcolumn>)
    • Hold individual content elements within a row
    • Attributes: data-dw-itemtype, id, data-dw-colorscheme
    • Control individual item alignment and styling
    • Handled by the row template (/Files/Templates/Designs/Swift-v2/Grid/Page/RowTemplates/Swift-v2_Row.cshtml)
  4. Content (<div> or other elements)
    • Specific items like text, images, sliders, or custom components live here
    • Attributes: data-swift-text, data-swift-poster, etc.
    • Rendered based on their DynamicWeb item type
    • Handled by paragraph templates (/Files/Templates/Designs/Swift-v2/Paragraph/*)
      • Each content item type has its own paragraph layout templates in a subfolder, e.g. the poster content type layouts is found in /Files/Templates/Designs/Swift-v2/Paragraph/Swift-v2_Poster/ folder
Improve this doc
To top