Browse Source

Documentation for Tabler Emails (#2163)

Co-authored-by: Paweł Kuna <[email protected]>
BG-Software 6 months ago
parent
commit
01ee740535

+ 5 - 0
.changeset/seven-yaks-pull.md

@@ -0,0 +1,5 @@
+---
+
+---
+
+Add documentation for Tabler Emails

+ 14 - 0
docs/emails/index.mdx

@@ -0,0 +1,14 @@
+---
+title: Tabler Emails
+seoTitle: Tabler Emails - premium email templates
+order: 4
+description: Customizable email templates for over 90 clients and devices.
+summary: Tabler Emails is a set of 80 eye-catching, customizable HTML templates. They are compatible with over 90 email clients and devices.
+seoDescription: Tabler Emails is a collection of 80 premium, customizable HTML templates. They are compatible with over 90 email clients and devices.
+---
+
+# Tabler Emails
+
+*Change below image!*
+
+![Tabler Emails](/docs/cover-illustrations.png)

+ 29 - 0
docs/emails/introduction/compiled-html.mdx

@@ -0,0 +1,29 @@
+---
+title: Compiled templates
+order: 2
+seoTitle: Tabler Emails - How to use the compiled HTML email templates
+description: Learn how to use the compiled HTML email templates from the Tabler Emails package.
+summary: The compiled HTML files from the Tabler Emails package are ready to use in your email marketing campaigns. This guide explains how to use them effectively.
+seoDescription: The compiled HTML files from the Tabler Emails package are ready to use in your email marketing campaigns. This guide explains how to use them effectively.
+---
+
+## Compiled version of the template
+
+If you only want to change a content - text or images - of the email template, you can just use the compiled HTML files - `compiled.html`. They are ready to use, and you need only a basic knowledge of HTML to modify them.
+
+## How to modify the compiled HTML files
+
+1. Open the `compiled.html` file in your favorite code editor.
+2. Find the content you want to change inside the `<body>` element.
+3. Modify the content as needed:
+* Change the text, which is mostly placed inside the `<p>` or `<h1>` tags.
+* Change the images by replacing the `src` attribute of the `<img>` tag.
+* Change the links by replacing the `href` attribute of the `<a>` tag.
+* Remove the HTML elements you don't need, but only if you're sure that they are not necessary for the email template to work correctly.
+4. If you changed the images, make sure to replace them in the `assets/` folder.
+5. Remove all the images you don't use from `assets/` to reduce the size of the email template.
+
+## How to use the compiled HTML files
+
+After changing the templates as needed, you can use them in your email campaigns.
+The `compiled.html` file with the `assets/` folder should be sent to your email marketing tool, like Mailchimp, SendGrid, or any other.

+ 63 - 0
docs/emails/introduction/contents.mdx

@@ -0,0 +1,63 @@
+---
+title: Contents
+order: 1
+seoTitle: Tabler Emails - Content of the package
+description: Content of the Tabler Emails package.
+summary: The Tabler Emails package contains files which can be used by everyone, even without great knowledge of HTML.
+seoDescription: todo
+---
+
+## Folder structure
+
+Once you unzip the downloaded file, you will see the following structure:
+
+```
+tabler-emails/
+├── emails/
+|	├── absence/
+|	|	├── assets/
+|	|	├── compiled.html
+|	|	├── compiled-dark.html
+|	|	├── source.html
+|	|	├── source-dark.html
+|	|	├── screenshot.jpg
+|	|	├── screenshot-dark.jpg
+|	|	├── screenshot-mobile.jpg
+|	|	└── screenshot-mobile-dark.jpg
+|	├── access-token/
+|	├── account-deleted/
+|	├── .../
+|	├── welcome/
+|	└── whishlist/
+├── images/
+|	├── chart-donuts/
+|	├── icons/
+|	├── illustrations/
+|	└── overlays/
+├── license.txt
+└── readme.html
+```
+
+## Understanding the file structure in Tabler Emails
+
+The **Tabler Emails** package is organized into a clear and efficient folder structure to streamline the use of its assets. Below is a breakdown of its key directories:
+
+### 1. Email Templates: `emails/`
+This folder contains <EmailsCount /> email subfolders, each with a specific template. Each email folder contains the following files:
+* Compiled HTML files for light and dark themes. Read more about its usage in the [Compiled HTML](/docs/emails/compiled-html) section.
+* Source HTML files for light and dark themes. Find more information in the [Source HTML](/docs/emails/source-html) section.
+* Screenshot images for desktop and mobile views.
+* Assets folder with images used in the email template and the CSS file with styles
+
+### 2. Images: `images/`
+It contains 4 subfolders with images used across the different email templates:
+* `chart-donuts/`: Images of donut charts with different fill.
+* `icons/`: [Tabler Icons](/icons) used in the email templates, in PNG version.
+* `illustrations/`: PNG versions of [Tabler Illustrations](/illustrations) for light and dark themes.
+* `overlays/`: overlay images used in the email templates.
+
+### 3. License: `license.txt`
+This file contains the license information for the Tabler Emails package.
+
+### 4. Readme: `readme.html`
+This file with the main information about the Tabler Emails package. It contains a brief description of the package and instructions on how to use it.

+ 9 - 0
docs/emails/introduction/index.mdx

@@ -0,0 +1,9 @@
+---
+title: Introduction
+seoTitle: Introduction to Tabler Emails
+description: Base information about Tabler Emails package.
+summary: Tabler Emails is a set of 80 eye-catching, customizable HTML templates. They are compatible with over 90 email clients and devices.
+seoDescription: Tabler Emails is a collection of 80 premium, customizable HTML templates. They are compatible with over 90 email clients and devices.
+---
+
+

+ 26 - 0
docs/emails/introduction/source-html.mdx

@@ -0,0 +1,26 @@
+---
+title: Source templates
+order: 3
+seoTitle: Tabler Emails - How to use the source HTML email templates
+description: Learn how to use the source HTML email templates from the Tabler Emails package.
+summary: The source HTML files from the Tabler Emails package needs a bit more work that the compiled ones. Learn how to use them.
+seoDescription: The source HTML files from the Tabler Emails package needs a bit more work that the compiled ones. Learn how to use them.
+---
+
+## Source version of the template
+
+If you want to make more advanced changes to the email template, you can use the source HTML files - `source.html` combined with the `theme.css` file. They are ready to use, but you need a basic knowledge of HTML and CSS to modify them.
+
+## How to modify the source HTML files
+
+1. Open the `source.html` file in your favorite code editor.
+2. Open the `theme.css` file from `assets/`* directory in the same editor.
+3. Change all the content and styles as needed.
+4. Use a selected tool to inline the CSS styles into the HTML file. There are a lot of options, like:
+* Online tools like [Juice](https://automattic.github.io/juice/) or [Mailchimp CSS Inliner Tool](https://templates.mailchimp.com/resources/inline-css/).
+* NPM tools like [juice](https://www.npmjs.com/package/juice) or [inline-css](https://www.npmjs.com/package/inline-css).
+5. Save the output HTML file.
+
+## How to use the source HTML files
+
+To use the modified HTML template send the output file with the `assets/` folder to your email marketing tool.

+ 3 - 3
docs/index.mdx

@@ -11,6 +11,6 @@ Find all the guides and resources you need to develop with Tabler and our other
    <Card title="UI Components" href="/docs/ui" icon="paint">Free and open source web application UI kit based on Bootstrap</Card>
    <Card title="Icons" href="/docs/icons" icon="ghost"><IconsCount /> pixel-perfect icons for web design and development</Card>
    <Card title="Illustrations" href="/docs/illustrations" icon="brand-figma"><IllustrationsCount /> customizable SVG illustrations for your web project</Card>
-   <Card title="Email Templates" icon="mail" disabled badge="Coming soon"><EmailsCount /> responsive email templates ready to use in your marketing campaigns</Card>
-   <Card title="Avatars" icon="user-circle" disabled badge="Coming soon">Package of over 100 avatars for your next web project</Card>
-</Cards>
+   <Card title="Email Templates" href="/docs/emails" icon="mail"><EmailsCount /> responsive email templates ready to use in your marketing campaigns</Card>
+   <Card title="Avatars" icon="user-circle" disabled badge="Comming soon">Package of over 100 avatars for your next web project</Card>
+</Cards>