Purpose

This document is a guideline for the visual designers on developing the tutorials pages.  

example of tutorials page

Order of Operations 

1. Set up your WCS Asset with correct JavaScript and stylesheet. 
2. Setup your main frame with tabs that will house the different layouts of content. 
3. Copy and paste layouts into the frame that will work best with your content. 
4. Edit the layouts to suite your needs.
5. Note: If anything needs to be made custom feel free to add it to the other content layouts.  

Assets to reference when building wcs asset  

The JavaScript you will need for the tabs portion of the page. The “jquery-to-match-atg” should be placed above “Features Tabs Javascript” 

-  Features Tabs Javascript  - 2600006233120 

-  jQuery-To-Match-ATG - 1429309277560 

The only stylesheet you will need for the page andall ofthe content templates. 

 - Features – Stylesheet -2600005822018

Where to find all code and templates to start building tutorials page

There will be 3 spots to grab the layout code to fit how you develop. By default all code will be inside onedrive.

As you scroll through the different section visuals in this SOP, above each section you can expand the box and copy the code for that content.

There is also a codepen template setup. https://codepen.io/AEF2662/pen/QWwQoop?editors=1100

Pathing for onedrive - Work > Ferguson.com > Content > page-content > Features Campaign > Template for SOP 

Starting a tutorials page

Start with the "frame" code so you can setup the number of tabs you need and to label the page title and tab names. Edit the lists under "tab content" comment to either add or remove the amount of tabs on the page. Make sure "openTab" in the list start with 0 for the first tab. The divs below that will hold the content for each tab reference the tab with "data-view" but will start with number 1 for tab one instead of starting at 0 such as the "openTab" in the list above. 

<div class="test-container">
    <div class="tut-heading">
        <h1 class="mb-20">Headline goes here</h1>
    </div>
</div>

<div class="tabs"><button class="button-dropdown" onclick="openTabList()">View Tutorials</button>

    <!-- Tab Content -->
    <ul class="tabs-nav js-tab-container">
        <li class="js-tab tab-active" onclick="openTab('0')">1st Tab Name</li>
        <li class="js-tab" onclick="openTab('1')">2nd Tab Name</li>
        <li class="js-tab" onclick="openTab('2')">3rd Tab Name</li>
        <li class="js-tab" onclick="openTab('3')">4th Tab Name</li>
    </ul>

    <div class="tabs-stage js-stage">
        <!-- Any content placed inside the tab div below will appear on that specific tab -->
        <!-- Add or delete the number of tabs to your content -->

        <!--tab 1-->
        <div class="stage stage-active" data-view="1">
            <h2>Page Title</h2>
            <p>Page Description</p>
        </div>

        <!--tab 2-->
        <div class="stage stage-active" data-view="2">
            <h2>Page Title</h2>
            <p>Page Description</p>
        </div>

        <!--tab 3-->
        <div class="stage stage-active" data-view="3">
            <h2>Page Title</h2>
            <p>Page Description</p>
        </div>

        <!--tab 4-->
        <div class="stage stage-active" data-view="4">
            <h2>Page Title</h2>
            <p>Page Description</p>
        </div>

    </div>
</div>

Adding the layouts to the frame

Disclaimer: Each layout is a section you can just copy from any of the 3 code sources. If you want to use this SOP as a visual guide you can grab the code directly from here above the section image that you want to use. If not, you can grab the code in onedrive(pathing above) or use the codepen template(reference above).

In the frame within the <div class=" stage stage-active" data-view="?"> you can throw multiple layouts inside of that div into the specific tab you need it. 

Each tab div has an h2 as a page title and a paragraph description below. Below the h2 and paragraph is where you can start throwing in your layout code.

Each layout is wrapped in a "layout-container" class which has a margin bottom to seperate each section from eachother with adequate spacing. 

You can swap out paragraphs for ordered or unordered lists for the content you need.

Most layouts will have a title and descript which can be removed if they fall below other content that already has a title and description. 

If you need to create a new layout make sure to add it to the templates and in the SOP. 

Content Layouts

Below are all the different content layouts you will need for each of your tabs. There are full width, two column, and three column layouts each with a video version. 

Layout 1 " Full Width"

v1 

<h2>Sample Section Headline</h2>
<section class="layout-container">
   <section class="full-img-container">
      <img class="img" src="http://www.staging.ferguson.com/sites/content/image/2600008087129" alt="test">
   </section>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>

v2

<h2>Sample Section Headline</h2>
<section class="layout-container">
   <style type="text/css">
      .embed-container {
         position: relative;
         padding-bottom: 56.25%;
         height: 0;
         overflow: hidden;
         max-width: 100%;
      }

      .embed-container iframe,
      .embed-container object,
      .embed-container embed {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
      }
   </style>
   <div class="embed-container" style="margin-top:20px;"><iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/s-zV93KRmtw"></iframe></div>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>

Layout 2 " Image and Paragraph"

v1

v1 video

Layout 3 " Two Column Image"

v1

v1 video

v2

v2 video

Layout " Three Image Column"

v1

v1 video