From c9279b9858aeb6811afcb7529ebb6da715daaf9c Mon Sep 17 00:00:00 2001
From: Afif Sohaili <afifnajib@gmail.com>
Date: Sat, 17 Nov 2018 03:47:54 +0800
Subject: [PATCH] Add cheatsheet on handling generated content with Bulma.
 (#862)

In cases where WYSIWYG editors generate the HTML content of the page,
the content does not have Bulma classes applied to them, which means
they'll be unstyled because that's just how Bulma works. An `<h1>` tag
does not have a style until you add the class `title` to it.

To handle this case, wrap the generated content with `.content` class.
---
 bulma.md | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/bulma.md b/bulma.md
index 575e8d1c9..2595c88b3 100644
--- a/bulma.md
+++ b/bulma.md
@@ -61,7 +61,6 @@ The following classes modify the **state**.
 .is-loading
 ```
 
-
 ### Typography Helpers
 
 The following classes modify the **font-size**
@@ -92,3 +91,19 @@ The following classes **transform** the text
 | `.is-capitalized`  | Transforms the **first character** of each word to **uppercase**   |
 | `.is-lowercase`    | Transforms **all** characters to **lowercase**                     |
 | `.is-uppercase`    | Transforms **all** characters to **uppercase**                     |
+
+### WYSIWYG Content
+
+To provide default stylings for commonly generated WYSIWYG contents, use the
+`.content` class.
+```html
+<div class="content">
+  <h1>Heading</h1>
+  <p>Paragraph</p>
+
+  <ul>
+    <li>Item 1</li>
+    <li>Item 2</li>
+  </ul>
+</div>
+```