# Brand-specific Header Rendering in Simple Web Server (SWS) ## Overview The Simple Web Server (SWS) is designed to accommodate multiple brands using a Node.js server. Each brand has its own set of assets and partials that are rendered dynamically based on the specified brand name. ## File Structure The file structure follows a pattern where common components are stored in the partials directory: - **Head Component**: Found in partials/head.ejs, this component handles metadata, title, and favicon for all brands. - **Brand-specific Components**: These include footer.ejs, header.ejs, and main.ejs, residing in directories named after each brand under partials/brand-name. ## Rendering Logic ### Brand Selection The brand variable specifies the brand to render. This determines which brand's assets and partials are used in the response. ### Brand Assets and Partials - **Head**: All brands use a common head.ejs to set metadata, titles, and favicons based on the chosen brand. - **Brand-specific Partials**: The server dynamically renders the selected brand's header.ejs, footer.ejs, and main.ejs based on the brand specified. ### Brand Customization - **CSS**: Each brand's specific CSS is included in the head.ejs file based on the chosen brand. - **Other Partials**: Each brand's header, footer, and main content are dynamically rendered based on the selected brand. ## Usage - To render a brand's specific content, set the brand variable with the desired brand name. - You can also choose to utilize a common main.ejs foud in partials/main.ejs for all brands or customize this for specific brands. # Customized Bootstrap Classes for Brands This repository provides a set of customized Bootstrap classes that reflect the color scheme and design aesthetics of different brands. These classes allow users to apply various brand styles by using the standard Bootstrap class names. ## Getting Started To utilize these custom classes, include the Bootstrap 5.3.2 CSS file in your HTML: ```html ``` # Font Family All brands except Chinacapital, primarily use the Roboto font family, and the respective links are already added in the headers for automatic implementation within the body content. Chinacaiptal usesFira Sans font family. ## Fashionone.com Fashionone.com additionally uses Libre Baskerville font family for some headings. To use this font family, add .font-libre-baskerville to the desired element. ## Chinesepod.com Chinesepod.com additionally uses Roboto Slab font family for some headings. To use this font family, add .roboto-slab to the desired element. # Customized CSS Classes ## Bigfoot.com ### Buttons Bigfoot.com has customized .btn-primary and .btn-outline-primary to reflect its primary button style. ### Typography Standard HTML5 tags for headings and paragraphs are already adopted to match Bigfoot.com's font guidelines. To include Bigfoot.com brand color, use .text-primary. ### Links, List Items, and Forms These follow standard Bootstrap implementations. ## Chinacapital.com ### Buttons Chinacapital.com has customized .btn-danger, .btn-outline-danger, .btn-dark, and .btn-outline-dark for danger and dark button styles. ### Typography HTML5 tags for headings and paragraphs match ChinChinacapitalesepod.com's font guidelines. Include Chinacapital.com brand colors using .text-danger class. ### Links, List Items, and Forms These follow standard Bootstrap implementations. ## Chinesepod.com ### Buttons Chinesepod.com has customized .btn-primary, .btn-outline-primary, .btn-danger, and .btn-outline-danger for primary and dark button styles. ### Typography HTML5 tags for headings and paragraphs match Chinesepod.com's font guidelines. Include Chinesepod.com brand colors using .text-primary or .text-danger. ### Links, List Items, and Forms These follow standard Bootstrap implementations. ## Fashionone.com ### Buttons Fashionone.com has customized .btn-primary and .btn-dark for its primary and dark button styles. Additionally, a uniquely designed button can be accessed using .btn-custom-light. ### Typography HTML5 tags for headings and paragraphs adhere to Fashionone.com's font guidelines. To include Fashionone.com brand color, use .text-primary. ### Links, List Items, and Forms These follow standard Bootstrap implementations. ## Kiddo TV ### Buttons Kiddo TV has customized .btn-primary for its primary button style. ### Typography HTML5 tags for headings and paragraphs align with Kiddo TV's font guidelines. To include Kiddo TV brand color, use .text-primary. ### Links, List Items, and Forms These follow standard Bootstrap implementations.