0-readme edit

how-tos edit

How To's

How to add a new color?

How to update SCSS?

Use the inspector in the browser. It will show the scss file that needs to be updated. In VSCode, make the changes in the file and be sure to have Scout running to compile changes.

How to update Javascript?

The current process for non-Atomic-Docs users is to edit and debug their scripts on Test and then let Nissa know so she can keep the files in Atomic Docs in sync. This allows us to see the changes in git and makes it easy to go back to older versions if necessary.

How to use Git?

Using Git with W&M Atomic Docs

⁃ Step-by-step process of branch workflow and deployment to Test and Prod
⁃ Common git conflict solutions
⁃ Solutions for when things go terribly wrong

Learning Git

⁃ A fantastic resource on Git from Atlassian

How to use the Sass mixins and functions?

Using mixins & functions in W&M Atomic Docs

⁃ Cheatsheet for this theme's most used functions and mixins

Learning mixins & functions

⁃ Mixins: Deep Dive into Sass: pages 14-17
⁃ Functions: Sass Function documentation

How to use the Sass variable maps?

The maps are utilized by the Sass mixins and functions. Mixins and functions documentation.

How to use the Sass variables?

Some variables are used in the functions, like to output colors and fonts, and others are used as straight variables, such as widths and heights. Check in the 3-variables documentation to find out which.

How to use the Content Types/Templates/Page Content/Page Content Elements?

These are set up to mimic those with the same names on Cascade. Content Types pull in Templates and Page Content. Page Content often pulls in Page Content Elements.

It is easy to show/hide elements for testing on the Content page by commenting things out on components/7-page-content/content-page-content.php

HTML
Output
SCSS

Expand

Copy

Edit

<div class="wm-ad-docs"> <h5>How To's</h5> <dl> <dt>How to add a new color?</dt> <dd><a href="<?php echo $base_url; ?>/atomic-core/?cat=0-readme&comp=colors#addColor">How to add a new color</a></dd> <dt>How to update SCSS?</dt> <dd>Use the inspector in the browser. It will show the scss file that needs to be updated. In VSCode, make the changes in the file and be sure to have Scout running to compile changes. </dd> <dt>How to update Javascript?</dt> <dd>The current process for non-Atomic-Docs users is to edit and debug their scripts on Test and then let Nissa know so she can keep the files in Atomic Docs in sync. This allows us to see the changes in git and makes it easy to go back to older versions if necessary.</dd> <dt>How to use Git?</dt> <dd> Using Git with W&M Atomic Docs &hybull; <a href="atomic-core/?cat=0-readme#git-usage">Step-by-step process of branch workflow and deployment to Test and Prod</a> &hybull; <a href="atomic-core/?cat=0-readme#gitconflicts">Common git conflict solutions</a> &hybull; <a href="atomic-core/?cat=0-readme#git-fixing-mistakes">Solutions for when things go terribly wrong</a> Learning Git &hybull; <a href="https://www.atlassian.com/git/tutorials" target="_blank">A fantastic resource on Git from Atlassian</a> </dd> <dt>How to use the Sass mixins and functions?</dt> <dd> Using mixins & functions in W&M Atomic Docs &hybull; <a href="atomic-core/?cat=2-mixins-and-functions">Cheatsheet for this theme's most used functions and mixins</a> Learning mixins & functions &hybull; Mixins: <a href="https://www.slideshare.net/knoldus/deep-dive-into-sass">Deep Dive into Sass: pages 14-17</a> &hybull; Functions: <a href="https://sass-lang.com/documentation/at-rules/function" target="_blank">Sass Function documentation</a> </dd> <dt>How to use the Sass variable maps?</dt> <dd>The maps are utilized by the Sass mixins and functions. <a href="?cat=2-mixins-and-functions">Mixins and functions documentation</a>.</dd> <dt>How to use the Sass variables?</dt> <dd>Some variables are used in the functions, like to output colors and fonts, and others are used as straight variables, such as widths and heights. Check in the <a href="/atomic-docs/wm/atomic-core/?cat=3-variables">3-variables documentation</a> to find out which.</dd> <dt>How to use the Content Types/Templates/Page Content/Page Content Elements?</dt> <dd>These are set up to mimic those with the same names on Cascade. <a href="/atomic-docs/wm/atomic-core/?cat=9-Content-Types">Content Types</a> pull in <a href="/atomic-docs/wm/atomic-core/?cat=8-Templates">Templates</a> and <a href="/atomic-docs/wm/atomic-core/?cat=7-page-content">Page Content</a>. Page Content often pulls in <a href="/atomic-docs/wm/atomic-core/?cat=6-page-content-elements">Page Content Elements</a>. It is easy to show/hide elements for testing on the Content page by commenting things out on <a href="/atomic-docs/wm/atomic-core/?cat=7-page-content#content-page-content">components/7-page-content/content-page-content.php</a></dd> </dl> </div>