The Pioneer projects use one of our four pre-set template designs. The client will choose a layout:

- split

- scroll

- traditional

- search centric

Once the client has made their selection, the site will be developed from the chosen template, and is ready to be styled by a designer. These projects differ from our standard designs, as we make the edits directly in the CSS style sheets. You will be given a dev site url, which will look similar to one of the below.

Dev Site URL

Many PMs will add the link into the Jira task. If not, however, you are able to find it using the Vision Client Management tool.

For Chrome browsers

Open the browser extension

How to install:

1. Click the "Add to Chrome" button

For Firefox

Download the browser add-on file

How to install:

1. Open “about:addons” from the Firefox address bar
2. Install the Add-on file

Using the tool

Once installed, you will find the tool in the top right corner of your browser, in the form of the Vision logo.

Click the tool to open the window > search for the relevant project > a dropdown will display with options > click on the project to take you to a results page.

 There you will find various URLs. The dev site url (NOT admin) is what you will need.

Set up and software

There are a few programs that you will need to be able to edit these projects:

TFS (Team Foundation Server) - workflow tracker

• Microsoft Visual Studio (Mac and PC) - This program will give you access to "check out" project files and grant you permission to edit them. 

Code editor

• Microsoft Visual Studio (Mac and PC)
• Adobe Dreamweaver (Mac and PC)

Compiler

• WinLess (PC)
• Codekit (Mac)

Servers 

You will also need access to Vision's servers for the files. (If you do not have access, contact the network team.) The local server path will be key to "mapping" the local files in Visual Studio.

Setting up Visual Studio

In the menu select Team > Manage Connections > Connect a Project

The server path to input is: black.netvip.net:8080/tfs

Select the "CMS6" Collection and click "Connect"

**This is a one time step, that you will not have to do every time. 

Next, go to View > Other Windows > Source Control Explorer

Point to a "server workspace".

**This is also a one time step, that you will not have to do every time. 

Compiling

Load the project folder into the compiling program, using the same folder path structure as in the other steps. There are only 3 files that need to be compiled:

• custom.default.less
• dropdownmegamenu.less
• editor.less

Do NOT minify files. Do NOT edit these files, other than to compile. The compiler software should automatically compile as you save your files in the editor, revealing pop-up "success" messages. If not, just manually hit "compile" after you save your changes.

 (this example shows the program WinLess but the concept is similar with CodeKit)

Mapping a project

You will now need to connect to the specific project on the server. This step will need to be done every time you start a new project. (once a project has been mapped you will no longer see "not mapped" and you can skip ahead to EDITING FILES)

In the Source Control Explorer panel select the project and continue until the "main, subsite, intranet, etc" subfolder. This should be almost identical to the server path. 

If it hasn't been mapped you will see "Local Path: not mapped".

Click the "not mapped" link and input the path of the local folder. Make sure it matches the local server path structure.

"Recursive" should be checked & DO NOT "get" the project. Select "no" (You will only "get" specific files later)

Editing a project

After you've mapped your folder paths. Select ONLY the files that you will edit:

• _gfx folder
• _theme folder
• customdefault .less & .css
• dropdownmegamenu .less & .css
• editor .less & .css 

Right click > "get the latest version". "Yes" will appear under the "Latest" column. 

Then, right click > "check out for edit"

Now you can edit the files, either right in Visual Studio or your preferred editor software.

The only style sheets you will be making changes to will be:

• _theme.colors.less
• _theme.config.less
• _theme.global.less
• _tools.typography.less

What to edit

While sometimes there will be more customizations and requests from the client, the main elements you will be editing will be:

• colors (color1, color 2, color3 in theme.config.less)
  • sometimes these colors do not always work perfectly, so manual adjustments to specific elements will need to be made.
  • Most text is set up to react on a "contrast" system. so for example, if you add a darker shade color, the text will know to be light, and vice versa. However, sometimes the shade is in the middle that you would need to manually adjust this.
• typography
  • there are several fonts pre-set in tools.typography.less. if you would like to change the current font you may choose one from here, and would need to edit anywhere it is being called out in theme.global.less
  • if you need a font that is not pre-set in the file, you may add it if you are familiar with this process
• graphics
  • logos (and sticky logos if applicable) - Replace existing files in the _gfx folder
  • background imagery (ie. news bg, events bg, etc) - Replace existing files in the _gfx folder
  • hero images and call to action icons - these DO NOT go in the _gfx folder. However you will still need to export these assets and provide them to the PM so they may upload accordingly. See Assets to Export section

Review your work

Checking files back in

Once you are finished with all changes, the files will need to be checked back in. If this step is not completed, another user will not be able to access the files.

Select all the files you checked out, right click > "Check in pending changes"

On the right side panel in the "Comment" field, add notes of all the changes you made, or just add the link to the relevant Jira task, and add your initials. This keeps a record of who worked on the files last, in the case something goes wrong and we need to go back in time to check.

Click "Check In" and your name will disappear from the User column.

Troubleshooting

Assets to Export

For the assets that DO NOT go in the _gfx folder, you will need to create a folder on Sharepoint and provide them to the PM so that they make upload them with the CMS.

• Hero Images
  • for Split and Scroll projects, the dimensions should be 1920 x 660 px
  • for Search and Traditional, the dimensions should be 1920 x 1080 px
• CTA icons
  • export icons that match the button text (make sure it is in @2x format)
• Social Media icons
  • most of the time these are automatically pulled from a client's existing site, so they are usually outdated. use the correct branding and export new icons