0-readme edit

quick-start edit

How to add and start editing a new component

Code Library: used to provide an overview of the code and adding/deleting components. All development should happen in VS Code (or whichever code editor you prefer).
Local Testing Site: provides examples of all elements on the W&M website. It can be used for updates, debugging, and development.

How to add a new component:

Create a new Git branch to work in.
Navigate to the section in the Code Library's sidebar menu where you want to add the component.
Click on the name of the section to make it the active section.
Click on the "+ Add Component" button at the bottom of the section and fill out the form.
When you click "Add", it will make an HTML file and a SCSS file to go along with the new component, and automatically link them to the rest of the site. You can find the files in the same location in VSCode as they are in the library (e.g., wm/components/folder name/ etc). You are now done with the Code Library part of Atomic Docs.
If you would like a link to the new component in the Local Testing Site's page nav, navigate to wm/components/7-menus-and-header/page-nav.php and add a link to the new component.
If you are adding an element to a page, you can use PHP to include it in the correct file: include("../news-story-content.php");
Make an initial "Component created" commit in Git.
Open the Local Testing Site on your computer and find your new component.
Edit in VS Code and test in the testing site.

HTML
Output
SCSS

Expand

Copy

Edit

Code Library: used to provide an overview of the code and adding/deleting components. All development should happen in VS Code (or whichever code editor you prefer). Local Testing Site: provides examples of all elements on the W&M website. It can be used for updates, debugging, and development. How to add a new component: <ol> <li>Create a new Git branch to work in.</li> <li>Navigate to the section in the Code Library's sidebar menu where you want to add the component.</li> <li>Click on the name of the section to make it the active section.</li> <li>Click on the "+ Add Component" button at the bottom of the section and fill out the form.</li> <li>When you click "Add", it will make an HTML file and a SCSS file to go along with the new component, and automatically link them to the rest of the site. You can find the files in the same location in VSCode as they are in the library (e.g., wm/components/folder name/ etc). You are now done with the Code Library part of Atomic Docs.</li> <li>If you would like a link to the new component in the Local Testing Site's page nav, navigate to <a href="<?php echo $base_url; ?>/atomic-core/?cat=7-menus-and-header#page-nav">wm/components/7-menus-and-header/page-nav.php</a> and add a link to the new component.</li> <li>If you are adding an element to a page, you can use PHP to include it in the correct file: <code>include("../news-story-content.php");</code></li> <li>Make an initial "Component created" commit in Git.</li> <li>Open the <a href="<?php echo $base_url; ?>/atomic-core/index-wm.php?url=components/9-Content-Types/content-page.php">Local Testing Site</a> on your computer and find your new component.</li> <li>Edit in VS Code and test in the testing site.</li> </ol>