typography-helpers.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411
  1. ---
  2. title: Typography helpers
  3. layout: documentation
  4. doc-tab: modifiers
  5. doc-subtab: typography-helpers
  6. ---
  7. {% assign initial_vars = site.data.variables.utilities.initial-variables.vars %}
  8. {% assign sizes = site.data.variables.utilities.derived-variables.vars.sizes.value | split: ' ' %}
  9. {% capture thead %}
  10. <thead>
  11. <tr>
  12. <th>
  13. Class
  14. </th>
  15. {% for breakpoint_hash in site.data.breakpoints %}
  16. {% assign breakpoint = breakpoint_hash[1] %}
  17. <th>
  18. {{ breakpoint.name }}<br>
  19. {% if breakpoint.id == 'mobile' %}
  20. Up to <code>{{ breakpoint.to }}px</code>
  21. {% elsif breakpoint.id == 'fullhd' %}
  22. <code>{{ breakpoint.from }}px</code> and above
  23. {% else %}
  24. Between <code>{{ breakpoint.from }}px</code> and <code>{{ breakpoint.to }}px</code>
  25. {% endif %}
  26. </th>
  27. {% endfor %}
  28. </tr>
  29. </thead>
  30. {% endcapture %}
  31. {% capture size1 %}
  32. <td class="is-narrow">
  33. <p class="notification is-success"><code>{{ initial_vars.size-1.value }}</code></p>
  34. </td>
  35. {% endcapture %}
  36. {% capture unchanged %}
  37. <td class="is-narrow">
  38. <p class="notification">unchanged</p>
  39. </td>
  40. {% endcapture %}
  41. {% capture left %}
  42. <td class="is-narrow">
  43. <p class="notification is-success">left-aligned</p>
  44. </td>
  45. {% endcapture %}
  46. {% include subnav-modifiers.html %}
  47. <section class="section">
  48. <div class="container">
  49. <h1 class="title">Typography helpers</h1>
  50. <h2 class="subtitle">
  51. Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width
  52. </h2>
  53. {% include anchor.html name="Size" %}
  54. <div class="content">
  55. <p>
  56. There are <strong>{{ sizes | size }} sizes</strong> to choose from:
  57. </p>
  58. </div>
  59. <table class="table is-bordered">
  60. <thead>
  61. <tr>
  62. <th>
  63. Class
  64. </th>
  65. <th>
  66. Font-size
  67. </th>
  68. </tr>
  69. </thead>
  70. <tbody>
  71. {% for size in sizes %}
  72. <tr>
  73. {% assign key = 'size-' | append: forloop.index %}
  74. <td><code>is-size-{{ forloop.index }}</code></td>
  75. <td><code>{{ initial_vars[key].value }}</code></td>
  76. </tr>
  77. {% endfor %}
  78. </tbody>
  79. </table>
  80. {% include anchor.html name="Responsive size" %}
  81. <div class="content">
  82. <p>
  83. You can choose a <strong>specific</strong> size for <em>each</em> viewport width. You simply needed to append the <strong>viewport width</strong> to the size modifier.
  84. </p>
  85. <p>
  86. For example, here are the modifiers for <code>$size-1</code>:
  87. </p>
  88. </div>
  89. <table class="table is-bordered">
  90. {{ thead }}
  91. <tbody>
  92. <tr>
  93. <td><code>is-size-1-mobile</code></td>
  94. {{ size1 }}
  95. {{ unchanged }}
  96. {{ unchanged }}
  97. {{ unchanged }}
  98. {{ unchanged }}
  99. </tr>
  100. <tr>
  101. <td><code>is-size-1-tablet</code></td>
  102. {{ unchanged }}
  103. {{ size1 }}
  104. {{ unchanged }}
  105. {{ unchanged }}
  106. {{ unchanged }}
  107. </tr>
  108. <tr>
  109. <td><code>is-size-1-touch</code></td>
  110. {{ size1 }}
  111. {{ size1 }}
  112. {{ unchanged }}
  113. {{ unchanged }}
  114. {{ unchanged }}
  115. </tr>
  116. <tr>
  117. <td><code>is-size-1-desktop</code></td>
  118. {{ unchanged }}
  119. {{ unchanged }}
  120. {{ size1 }}
  121. {{ size1 }}
  122. {{ size1 }}
  123. </tr>
  124. <tr>
  125. <td><code>is-size-1-widescreen</code></td>
  126. {{ unchanged }}
  127. {{ unchanged }}
  128. {{ unchanged }}
  129. {{ size1 }}
  130. {{ size1 }}
  131. </tr>
  132. <tr>
  133. <td><code>is-size-1-fullhd</code></td>
  134. {{ unchanged }}
  135. {{ unchanged }}
  136. {{ unchanged }}
  137. {{ unchanged }}
  138. {{ size1 }}
  139. </tr>
  140. </tbody>
  141. </table>
  142. <div class="content">
  143. <p>
  144. You can use the same logic for each of the <strong>7 sizes</strong>.
  145. </p>
  146. </div>
  147. {% include anchor.html name="Colors" %}
  148. <div class="content">
  149. <p>
  150. You can set any element to one of the <strong>9 colors</strong> or <strong>9 shades of grey</strong>:
  151. </p>
  152. </div>
  153. <table class="table is-bordered">
  154. <thead>
  155. <tr>
  156. <th>
  157. Class
  158. </th>
  159. <th>
  160. Color
  161. </th>
  162. </tr>
  163. </thead>
  164. <tbody>
  165. <tr><td><code>has-text-white</code></td><td>{% include color/white.html %}</td></tr>
  166. <tr><td><code>has-text-black</code></td><td>{% include color/black.html %}</td></tr>
  167. <tr><td><code>has-text-light</code></td><td>{% include color/white-ter.html %}</td></tr>
  168. <tr><td><code>has-text-dark</code></td><td>{% include color/grey-darker.html %}</td></tr>
  169. <tr><td><code>has-text-primary</code></td><td>{% include color/turquoise.html %}</td></tr>
  170. <tr><td><code>has-text-info</code></td><td>{% include color/blue.html %}</td></tr>
  171. <tr><td><code>has-text-success</code></td><td>{% include color/green.html %}</td></tr>
  172. <tr><td><code>has-text-warning</code></td><td>{% include color/yellow.html %}</td></tr>
  173. <tr><td><code>has-text-danger</code></td><td>{% include color/red.html %}</td></tr>
  174. <tr><td><code>has-text-black-bis</code></td><td>{% include color/black-bis.html %}</td></tr>
  175. <tr><td><code>has-text-black-ter</code></td><td>{% include color/black-ter.html %}</td></tr>
  176. <tr><td><code>has-text-grey-darker</code></td><td>{% include color/grey-darker.html %}</td></tr>
  177. <tr><td><code>has-text-grey-dark</code></td><td>{% include color/grey-dark.html %}</td></tr>
  178. <tr><td><code>has-text-grey</code></td><td>{% include color/grey.html %}</td></tr>
  179. <tr><td><code>has-text-grey-light</code></td><td>{% include color/grey-light.html %}</td></tr>
  180. <tr><td><code>has-text-grey-lighter</code></td><td>{% include color/grey-lighter.html %}</td></tr>
  181. <tr><td><code>has-text-white-ter</code></td><td>{% include color/white-ter.html %}</td></tr>
  182. <tr><td><code>has-text-white-bis</code></td><td>{% include color/white-bis.html %}</td></tr>
  183. </tbody>
  184. </table>
  185. {% include anchor.html name="Alignment" %}
  186. <div class="content">
  187. <p>
  188. You can align the text with the use of one of <strong>4 alignment helpers</strong>:
  189. </p>
  190. </div>
  191. <table class="table is-bordered">
  192. <thead>
  193. <tr>
  194. <th>
  195. Class
  196. </th>
  197. <th>
  198. Alignment
  199. </th>
  200. </tr>
  201. </thead>
  202. <tbody>
  203. <tr>
  204. <td><code>has-text-centered</code></td>
  205. <td>Makes the text <strong>centered</strong></td>
  206. </tr>
  207. <tr>
  208. <td><code>has-text-justified</code></td>
  209. <td>Makes the text <strong>justified</strong></td>
  210. </tr>
  211. <tr>
  212. <td><code>has-text-left</code></td>
  213. <td>Makes the text aligned to the <strong>left</strong></td>
  214. </tr>
  215. <tr>
  216. <td><code>has-text-right</code></td>
  217. <td>Makes the text aligned to the <strong>right</strong></td>
  218. </tr>
  219. </tbody>
  220. </table>
  221. {% include anchor.html name="Responsive Alignment" %}
  222. <div class="content">
  223. <p>
  224. You can now <strong>align text</strong> for <em>each</em> viewport width. You simply need to append the <strong>viewport width</strong> to the alignment modifier.
  225. </p>
  226. <p>
  227. For example, here are the modifiers for <code>has-text-left</code>:
  228. </p>
  229. </div>
  230. <table class="table is-bordered">
  231. {{ thead }}
  232. <tbody>
  233. <tr>
  234. <td><code>has-text-left-mobile</code></td>
  235. {{ left }}
  236. {{ unchanged }}
  237. {{ unchanged }}
  238. {{ unchanged }}
  239. {{ unchanged }}
  240. </tr>
  241. <tr>
  242. <td><code>has-text-left-tablet</code></td>
  243. {{ unchanged }}
  244. {{ left }}
  245. {{ left }}
  246. {{ left }}
  247. {{ left }}
  248. </tr>
  249. <tr>
  250. <td><code>has-text-left-tablet-only</code></td>
  251. {{ unchanged }}
  252. {{ left }}
  253. {{ unchanged }}
  254. {{ unchanged }}
  255. {{ unchanged }}
  256. </tr>
  257. <tr>
  258. <td><code>has-text-left-touch</code></td>
  259. {{ left }}
  260. {{ left }}
  261. {{ unchanged }}
  262. {{ unchanged }}
  263. {{ unchanged }}
  264. </tr>
  265. <tr>
  266. <td><code>has-text-left-desktop</code></td>
  267. {{ unchanged }}
  268. {{ unchanged }}
  269. {{ left }}
  270. {{ left }}
  271. {{ left }}
  272. </tr>
  273. <tr>
  274. <td><code>has-text-left-desktop-only</code></td>
  275. {{ unchanged }}
  276. {{ unchanged }}
  277. {{ left }}
  278. {{ unchanged }}
  279. {{ unchanged }}
  280. </tr>
  281. <tr>
  282. <td><code>has-text-left-widescreen</code></td>
  283. {{ unchanged }}
  284. {{ unchanged }}
  285. {{ unchanged }}
  286. {{ left }}
  287. {{ left }}
  288. </tr>
  289. <tr>
  290. <td><code>has-text-left-widescreen-only</code></td>
  291. {{ unchanged }}
  292. {{ unchanged }}
  293. {{ unchanged }}
  294. {{ left }}
  295. {{ unchanged }}
  296. </tr>
  297. <tr>
  298. <td><code>has-text-left-fullhd</code></td>
  299. {{ unchanged }}
  300. {{ unchanged }}
  301. {{ unchanged }}
  302. {{ unchanged }}
  303. {{ left }}
  304. </tr>
  305. </tbody>
  306. </table>
  307. {% include anchor.html name="Text transformation" %}
  308. <div class="content">
  309. <p>
  310. You can transform the text with the use of one of <strong>4 text transformation helpers</strong>:
  311. </p>
  312. </div>
  313. <table class="table is-bordered">
  314. <thead>
  315. <tr>
  316. <th>
  317. Class
  318. </th>
  319. <th>
  320. Transformation
  321. </th>
  322. </tr>
  323. </thead>
  324. <tbody>
  325. <tr>
  326. <td><code>is-capitalized</code></td>
  327. <td>Transforms <strong>the first character</strong> of each word to <strong>uppercase</strong></td>
  328. </tr>
  329. <tr>
  330. <td><code>is-lowercase</code></td>
  331. <td>Transforms <strong>all characters</strong> to <strong>lowercase</strong></td>
  332. </tr>
  333. <tr>
  334. <td><code>is-uppercase</code></td>
  335. <td>Transforms <strong>all characters</strong> to <strong>uppercase</strong></td>
  336. </tr>
  337. <tr>
  338. <td><code>is-italic</code></td>
  339. <td>Transforms <strong>all characters</strong> to <strong>italic</strong></td>
  340. </tr>
  341. </tbody>
  342. </table>
  343. {% include anchor.html name="Text weight" %}
  344. <div class="content">
  345. <p>
  346. You can transform the text weight with the use of one of <strong>4 text weight helpers</strong>:
  347. </p>
  348. </div>
  349. <table class="table is-bordered">
  350. <thead>
  351. <tr>
  352. <th>
  353. Class
  354. </th>
  355. <th>
  356. Weight
  357. </th>
  358. </tr>
  359. </thead>
  360. <tbody>
  361. <tr>
  362. <td><code>has-text-weight-light</code></td>
  363. <td>Transforms text weight to <strong>light</strong></td>
  364. </tr>
  365. <tr>
  366. <td><code>has-text-weight-normal</code></td>
  367. <td>Transforms text weight to <strong>normal</strong></td>
  368. </tr>
  369. <tr>
  370. <td><code>has-text-weight-semibold</code></td>
  371. <td>Transforms text weight to <strong>semi-bold</strong></td>
  372. </tr>
  373. <tr>
  374. <td><code>has-text-weight-bold</code></td>
  375. <td>Transforms text weight to <strong>bold</strong></td>
  376. </tr>
  377. </tbody>
  378. </table>
  379. </div>
  380. </section>