I'm looking to update a custom page template with a third (pinned) column and I'm not sure how to do it.  Is the source code available for the standard templates provided by Salesforce?  It would be nice to see how each of them was created.

Here is my template for a page with a pinned section for 2 full-width headers and 2 columns with the right column being collapsible.  I would like to add a pinned left column to this template.

COMPONENT

<aura:component implements="lightning:recordHomeTemplate" description="Full-width header above a main column and collapsible right sidebar.">
    
    <aura:attribute name="headerP" type="Aura.Component[]" description="Pinned header region"/>
    <aura:attribute name="subHeaderP" type="Aura.Component[]" description="Pinned header region 2nd component"/>
    <aura:attribute name="headerS" type="Aura.Component[]" description="Scrolling header region"/>    
    <aura:attribute name="main" type="Aura.Component[]" description="Main region"/>
    <aura:attribute name="sidebar" type="Aura.Component[]" description="Collapsible sidebar region"/>
    
    <aura:attribute name="isSidebarCollapsed" type="Boolean" access="PRIVATE" default="false" />
    
    <aura:handler event="aura:doneRendering" action="{!c.doneRendering}"/>
    
    <div>
        <div id="stickySection" class="p-header">
            <lightning:layout multipleRows="true" aura:id="stickySection" class="slds-p-around_none">
                <lightning:layoutItem flexibility="auto" class="slds-size_12-of-12 slds-p-around_none">
                    {!v.headerP}
                    {!v.subHeaderP}
                </lightning:layoutItem>
            </lightning:layout>
        </div>
        <div class="slds-p-top_small">
            {!v.headerS}
        </div>
        <lightning:layout class="slds-m-top_medium">
            <lightning:layoutItem flexibility="auto">
                {!v.main}
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="no-flex">
                <lightning:buttonIcon onclick ="{!c.toggleSection}"
                                      class="design-allow-interaction toggle slds-p-around_xxx-small slds-m-horizontal_xx-small"
                                      variant="border-filled"
                                      iconName="{! v.isSidebarCollapsed ? 'utility:chevronleft' : 'utility:chevronright' }" 
                                      alternativeText="{! v.isSidebarCollapsed ? 'Expand Sidebar' : 'Collapse Sidebar' }" />
            </lightning:layoutItem>
            <lightning:layoutItem class="{! v.isSidebarCollapsed ? ' slds-hide' : '' }" size="4">
                {!v.sidebar}
            </lightning:layoutItem>
        </lightning:layout>
    </div>
</aura:component>

CONTROLLER

({
    toggleSection : function(component, event, helper) {
        component.set('v.isSidebarCollapsed', !component.get('v.isSidebarCollapsed'));
    },
    
    doneRendering : function(component, event, helper) {
        try {
            var stickySectionAura = component.find("stickySection");
            if(window && stickySectionAura){
                window.onscroll = function() {
                    //Purely informational
                    var html = document.documentElement;
                    var scrollHeight = parseInt(html.scrollHeight);
                    var clientHeight = parseInt(html.clientHeight);
                    
                    //This is where it happens, so adjust this per your requirement
                    if(parseInt(window.pageYOffset) > 75) 
                        $A.util.addClass(stickySectionAura, 'stickySection');
                    else
                        $A.util.removeClass(stickySectionAura, 'stickySection');
                }
            }
        } catch(err){
            console.log('-------> doneRendering ERROR: ' + err + ' ** MESSAGE: ' + err.message + ' ** STACK: ' + err.stack);
        }
    }
})

STYLE

.THIS .stickySection {
    position: fixed;
    z-index: 999;
    width: 100%;
    margin: -20px 1px 0 -24px !important;
}

.THIS .p-header {
    margin: 0px 0px 0px 0px;
}

DESIGN

<design:component label="Header and Collapsible Right Sidebar">
    <flexipage:template>
        <flexipage:region name="headerP" defaultWidth="LARGE" />
        <flexipage:region name="subHeaderP" defaultWidth="LARGE" />
        <flexipage:region name="headerS" defaultWidth="LARGE" />
        <flexipage:region name="main" defaultWidth="MEDIUM" />
        <flexipage:region name="sidebar" defaultWidth="SMALL" />
    </flexipage:template>
</design:component>