diff --git a/docs/doc-fragments/docFragments.js b/docs/doc-fragments/docFragments.js
index aa1b228..acdf7e8 100644
--- a/docs/doc-fragments/docFragments.js
+++ b/docs/doc-fragments/docFragments.js
@@ -15,6 +15,7 @@ var navigationBar = require('./navigationBar');
 var footer = require('./footer');
 var drawer = require('./drawer');
 var textHighlighting = require('./textHighlighting');
+var toasts = require('./toasts');
 
 module.exports = [
   gettingStarted,
@@ -22,5 +23,5 @@ module.exports = [
   grid, cards, cardSections,
   formsAndInput, buttons, inputGrouping,
   header, navigationBar, footer, drawer,
-  textHighlighting
+  textHighlighting, toasts
 ]
diff --git a/docs/doc-fragments/toasts.js b/docs/doc-fragments/toasts.js
new file mode 100644
index 0000000..56e03d9
--- /dev/null
+++ b/docs/doc-fragments/toasts.js
@@ -0,0 +1,21 @@
+module.exports = {
+  id: 'toasts',
+  title: 'Toasts',
+  keywords: [`span`, `highlight`, `text highlighting`, `tag`, `primary`, `secondary`, `tertiary`, `inline-block`],
+  description: `<p><strong>mini.css</strong> provides you with toast messages (<code>.toast</code>), allowing you to display native-looking notifications on mobile devices.</p>`,
+  example: `<div class="container" style="height: 8rem; position: relative;"><span class="toast doc" style="position: absolute;">This is a toast message!</span></div>`,
+  samples: [`<pre><span class="code-line"><span class="highlight-a">&lt;span</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;toast&quot;</span><span class="highlight-a">&gt;</span>This is a toast message!<span class="highlight-a">&lt;/span&gt;</span><span class="highlight-a">&lt;/mark&gt;</span></span></pre>`],
+  notes: [
+    `Toast elements do not have any pre-defined behavior, but you can use Javascript to add functionality to them.`
+  ],
+  customization: [
+    `Text color for toast messages can be changed by changing the value of the <code>--toast-fore-color</code> variable.`,
+    `Background color for toast messages can be changed by changing the value of the <code>--toast-back-color</code> variable.`,
+    `Universal margin for elements can be changed globally by changing the value of the <code>--universal-margin</code> variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.`,
+    `Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.`,
+    `Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.`
+  ],
+  modifiers: [],
+  dos: [],
+  donts: []
+}
diff --git a/docs/v3/DEVLOG.md b/docs/v3/DEVLOG.md
index 9624131..b837dfb 100644
--- a/docs/v3/DEVLOG.md
+++ b/docs/v3/DEVLOG.md
@@ -229,3 +229,4 @@
 - Documented `mark` elements.
 - Fixed a broken link in `index.html`.
 - Added the appropriate script for generating Codepen links dynamically. Oh, yeah!
+- Documented `.toast` messages.
diff --git a/docs/v3/docs.html b/docs/v3/docs.html
index 3f6102f..e72b711 100644
--- a/docs/v3/docs.html
+++ b/docs/v3/docs.html
@@ -26,7 +26,7 @@
 </header>
 <div class="row" id="doc-wrapper">
     <input id="doc-drawer-checkbox" class="drawer" value="on" type="checkbox">
-<nav class="col-md-4 col-lg-3" id="nav-drawer"><h3>Menu</h3><label for="doc-drawer-checkbox" class="button drawer-close"></label><div><input style="width: 100%; margin: 0px;" placeholder="Search..." type="search" id="search-bar" oninput="search()"></div><a href="#getting-started" id="link-to-getting-started">Getting started</a><a href="#common-textual-elements" id="link-to-common-textual-elements">Common textual elements</a><a href="#heading" id="link-to-heading">Headings</a><a href="#images-captions" id="link-to-images-captions">Images &amp; captions</a><a href="#lists" id="link-to-lists">Lists</a><a href="#code-and-quotations" id="link-to-code-and-quotations">Code &amp; quotations</a><a href="#grid" id="link-to-grid">Grid system</a><a href="#cards" id="link-to-cards">Cards</a><a href="#card-sections" id="link-to-card-sections">Card sections</a><a href="#forms-and-input" id="link-to-forms-and-input">Forms &amp; input</a><a href="#buttons" id="link-to-buttons">Buttons</a><a href="#input-grouping" id="link-to-input-grouping">Input grouping</a><a href="#header" id="link-to-header">Header</a><a href="#navigation-bar" id="link-to-navigation-bar">Navigation bar</a><a href="#footer" id="link-to-footer">Footer</a><a href="#drawer" id="link-to-drawer">Menu drawer</a><a href="#text-highlighting" id="link-to-text-highlighting">Text highlighting</a><span id="no-results">No results found</span></nav>
+<nav class="col-md-4 col-lg-3" id="nav-drawer"><h3>Menu</h3><label for="doc-drawer-checkbox" class="button drawer-close"></label><div><input style="width: 100%; margin: 0px;" placeholder="Search..." type="search" id="search-bar" oninput="search()"></div><a href="#getting-started" id="link-to-getting-started">Getting started</a><a href="#common-textual-elements" id="link-to-common-textual-elements">Common textual elements</a><a href="#heading" id="link-to-heading">Headings</a><a href="#images-captions" id="link-to-images-captions">Images &amp; captions</a><a href="#lists" id="link-to-lists">Lists</a><a href="#code-and-quotations" id="link-to-code-and-quotations">Code &amp; quotations</a><a href="#grid" id="link-to-grid">Grid system</a><a href="#cards" id="link-to-cards">Cards</a><a href="#card-sections" id="link-to-card-sections">Card sections</a><a href="#forms-and-input" id="link-to-forms-and-input">Forms &amp; input</a><a href="#buttons" id="link-to-buttons">Buttons</a><a href="#input-grouping" id="link-to-input-grouping">Input grouping</a><a href="#header" id="link-to-header">Header</a><a href="#navigation-bar" id="link-to-navigation-bar">Navigation bar</a><a href="#footer" id="link-to-footer">Footer</a><a href="#drawer" id="link-to-drawer">Menu drawer</a><a href="#text-highlighting" id="link-to-text-highlighting">Text highlighting</a><a href="#toasts" id="link-to-toasts">Toasts</a><span id="no-results">No results found</span></nav>
     <main class="col-sm-12 col-md-8 col-lg-9" id="doc-content"><div id="getting-started" class="card fluid">
   <h2 class="section double-padded">Getting started</h2>
   <div class="section"><p>You can get started using <strong>mini.css</strong> in one of many ways. It is published on <strong>npm</strong> and <strong>yarn</strong>, so you can easily download it, using your preferred package manager:</p>
@@ -620,11 +620,20 @@
 </pre></div><div class="col-sm-12 col-md-6"><p><mark class="dont">Don't:</mark>&nbsp;Avoid applying multiple color modifiers on the same highlight.</p></div></div></div>
   <div class="section double-padded"><h3>Notes</h3><ul><li>Highlighted text scales according to its parent element, so it can be used inside any kind of element (headings, forms, paragraphs etc.).</li></ul></div>
   <div class="section double-padded"><h3>Customization</h3><ul><li>Text color for highlighted text can be changed by changing the value of the <code>--mark-fore-color</code> variable.</li><li>Background color for highlighted text can be changed by changing the value of the <code>--mark-back-color</code> variable.</li><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.</li><li>Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.</li></ul></div>
+</div><br/><div id="toasts" class="card fluid">
+  <h2 class="section double-padded">Toasts</h2>
+  <div class="section"><p><strong>mini.css</strong> provides you with toast messages (<code>.toast</code>), allowing you to display native-looking notifications on mobile devices.</p></div>
+  <div class="section"><h3>Example</h3><div class="container" style="height: 8rem; position: relative;"><span class="toast doc" style="position: absolute;">This is a toast message!</span></div></div>
+  <div class="section double-padded prefiller-example"><h3>Sample code</h3><pre><span class="code-line"><span class="highlight-a">&lt;span</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;toast&quot;</span><span class="highlight-a">&gt;</span>This is a toast message!<span class="highlight-a">&lt;/span&gt;</span><span class="highlight-a">&lt;/mark&gt;</span></span></pre></div>
+  
+  
+  <div class="section double-padded"><h3>Notes</h3><ul><li>Toast elements do not have any pre-defined behavior, but you can use Javascript to add functionality to them.</li></ul></div>
+  <div class="section double-padded"><h3>Customization</h3><ul><li>Text color for toast messages can be changed by changing the value of the <code>--toast-fore-color</code> variable.</li><li>Background color for toast messages can be changed by changing the value of the <code>--toast-back-color</code> variable.</li><li>Universal margin for elements can be changed globally by changing the value of the <code>--universal-margin</code> variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.</li><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.</li><li>Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.</li></ul></div>
 </div><footer><p><strong>mini.css</strong> was designed and built by <a href="https://github.com/Chalarangelo" target="_blank">@Chalarangelo</a>. Source code licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>.</p><p>Icons provided by <a href="https://feathericons.com/" target="_blank">Feather</a>. Search powered by <a href="http://fusejs.io/" target="_blank">Fuse.js</a>.</p></footer></main>
   </div></div>
   <script>
   // Search script
-  var docs= [{id: "getting-started", keys: ["html","viewport","head","meta","getting started","introduction","browser support","installation","usage","setup","cdn","npm","yarn"]  },{id: "common-textual-elements", keys: ["p","paragraph","text","textual elements","strong","bold","b","em","i","emphasis","italics","small","a","link","hr","horizontal rule","sub","subscript","sup","exponent","superscript","normalize","reset"]  },{id: "heading", keys: ["heading","h1","h2","h3","h4","h5","h6","small","title","subtitle","subheading"]  },{id: "images-captions", keys: ["img","image","responsive","responsiveness","caption","figure","figcaption"]  },{id: "lists", keys: ["list","ul","ol","li"]  },{id: "code-and-quotations", keys: ["code","pre","kbd","blockquote","quotation"]  },{id: "grid", keys: ["grid","grid system","col","column","layout","row","container","small","medium","large","sm","md","lg","cols","predefined","offset","order","reorder","first","last","normal"]  },{id: "cards", keys: ["card","row","section","container","col","column","small","large","fluid","warning","error"]  },{id: "card-sections", keys: ["card","row","section","container","col","column","media","double-padded","dark"]  },{id: "forms-and-input", keys: ["form","fieldset","legend","input","type","text","checkbox","radio","email","password","tel","input-group","input group","row","col","column","vertical","fluid","file","upload","select","textarea","option","label"]  },{id: "buttons", keys: ["button","input","reset","submit","link","a","label","primary","secondary","tertiary","aria","small","large","inverse"]  },{id: "input-grouping", keys: ["input group","input-group","vertical","fluid","input","button","button group","button-group"]  },{id: "header", keys: ["navigation","header","sticky","button","logo","link"]  },{id: "navigation-bar", keys: ["navigation","bar","nav","link"]  },{id: "footer", keys: ["navigation","footer","sticky","link"]  },{id: "drawer", keys: ["drawer","checkbox","toggle","close","drawer-toggle","drawer-close","menu","navigation","hamburger"]  },{id: "text-highlighting", keys: ["mark","highlight","text highlighting","tag","primary","secondary","tertiary","inline-block"]  }];
+  var docs= [{id: "getting-started", keys: ["html","viewport","head","meta","getting started","introduction","browser support","installation","usage","setup","cdn","npm","yarn"]  },{id: "common-textual-elements", keys: ["p","paragraph","text","textual elements","strong","bold","b","em","i","emphasis","italics","small","a","link","hr","horizontal rule","sub","subscript","sup","exponent","superscript","normalize","reset"]  },{id: "heading", keys: ["heading","h1","h2","h3","h4","h5","h6","small","title","subtitle","subheading"]  },{id: "images-captions", keys: ["img","image","responsive","responsiveness","caption","figure","figcaption"]  },{id: "lists", keys: ["list","ul","ol","li"]  },{id: "code-and-quotations", keys: ["code","pre","kbd","blockquote","quotation"]  },{id: "grid", keys: ["grid","grid system","col","column","layout","row","container","small","medium","large","sm","md","lg","cols","predefined","offset","order","reorder","first","last","normal"]  },{id: "cards", keys: ["card","row","section","container","col","column","small","large","fluid","warning","error"]  },{id: "card-sections", keys: ["card","row","section","container","col","column","media","double-padded","dark"]  },{id: "forms-and-input", keys: ["form","fieldset","legend","input","type","text","checkbox","radio","email","password","tel","input-group","input group","row","col","column","vertical","fluid","file","upload","select","textarea","option","label"]  },{id: "buttons", keys: ["button","input","reset","submit","link","a","label","primary","secondary","tertiary","aria","small","large","inverse"]  },{id: "input-grouping", keys: ["input group","input-group","vertical","fluid","input","button","button group","button-group"]  },{id: "header", keys: ["navigation","header","sticky","button","logo","link"]  },{id: "navigation-bar", keys: ["navigation","bar","nav","link"]  },{id: "footer", keys: ["navigation","footer","sticky","link"]  },{id: "drawer", keys: ["drawer","checkbox","toggle","close","drawer-toggle","drawer-close","menu","navigation","hamburger"]  },{id: "text-highlighting", keys: ["mark","highlight","text highlighting","tag","primary","secondary","tertiary","inline-block"]  },{id: "toasts", keys: ["span","highlight","text highlighting","tag","primary","secondary","tertiary","inline-block"]  }];
   var options = {threshold:0.4, keys:["keys"]};
   var fuse = new Fuse(docs,options);
   function search(){