library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2025-01-09 15:44:25 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add modifiers links

Browse Source
This commit is contained in:
Jeremy Thomas 2018-04-09 17:11:24 +01:00
parent 5d4e3582f0
commit 425860f56f
8 changed files with 780 additions and 741 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
docs/_data/links.json
View File

@ -8,6 +8,30 @@
"name": "Documentation", "name": "Documentation",
"path": "/documentation" "path": "/documentation"
}, },
"modifiers": {
"name": "Modifiers",
"path": "/documentation/modifiers"
},
"modifiers-syntax": {
"name": "Syntax",
"path": "/documentation/modifiers/syntax"
},
"modifiers-helpers": {
"name": "Helpers",
"path": "/documentation/modifiers/helpers"
},
"modifiers-responsive-helpers": {
"name": "Responsive helpers",
"path": "/documentation/modifiers/responsive-helpers"
},
"modifiers-color-helpers": {
"name": "Color helpers",
"path": "/documentation/modifiers/color-helpers"
},
"modifiers-typography-helpers": {
"name": "Typography helpers",
"path": "/documentation/modifiers/typography-helpers"
},
"columns": { "columns": {
"name": "Columns", "name": "Columns",
"path": "/documentation/columns" "path": "/documentation/columns"
@ -191,6 +215,7 @@
}, },
"order": { "order": {
"columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"], "columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"],
"modifiers": ["modifiers-syntax", "modifiers-helpers", "modifiers-responsive-helpers", "modifiers-color-helpers", "modifiers-typography-helpers"],
"form": ["form-general", "form-input", "form-textarea", "form-select", "form-checkbox", "form-radio", "form-file"], "form": ["form-general", "form-input", "form-textarea", "form-select", "form-checkbox", "form-radio", "form-file"],
"elements": ["elements-box", "elements-button", "elements-content", "elements-delete", "elements-icon", "elements-image", "elements-notification", "elements-progress", "elements-table", "elements-tag", "elements-title"], "elements": ["elements-box", "elements-button", "elements-content", "elements-delete", "elements-icon", "elements-image", "elements-notification", "elements-progress", "elements-table", "elements-tag", "elements-title"],
"components": ["components-breadcrumb", "components-card", "components-dropdown", "components-menu", "components-message", "components-modal", "components-navbar", "components-pagination", "components-panel", "components-tabs"] "components": ["components-breadcrumb", "components-card", "components-dropdown", "components-menu", "components-message", "components-modal", "components-navbar", "components-pagination", "components-panel", "components-tabs"]

31
docs/_sass/main.sass
View File

@ -7,7 +7,6 @@ $main-spacing: 2.5rem
// Lead // Lead
.bd-lead .bd-lead
// border: 1px solid lightskyblue
position: relative position: relative
.bd-breadcrumb .bd-breadcrumb
@ -39,17 +38,23 @@ $main-spacing: 2.5rem
padding-bottom: $main-spacing padding-bottom: $main-spacing
.subtitle .subtitle
color: $text-light color: $text-light
max-width: 21em
strong strong
color: currentColor color: currentColor
#meta #meta
margin-top: -0.5rem margin-top: -0.5rem
.bd-content
hr:first-child
display: none
& + .bd-anchor-title
padding-top: 0
// Side // Side
.bd-side, .bd-side,
.bd-side-background .bd-side-background
background-color: $white-bis background-color: $white-bis
// border: 1px solid coral
.bd-side .bd-side
position: relative position: relative
@ -65,6 +70,8 @@ $main-spacing: 2.5rem
.bd-lead, .bd-lead,
.bd-side .bd-side
padding: 1.5rem padding: 1.5rem
.bd-header-carbon
margin-top: 1.5rem
+mobile +mobile
.bd-side-background .bd-side-background
@ -78,16 +85,6 @@ $main-spacing: 2.5rem
overflow: hidden overflow: hidden
flex-grow: 1 flex-grow: 1
flex-shrink: 1 flex-shrink: 1
.bd-header
display: flex
.bd-header-titles
flex-grow: 1
flex-shrink: 1
.bd-header-carbon
flex-grow: 0
flex-shrink: 0
margin-left: 1.5rem
width: $carbon-width
.bd-prev-next .bd-prev-next
display: flex display: flex
.bd-side .bd-side
@ -99,5 +96,15 @@ $main-spacing: 2.5rem
.bd-lead .bd-lead
margin-left: -3rem margin-left: -3rem
padding: 3rem padding: 3rem
.bd-header
display: flex
.bd-header-titles
flex-grow: 1
flex-shrink: 1
.bd-header-carbon
flex-grow: 0
flex-shrink: 0
margin-left: 1.5rem
width: $carbon-width
.bd-side .bd-side
padding: 3rem 0 3rem 1.5rem padding: 3rem 0 3rem 1.5rem

38
docs/css/bulma-docs.css
View File

@ -9534,6 +9534,7 @@ label.panel-block:hover {
.bd-header .subtitle { .bd-header .subtitle {
color: #7a7a7a; color: #7a7a7a;
max-width: 21em;
} }
.bd-header .subtitle strong { .bd-header .subtitle strong {
@ -9544,6 +9545,14 @@ label.panel-block:hover {
margin-top: -0.5rem; margin-top: -0.5rem;
} }
.bd-content hr:first-child {
display: none;
}
.bd-content hr:first-child + .bd-anchor-title {
padding-top: 0;
}
.bd-side, .bd-side,
.bd-side-background { .bd-side-background {
background-color: #fafafa; background-color: #fafafa;
@ -9566,6 +9575,9 @@ label.panel-block:hover {
.bd-side { .bd-side {
padding: 1.5rem; padding: 1.5rem;
} }
.bd-header-carbon {
margin-top: 1.5rem;
}
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
@ -9584,19 +9596,6 @@ label.panel-block:hover {
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
} }
.bd-header {
display: flex;
}
.bd-header-titles {
flex-grow: 1;
flex-shrink: 1;
}
.bd-header-carbon {
flex-grow: 0;
flex-shrink: 0;
margin-left: 1.5rem;
width: 300px;
}
.bd-prev-next { .bd-prev-next {
display: flex; display: flex;
} }
@ -9613,6 +9612,19 @@ label.panel-block:hover {
margin-left: -3rem; margin-left: -3rem;
padding: 3rem; padding: 3rem;
} }
.bd-header {
display: flex;
}
.bd-header-titles {
flex-grow: 1;
flex-shrink: 1;
}
.bd-header-carbon {
flex-grow: 0;
flex-shrink: 0;
margin-left: 1.5rem;
width: 300px;
}
.bd-side { .bd-side {
padding: 3rem 0 3rem 1.5rem; padding: 3rem 0 3rem 1.5rem;
} }

176
docs/documentation/modifiers/color-helpers.html
View File

@ -1,104 +1,98 @@
--- ---
title: Color helpers title: Color helpers
subtitle: "Change the <strong>color</strong> of the text and/or background"
layout: documentation layout: documentation
doc-tab: modifiers doc-tab: modifiers
doc-subtab: color-helpers doc-subtab: color-helpers
breadcrumb:
- home
- documentation
- modifiers
- modifiers-color-helpers
--- ---
{% include subnav/subnav-modifiers.html %} {% include anchor.html name="Text color" %}
<section class="section"> <div class="content">
<div class="container"> <p>
<h1 class="title">Color helpers</h1> You can set any element to one of the <strong>9 colors</strong> or <strong>9 shades of grey</strong>:
<h2 class="subtitle"> </p>
Change the <strong>color</strong> of the text and/or background </div>
</h2>
{% include anchor.html name="Text color" %} <table class="table is-bordered">
<thead>
<tr>
<th>
Class
</th>
<th>
Color
</th>
</tr>
</thead>
<tbody>
<tr><td><code>has-text-white</code></td><td>{% include color/white.html %}</td></tr>
<tr><td><code>has-text-black</code></td><td>{% include color/black.html %}</td></tr>
<tr><td><code>has-text-light</code></td><td>{% include color/white-ter.html %}</td></tr>
<tr><td><code>has-text-dark</code></td><td>{% include color/grey-darker.html %}</td></tr>
<tr><td><code>has-text-primary</code></td><td>{% include color/turquoise.html %}</td></tr>
<tr><td><code>has-text-info</code></td><td>{% include color/cyan.html %}</td></tr>
<tr><td><code>has-text-link</code></td><td>{% include color/blue.html %}</td></tr>
<tr><td><code>has-text-success</code></td><td>{% include color/green.html %}</td></tr>
<tr><td><code>has-text-warning</code></td><td>{% include color/yellow.html %}</td></tr>
<tr><td><code>has-text-danger</code></td><td>{% include color/red.html %}</td></tr>
<tr><td><code>has-text-black-bis</code></td><td>{% include color/black-bis.html %}</td></tr>
<tr><td><code>has-text-black-ter</code></td><td>{% include color/black-ter.html %}</td></tr>
<tr><td><code>has-text-grey-darker</code></td><td>{% include color/grey-darker.html %}</td></tr>
<tr><td><code>has-text-grey-dark</code></td><td>{% include color/grey-dark.html %}</td></tr>
<tr><td><code>has-text-grey</code></td><td>{% include color/grey.html %}</td></tr>
<tr><td><code>has-text-grey-light</code></td><td>{% include color/grey-light.html %}</td></tr>
<tr><td><code>has-text-grey-lighter</code></td><td>{% include color/grey-lighter.html %}</td></tr>
<tr><td><code>has-text-white-ter</code></td><td>{% include color/white-ter.html %}</td></tr>
<tr><td><code>has-text-white-bis</code></td><td>{% include color/white-bis.html %}</td></tr>
</tbody>
</table>
<div class="content"> {% include anchor.html name="Background color" %}
<p>
You can set any element to one of the <strong>9 colors</strong> or <strong>9 shades of grey</strong>:
</p>
</div>
<table class="table is-bordered"> {% include elements/new-tag.html version="0.6.3" %}
<thead>
<tr>
<th>
Class
</th>
<th>
Color
</th>
</tr>
</thead>
<tbody>
<tr><td><code>has-text-white</code></td><td>{% include color/white.html %}</td></tr>
<tr><td><code>has-text-black</code></td><td>{% include color/black.html %}</td></tr>
<tr><td><code>has-text-light</code></td><td>{% include color/white-ter.html %}</td></tr>
<tr><td><code>has-text-dark</code></td><td>{% include color/grey-darker.html %}</td></tr>
<tr><td><code>has-text-primary</code></td><td>{% include color/turquoise.html %}</td></tr>
<tr><td><code>has-text-info</code></td><td>{% include color/cyan.html %}</td></tr>
<tr><td><code>has-text-link</code></td><td>{% include color/blue.html %}</td></tr>
<tr><td><code>has-text-success</code></td><td>{% include color/green.html %}</td></tr>
<tr><td><code>has-text-warning</code></td><td>{% include color/yellow.html %}</td></tr>
<tr><td><code>has-text-danger</code></td><td>{% include color/red.html %}</td></tr>
<tr><td><code>has-text-black-bis</code></td><td>{% include color/black-bis.html %}</td></tr>
<tr><td><code>has-text-black-ter</code></td><td>{% include color/black-ter.html %}</td></tr>
<tr><td><code>has-text-grey-darker</code></td><td>{% include color/grey-darker.html %}</td></tr>
<tr><td><code>has-text-grey-dark</code></td><td>{% include color/grey-dark.html %}</td></tr>
<tr><td><code>has-text-grey</code></td><td>{% include color/grey.html %}</td></tr>
<tr><td><code>has-text-grey-light</code></td><td>{% include color/grey-light.html %}</td></tr>
<tr><td><code>has-text-grey-lighter</code></td><td>{% include color/grey-lighter.html %}</td></tr>
<tr><td><code>has-text-white-ter</code></td><td>{% include color/white-ter.html %}</td></tr>
<tr><td><code>has-text-white-bis</code></td><td>{% include color/white-bis.html %}</td></tr>
</tbody>
</table>
{% include anchor.html name="Background color" %} <div class="content">
<p>
You can set any element to one of the <strong>9 colors</strong> or <strong>9 shades of grey</strong>:
</p>
</div>
{% include elements/new-tag.html version="0.6.3" %} <table class="table is-bordered">
<thead>
<div class="content"> <tr>
<p> <th>
You can set any element to one of the <strong>9 colors</strong> or <strong>9 shades of grey</strong>: Class
</p> </th>
</div> <th>
Background color
<table class="table is-bordered"> </th>
<thead> </tr>
<tr> </thead>
<th> <tbody>
Class <tr><td><code>has-background-white</code></td><td>{% include color/white.html %}</td></tr>
</th> <tr><td><code>has-background-black</code></td><td>{% include color/black.html %}</td></tr>
<th> <tr><td><code>has-background-light</code></td><td>{% include color/white-ter.html %}</td></tr>
Background color <tr><td><code>has-background-dark</code></td><td>{% include color/grey-darker.html %}</td></tr>
</th> <tr><td><code>has-background-primary</code></td><td>{% include color/turquoise.html %}</td></tr>
</tr> <tr><td><code>has-background-info</code></td><td>{% include color/cyan.html %}</td></tr>
</thead> <tr><td><code>has-background-link</code></td><td>{% include color/blue.html %}</td></tr>
<tbody> <tr><td><code>has-background-success</code></td><td>{% include color/green.html %}</td></tr>
<tr><td><code>has-background-white</code></td><td>{% include color/white.html %}</td></tr> <tr><td><code>has-background-warning</code></td><td>{% include color/yellow.html %}</td></tr>
<tr><td><code>has-background-black</code></td><td>{% include color/black.html %}</td></tr> <tr><td><code>has-background-danger</code></td><td>{% include color/red.html %}</td></tr>
<tr><td><code>has-background-light</code></td><td>{% include color/white-ter.html %}</td></tr> <tr><td><code>has-background-black-bis</code></td><td>{% include color/black-bis.html %}</td></tr>
<tr><td><code>has-background-dark</code></td><td>{% include color/grey-darker.html %}</td></tr> <tr><td><code>has-background-black-ter</code></td><td>{% include color/black-ter.html %}</td></tr>
<tr><td><code>has-background-primary</code></td><td>{% include color/turquoise.html %}</td></tr> <tr><td><code>has-background-grey-darker</code></td><td>{% include color/grey-darker.html %}</td></tr>
<tr><td><code>has-background-info</code></td><td>{% include color/cyan.html %}</td></tr> <tr><td><code>has-background-grey-dark</code></td><td>{% include color/grey-dark.html %}</td></tr>
<tr><td><code>has-background-link</code></td><td>{% include color/blue.html %}</td></tr> <tr><td><code>has-background-grey</code></td><td>{% include color/grey.html %}</td></tr>
<tr><td><code>has-background-success</code></td><td>{% include color/green.html %}</td></tr> <tr><td><code>has-background-grey-light</code></td><td>{% include color/grey-light.html %}</td></tr>
<tr><td><code>has-background-warning</code></td><td>{% include color/yellow.html %}</td></tr> <tr><td><code>has-background-grey-lighter</code></td><td>{% include color/grey-lighter.html %}</td></tr>
<tr><td><code>has-background-danger</code></td><td>{% include color/red.html %}</td></tr> <tr><td><code>has-background-white-ter</code></td><td>{% include color/white-ter.html %}</td></tr>
<tr><td><code>has-background-black-bis</code></td><td>{% include color/black-bis.html %}</td></tr> <tr><td><code>has-background-white-bis</code></td><td>{% include color/white-bis.html %}</td></tr>
<tr><td><code>has-background-black-ter</code></td><td>{% include color/black-ter.html %}</td></tr> </tbody>
<tr><td><code>has-background-grey-darker</code></td><td>{% include color/grey-darker.html %}</td></tr> </table>
<tr><td><code>has-background-grey-dark</code></td><td>{% include color/grey-dark.html %}</td></tr>
<tr><td><code>has-background-grey</code></td><td>{% include color/grey.html %}</td></tr>
<tr><td><code>has-background-grey-light</code></td><td>{% include color/grey-light.html %}</td></tr>
<tr><td><code>has-background-grey-lighter</code></td><td>{% include color/grey-lighter.html %}</td></tr>
<tr><td><code>has-background-white-ter</code></td><td>{% include color/white-ter.html %}</td></tr>
<tr><td><code>has-background-white-bis</code></td><td>{% include color/white-bis.html %}</td></tr>
</tbody>
</table>
</div>
</section>

115
docs/documentation/modifiers/helpers.html
View File

@ -1,66 +1,63 @@
--- ---
title: Helpers title: Helpers
subtitle: "You can apply <strong>helper classes</strong> to almost any element, in order to alter its style."
layout: documentation layout: documentation
doc-tab: modifiers doc-tab: modifiers
doc-subtab: helpers doc-subtab: helpers
breadcrumb:
- home
- documentation
- modifiers
- modifiers-helpers
--- ---
{% include subnav/subnav-modifiers.html %} <table class="table is-bordered">
<tbody>
<section class="section"> <tr>
<div class="container"> <th rowspan="3">Float</th>
<h1 class="title">Helpers</h1> <td><code>is-clearfix</code></td>
<h2 class="subtitle">You can apply <strong>helper classes</strong> to almost any element, in order to alter its style.</h2> <td>Fixes an element's floating children</td>
<hr> </tr>
<table class="table is-bordered"> <tr>
<tbody> <td><code>is-pulled-left</code></td>
<tr> <td>Moves an element to the left</td>
<th rowspan="3">Float</th> </tr>
<td><code>is-clearfix</code></td> <tr>
<td>Fixes an element's floating children</td> <td><code>is-pulled-right</code></td>
</tr> <td>Moves an element to the right</td>
<tr> </tr>
<td><code>is-pulled-left</code></td> <tr>
<td>Moves an element to the left</td> <th rowspan="2">Spacing</th>
</tr> <td><code>is-marginless</code></td>
<tr> <td>Removes any <strong>margin</strong></td>
<td><code>is-pulled-right</code></td> </tr>
<td>Moves an element to the right</td> <tr>
</tr> <td><code>is-paddingless</code></td>
<tr> <td>Removes any <strong>padding</strong></td>
<th rowspan="2">Spacing</th> </tr>
<td><code>is-marginless</code></td> <tr>
<td>Removes any <strong>margin</strong></td> <th rowspan="6">Other</th>
</tr> <td><code>is-overlay</code></td>
<tr> <td>Completely covers the first positioned parent</td>
<td><code>is-paddingless</code></td> </tr>
<td>Removes any <strong>padding</strong></td> <td><code>is-clipped</code></td>
</tr> <td>Adds overflow <strong>hidden</strong></td>
<tr> </tr>
<th rowspan="6">Other</th> <tr>
<td><code>is-overlay</code></td> <td><code>is-radiusless</code></td>
<td>Completely covers the first positioned parent</td> <td>Removes any <strong>radius</strong></td>
</tr> </tr>
<td><code>is-clipped</code></td> <tr>
<td>Adds overflow <strong>hidden</strong></td> <td><code>is-shadowless</code></td>
</tr> <td>Removes any <strong>shadow</strong></td>
<tr> </tr>
<td><code>is-radiusless</code></td> <tr>
<td>Removes any <strong>radius</strong></td> <td><code>is-unselectable</code></td>
</tr> <td>Prevents the text from being <strong>selectable</strong></td>
<tr> </tr>
<td><code>is-shadowless</code></td> <tr>
<td>Removes any <strong>shadow</strong></td> <td><code>is-invisible</code></td>
</tr> <td>Adds visibility <strong>hidden</strong></td>
<tr> </tr>
<td><code>is-unselectable</code></td> </tbody>
<td>Prevents the text from being <strong>selectable</strong></td> </table>
</tr>
<tr>
<td><code>is-invisible</code></td>
<td>Adds visibility <strong>hidden</strong></td>
</tr>
</tbody>
</table>
</div>
</section>

455
docs/documentation/modifiers/responsive-helpers.html
View File

@ -1,8 +1,14 @@
--- ---
title: Responsive helpers title: Responsive helpers
subtitle: "<strong>Show/hide content</strong> depending on the width of the viewport"
layout: documentation layout: documentation
doc-tab: modifiers doc-tab: modifiers
doc-subtab: responsive-helpers doc-subtab: responsive-helpers
breadcrumb:
- home
- documentation
- modifiers
- modifiers-responsive-helpers
--- ---
{% capture thead %} {% capture thead %}
@ -52,237 +58,228 @@ doc-subtab: responsive-helpers
</td> </td>
{% endcapture %} {% endcapture %}
{% include subnav/subnav-modifiers.html %} {% include anchor.html name="Show" %}
<section class="section"> <div class="content">
<div class="container"> <p>
<h1 class="title">Responsive helpers</h1> You can use one of the following <code>display</code> classes:
<h2 class="subtitle"><strong>Show/hide content</strong> depending on the width of the viewport</h2> </p>
<ul>
<li><code>block</code></li>
<li><code>flex</code></li>
<li><code>inline</code></li>
<li><code>inline-block</code></li>
<li><code>inline-flex</code></li>
</ul>
<p>For example, here's how the <code>is-flex</code> helper works:</p>
</div>
{% include anchor.html name="Show" %} <table class="table is-bordered">
{{ thead }}
<tbody>
<tr>
<td class="is-narrow">
<code>is-flex-mobile</code>
</td>
{{ flex }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-tablet-only</code>
</td>
{{ unchanged }}
{{ flex }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-desktop-only</code>
</td>
{{ unchanged }}
{{ unchanged }}
{{ flex }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-widescreen-only</code>
</td>
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ flex }}
{{ unchanged }}
</tr>
<tr>
<th colspan="5">
<p>Classes to display <strong>up to</strong> or <strong>from</strong> a specific breakpoint</p>
</th>
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-touch</code>
</td>
{{ flex }}
{{ flex }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-tablet</code>
</td>
{{ unchanged }}
{{ flex }}
{{ flex }}
{{ flex }}
{{ flex }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-desktop</code>
</td>
{{ unchanged }}
{{ unchanged }}
{{ flex }}
{{ flex }}
{{ flex }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-widescreen</code>
</td>
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ flex }}
{{ flex }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-fullhd</code>
</td>
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ flex }}
</tr>
</tbody>
</table>
<div class="content"> <div class="content">
<p> <p>
You can use one of the following <code>display</code> classes: For the other display options, just replace <code>is-flex</code> with <code>is-block</code> <code>is-inline</code> <code>is-inline-block</code> or <code>is-inline-flex</code>
</p> </p>
<ul> </div>
<li><code>block</code></li>
<li><code>flex</code></li>
<li><code>inline</code></li>
<li><code>inline-block</code></li>
<li><code>inline-flex</code></li>
</ul>
<p>For example, here's how the <code>is-flex</code> helper works:</p>
</div>
<table class="table is-bordered"> {% include anchor.html name="Hide" %}
{{ thead }}
<tbody>
<tr>
<td class="is-narrow">
<code>is-flex-mobile</code>
</td>
{{ flex }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-tablet-only</code>
</td>
{{ unchanged }}
{{ flex }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-desktop-only</code>
</td>
{{ unchanged }}
{{ unchanged }}
{{ flex }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-widescreen-only</code>
</td>
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ flex }}
{{ unchanged }}
</tr>
<tr>
<th colspan="5">
<p>Classes to display <strong>up to</strong> or <strong>from</strong> a specific breakpoint</p>
</th>
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-touch</code>
</td>
{{ flex }}
{{ flex }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-tablet</code>
</td>
{{ unchanged }}
{{ flex }}
{{ flex }}
{{ flex }}
{{ flex }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-desktop</code>
</td>
{{ unchanged }}
{{ unchanged }}
{{ flex }}
{{ flex }}
{{ flex }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-widescreen</code>
</td>
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ flex }}
{{ flex }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-fullhd</code>
</td>
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ flex }}
</tr>
</tbody>
</table>
<div class="content"> <table class="table is-bordered">
<p> {{ thead }}
For the other display options, just replace <code>is-flex</code> with <code>is-block</code> <code>is-inline</code> <code>is-inline-block</code> or <code>is-inline-flex</code> <tbody>
</p> <tr>
</div> <td class="is-narrow">
<code>is-hidden-mobile</code>
{% include anchor.html name="Hide" %} </td>
{{ hidden }}
<table class="table is-bordered"> {{ visible }}
{{ thead }} {{ visible }}
<tbody> {{ visible }}
<tr> {{ visible }}
<td class="is-narrow"> </tr>
<code>is-hidden-mobile</code> <tr>
</td> <td class="is-narrow">
{{ hidden }} <code>is-hidden-tablet-only</code>
{{ visible }} </td>
{{ visible }} {{ visible }}
{{ visible }} {{ hidden }}
{{ visible }} {{ visible }}
</tr> {{ visible }}
<tr> {{ visible }}
<td class="is-narrow"> </tr>
<code>is-hidden-tablet-only</code> <tr>
</td> <td class="is-narrow">
{{ visible }} <code>is-hidden-desktop-only</code>
{{ hidden }} </td>
{{ visible }} {{ visible }}
{{ visible }} {{ visible }}
{{ visible }} {{ hidden }}
</tr> {{ visible }}
<tr> {{ visible }}
<td class="is-narrow"> </tr>
<code>is-hidden-desktop-only</code> <tr>
</td> <td class="is-narrow">
{{ visible }} <code>is-hidden-widescreen-only</code>
{{ visible }} </td>
{{ hidden }} {{ visible }}
{{ visible }} {{ visible }}
{{ visible }} {{ visible }}
</tr> {{ hidden }}
<tr> {{ visible }}
<td class="is-narrow"> </tr>
<code>is-hidden-widescreen-only</code> <tr>
</td> <th colspan="5">
{{ visible }} <p>Classes to hide <strong>up to</strong> or <strong>from</strong> a specific breakpoint</p>
{{ visible }} </th>
{{ visible }} </tr>
{{ hidden }} <tr>
{{ visible }} <td class="is-narrow">
</tr> <code>is-hidden-touch</code>
<tr> </td>
<th colspan="5"> {{ hidden }}
<p>Classes to hide <strong>up to</strong> or <strong>from</strong> a specific breakpoint</p> {{ hidden }}
</th> {{ visible }}
</tr> {{ visible }}
<tr> {{ visible }}
<td class="is-narrow"> </tr>
<code>is-hidden-touch</code> <tr>
</td> <td class="is-narrow">
{{ hidden }} <code>is-hidden-tablet</code>
{{ hidden }} </td>
{{ visible }} {{ visible }}
{{ visible }} {{ hidden }}
{{ visible }} {{ hidden }}
</tr> {{ hidden }}
<tr> {{ hidden }}
<td class="is-narrow"> </tr>
<code>is-hidden-tablet</code> <tr>
</td> <td class="is-narrow">
{{ visible }} <code>is-hidden-desktop</code>
{{ hidden }} </td>
{{ hidden }} {{ visible }}
{{ hidden }} {{ visible }}
{{ hidden }} {{ hidden }}
</tr> {{ hidden }}
<tr> {{ hidden }}
<td class="is-narrow"> </tr>
<code>is-hidden-desktop</code> <tr>
</td> <td class="is-narrow">
{{ visible }} <code>is-hidden-widescreen</code>
{{ visible }} </td>
{{ hidden }} {{ visible }}
{{ hidden }} {{ visible }}
{{ hidden }} {{ visible }}
</tr> {{ hidden }}
<tr> {{ hidden }}
<td class="is-narrow"> </tr>
<code>is-hidden-widescreen</code> <tr>
</td> <td class="is-narrow">
{{ visible }} <code>is-hidden-fullhd</code>
{{ visible }} </td>
{{ visible }} {{ visible }}
{{ hidden }} {{ visible }}
{{ hidden }} {{ visible }}
</tr> {{ visible }}
<tr> {{ hidden }}
<td class="is-narrow"> </tr>
<code>is-hidden-fullhd</code> </tbody>
</td> </table>
{{ visible }}
{{ visible }}
{{ visible }}
{{ visible }}
{{ hidden }}
</tr>
</tbody>
</table>
</div>
</section>

245
docs/documentation/modifiers/syntax.html
View File

@ -1,12 +1,16 @@
--- ---
title: Modifiers syntax title: Modifiers syntax
subtitle: "Most Bulma elements have <strong>alternative</strong> styles. To apply them, you only need to append one of the <strong>modifier classes</strong>.<br>They all start with <code>is-</code> or <code>has-</code>.</h2>"
layout: documentation layout: documentation
doc-tab: modifiers doc-tab: modifiers
doc-subtab: syntax doc-subtab: syntax
breadcrumb:
- home
- documentation
- modifiers
- modifiers-syntax
--- ---
{% include subnav/subnav-modifiers.html %}
{% capture button_example %} {% capture button_example %}
<a class="button"> <a class="button">
Button Button
@ -19,75 +23,68 @@ doc-subtab: syntax
</a> </a>
{% endcapture %} {% endcapture %}
<section class="section"> <div class="columns">
<div class="container"> <div class="column">
<h1 class="title">Modifiers syntax</h1> <p>Let's start with a simple <strong>button</strong> that uses the <code>"button"</code> CSS class:</p>
<h2 class="subtitle">Most Bulma elements have <strong>alternative</strong> styles. To apply them, you only need to append one of the <strong>modifier classes</strong>. </div>
<br> <div class="column">
They all start with <code>is-</code> or <code>has-</code>.</h2> <p>
<hr> {{button_example}}
<div class="columns"> </p>
<div class="column"> </div>
<p>Let's start with a simple <strong>button</strong> that uses the <code>"button"</code> CSS class:</p> <div class="column is-half">
</div> {% highlight html %}{{button_example}}{% endhighlight %}
<div class="column"> </div>
<p> </div>
{{button_example}} <div class="columns">
</p> <div class="column">
</div> <p>By <strong>adding</strong> the <code>"is-primary"</code> CSS class, you can modify the <strong>color</strong>:</p>
<div class="column is-half"> </div>
{% highlight html %}{{button_example}}{% endhighlight %} <div class="column">
</div> <p>
{{button_primary_example}}
</p>
</div>
<div class="column is-half">
{% highlight html %}{{button_primary_example}}{% endhighlight %}
</div>
</div>
<div class="columns">
<div class="column">
<div class="content">
<p>You can use one of the <strong>6 main colors</strong>:</p>
<ul>
<li><code>is-primary</code></li>
<li><code>is-link</code></li>
<li><code>is-info</code></li>
<li><code>is-success</code></li>
<li><code>is-warning</code></li>
<li><code>is-danger</code></li>
</ul>
</div> </div>
<div class="columns"> </div>
<div class="column"> <div class="column">
<p>By <strong>adding</strong> the <code>"is-primary"</code> CSS class, you can modify the <strong>color</strong>:</p> <p class="field">
</div> <a class="button is-primary">Button</a>
<div class="column"> </p>
<p> <p class="field">
{{button_primary_example}} <a class="button is-link">Button</a>
</p> </p>
</div> <p class="field">
<div class="column is-half"> <a class="button is-info">Button</a>
{% highlight html %}{{button_primary_example}}{% endhighlight %} </p>
</div> <p class="field">
</div> <a class="button is-success">Button</a>
<div class="columns"> </p>
<div class="column"> <p class="field">
<div class="content"> <a class="button is-warning">Button</a>
<p>You can use one of the <strong>6 main colors</strong>:</p> </p>
<ul> <p class="field">
<li><code>is-primary</code></li> <a class="button is-danger">Button</a>
<li><code>is-link</code></li> </p>
<li><code>is-info</code></li> </div>
<li><code>is-success</code></li> <div class="column is-half">
<li><code>is-warning</code></li> <div class="highlight-full">
<li><code>is-danger</code></li>
</ul>
</div>
</div>
<div class="column">
<p class="field">
<a class="button is-primary">Button</a>
</p>
<p class="field">
<a class="button is-link">Button</a>
</p>
<p class="field">
<a class="button is-info">Button</a>
</p>
<p class="field">
<a class="button is-success">Button</a>
</p>
<p class="field">
<a class="button is-warning">Button</a>
</p>
<p class="field">
<a class="button is-danger">Button</a>
</p>
</div>
<div class="column is-half">
<div class="highlight-full">
{% highlight html %} {% highlight html %}
<a class="button is-primary"> <a class="button is-primary">
Button Button
@ -108,35 +105,36 @@ doc-subtab: syntax
Button Button
</a> </a>
{% endhighlight %} {% endhighlight %}
</div>
</div>
</div> </div>
<div class="columns"> </div>
<div class="column"> </div>
<div class="content">
<p>You can also alter the <strong>size</strong>:</p> <div class="columns">
<ul> <div class="column">
<li><code>is-small</code></li> <div class="content">
<li><code>is-medium</code></li> <p>You can also alter the <strong>size</strong>:</p>
<li><code>is-large</code></li> <ul>
</ul> <li><code>is-small</code></li>
</div> <li><code>is-medium</code></li>
</div> <li><code>is-large</code></li>
<div class="column"> </ul>
<p class="field"> </div>
<a class="button is-small">Button</a> </div>
</p> <div class="column">
<p class="field"> <p class="field">
<a class="button">Button</a> <a class="button is-small">Button</a>
</p> </p>
<p class="field"> <p class="field">
<a class="button is-medium">Button</a> <a class="button">Button</a>
</p> </p>
<p class="field"> <p class="field">
<a class="button is-large">Button</a> <a class="button is-medium">Button</a>
</p> </p>
</div> <p class="field">
<div class="column is-half"> <a class="button is-large">Button</a>
</p>
</div>
<div class="column is-half">
{% highlight html %} {% highlight html %}
<a class="button is-small"> <a class="button is-small">
Button Button
@ -152,30 +150,31 @@ doc-subtab: syntax
</a> </a>
{% endhighlight %} {% endhighlight %}
</div> </div>
</div>
<div class="columns">
<div class="column">
<div class="content">
<p>Or the <strong>style</strong> or <strong>state</strong>:</p>
<ul>
<li><code>is-outlined</code></li>
<li><code>is-loading</code></li>
<li><code>[disabled]</code></li>
</ul>
</div> </div>
<div class="columns"> </div>
<div class="column"> <div class="column">
<div class="content"> <p class="field">
<p>Or the <strong>style</strong> or <strong>state</strong>:</p> <a class="button is-primary is-outlined">Button</a>
<ul> </p>
<li><code>is-outlined</code></li> <p class="field">
<li><code>is-loading</code></li> <a class="button is-primary is-loading">Button</a>
<li><code>[disabled]</code></li> </p>
</ul> <p class="field">
</div> <a class="button is-primary" disabled>Button</a>
</div> </p>
<div class="column"> </div>
<p class="field"> <div class="column is-half">
<a class="button is-primary is-outlined">Button</a>
</p>
<p class="field">
<a class="button is-primary is-loading">Button</a>
</p>
<p class="field">
<a class="button is-primary" disabled>Button</a>
</p>
</div>
<div class="column is-half">
{% highlight html %} {% highlight html %}
<a class="button is-primary is-outlined"> <a class="button is-primary is-outlined">
Button Button
@ -188,6 +187,4 @@ doc-subtab: syntax
</a> </a>
{% endhighlight %} {% endhighlight %}
</div> </div>
</div> </div>
</div>
</section>

436
docs/documentation/modifiers/typography-helpers.html
View File

@ -1,8 +1,14 @@
--- ---
title: Typography helpers title: Typography helpers
subtitle: "Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width"
layout: documentation layout: documentation
doc-tab: modifiers doc-tab: modifiers
doc-subtab: typography-helpers doc-subtab: typography-helpers
breadcrumb:
- home
- documentation
- modifiers
- modifiers-typography-helpers
--- ---
{% assign initial_vars = site.data.variables.utilities.initial-variables.vars %} {% assign initial_vars = site.data.variables.utilities.initial-variables.vars %}
@ -49,56 +55,51 @@ doc-subtab: typography-helpers
</td> </td>
{% endcapture %} {% endcapture %}
{% include subnav/subnav-modifiers.html %} {% include anchor.html name="Size" %}
<section class="section"> <div class="content">
<div class="container"> <p>
<h1 class="title">Typography helpers</h1> There are <strong>{{ sizes | size }} sizes</strong> to choose from:
<h2 class="subtitle"> </p>
Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width </div>
</h2>
{% include anchor.html name="Size" %} <table class="table is-bordered">
<thead>
<tr>
<th>
Class
</th>
<th>
Font-size
</th>
</tr>
</thead>
<tbody>
{% for size in sizes %}
<tr>
{% assign key = 'size-' | append: forloop.index %}
<td><code>is-size-{{ forloop.index }}</code></td>
<td><code>{{ initial_vars[key].value }}</code></td>
</tr>
{% endfor %}
</tbody>
</table>
<div class="content"> {% include anchor.html name="Responsive size" %}
<p>
There are <strong>{{ sizes | size }} sizes</strong> to choose from:
</p>
</div>
<table class="table is-bordered"> <div class="content">
<thead> <p>
<tr> 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.
<th> </p>
Class <p>
</th> For example, here are the modifiers for <code>$size-1</code>:
<th> </p>
Font-size </div>
</th>
</tr>
</thead>
<tbody>
{% for size in sizes %}
<tr>
{% assign key = 'size-' | append: forloop.index %}
<td><code>is-size-{{ forloop.index }}</code></td>
<td><code>{{ initial_vars[key].value }}</code></td>
</tr>
{% endfor %}
</tbody>
</table>
{% include anchor.html name="Responsive size" %} {% include layout/main-close.html %}
<div class="content">
<p>
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.
</p>
<p>
For example, here are the modifiers for <code>$size-1</code>:
</p>
</div>
<div class="container">
<div class="table-container">
<table class="table is-bordered"> <table class="table is-bordered">
{{ thead }} {{ thead }}
<tbody> <tbody>
@ -152,106 +153,114 @@ doc-subtab: typography-helpers
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
</div>
<div class="content"> {% include layout/main-open.html %}
<p>
You can use the same logic for each of the <strong>7 sizes</strong>.
</p>
</div>
{% include anchor.html name="Colors" %} <div class="content">
<p>
You can use the same logic for each of the <strong>7 sizes</strong>.
</p>
</div>
<div class="content"> {% include anchor.html name="Colors" %}
<p>
You can set any element to one of the <strong>9 colors</strong> or <strong>9 shades of grey</strong>:
</p>
</div>
<table class="table is-bordered"> <div class="content">
<thead> <p>
<tr> You can set any element to one of the <strong>9 colors</strong> or <strong>9 shades of grey</strong>:
<th> </p>
Class </div>
</th>
<th>
Color
</th>
</tr>
</thead>
<tbody>
<tr><td><code>has-text-white</code></td><td>{% include color/white.html %}</td></tr>
<tr><td><code>has-text-black</code></td><td>{% include color/black.html %}</td></tr>
<tr><td><code>has-text-light</code></td><td>{% include color/white-ter.html %}</td></tr>
<tr><td><code>has-text-dark</code></td><td>{% include color/grey-darker.html %}</td></tr>
<tr><td><code>has-text-primary</code></td><td>{% include color/turquoise.html %}</td></tr>
<tr><td><code>has-text-info</code></td><td>{% include color/cyan.html %}</td></tr>
<tr><td><code>has-text-link</code></td><td>{% include color/blue.html %}</td></tr>
<tr><td><code>has-text-success</code></td><td>{% include color/green.html %}</td></tr>
<tr><td><code>has-text-warning</code></td><td>{% include color/yellow.html %}</td></tr>
<tr><td><code>has-text-danger</code></td><td>{% include color/red.html %}</td></tr>
<tr><td><code>has-text-black-bis</code></td><td>{% include color/black-bis.html %}</td></tr>
<tr><td><code>has-text-black-ter</code></td><td>{% include color/black-ter.html %}</td></tr>
<tr><td><code>has-text-grey-darker</code></td><td>{% include color/grey-darker.html %}</td></tr>
<tr><td><code>has-text-grey-dark</code></td><td>{% include color/grey-dark.html %}</td></tr>
<tr><td><code>has-text-grey</code></td><td>{% include color/grey.html %}</td></tr>
<tr><td><code>has-text-grey-light</code></td><td>{% include color/grey-light.html %}</td></tr>
<tr><td><code>has-text-grey-lighter</code></td><td>{% include color/grey-lighter.html %}</td></tr>
<tr><td><code>has-text-white-ter</code></td><td>{% include color/white-ter.html %}</td></tr>
<tr><td><code>has-text-white-bis</code></td><td>{% include color/white-bis.html %}</td></tr>
</tbody>
</table>
{% include anchor.html name="Alignment" %} <table class="table is-bordered">
<thead>
<tr>
<th>
Class
</th>
<th>
Color
</th>
</tr>
</thead>
<tbody>
<tr><td><code>has-text-white</code></td><td>{% include color/white.html %}</td></tr>
<tr><td><code>has-text-black</code></td><td>{% include color/black.html %}</td></tr>
<tr><td><code>has-text-light</code></td><td>{% include color/white-ter.html %}</td></tr>
<tr><td><code>has-text-dark</code></td><td>{% include color/grey-darker.html %}</td></tr>
<tr><td><code>has-text-primary</code></td><td>{% include color/turquoise.html %}</td></tr>
<tr><td><code>has-text-info</code></td><td>{% include color/cyan.html %}</td></tr>
<tr><td><code>has-text-link</code></td><td>{% include color/blue.html %}</td></tr>
<tr><td><code>has-text-success</code></td><td>{% include color/green.html %}</td></tr>
<tr><td><code>has-text-warning</code></td><td>{% include color/yellow.html %}</td></tr>
<tr><td><code>has-text-danger</code></td><td>{% include color/red.html %}</td></tr>
<tr><td><code>has-text-black-bis</code></td><td>{% include color/black-bis.html %}</td></tr>
<tr><td><code>has-text-black-ter</code></td><td>{% include color/black-ter.html %}</td></tr>
<tr><td><code>has-text-grey-darker</code></td><td>{% include color/grey-darker.html %}</td></tr>
<tr><td><code>has-text-grey-dark</code></td><td>{% include color/grey-dark.html %}</td></tr>
<tr><td><code>has-text-grey</code></td><td>{% include color/grey.html %}</td></tr>
<tr><td><code>has-text-grey-light</code></td><td>{% include color/grey-light.html %}</td></tr>
<tr><td><code>has-text-grey-lighter</code></td><td>{% include color/grey-lighter.html %}</td></tr>
<tr><td><code>has-text-white-ter</code></td><td>{% include color/white-ter.html %}</td></tr>
<tr><td><code>has-text-white-bis</code></td><td>{% include color/white-bis.html %}</td></tr>
</tbody>
</table>
<div class="content"> {% include anchor.html name="Alignment" %}
<p>
You can align the text with the use of one of <strong>4 alignment helpers</strong>:
</p>
</div>
<table class="table is-bordered"> <div class="content">
<thead> <p>
<tr> You can align the text with the use of one of <strong>4 alignment helpers</strong>:
<th> </p>
Class </div>
</th>
<th>
Alignment
</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>has-text-centered</code></td>
<td>Makes the text <strong>centered</strong></td>
</tr>
<tr>
<td><code>has-text-justified</code></td>
<td>Makes the text <strong>justified</strong></td>
</tr>
<tr>
<td><code>has-text-left</code></td>
<td>Makes the text aligned to the <strong>left</strong></td>
</tr>
<tr>
<td><code>has-text-right</code></td>
<td>Makes the text aligned to the <strong>right</strong></td>
</tr>
</tbody>
</table>
{% include anchor.html name="Responsive Alignment" %} <table class="table is-bordered">
<thead>
<tr>
<th>
Class
</th>
<th>
Alignment
</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>has-text-centered</code></td>
<td>Makes the text <strong>centered</strong></td>
</tr>
<tr>
<td><code>has-text-justified</code></td>
<td>Makes the text <strong>justified</strong></td>
</tr>
<tr>
<td><code>has-text-left</code></td>
<td>Makes the text aligned to the <strong>left</strong></td>
</tr>
<tr>
<td><code>has-text-right</code></td>
<td>Makes the text aligned to the <strong>right</strong></td>
</tr>
</tbody>
</table>
<div class="content"> {% include anchor.html name="Responsive Alignment" %}
<p>
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.
</p>
<p> <div class="content">
For example, here are the modifiers for <code>has-text-left</code>: <p>
</p> 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.
</div> </p>
<p>
For example, here are the modifiers for <code>has-text-left</code>:
</p>
</div>
{% include layout/main-close.html %}
<div class="container">
<div class="table-container">
<table class="table is-bordered"> <table class="table is-bordered">
{{ thead }} {{ thead }}
<tbody> <tbody>
@ -329,84 +338,85 @@ doc-subtab: typography-helpers
</tr> </tr>
</tbody> </tbody>
</table> </table>
{% include anchor.html name="Text transformation" %}
<div class="content">
<p>
You can transform the text with the use of one of <strong>4 text transformation helpers</strong>:
</p>
</div>
<table class="table is-bordered">
<thead>
<tr>
<th>
Class
</th>
<th>
Transformation
</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>is-capitalized</code></td>
<td>Transforms <strong>the first character</strong> of each word to <strong>uppercase</strong></td>
</tr>
<tr>
<td><code>is-lowercase</code></td>
<td>Transforms <strong>all characters</strong> to <strong>lowercase</strong></td>
</tr>
<tr>
<td><code>is-uppercase</code></td>
<td>Transforms <strong>all characters</strong> to <strong>uppercase</strong></td>
</tr>
<tr>
<td><code>is-italic</code></td>
<td>Transforms <strong>all characters</strong> to <strong>italic</strong></td>
</tr>
</tbody>
</table>
{% include anchor.html name="Text weight" %}
<div class="content">
<p>
You can transform the text weight with the use of one of <strong>4 text weight helpers</strong>:
</p>
</div>
<table class="table is-bordered">
<thead>
<tr>
<th>
Class
</th>
<th>
Weight
</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>has-text-weight-light</code></td>
<td>Transforms text weight to <strong>light</strong></td>
</tr>
<tr>
<td><code>has-text-weight-normal</code></td>
<td>Transforms text weight to <strong>normal</strong></td>
</tr>
<tr>
<td><code>has-text-weight-semibold</code></td>
<td>Transforms text weight to <strong>semi-bold</strong></td>
</tr>
<tr>
<td><code>has-text-weight-bold</code></td>
<td>Transforms text weight to <strong>bold</strong></td>
</tr>
</tbody>
</table>
</div> </div>
</section> </div>
{% include layout/main-open.html %}
{% include anchor.html name="Text transformation" %}
<div class="content">
<p>
You can transform the text with the use of one of <strong>4 text transformation helpers</strong>:
</p>
</div>
<table class="table is-bordered">
<thead>
<tr>
<th>
Class
</th>
<th>
Transformation
</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>is-capitalized</code></td>
<td>Transforms <strong>the first character</strong> of each word to <strong>uppercase</strong></td>
</tr>
<tr>
<td><code>is-lowercase</code></td>
<td>Transforms <strong>all characters</strong> to <strong>lowercase</strong></td>
</tr>
<tr>
<td><code>is-uppercase</code></td>
<td>Transforms <strong>all characters</strong> to <strong>uppercase</strong></td>
</tr>
<tr>
<td><code>is-italic</code></td>
<td>Transforms <strong>all characters</strong> to <strong>italic</strong></td>
</tr>
</tbody>
</table>
{% include anchor.html name="Text weight" %}
<div class="content">
<p>
You can transform the text weight with the use of one of <strong>4 text weight helpers</strong>:
</p>
</div>
<table class="table is-bordered">
<thead>
<tr>
<th>
Class
</th>
<th>
Weight
</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>has-text-weight-light</code></td>
<td>Transforms text weight to <strong>light</strong></td>
</tr>
<tr>
<td><code>has-text-weight-normal</code></td>
<td>Transforms text weight to <strong>normal</strong></td>
</tr>
<tr>
<td><code>has-text-weight-semibold</code></td>
<td>Transforms text weight to <strong>semi-bold</strong></td>
</tr>
<tr>
<td><code>has-text-weight-bold</code></td>
<td>Transforms text weight to <strong>bold</strong></td>
</tr>
</tbody>
</table>