bulma.md

   1 ---
   2 title: Bulma
   3 category: CSS
   4 layout: 2017/sheet
   5 prism_languages: [css, html]
   6 weight: -1
   7 updated: 2018-11-19
   8 authors:
   9   - github: benolot
  10 description: |
  11   Basic guide on how to use Bulma, the lightweight css flexbox framework.
  12 ---
  13
  14 ### Screen sizes
  15
  16 ```
  17          768         1024                1216         1408
  18 '     '     '     '     '     '     '     '     '     '     '     '
  19 <---------^------------^------------------^-------------^------------->
  20   mobile      tablet         desktop         widescreen      fullhd
  21 ```
  22
  23 ### Columns
  24
  25 ```css
  26 .container
  27 ```
  28 Wrap as many `.column`'s' as you like in a `.columns` wrapper
  29 ```html
  30 <div class="columns">
  31     <div class="column"></div>
  32     <div class="column"></div>
  33     <div class="column"></div>
  34     <div class="column"></div>
  35     <div class="column"></div>
  36 </div>
  37 ```
  38
  39 ### Modifiers
  40
  41 The following CSS classes affect the **colour**.
  42
  43 ```css
  44 .is-primary
  45 .is-link
  46 .is-info
  47 .is-success
  48 .is-warning
  49 .is-danger
  50 ```
  51
  52 The following classes modify the **size**.
  53 ```css
  54 .is-small
  55 .is-medium
  56 .is-large
  57 ```
  58
  59 The following classes modify the **state**.
  60 ```scss
  61 .is-outlined
  62 .is-loading
  63 ```
  64
  65 ### Typography Helpers
  66
  67 The following classes modify the **font-size**
  68
  69 | Class         | Font-size             |
  70 | ---           | ---                   |
  71 | `.is-size-1`  | 3rem                  |
  72 | `.is-size-2`  | 2.5rem                |
  73 | `.is-size-3`  | 2rem                  |
  74 | `.is-size-4`  | 1.5rem                |
  75 | `.is-size-5`  | 1.25rem               |
  76 | `.is-size-6`  | 1rem                  |
  77 | `.is-size-7`  | 0.75rem               |
  78
  79 The following classes **align** the text
  80
  81 | Class                 | Alignment                             |
  82 | ---                   | ---                                   |
  83 | `.has-text-centered`  | Makes the text **centered**           |
  84 | `.has-text-justified` | Makes the text **justified**          |
  85 | `.has-text-left`.     | Makes the text align to the **left**  |
  86 | `.has-text-right`     | Makes the text align to the **right** |
  87
  88 The following classes **transform** the text
  89
  90 | Class              | Transformation        |
  91 | ---                | ---                   |
  92 | `.is-capitalized`  | Transforms the **first character** of each word to **uppercase**   |
  93 | `.is-lowercase`    | Transforms **all** characters to **lowercase**                     |
  94 | `.is-uppercase`    | Transforms **all** characters to **uppercase**                     |
  95
  96 ### WYSIWYG Content
  97
  98 ```html
  99 <div class="content">
 100   <!-- start WYSIWYG contents -->
 101   <h1>Heading</h1>
 102   <p>Paragraph</p>
 103
 104   <ul>
 105     <li>Item 1</li>
 106     <li>Item 2</li>
 107   </ul>
 108   <!-- end WYSIWYG contents -->
 109 </div>
 110 ```
 111
 112 To provide default stylings for commonly generated WYSIWYG contents, use the `.content` class.