Page Comparison

STANDARD OPERATING PROCEDURE

Title

DXT FSE Website Tutorials Page

Effective Date

TBD

Department

eBusiness

Business Owner

Farid Mokraoui

Purpose

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

example of tutorials page

Order of Operations

Set up your WCS Asset with correct JavaScript and stylesheet.
Setup your main frame with tabs that will house the different layouts of content.
Copy and paste layouts into the frame that will work best with your content.
Edit the layouts to suite your needs.
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 – 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.

...

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.

Code Block

language	xml
title	Copy the frame code
collapse	true

<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>

Image Modified

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

Code Block

title	Copy v1 "Full Width" code
collapse	true

<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>

Image Modified

v1 video

Code Block

title	Copy v1 "Full Width" video code
collapse	true

<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>

Image Modified

Layout 2 " Image and Paragraph"

v1Image Removed

Code Block

...

language

...

xml

...

title	Copy Layout

...

2 "

...

v1" code

...

collapse

Image Removed

v1 video

Image Removed

v2

Image Removed

v2 video

Image Removed

Layout " Three Image Column"

v1

Image Removed

...

true

<h2>Sample Section Headline</h2>
<section class="layout-container">
   <section class="flex-container">
      <section class="side-img-container"><img class="img" src="http://www.staging.ferguson.com/sites/content/image/2600008087356" alt="test"></section>

      <section class="side-p">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

      </section>
   </section>
</section>

Image Added

v1 video

Code Block

language	xml
title	Copy Layout 2 "v1 video"
collapse	true

<h2>Sample Section Headline</h2>
<section class="layout-container">
   <section class="flex-container">
      <section class="side-img-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"><iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/d-LIDLrAJG8"></iframe></div>
      </section>

      <section class="side-p">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </section>
   </section>
</section>

Image Added

Layout 3 " Two Column Image"

v1

Code Block

language	xml
title	Copy Layout 3 "v1" code
collapse	true

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

Image Added

v1 video

Code Block

language	xml
title	Copy Layout 3 "v1 video" code
collapse	true

<h2>Create a New Quote Using My Lists</h2>
<section class="layout-container">
   <section class="flex-container">
      <section class="content-column-double left">
         <div style="padding:61.02% 0 0 0;position:relative;"><iframe allow="autoplay; fullscreen" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/s-zV93KRmtw" style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe></div>
      </section>
      <section class="content-column-double right">
         <div style="padding:61.02% 0 0 0;position:relative;"><iframe allow="autoplay; fullscreen" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/s-zV93KRmtw" style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe></div>
      </section>
   </section>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>

Image Added

v2

Code Block

language	xml
title	Copy Layout 3 "v2" code
collapse	true

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

Image Added

v2 video

Code Block

language	xml
title	Copy Layout 3 "v2 video" code
collapse	true

<section class="layout-container">
   <section class="flex-container">
      <section class="content-column-double left">
         <h2>Create a New Quote Using My Lists</h2>
         <div style="padding:61.02% 0 0 0;position:relative;"><iframe allow="autoplay; fullscreen" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/s-zV93KRmtw" style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe></div>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </section>
      <section class="content-column-double right">
         <h2>Create a New Quote by Copying & Pasting products using a spreadsheet</h2>
         <div style="padding:61.02% 0 0 0;position:relative;"><iframe allow="autoplay; fullscreen" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/s-zV93KRmtw" style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe></div>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </section>
   </section>
</section>

Image Added

Layout " Three Image Column"

v1

Code Block

language	xml
title	Copy Layout 4 "v1" code
collapse	true

<section class="layout-container">
   <section class="flex-container">
      <section class="content-column-triple left">
         <h2>Account Dropdown</h2>
         <section class="triple-img-container">
            <img alt="test" class="img" src="http://www.staging.ferguson.com/sites/content/image/2600008088531">
         </section>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </section>
      <section class="content-column-triple middle">
         <h2>Left Dashboard Navigation</h2>
         <section class="triple-img-container">
            <img alt="test" class="img" src="http://www.staging.ferguson.com/sites/content/image/2600008088531">
         </section>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </section>
      <section class="content-column-triple right">
         <h2>Quick Tools</h2>
         <section class="triple-img-container">
            <img alt="test" class="img" src="http://www.staging.ferguson.com/sites/content/image/2600008088531">
         </section>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </section>
   </section>
</section>

Image Added

v1 video

Code Block

language	xml
title	Copy Layout 4 "v1 video" code
collapse	true

<section class="layout-container">
   <section class="flex-container">
      <section class="content-column-triple left">
         <h2>Account Dropdown</h2>
         <section class="triple-img-container">
            <div style="padding:61.02% 0 0 0;position:relative;"><iframe allow="autoplay; fullscreen" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/s-zV93KRmtw" style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe></div>
         </section>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </section>
      <section class="content-column-triple middle">
         <h2>Left Dashboard Navigation</h2>
         <section class="triple-img-container">
            <div style="padding:61.02% 0 0 0;position:relative;"><iframe allow="autoplay; fullscreen" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/s-zV93KRmtw" style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe></div>
         </section>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </section>
      <section class="content-column-triple right">
         <h2>Quick Tools</h2>
         <section class="triple-img-container">
            <div style="padding:61.02% 0 0 0;position:relative;"><iframe allow="autoplay; fullscreen" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/s-zV93KRmtw" style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe></div>
         </section>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </section>
   </section>
</section>

Image Modified

Versions Compared

Old Version 12

New Version 13

Key

Purpose

Order of Operations

Assets to reference when building wcs asset

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

Starting a tutorials page

Adding the layouts to the frame

Content Layouts

Layout 1 " Full Width"

Layout 2 " Image and Paragraph"

Layout " Three Image Column"

Layout 3 " Two Column Image"

Layout " Three Image Column"