0-readme edit

<!-- components/0-readme/wm-atomic-docs.php --> <div class="wm-ad-docs"> <h5>W&M Atomic Docs</h5> <p>A documentation and reference library for all HTML/CSS/Javascript in the W&M website. Also includes a local site for development work.</p> <ul> <li>Built using <a href="http://atomicdocs.io/" target="_blank">Atomic Docs</a>, which is a style generator and component manager app, as a base. <ul> <li>provides a GUI for handling the creation of the Sass and HTML partial files associated with the components</li> <li>does the "wiring together" of the Sass partials (i.e. automatically creates all the @import files needed and connects them all to main.scss.</li> <li>organizes all the components under customizable category names</li> </ul> </li> <li>Extended to include a local test site with All The Examples^TM (literally there are examples of everything) <ul> <li>local site html mimics the Content Type and template structure of Cascade to enable easier testing and updates</li> </ul> </li> </ul> <h6>Benefits of the Atomic Docs and local test site system</h6> <ul> <li>Uses git so change history is readily available and deployment is easy.</li> <li>Enables development on your local computer, which is much faster than Cascade.</li> <li>Provides an easy-to-use reference point and documentation for W&M's website code.</li> <li>Enables use of external libraries like Sass which gives functions and includes to CSS, and PHP which aids in testing.</li> <li>Makes it easy to update and modify component structure and local site code.</li> </ul> <h6>Local Test Site Structure</h6> <p>The local test site is created by outputting elements from Atomic Docs into code that mimics the pages in Cascade. </p> <ul> <li>main-layout.php provides the main html structure. It then pulls in a Content Type (determined by a query in the url), which, in turn, pulls in the page template which then pulls in the page content.</li> <li>The Content Type pages are set up to match the Content Types in Cascade as much as possible.</li> <li>Likewise, the Template pages are set up to match the Templates in Cascade.</li> <li>main-layout is also set up to be able to view rows without the surrounding site, in order to save time during development.</li> <li>The Paste-N-Test-Page.php page template allows the developer to copy code from the live site and paste it into the local site to make for faster debugging.</li> </ul> <p>The atomic-head.php file sets up the variables and functions used in the templating system:</p> <ul> <li>base path url variable for font and image locations depending on site's url</li> <li>functions to output elements from Atomic Docs into local test site <ul> <li>outputMenu - pulls from menu folder</li> <li>outputElement - pulls from page content element folder</li> <li>outputContent - pulls from page content folder</li> <li>outputTemplate - pulls from templates folder</li> <li>outputRow - pulls from rows folder</li> <li>outputComponent - pulls from base components folder</li> </ul> </li> <li>stylesheet and font links</li> </ul> <h6>SCSS/CSS</h6> <p>The site uses multiple Sass functions, mixins, and Sass and CSS variables to maintain consistency.</p> <dl> <dt>Colors</dt> <dd><a href="/atomic-docs/wm/atomic-core/?cat=0-readme&comp=colors">Detailed information can be found here</a></dd> <dt>Color themes</dt> <dd><a href="/atomic-docs/wm/atomic-core/?cat=0-readme&comp=colors-row-themes">Detailed information can be found here</a></dd> <dt>Fonts</dt> <dd>The font() function pulls values from the font map (wm-fonts.scss).</dd> <dt>Spacing</dt> <dd>The kspaces() function pulls values from the spacing map (wm-spacing.scss). These values are used most of the time, but there are some custom ones scattered about. There are also some variables that get used.</dd> <dt>Breakpoints</dt> <dd>The breakpoint mixin pulls values from the breakpoint map (wm-breakpoint.scss). These values are used most of the time, but there are some custom ones scattered about.</dd> <dt>Some widths and heights</dt> <dd>Straight Sass variables</dd> <dt>Button styles</dt> <dd>Includes for each type of button style</dd> <dt>Divider border</dt> <dd>Straight Sass variables</dd> </dl> <p>Other Sass functions include</p> <ul> <li>Converting px to rem (not used very consistently :/)</li> <li>Banner heights</li> <li>Fluid sizing (not very precise, but can be useful)</li> <li>Right arrow</li> </ul> <p>The CSS is compiled from SCSS by the Scout-App app whenever a page is saved.</p> <ul> <li>Input: /scss/main.scss</li> <li>Output: /prod/main.css and main.css.map</li> </ul> </div>