0-readme edit

site-structure  edit

File Organization
0-readme
Information about Atomic Docs installation, file structure, SASS used, BEM used, Git tips, and how-tos.
QA-lists-and-links
To aid with QA testing. Shows where different link styles are used and the different types of listings and lists.
1-global
Contains normalize.css, fancybox, and print stylesheets.
2-mixins-and-functions
Sass mixins and functions. (Some mixins are in the scss files but only when they are used exclusively in that file.)
3-variables
Includes all the Sass/CSS variables and maps for the website, including colors, fonts, spacing, breakpoints, and more.
element-specs
Specs and locations for headings and listing pages.
3-helper-classes
Theme helpers, mostly used for rows; screen reader only, and switch order.
3-js
Main javascript files for W&M theme; not connected to actual files used on the server. Need to be kept up-to-date.
4-elements
Styles for the basic html elements
4-base-components
Components used to build rows and row cards.
5-layouts
Components used to build listing pages, rows, cards, and split display layouts.
Also main-layout which is the main layout structure for all pages of the local test site. Includes the head, body, broadcastbar, topbar, site menus, header, banner, and footer.
The head tag uses the head include file which is located at wm/atomic-head.php.
There is a footer include file which is located at wm/atomic-foot.php.
    /wm/atomic-head.php
  • PHP code to output different urls based on current location/settings
  • PHP code to output the elements into the Templates and Content Types
  • CSS links for Font Awesome
  • CSS link to prod/main.css
  • JS links to Modernizr, jQuery, Galleria, Isotope, and Anime plugins
  • Styles output for locally served Font Awesome fonts.
    /wm/atomic-foot.php
  • JS links to wm-helper-min.js, wm-plugins-js.js, wm-shortcodes-js.js, chosen.js, perfect-scrollbar.js, wm-main-js.js, wm-secondary-js.js, wm-custom-js.js
  • JS wm-slideshow-page-js if on Slideshow page
  • Scripts to implement Isotope for Grids
6-page-content-elements
Smaller elements that are pulled into content in 7-page-content
7-page-content
Page content for specific content types, gets pulled into Templates. Includes example pages of all listboxes, widgets, listings, and headings.
7-rows
Rows
7-menus-and-header
Menu and header components
8-Templates
Templates that match Cascade's Templates. Templates include the user_content (which includes the title header and page nav), sidebar, and rows.
Paste-N-Test is a special template that enables you to directly copy/paste code from the Test/Prod sites for easy local testing. You can copy the whole main tag content or just a piece of code you need to test.
9-Content-Types
Content Types that match Cascade's Content Types. A Content Type pulls together a Template and "page content" into a page.
bem-elements-for-later
Page content elements updated to BEM but not yet implemented
cheatsheet (needs to be updated)
Visible view of W&M theme's color palette, fonts, row color themes, and row heights

Some Atomic Docs css has been overwritten in /wm/atomic-core/css/site.css

Copy
Edit
<div class="wm-ad-docs"> <h5 id="org">File Organization</h5> <dl> <dt><a href="/atomic-docs/wm/atomic-core/?cat=0-readme">0-readme</a></dt> <dd>Information about Atomic Docs installation, file structure, SASS used, BEM used, Git tips, and how-tos.</dd> <dt><a href="/atomic-docs/wm/atomic-core/?cat=QA-lists">QA-lists-and-links</a></dt> <dd>To aid with QA testing. Shows where different link styles are used and the different types of listings and lists.</dd> <dt><a href="/atomic-docs/wm/atomic-core/?cat=1-global">1-global</a></dt> <dd>Contains normalize.css, fancybox, and print stylesheets.</dd> <dt><a href="/atomic-docs/wm/atomic-core/?cat=2-mixins-and-functions">2-mixins-and-functions</a></dt> <dd>Sass mixins and functions. (Some mixins are in the scss files but only when they are used exclusively in that file.) </dd> <dt><a href="/atomic-docs/wm/atomic-core/?cat=3-variables">3-variables</a></dt> <dd>Includes all the Sass/CSS variables and maps for the website, including colors, fonts, spacing, breakpoints, and more.</dd> <dt><a href="/atomic-docs/wm/atomic-core/?cat=element-specs">element-specs</a></dt> <dd>Specs and locations for headings and listing pages.</dd> <dt><a href="/atomic-docs/wm/atomic-core/?cat=helpers">3-helper-classes</a></dt> <dd>Theme helpers, mostly used for rows; screen reader only, and switch order.</dd> <dt><a href="/atomic-docs/wm/atomic-core/?cat=3-js">3-js</a></dt> <dd>Main javascript files for W&amp;M theme; not connected to actual files used on the server. Need to be kept up-to-date.</dd> <dt><a href="/atomic-docs/wm/atomic-core/?cat=4-elements">4-elements</a></dt> <dd>Styles for the basic html elements</dd> <dt><a href="/atomic-docs/wm/atomic-core/?cat=4-elements">4-base-components</a></dt> <dd>Components used to build rows and row cards.</dd> <dt><a href="/atomic-docs/wm/atomic-core/?cat=5-layouts">5-layouts</a></dt> <dd>Components used to build listing pages, rows, cards, and split display layouts. <BR> Also <code>main-layout</code> which is the main layout structure for all pages of the local test site. Includes the <code>head, body, broadcastbar, topbar, site menus, header, banner, </code> and <code>footer</code>. <br> The <code>head</code> tag uses the <strong>head include file</strong> which is located at wm/atomic-head.php.<br> There is a <strong>footer include file</strong> which is located at wm/atomic-foot.php. <ul> <strong>/wm/atomic-head.php</strong> <li>PHP code to output different urls based on current location/settings</li> <li>PHP code to output the elements into the Templates and Content Types</li> <li>CSS links for Font Awesome</li> <li>CSS link to prod/main.css</li> <li>JS links to Modernizr, jQuery, Galleria, Isotope, and Anime plugins</li> <li>Styles output for locally served Font Awesome fonts.</li> </ul> <ul> <strong>/wm/atomic-foot.php</strong> <li>JS links to wm-helper-min.js, wm-plugins-js.js, wm-shortcodes-js.js, chosen.js, perfect-scrollbar.js, wm-main-js.js, wm-secondary-js.js, wm-custom-js.js</li> <li>JS wm-slideshow-page-js if on Slideshow page</li> <li>Scripts to implement Isotope for Grids</li> </ul> </dd> <dt><a href="/atomic-docs/wm/atomic-core/?cat=6-page-content-elements">6-page-content-elements</a></dt> <dd>Smaller elements that are pulled into content in 7-page-content</dd> <dt><a href="/atomic-docs/wm/atomic-core/?cat=7-page-content">7-page-content</a></dt> <dd>Page content for specific content types, gets pulled into Templates. Includes example pages of all listboxes, widgets, listings, and headings.</dd> <dt><a href="/atomic-docs/wm/atomic-core/?cat=7-rows">7-rows</a></dt> <dd>Rows</dd> <dt><a href="/atomic-docs/wm/atomic-core/?cat=7-menus-and-header">7-menus-and-header</a></dt> <dd>Menu and header components</dd> <dt><a href="/atomic-docs/wm/atomic-core/?cat=8-Templates">8-Templates</a></dt> <dd>Templates that match Cascade's Templates. Templates include the <code>user_content</code> (which includes the title <code>header</code> and <code>page nav</code>), <code>sidebar</code>, and <code>rows</code>. </dd> <dd><strong>Paste-N-Test</strong> is a special template that enables you to directly copy/paste code from the Test/Prod sites for easy local testing. You can copy the whole <code>main</code> tag content or just a piece of code you need to test.</dd> <dt><a href="/atomic-docs/wm/atomic-core/?cat=9-Content-Types">9-Content-Types</a></dt> <dd>Content Types that match Cascade's Content Types. A Content Type pulls together a Template and "page content" into a page. </dd> <dt><a href="/atomic-docs/wm/atomic-core/?cat=bem-elements-for-later">bem-elements-for-later</a></dt> <dd>Page content elements updated to BEM but not yet implemented</dd> <dt><a href="/atomic-docs/wm/atomic-core/?cat=cheatsheet">cheatsheet</a> (needs to be updated)</dt> <dd>Visible view of W&amp;M theme's color palette, fonts, row color themes, and row heights</dd> </dl> <hr> <p>Some Atomic Docs css has been overwritten in /wm/atomic-core/css/site.css</p> </div>
Copy
Copy
Edit
/* scss/0-readme/_site-structure.scss */