Style Page Terminology Terms used in the dashboard of WordPress or to refer to part of the website Content—In the WordPress dashboard, we have a custom post type called Content (Contents for plural). These are the individual “web pages” or articles. Category / Topic Pages—Wordpress Pages are used as the Category/Topic Index. All pages published with the matching Category/Index will show up on the Topic (Category) Page. Content is organized by Publish Date with the most recent being the top left. If something needs to be “first” in a category, just make it the most recent published date. Trending Topics are content that show up on the home page. There is a checkbox on the Content page to check to get it to show up here.This can be seasonal or most recent articles. Bill and/or Kate will decide. Armed Forces Wellness Centers (AFWC) are another custom post type. Currently, they consist of a phone number, the title of the location, and the Path ID assigned to the star on the map. The map is located on the home page as well as the AFWC page. The Professionals page has a training calendar and links to Sharepoints (CAC-enabled) sites for each topic. Bootstrap Framework Bootstrap has been heavily utilized in layouts, styles, and components. Containers (div) use Bootstrap’s .row & .col classes to control widths. <div class="row"><div class="col"> Bootstrap uses a 12-column grid. That is, a row is separated into 12 widths. Each column can be thought of as a percentage of it’s parent. We have limited our LIVE area (between the header and footer) to be 1440px. That means, anything LARGER than that, there will be negative space on the sides. We use bootstraps breakpoints to control the layout at different sizes. Some layouts have to shift from horizontal to vertical and these classes help control for that. col col col col col col col col col col col col col-6 col-3 col-3 Since a column is 1/12 of the container width, you can easily figure what a column class should be with a little math. If a width needs to be 50% of it’s container it should be col-6. 25% would be col-3. 8% would be col-1. Just using col would be a remainder type of class. It will fill as much of the space is left, even if that space is 100%. Breakpoints follow Bootstraps break points. This is predominately used to better control how the layout of elements shows on mobile vs desktop. sm > 576px md > 768px lg > 992px xl > 1200px <div class="col-12 col-md-10> shows an element that is full width on mobile (col-12) but when it reaches the md breakpoint—great than 768px— it will be limited to ~83% of the LIVE AREA. Topic / Category Page Automatically generated. Consist of Contents that have been marked with a Category (topic). Each page should ONLY utilize one Category. Styling is controlled via stylesheet Each Category page has a corresponding file in the theme. page-{category-name}.php Load More functionality is driven on by a function in functions.php and parameters on the category page Section Headers This component can be accessed in the Pattern Section Header under the Site Template group. The Section Header spans the whole width of the live area. Up to 1440px on desktop On mobile devices, the section header fills the whole width. The style includes a bottom margin of 3rem (48px). Title of Section Alternate Header Padding & Margins Padding and margins should be set up in the patterns and styles already, and there may be pages that need to be adjusted. For reference: If a style hasn’t be set on the stylesheet, it may still use a Bootstrap class to control the spacing. Bootstrap utilizes an abbreviation for spacing type, sides, breakpoint, and size {property}{sides}-{breakpoint}-{size} Spacing Type: p is used to control padding. m is used to control margins. Sides: x controls the left and right sides, y controls the top and bottom sides. l r t b control the left, right, top, and bottom sides respectively. Breakpoints: If it has no breakpoint it will be available at all sizes. xs sm md lg xl Breakpoints sizes can be found in the Bootstrap Framework section Sizes: 0 1 2 3 4 5 auto 0 is no margin or padding. 1 is 25% of 1em, 2 is 50% of 1em; 3 is 100% of 1em; 4 is 150% of 1em; 5 is 300% of 1em; and auto is used to center the element in the parent container. Example my-4 is top and bottom margins of 1.5em. If you were to add a break point my-md-4 the top and bottom margin would only be 1.5em above the md breakpoint, which is 768px. Colors color: var(‐‐hpwgreen); // rgba(104,117,78,1) color: var(‐‐hpwgreenlite); // rgba(191,196,178,1) color: var(‐‐hpwtan); // rgba(205,186,156,1) color: var(‐‐hpwtanlite); // rgba(225,213,195, 1) Images There are a variety of different sized images. Page Banner = 1920px x 300px Mobile Page Banner = 585px x 300px Summary Illustration = 590px x 360px Picture Block = 385px x 265px (Height can be adjustable) Icons Icons are typically simplified and come from Adobe Stock. We did some custom icons that were less flat in the past. The page Sleep is important to your functioning is an example of some of customs icons that were built. We utilize our brand colors in the icons if they are flat. Fonts Font is set to Open Sans with Verdana being the fall back and font-weight is 400 Body copy is set to 1.125rem or 18px. 1rem = 16px .thick {font-weight: 600;} .extrabold {font-weight: 800;} Bullets Green triangle bullets can be utilized with the .triangle class Item Item Item Item Buttons Buttons can be utilized with the .btn class. The styles are already setup This is a button References / Additional Resources The reference block in the Pattern sections does not match this one, this is a proposed design, adding some light borders on the top and bottom to create a section. An example can be seen on Break a Sweat Additional Resources Organization Spelled Out – “Title of Article” Organization Spelled Out – “Title of Article” References Organization Spelled Out – “Title of Article” Organization Spelled Out – “Title of Article” Picture Block Left The Picture Block Left element can be accessed through Patterns in the Site Templates folder. The img has two classes img-fluid rbg The rbg class sets up the border and places the image on the left. The block is set up as two bootstrap columns that will stack on mobile, with the image being on top. The images are typically the Picture Block size (385px X 265px) although the height of this image can be adjusted as needed. The standard ratio is image 4 columns to text 8 columns, but this can be adjusted for layout as necessary. This block has a bottom margin. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Picture Block Right The Picture Block Right element can be accessed through Patterns in the Site Templates folder. The img has two classes img-fluid lbg The lbg class sets up the borderand places the image on the right. The block is set up as two bootstrap columns that will stack on mobile, with the image being on top. The images are typically the Picture Block size (385px X 265px) although the height of this image can be adjusted as needed. The standard ratio is image 4 columns to text 8 columns, but this can be adjusted for layout as necessary. This block has a bottom margin. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Summary & Illustrations Space for Summaries and Illustrations has already been built into the page templates for content pages. The summary space utilizes a visual/html editor. An illustration can be added to the summary block.