diff --git a/.changeset/seven-yaks-pull.md b/.changeset/seven-yaks-pull.md new file mode 100644 index 000000000..e2a5e3b72 --- /dev/null +++ b/.changeset/seven-yaks-pull.md @@ -0,0 +1,5 @@ +--- + +--- + +Add documentation for Tabler Emails diff --git a/docs/emails/index.mdx b/docs/emails/index.mdx new file mode 100644 index 000000000..269880170 --- /dev/null +++ b/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) \ No newline at end of file diff --git a/docs/emails/introduction/compiled-html.mdx b/docs/emails/introduction/compiled-html.mdx new file mode 100644 index 000000000..56bb7d0ca --- /dev/null +++ b/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 `` element. +3. Modify the content as needed: +* Change the text, which is mostly placed inside the `

` or `

` tags. +* Change the images by replacing the `src` attribute of the `` tag. +* Change the links by replacing the `href` attribute of the `` 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. diff --git a/docs/emails/introduction/contents.mdx b/docs/emails/introduction/contents.mdx new file mode 100644 index 000000000..47fb652ba --- /dev/null +++ b/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 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. \ No newline at end of file diff --git a/docs/emails/introduction/index.mdx b/docs/emails/introduction/index.mdx new file mode 100644 index 000000000..42be99121 --- /dev/null +++ b/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. +--- + + diff --git a/docs/emails/introduction/source-html.mdx b/docs/emails/introduction/source-html.mdx new file mode 100644 index 000000000..a99748af6 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/docs/index.mdx b/docs/index.mdx index 81a04357c..5de3ec36d 100644 --- a/docs/index.mdx +++ b/docs/index.mdx @@ -11,6 +11,6 @@ Find all the guides and resources you need to develop with Tabler and our other Free and open source web application UI kit based on Bootstrap pixel-perfect icons for web design and development customizable SVG illustrations for your web project - responsive email templates ready to use in your marketing campaigns - Package of over 100 avatars for your next web project - \ No newline at end of file + responsive email templates ready to use in your marketing campaigns + Package of over 100 avatars for your next web project +