Setting up a custom grid definition in XM Cloud — making it easier

Customizing the out of the box Grid Definitions is a common and fairly tedious step when building a new website.

The out of the box definitions are a good starting point but more than likely will be missing some configurability such as parameters for spacing, and you also might want to change the approach slightly.

So instead of going through dozens and dozens of individual settings for each breakpoint you want (and usually you’d have 6 breakpoints), here’s a script where you set up the base Mobile breakpoint as you want it, and then run the script which will copy it out for all the breakpoints you want.

# Run in Sitecore PowerShell ISE

$rootPath = "master:/sitecore/system/Settings/Project/aceik-accelerator/Aceik Tailwind Grid Definition"
$breakpoints = @(
    @{ Name = "Small"; Prefix = "sm:"; Min = "640"; Max = "767.98"; Tooltip = "Small breakpoint" },
    @{ Name = "Medium"; Prefix = "md:"; Min = "768"; Max = "1023.98"; Tooltip = "Medium breakpoint" },
    @{ Name = "Large"; Prefix = "lg:"; Min = "1024"; Max = "1279.98"; Tooltip = "Large breakpoint" },
    @{ Name = "XL"; Prefix = "xl:"; Min = "1280"; Max = "1535.98"; Tooltip = "XL breakpoint" },
    @{ Name = "XXL"; Prefix = "xxl:"; Min = "1536"; Max = ""; Tooltip = "XXL breakpoint" }
)

$extraSmallItem = Get-Item "$rootPath/Extra Small"

if ($null -eq $extraSmallItem) {
    Write-Host "Extra Small breakpoint not found."
    return
}

$Sortorder = 0
foreach ($bp in $breakpoints) {
    $Sortorder = $Sortorder + 1
    $targetPath = "$rootPath/$($bp.Name)"
    if (Test-Path $targetPath) {
        #Write-Host "Item $($bp.Name) already exists, skipping."
        #continue
        Remove-Item -Path $targetPath -Recurse -Permanently
    }

    # Copy Extra Small to new breakpoint
    Copy-Item -Path $extraSmallItem.ItemPath -Destination $targetPath -Recurse
    
    $item = Get-Item -Path $targetPath
    $item.Editing.BeginEdit()
    $item.Fields["BreakpointMin"].Value = "$($bp.Min)"
    $item.Fields["BreakpointMax"].Value = "$($bp.Max)"
    $item.Fields["Tooltip"].Value = "$($bp.Tooltip)"
    $item.Fields["__Sortorder"].Value = $Sortorder
    $item.Editing.EndEdit()

    Get-ChildItem -Recurse $targetPath -WithParent |
      Where-Object { $_.Fields["Class"] -ne $null } |
      ForEach-Object {
        $_.Editing.BeginEdit()
        $oldVal = $_.Fields["Class"].Value
        $_.Fields["Class"].Value = "$($bp.Prefix)$oldVal"
        $_.Editing.EndEdit()
      }

    Write-Host "Created breakpoint: $($bp.Name) with prefix $($bp.Prefix)"
}