Skip to end of banner
Go to start of banner

SOP - DXT Website Tutorials

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 16 Next »

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 

  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. 

Copy the frame code 
<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 

Copy Layout 1 "v1" code 
<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>


v1 video

Copy Layout 1 "v1" code 
<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

Copy Layout 2 "v1" code 
<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>


v1 video

Copy Layout 2 "v1 video" code 
<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>


  

Layout 3 " Two Column Image"


v1

Copy Layout 3 "v1" code 
<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>


v1 video

Copy Layout 3 "v1 video" code 
<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>


v2

Copy Layout 3 "v2" code 
<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>



v2 video

Copy Layout 3 "v2 video" code 
<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>



Layout 4 " Three Image Column"


v1

Copy Layout 4 "v1" code 
<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>



v1 video

Copy Layout 4 "v1 video" code 
<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>


 


  • No labels