{{aljs-header label="Getting Started" icon="images/icon-getting-started.svg"}}
{{#aljs-main-content}}
    <p class="site-text-introduction slds-m-bottom--xx-large">Enabling Appiphony Lightning JS on your Visualforce pages is simple.</p>
    <div class="slds-m-bottom--xx-large slds-text-longform">
        {{!--<h4 class="site-text-heading--medium">Import the SLDS Library as a Static Resource</h4>
        <ol>
            <li><a href="http://www.lightningdesignsystem.com/resources/downloads" target="_blank">Download</a> the SLDS Library from their website.</li>
            <li>Create a zip that contains the assets folder in its root.</li>
            <div class="slds-wrap slds-clearfix slds-m-bottom--medium">
                <div class="slds-float--left slds-m-right--medium">
                    <p class="slds-m-top--x-small"><em>Mac</em></p>
                    <img class="aljs-screenshot slds-m-vertical--x-small" src="images/gettingStarted1Mac.jpg">
                </div>
                <div class="slds-float--left">
                    <p class="slds-m-top--x-small"><em>PC</em></p>
                    <img class="aljs-screenshot slds-m-vertical--x-small" src="images/gettingStarted1Pc.jpg">
                </div>
            </div>
            <li>Upload the zip to your org's Static Resources and name it "slds"</li>
            <img class="aljs-screenshot slds-m-vertical--x-small" src="images/gettingStarted2.jpg">
            <img class="aljs-screenshot slds-m-vertical--x-small" src="images/gettingStarted3.jpg">
        </ol>
        <h4 class="site-text-heading--medium">Import the ALJS Library as a Static Resource</h4>
        <ol>
            <li><a href="https://github.com/appiphony/appiphony-lightning-js/archive/master.zip">Download</a> the ALJS Library.</li>
            <li>Upload the aljs.zip file from the "dist" directory to your org's Static Resources and name it "aljs".</li>
            <img class="aljs-screenshot slds-m-vertical--x-small" src="images/gettingStarted4.jpg">
        </ol>
        <h4 class="site-text-heading--medium">Setup a VF page to use SLDS and ALJS</h4>
        <p>Now that you have both SLDS and ALJS available in your org, you can import and configure them in a Visualforce page using the URLFOR apex helper.</p>
        <p class="slds-m-top--large site-text-heading--small">Importing CSS</p>
{{#aljs-pre-container type="vf"}}
<apex:page sidebar="false" standardStylesheets="false" showHeader="false" docType="html-5.0">
    <link rel="stylesheet" href="{!URLFOR($Resource.slds, '/assets/styles/salesforce-lightning-design-system.min.css')}"/>
</apex:page>
{{/aljs-pre-container}}
    <p class="slds-m-top--large site-text-heading--small">Define the location of the SLDS assets directory (optional; see <a class="scroll" href="#override">Override Default Settings</a>)</p>
{{#aljs-pre-container type="vf"}}
<script>
    var assetsLocation = '{!URLFOR($Resource.slds)}';
</script>
{{/aljs-pre-container}}
    <p class="slds-m-top--large site-text-heading--small">Scope your page's content inside of the <code>slds</code> class (optional; see <a class="scroll" href="#override">Override Default Settings</a>)</p>
{{#aljs-pre-container type="vf"}}
<div class="slds-scope">Your content here</div>
{{/aljs-pre-container}}
        --}}
        
    <h4 class="site-text-heading--medium">Include the Lightning Design System (SLDS)</h4>
    <p>You can apply the latest version of SLDS to your page by including the <code>&lt;apex:slds /&gt;</code> element at the head.</p>
    {{#aljs-pre-container type="vf"}}
<apex:page sidebar="false" standardStylesheets="false" showHeader="false" docType="html-5.0">
    &lt;head&gt;
        <title>My Visualforce Page</title>
        &lt;apex:slds /&gt;
    &lt;/head&gt;
</apex:page>
{{/aljs-pre-container}}
    </div>
    {{aljs-code-container routeName="gettingStarted" selectedSection=selectedSection}}

{{/aljs-main-content}}