X-Git-Url: http://git.osdn.net/view?a=blobdiff_plain;f=bulma.md;fp=bulma.md;h=f55aac8181bdaeb0799987036c3d1bdddf911e6d;hb=6915cf69337beea7699e8b53e80d71087d43ce1c;hp=0000000000000000000000000000000000000000;hpb=06fe1f9938b69c9aba396f3658e831c270a7ef61;p=twpd%2Fmaster.git
diff --git a/bulma.md b/bulma.md
new file mode 100644
index 0000000..f55aac8
--- /dev/null
+++ b/bulma.md
@@ -0,0 +1,112 @@
+---
+title: Bulma
+category: CSS
+layout: 2017/sheet
+prism_languages: [css, html]
+weight: -1
+updated: 2018-11-19
+authors:
+ - github: benolot
+description: |
+ Basic guide on how to use Bulma, the lightweight css flexbox framework.
+---
+
+### Screen sizes
+
+```
+ 768 1024 1216 1408
+' ' ' ' ' ' ' ' ' ' ' '
+<---------^------------^------------------^-------------^------------->
+ mobile tablet desktop widescreen fullhd
+```
+
+### Columns
+
+```css
+.container
+```
+Wrap as many `.column`'s' as you like in a `.columns` wrapper
+```html
+
+```
+
+### Modifiers
+
+The following CSS classes affect the **colour**.
+
+```css
+.is-primary
+.is-link
+.is-info
+.is-success
+.is-warning
+.is-danger
+```
+
+The following classes modify the **size**.
+```css
+.is-small
+.is-medium
+.is-large
+```
+
+The following classes modify the **state**.
+```scss
+.is-outlined
+.is-loading
+```
+
+### Typography Helpers
+
+The following classes modify the **font-size**
+
+| Class | Font-size |
+| --- | --- |
+| `.is-size-1` | 3rem |
+| `.is-size-2` | 2.5rem |
+| `.is-size-3` | 2rem |
+| `.is-size-4` | 1.5rem |
+| `.is-size-5` | 1.25rem |
+| `.is-size-6` | 1rem |
+| `.is-size-7` | 0.75rem |
+
+The following classes **align** the text
+
+| Class | Alignment |
+| --- | --- |
+| `.has-text-centered` | Makes the text **centered** |
+| `.has-text-justified` | Makes the text **justified** |
+| `.has-text-left`. | Makes the text align to the **left** |
+| `.has-text-right` | Makes the text align to the **right** |
+
+The following classes **transform** the text
+
+| Class | Transformation |
+| --- | --- |
+| `.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
+
+```html
+
+
+
Heading
+
Paragraph
+
+
+
+
+```
+
+To provide default stylings for commonly generated WYSIWYG contents, use the `.content` class.