Applying Brand Guidelines in VS Code

This guide provides a step-by-step approach to effectively apply brand guidelines using Visual Studio Code, ensuring that your project aligns with the client's branding. It covers essential tasks such as updating brand colors and icons, making it easy to implement changes directly in your Sass files.

Josh Mahoney
70 steps
7 minutes

Radancy

Update Brand Values

Open VS Code and click "**Open Folder**"

Navigate to where you keep your local GitHub files and choose the project folder.

Click "**Open**"

In VS Code, open a "**New Terminal**"

Enter "**gulp**"

If you get this error in your browser window, click "**Advanced**"

Click "**Proceed to localhost**"

Open the Brand Guidelines doc and start with the first tab: **Colors**\ The client brand colors will be in the yellow fields.\ The blue Dev column identifies variable names that will help you find where the brand color should be updated in the Sass. For this example, we will look for the variable "**color-1**"

Select the "**dev**" folder in your project

Right click to choose "**Find in Folder...**"

Enter the variable name in the search field. "**color-1**"

Identify the root location of the variable usage, and update the Sass with the new brand color.

Ideally most of the variables you will be updating will exist in the files *[[\_variables.scss]]* and [[\_modifiers.scss]] for the root location.

Repeat the steps with the additional fields in the intake form.

Select Social Icon Option and Update Color

Navigate back to your intake form

Click on the [[Icons]] tab

You should now be on the **Icons** page

Scroll to **Socials** section part of sheet and follow instructions under **Dev (Options)**

Navigate to your VS Code, and click on the **Explorer** icon to navigate your files

Click on the file [[\_social-media.scss]] to open

View your social media file

If the value for [[$is-social-icon-outline]] is set to [[false]] outputs to Option 1, if [[true]] then Option 2 shows.

Go to line 9 to update value

Change from [[false]] to [[true]]

Press [[Cmd/Ctrl]] + [[S]] to save

Go the localhost page of your site

Scroll to bottom to see icons, and you will see social icons are reflective of Option 2.

Go back to VS Code

Go to line 9 to update value

Change from [[true]] to [[false]]

Press [[Cmd/Ctrl]] + [[S]] to save

Go back to the localhost page of your site and see social icons are now showing Option 1.

Go back to VS Code

Go to line 14 to update social icon color

Note below is an example case, you will change it to whatever color is needed for your site.

Change [[--color-1]] to [[--color-5]]

Press [[Cmd/Ctrl]] + [[S]] to save

Go back to the localhost page of your site and see social icons color have now changed.

How to Select Icons and Update Color

In the examples below we will be using Case Use, **CTA Text Arrow Link**, for the demonstration, and using Option 2. To update others follow the same steps.

Open your intake form, and make sure you are in the **Icons** tab of your Intake Form

Navigate to Column B and Row 5 of your Intake Form to see which option is selected.\ \ Option 2 is used as example

Navigate to Column R to read instructions on how to find the icon in your Intake Form that correlates to the icons on the left.

Navigate to Column D and Row 5 of your sheet to see which variable needs to be updated.

Open your VS Code

Click on the file [[\\\_icons.scss]] to open

You should now be in the file sheet of **icons**

Scroll to the grouping of icons dictated by the option number.

In this case we are using Option 2 so we verify the headline states **Icons - Option 2**

Now we look for the name of the **Case Use** we're working on in the sheet, which is CTA Text Arrow Link

Now that we're under CTA Text Arrow Link, we know we need to use the function [[icon-arrow-right]] so the correct icon appears

Click on the file [[\\\_modifiers.scss]] to open

You should now be in the file sheet of **modifiers**

We now scroll to line 155 to update [[--link-icon]] as mentioned in our sheet

Now highlight the current value to modify it

We now have changed[[ icon-chevron-right()]] to [[icon-arrow-right()]]

Press [[Cmd/Ctrl]] + [[S]] to save

Click here

Now go to localhost page of your site and see the arrow link now reflects the option shown in the Intake Form.

In the examples below we will be using Case Use, **Saved Jobs - Inactive**, for the demonstration. To update others follow the same steps.

Go back to Intake Form in Icons tab of sheet

Navigate to Column C and Row 7 of your sheet to see which color has been selected.

Navigate to Column E and Row 7 of your sheet to see the variable that correlates with the color to be updated. Which in this case is btn-save-job-color

Open VS Code and click on Explorer icon if not already selected

Click on the folder [[dev]]

Right click on folder

Click [[Find in Folder…]]

Click into field to begin typing

Enter the variable name we're looking for which is [[btn-save-job-color]]

A list of options appear in finder indicating where variable is being called upon. If need be can look through each file to find root implementation and where it has been defined at.

Click on the option below as we've discovered the root implementation of the variable exists in the [[\_modifiers.scss]] file.

After clicking, we will be taken directly to the line to update.

Select the value within the variable to modify

In this case we have changed [[--color-1]] to [[--color-5]]

Press [[Cmd/Ctrl]] + [[S]] to save

Open localhost of your site

Go to search jobs page of your site and review icon color has now changed.

Applying Brand Guidelines in VS Code

Josh Mahoney
70 steps
7 minutes

Radancy

Update Brand Values

Open VS Code and click "**Open Folder**"

Navigate to where you keep your local GitHub files and choose the project folder.

Click "**Open**"

In VS Code, open a "**New Terminal**"

Enter "**gulp**"

If you get this error in your browser window, click "**Advanced**"

Click "**Proceed to localhost**"

Select the "**dev**" folder in your project

Right click to choose "**Find in Folder...**"

Enter the variable name in the search field. "**color-1**"

Identify the root location of the variable usage, and update the Sass with the new brand color.

Ideally most of the variables you will be updating will exist in the files *[[\_variables.scss]]* and [[\_modifiers.scss]] for the root location.

Repeat the steps with the additional fields in the intake form.

Select Social Icon Option and Update Color

Navigate back to your intake form

Click on the [[Icons]] tab

You should now be on the **Icons** page

Scroll to **Socials** section part of sheet and follow instructions under **Dev (Options)**

Navigate to your VS Code, and click on the **Explorer** icon to navigate your files

Click on the file [[\_social-media.scss]] to open

View your social media file

If the value for [[$is-social-icon-outline]] is set to [[false]] outputs to Option 1, if [[true]] then Option 2 shows.

Go to line 9 to update value

Change from [[false]] to [[true]]

Press [[Cmd/Ctrl]] + [[S]] to save

Go the localhost page of your site

Scroll to bottom to see icons, and you will see social icons are reflective of Option 2.

Go back to VS Code

Go to line 9 to update value

Change from [[true]] to [[false]]

Press [[Cmd/Ctrl]] + [[S]] to save

Go back to the localhost page of your site and see social icons are now showing Option 1.

Go back to VS Code

Go to line 14 to update social icon color

Note below is an example case, you will change it to whatever color is needed for your site.

Change [[--color-1]] to [[--color-5]]

Press [[Cmd/Ctrl]] + [[S]] to save

Go back to the localhost page of your site and see social icons color have now changed.

How to Select Icons and Update Color

In the examples below we will be using Case Use, **CTA Text Arrow Link**, for the demonstration, and using Option 2. To update others follow the same steps.

Open your intake form, and make sure you are in the **Icons** tab of your Intake Form

Navigate to Column B and Row 5 of your Intake Form to see which option is selected.\ \ Option 2 is used as example

Navigate to Column R to read instructions on how to find the icon in your Intake Form that correlates to the icons on the left.

Navigate to Column D and Row 5 of your sheet to see which variable needs to be updated.

Open your VS Code

Click on the file [[\\\_icons.scss]] to open

You should now be in the file sheet of **icons**

Scroll to the grouping of icons dictated by the option number.

In this case we are using Option 2 so we verify the headline states **Icons - Option 2**

Now we look for the name of the **Case Use** we're working on in the sheet, which is CTA Text Arrow Link

Now that we're under CTA Text Arrow Link, we know we need to use the function [[icon-arrow-right]] so the correct icon appears

Click on the file [[\\\_modifiers.scss]] to open

You should now be in the file sheet of **modifiers**

We now scroll to line 155 to update [[--link-icon]] as mentioned in our sheet

Now highlight the current value to modify it

We now have changed[[ icon-chevron-right()]] to [[icon-arrow-right()]]

Press [[Cmd/Ctrl]] + [[S]] to save

Click here

Now go to localhost page of your site and see the arrow link now reflects the option shown in the Intake Form.

In the examples below we will be using Case Use, **Saved Jobs - Inactive**, for the demonstration. To update others follow the same steps.

Go back to Intake Form in Icons tab of sheet

Navigate to Column C and Row 7 of your sheet to see which color has been selected.

Navigate to Column E and Row 7 of your sheet to see the variable that correlates with the color to be updated. Which in this case is btn-save-job-color

Open VS Code and click on Explorer icon if not already selected

Click on the folder [[dev]]

Right click on folder

Click [[Find in Folder…]]

Click into field to begin typing

Enter the variable name we're looking for which is [[btn-save-job-color]]

A list of options appear in finder indicating where variable is being called upon. If need be can look through each file to find root implementation and where it has been defined at.

Click on the option below as we've discovered the root implementation of the variable exists in the [[\_modifiers.scss]] file.

After clicking, we will be taken directly to the line to update.

Select the value within the variable to modify

In this case we have changed [[--color-1]] to [[--color-5]]

Press [[Cmd/Ctrl]] + [[S]] to save

Open localhost of your site

Go to search jobs page of your site and review icon color has now changed.