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.
This commit is contained in:
parent
4a77b25dee
commit
c9279b9858
17
bulma.md
17
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>
|
||||
```
|
||||
|
|
Loading…
Reference in New Issue