Instructions

Mast CSS framework

ThePost was built utilizing Mast CCS framework. Mast is a versatile 12-column system designed for creating responsive websites that adapt to various devices. Whether you're a seasoned developer or a beginner, Mast streamlines the web design process, providing the flexibility and adaptability you need to bring your vision to life. For more information visit: https://www.nocodesupply.co/mast/docs

Naming Coventions

While Mast uses CSS abbreviations like "paragraph-md-1,"  naming for this template was redefined to enhance readability. For instance, "paragraph-md-1" is transformed into "Paragraph Medium 1em" where text is displayed in title case. Minimizing the use of abbreviations will help comprehend the purpose and function of each class.

How to upload SVG icons with code

Choosing code-based solutions for SVG icons provides you with enhanced control, scalability, and accessibility. With code snippets, your icons maintain clarity across all devices, improve loading times, and simplify updates.

Furthermore, by using 'currentColor' as the fill color in your SVG code, you gain the ability to synchronize SVG colors with the text color attribute. Follow these steps to seamlessly integrate code-based SVGs:

1. Open the Code Editor

→ Access the HTLM embed Layer Settings > HTML Embed Settings.

→ Click "Open Code Editor."

2. Export Your SVG Icon

→ Export your SVG icon from design software like Figma, Illustrator, or any other tool of your choice.

3. Retrieve the SVG code and paste to Weblfow

→ Open the SVG file with a text editor like TextEdit for Mac users, or Notepad for Windows users.

→ Copy the entire SVG code from your text editor and paste to the code editor.

4. Control Icon Color with Text Color

→ Inside the SVG code, locate the fill attribute, which may look like fill="#HexCode".

→ Replace the existing value with 'currentColor', so it looks like fill="currentColor".

This allows the icon to inherit the text color of the element it's placed in. For the best results, use monochromatic SVGs or ensure that the icon's colors align coherently with your design.

How to edit category colors

ThePost utilizes full-color backgrounds, creatively represented by colorful pills, to categorize content seamlessly. Customize and redefine category aesthetics effortlessly by editing the 'key color' attribute.

1. Find CMS collection

→ Open the "Category" CMS Collection.

2. Import Hex Code values

→ Edit the Hex Code to align with your brand palette.

Keep accessibility in mind; ensure there's sufficient contrast between the background color and text to make your content easily readable for all users.