Build Setup

Setting up a new server for SASS compiling (One Time Setup)

Note: These are instructions for Atlantis specifically, but you can substitute according to which theme you are setting up.

You should only have to do this step one time; its purpose is to provide a quick and efficient way of customizing and compiling the SASS for each Atlantis Starter site.

1. Open Dreamweaver
2. On the "Files" tab click the server dropdown, scroll to the bottom and click "Manage Sites"
3. On the Manage Sites pop-up click "New Site" in the bottom right

   

4. In the "Site Name" field enter "2017AtlantisStarter"
5. In the "Local Site Folder" click the folder icon, create a new folder named "2017AtlantisStarter", left click the folder and then click "Select Folder"

   

6. Keep the Site Setup pop-up open and in windows navigate to the P drive directory:
   1. P:\WebDeveloper\Presence Platform\Starter Templates
   2. Copy the "Design3" folder to your clipboard
7. In windows navigate to the folder you just created for the new server and paste in the Design3 folder
8. Back in Dreamweaver Click "Servers" from the left hand pane
9. Click the "+" icon in the middle of the right hand pane
10. This server information does not matter; we are simply creating a local server folder to compile CSS. Enter the following information into the fields:

    

11. Click "Save"
12. Click "CSS Preprocessors" from the left hand pane
13. Uncheck "Enable autocompilation on file save"
14. Click "Source & Output" from the left hand pane
15. Click the "Define output folder" radio button and then click the folder icon to the right

    

16. In the Choose Output Folder window, double click the "Design3" folder
17. Create a folder named css inside of the Design3 folder
18. Click the "css" folder and then click "Select Folder"
19. Click "Save" and then click "Done" on the Manage Sites pop-up

You are now setup and ready to compile your 2017Atlantis SASS styles!

Colors

In Dreamweaver, go to your 2017AtlantisStarter server on your Local View. In the files panel expand the Design3 folder, next expand the scss folder. Open the file named _variables.scss.

At the very top you will see 5 variables starting with $color-primary1. Change each of these variable values to the corresponding hex values provided on the blueprint.

The predefined color palettes can be found at the bottom of _variables.scss.

Fonts

In order to customize the font package to match the blueprint you must copy and paste a font block from the bottom of _variables.scss and paste it over the existing font block at the top. Finally, remove the comments from all the lines that start with a $ or @. Simply put, do not remove the two forward slashes before the font name.

*Trick* If you position your cursor here:

Hold down the "Alt" key and drag your cursor to the left and then down the page and you can easily select all the comment syntax:

*Note* Make sure you only delete the //’s that are in front of lines of code.

Logo Alignment (Center or Left) - Atlantis Specific

The logo scheme variable determines if the logo is centered or aligned to the left.

• For center alignment change the $align variable value to center.
• For left alignment change the $align variable value to left.

Logo Alignment Example:

Color Scheme (Light or Dark)

The color scheme variable determines which color publish link icon to pull. The first time you select light or dark you will be performing an educated guess. The best way to do this is to examine the accent1 color. If the accent1 color is a lighter color, then change the $scheme variable value to light. If the accent1 is a darker color, then change the $scheme variable value to dark. After you compile, if the phone and published link text color doesn’t match the icon color, change the $scheme variable and recompile.

Compiling

Pre Compiling Checklist

Before you compile ensure you have done the following:

1. Adjusted your colors
2. Set your fonts

How to Compile

Compiling your scss folder takes your color/variable values and generates a styles.css file. You will then paste the contents of this file into the Style Sheets box of the Template Details in Presence.

1. In Dreamweaver ensure you have your 2017AtlantisStarter server open
2. Expand the Design3 folder so that the scss folder is visible
3. Right click the scss folder and click “Compile”
1. Note this will take about 1+ minute, be patient

   

Make sure you have your Output tab open. If not, in the Dreamweaver tool bar, go to: Window – Results – Output. When your file is finished compiling, your Output tab will show the following:

*** If there are ANY errors you must check your _variables.scss and RECOMPILE.

Post Compilation

Expand the css folder you created earlier and open styles.css. Copy and paste all the contents into the Style Sheets box of your site Template Details. *Note* if the site contains added site-specific styles they should be located, with comments, at the top of the Style Sheets box, do NOTreplace these styles. Again, all the styles from your newly compiled styles.css should be pasted below any site-specific styles.

Click here for more in-depth instructions on building a starter website.