"name": "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": {
"name": "Columns",
"path": "/documentation/columns"
},
"order": {
"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"],
"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"]
// Lead
.bd-lead
- // border: 1px solid lightskyblue
position: relative
.bd-breadcrumb
padding-bottom: $main-spacing
.subtitle
color: $text-light
+ max-width: 21em
strong
color: currentColor
#meta
margin-top: -0.5rem
+.bd-content
+ hr:first-child
+ display: none
+ & + .bd-anchor-title
+ padding-top: 0
+
// Side
.bd-side,
.bd-side-background
background-color: $white-bis
- // border: 1px solid coral
.bd-side
position: relative
.bd-lead,
.bd-side
padding: 1.5rem
+ .bd-header-carbon
+ margin-top: 1.5rem
+mobile
.bd-side-background
overflow: hidden
flex-grow: 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
display: flex
.bd-side
.bd-lead
margin-left: -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
padding: 3rem 0 3rem 1.5rem
.bd-header .subtitle {
color: #7a7a7a;
+ max-width: 21em;
}
.bd-header .subtitle strong {
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-background {
background-color: #fafafa;
.bd-side {
padding: 1.5rem;
}
+ .bd-header-carbon {
+ margin-top: 1.5rem;
+ }
}
@media screen and (max-width: 768px) {
flex-grow: 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 {
display: flex;
}
margin-left: -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 {
padding: 3rem 0 3rem 1.5rem;
}
---
title: Color helpers
+subtitle: "Change the <strong>color</strong> of the text and/or background"
layout: documentation
doc-tab: modifiers
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="container">
- <h1 class="title">Color helpers</h1>
- <h2 class="subtitle">
- Change the <strong>color</strong> of the text and/or background
- </h2>
+<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 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">
- <p>
- You can set any element to one of the <strong>9 colors</strong> or <strong>9 shades of grey</strong>:
- </p>
- </div>
+{% include anchor.html name="Background 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>
+{% include elements/new-tag.html version="0.6.3" %}
- {% 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" %}
-
- <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>
-
- <table class="table is-bordered">
- <thead>
- <tr>
- <th>
- Class
- </th>
- <th>
- Background color
- </th>
- </tr>
- </thead>
- <tbody>
- <tr><td><code>has-background-white</code></td><td>{% include color/white.html %}</td></tr>
- <tr><td><code>has-background-black</code></td><td>{% include color/black.html %}</td></tr>
- <tr><td><code>has-background-light</code></td><td>{% include color/white-ter.html %}</td></tr>
- <tr><td><code>has-background-dark</code></td><td>{% include color/grey-darker.html %}</td></tr>
- <tr><td><code>has-background-primary</code></td><td>{% include color/turquoise.html %}</td></tr>
- <tr><td><code>has-background-info</code></td><td>{% include color/cyan.html %}</td></tr>
- <tr><td><code>has-background-link</code></td><td>{% include color/blue.html %}</td></tr>
- <tr><td><code>has-background-success</code></td><td>{% include color/green.html %}</td></tr>
- <tr><td><code>has-background-warning</code></td><td>{% include color/yellow.html %}</td></tr>
- <tr><td><code>has-background-danger</code></td><td>{% include color/red.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-black-ter</code></td><td>{% include color/black-ter.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-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>
+<table class="table is-bordered">
+ <thead>
+ <tr>
+ <th>
+ Class
+ </th>
+ <th>
+ Background color
+ </th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr><td><code>has-background-white</code></td><td>{% include color/white.html %}</td></tr>
+ <tr><td><code>has-background-black</code></td><td>{% include color/black.html %}</td></tr>
+ <tr><td><code>has-background-light</code></td><td>{% include color/white-ter.html %}</td></tr>
+ <tr><td><code>has-background-dark</code></td><td>{% include color/grey-darker.html %}</td></tr>
+ <tr><td><code>has-background-primary</code></td><td>{% include color/turquoise.html %}</td></tr>
+ <tr><td><code>has-background-info</code></td><td>{% include color/cyan.html %}</td></tr>
+ <tr><td><code>has-background-link</code></td><td>{% include color/blue.html %}</td></tr>
+ <tr><td><code>has-background-success</code></td><td>{% include color/green.html %}</td></tr>
+ <tr><td><code>has-background-warning</code></td><td>{% include color/yellow.html %}</td></tr>
+ <tr><td><code>has-background-danger</code></td><td>{% include color/red.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-black-ter</code></td><td>{% include color/black-ter.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-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>
---
title: Helpers
+subtitle: "You can apply <strong>helper classes</strong> to almost any element, in order to alter its style."
layout: documentation
doc-tab: modifiers
doc-subtab: helpers
+breadcrumb:
+- home
+- documentation
+- modifiers
+- modifiers-helpers
---
-{% include subnav/subnav-modifiers.html %}
-
-<section class="section">
- <div class="container">
- <h1 class="title">Helpers</h1>
- <h2 class="subtitle">You can apply <strong>helper classes</strong> to almost any element, in order to alter its style.</h2>
- <hr>
- <table class="table is-bordered">
- <tbody>
- <tr>
- <th rowspan="3">Float</th>
- <td><code>is-clearfix</code></td>
- <td>Fixes an element's floating children</td>
- </tr>
- <tr>
- <td><code>is-pulled-left</code></td>
- <td>Moves an element to the left</td>
- </tr>
- <tr>
- <td><code>is-pulled-right</code></td>
- <td>Moves an element to the right</td>
- </tr>
- <tr>
- <th rowspan="2">Spacing</th>
- <td><code>is-marginless</code></td>
- <td>Removes any <strong>margin</strong></td>
- </tr>
- <tr>
- <td><code>is-paddingless</code></td>
- <td>Removes any <strong>padding</strong></td>
- </tr>
- <tr>
- <th rowspan="6">Other</th>
- <td><code>is-overlay</code></td>
- <td>Completely covers the first positioned parent</td>
- </tr>
- <td><code>is-clipped</code></td>
- <td>Adds overflow <strong>hidden</strong></td>
- </tr>
- <tr>
- <td><code>is-radiusless</code></td>
- <td>Removes any <strong>radius</strong></td>
- </tr>
- <tr>
- <td><code>is-shadowless</code></td>
- <td>Removes any <strong>shadow</strong></td>
- </tr>
- <tr>
- <td><code>is-unselectable</code></td>
- <td>Prevents the text from being <strong>selectable</strong></td>
- </tr>
- <tr>
- <td><code>is-invisible</code></td>
- <td>Adds visibility <strong>hidden</strong></td>
- </tr>
- </tbody>
- </table>
- </div>
-</section>
+<table class="table is-bordered">
+ <tbody>
+ <tr>
+ <th rowspan="3">Float</th>
+ <td><code>is-clearfix</code></td>
+ <td>Fixes an element's floating children</td>
+ </tr>
+ <tr>
+ <td><code>is-pulled-left</code></td>
+ <td>Moves an element to the left</td>
+ </tr>
+ <tr>
+ <td><code>is-pulled-right</code></td>
+ <td>Moves an element to the right</td>
+ </tr>
+ <tr>
+ <th rowspan="2">Spacing</th>
+ <td><code>is-marginless</code></td>
+ <td>Removes any <strong>margin</strong></td>
+ </tr>
+ <tr>
+ <td><code>is-paddingless</code></td>
+ <td>Removes any <strong>padding</strong></td>
+ </tr>
+ <tr>
+ <th rowspan="6">Other</th>
+ <td><code>is-overlay</code></td>
+ <td>Completely covers the first positioned parent</td>
+ </tr>
+ <td><code>is-clipped</code></td>
+ <td>Adds overflow <strong>hidden</strong></td>
+ </tr>
+ <tr>
+ <td><code>is-radiusless</code></td>
+ <td>Removes any <strong>radius</strong></td>
+ </tr>
+ <tr>
+ <td><code>is-shadowless</code></td>
+ <td>Removes any <strong>shadow</strong></td>
+ </tr>
+ <tr>
+ <td><code>is-unselectable</code></td>
+ <td>Prevents the text from being <strong>selectable</strong></td>
+ </tr>
+ <tr>
+ <td><code>is-invisible</code></td>
+ <td>Adds visibility <strong>hidden</strong></td>
+ </tr>
+ </tbody>
+</table>
---
title: Responsive helpers
+subtitle: "<strong>Show/hide content</strong> depending on the width of the viewport"
layout: documentation
doc-tab: modifiers
doc-subtab: responsive-helpers
+breadcrumb:
+- home
+- documentation
+- modifiers
+- modifiers-responsive-helpers
---
{% capture thead %}
</td>
{% endcapture %}
-{% include subnav/subnav-modifiers.html %}
+{% include anchor.html name="Show" %}
-<section class="section">
- <div class="container">
- <h1 class="title">Responsive helpers</h1>
- <h2 class="subtitle"><strong>Show/hide content</strong> depending on the width of the viewport</h2>
+<div class="content">
+ <p>
+ You can use one of the following <code>display</code> classes:
+ </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" %}
-
- <div class="content">
- <p>
- You can use one of the following <code>display</code> classes:
- </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>
-
- <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>
+<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>
- 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>
- </div>
+<div class="content">
+ <p>
+ 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>
+</div>
- {% include anchor.html name="Hide" %}
+{% include anchor.html name="Hide" %}
- <table class="table is-bordered">
- {{ thead }}
- <tbody>
- <tr>
- <td class="is-narrow">
- <code>is-hidden-mobile</code>
- </td>
- {{ hidden }}
- {{ visible }}
- {{ visible }}
- {{ visible }}
- {{ visible }}
- </tr>
- <tr>
- <td class="is-narrow">
- <code>is-hidden-tablet-only</code>
- </td>
- {{ visible }}
- {{ hidden }}
- {{ visible }}
- {{ visible }}
- {{ visible }}
- </tr>
- <tr>
- <td class="is-narrow">
- <code>is-hidden-desktop-only</code>
- </td>
- {{ visible }}
- {{ visible }}
- {{ hidden }}
- {{ visible }}
- {{ visible }}
- </tr>
- <tr>
- <td class="is-narrow">
- <code>is-hidden-widescreen-only</code>
- </td>
- {{ visible }}
- {{ visible }}
- {{ visible }}
- {{ hidden }}
- {{ visible }}
- </tr>
- <tr>
- <th colspan="5">
- <p>Classes to hide <strong>up to</strong> or <strong>from</strong> a specific breakpoint</p>
- </th>
- </tr>
- <tr>
- <td class="is-narrow">
- <code>is-hidden-touch</code>
- </td>
- {{ hidden }}
- {{ hidden }}
- {{ visible }}
- {{ visible }}
- {{ visible }}
- </tr>
- <tr>
- <td class="is-narrow">
- <code>is-hidden-tablet</code>
- </td>
- {{ visible }}
- {{ hidden }}
- {{ hidden }}
- {{ hidden }}
- {{ hidden }}
- </tr>
- <tr>
- <td class="is-narrow">
- <code>is-hidden-desktop</code>
- </td>
- {{ visible }}
- {{ visible }}
- {{ hidden }}
- {{ hidden }}
- {{ hidden }}
- </tr>
- <tr>
- <td class="is-narrow">
- <code>is-hidden-widescreen</code>
- </td>
- {{ visible }}
- {{ visible }}
- {{ visible }}
- {{ hidden }}
- {{ hidden }}
- </tr>
- <tr>
- <td class="is-narrow">
- <code>is-hidden-fullhd</code>
- </td>
- {{ visible }}
- {{ visible }}
- {{ visible }}
- {{ visible }}
- {{ hidden }}
- </tr>
- </tbody>
- </table>
- </div>
-</section>
+<table class="table is-bordered">
+ {{ thead }}
+ <tbody>
+ <tr>
+ <td class="is-narrow">
+ <code>is-hidden-mobile</code>
+ </td>
+ {{ hidden }}
+ {{ visible }}
+ {{ visible }}
+ {{ visible }}
+ {{ visible }}
+ </tr>
+ <tr>
+ <td class="is-narrow">
+ <code>is-hidden-tablet-only</code>
+ </td>
+ {{ visible }}
+ {{ hidden }}
+ {{ visible }}
+ {{ visible }}
+ {{ visible }}
+ </tr>
+ <tr>
+ <td class="is-narrow">
+ <code>is-hidden-desktop-only</code>
+ </td>
+ {{ visible }}
+ {{ visible }}
+ {{ hidden }}
+ {{ visible }}
+ {{ visible }}
+ </tr>
+ <tr>
+ <td class="is-narrow">
+ <code>is-hidden-widescreen-only</code>
+ </td>
+ {{ visible }}
+ {{ visible }}
+ {{ visible }}
+ {{ hidden }}
+ {{ visible }}
+ </tr>
+ <tr>
+ <th colspan="5">
+ <p>Classes to hide <strong>up to</strong> or <strong>from</strong> a specific breakpoint</p>
+ </th>
+ </tr>
+ <tr>
+ <td class="is-narrow">
+ <code>is-hidden-touch</code>
+ </td>
+ {{ hidden }}
+ {{ hidden }}
+ {{ visible }}
+ {{ visible }}
+ {{ visible }}
+ </tr>
+ <tr>
+ <td class="is-narrow">
+ <code>is-hidden-tablet</code>
+ </td>
+ {{ visible }}
+ {{ hidden }}
+ {{ hidden }}
+ {{ hidden }}
+ {{ hidden }}
+ </tr>
+ <tr>
+ <td class="is-narrow">
+ <code>is-hidden-desktop</code>
+ </td>
+ {{ visible }}
+ {{ visible }}
+ {{ hidden }}
+ {{ hidden }}
+ {{ hidden }}
+ </tr>
+ <tr>
+ <td class="is-narrow">
+ <code>is-hidden-widescreen</code>
+ </td>
+ {{ visible }}
+ {{ visible }}
+ {{ visible }}
+ {{ hidden }}
+ {{ hidden }}
+ </tr>
+ <tr>
+ <td class="is-narrow">
+ <code>is-hidden-fullhd</code>
+ </td>
+ {{ visible }}
+ {{ visible }}
+ {{ visible }}
+ {{ visible }}
+ {{ hidden }}
+ </tr>
+ </tbody>
+</table>
---
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
doc-tab: modifiers
doc-subtab: syntax
+breadcrumb:
+- home
+- documentation
+- modifiers
+- modifiers-syntax
---
-{% include subnav/subnav-modifiers.html %}
-
{% capture button_example %}
<a class="button">
Button
</a>
{% endcapture %}
-<section class="section">
- <div class="container">
- <h1 class="title">Modifiers syntax</h1>
- <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>.
- <br>
- They all start with <code>is-</code> or <code>has-</code>.</h2>
- <hr>
- <div class="columns">
- <div class="column">
- <p>Let's start with a simple <strong>button</strong> that uses the <code>"button"</code> CSS class:</p>
- </div>
- <div class="column">
- <p>
- {{button_example}}
- </p>
- </div>
- <div class="column is-half">
- {% highlight html %}{{button_example}}{% endhighlight %}
- </div>
- </div>
- <div class="columns">
- <div class="column">
- <p>By <strong>adding</strong> the <code>"is-primary"</code> CSS class, you can modify the <strong>color</strong>:</p>
- </div>
- <div class="column">
- <p>
- {{button_primary_example}}
- </p>
- </div>
- <div class="column is-half">
- {% highlight html %}{{button_primary_example}}{% endhighlight %}
- </div>
+<div class="columns">
+ <div class="column">
+ <p>Let's start with a simple <strong>button</strong> that uses the <code>"button"</code> CSS class:</p>
+ </div>
+ <div class="column">
+ <p>
+ {{button_example}}
+ </p>
+ </div>
+ <div class="column is-half">
+ {% highlight html %}{{button_example}}{% endhighlight %}
+ </div>
+</div>
+<div class="columns">
+ <div class="column">
+ <p>By <strong>adding</strong> the <code>"is-primary"</code> CSS class, you can modify the <strong>color</strong>:</p>
+ </div>
+ <div class="column">
+ <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 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="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">
+ </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 %}
<a class="button is-primary">
Button
Button
</a>
{% endhighlight %}
- </div>
- </div>
</div>
- <div class="columns">
- <div class="column">
- <div class="content">
- <p>You can also alter the <strong>size</strong>:</p>
- <ul>
- <li><code>is-small</code></li>
- <li><code>is-medium</code></li>
- <li><code>is-large</code></li>
- </ul>
- </div>
- </div>
- <div class="column">
- <p class="field">
- <a class="button is-small">Button</a>
- </p>
- <p class="field">
- <a class="button">Button</a>
- </p>
- <p class="field">
- <a class="button is-medium">Button</a>
- </p>
- <p class="field">
- <a class="button is-large">Button</a>
- </p>
- </div>
- <div class="column is-half">
+ </div>
+</div>
+
+<div class="columns">
+ <div class="column">
+ <div class="content">
+ <p>You can also alter the <strong>size</strong>:</p>
+ <ul>
+ <li><code>is-small</code></li>
+ <li><code>is-medium</code></li>
+ <li><code>is-large</code></li>
+ </ul>
+ </div>
+ </div>
+ <div class="column">
+ <p class="field">
+ <a class="button is-small">Button</a>
+ </p>
+ <p class="field">
+ <a class="button">Button</a>
+ </p>
+ <p class="field">
+ <a class="button is-medium">Button</a>
+ </p>
+ <p class="field">
+ <a class="button is-large">Button</a>
+ </p>
+ </div>
+ <div class="column is-half">
{% highlight html %}
<a class="button is-small">
Button
</a>
{% endhighlight %}
</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 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="column">
- <p class="field">
- <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">
+ </div>
+ <div class="column">
+ <p class="field">
+ <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 %}
<a class="button is-primary is-outlined">
Button
</a>
{% endhighlight %}
</div>
- </div>
- </div>
-</section>
+</div>
---
title: Typography helpers
+subtitle: "Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width"
layout: documentation
doc-tab: modifiers
doc-subtab: typography-helpers
+breadcrumb:
+- home
+- documentation
+- modifiers
+- modifiers-typography-helpers
---
{% assign initial_vars = site.data.variables.utilities.initial-variables.vars %}
</td>
{% endcapture %}
-{% include subnav/subnav-modifiers.html %}
+{% include anchor.html name="Size" %}
-<section class="section">
- <div class="container">
- <h1 class="title">Typography helpers</h1>
- <h2 class="subtitle">
- Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width
- </h2>
+<div class="content">
+ <p>
+ There are <strong>{{ sizes | size }} sizes</strong> to choose from:
+ </p>
+</div>
- {% 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">
- <p>
- There are <strong>{{ sizes | size }} sizes</strong> to choose from:
- </p>
- </div>
+{% include anchor.html name="Responsive 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">
+ <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>
- {% include anchor.html name="Responsive size" %}
-
- <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>
+{% include layout/main-close.html %}
+<div class="container">
+ <div class="table-container">
<table class="table is-bordered">
{{ thead }}
<tbody>
</tr>
</tbody>
</table>
+ </div>
+</div>
- <div class="content">
- <p>
- You can use the same logic for each of the <strong>7 sizes</strong>.
- </p>
- </div>
+{% include layout/main-open.html %}
- {% 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">
- <p>
- You can set any element to one of the <strong>9 colors</strong> or <strong>9 shades of grey</strong>:
- </p>
- </div>
+{% include anchor.html name="Colors" %}
- <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">
+ <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">
+ <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="Alignment" %}
+{% include anchor.html name="Alignment" %}
- You can align the text with the use of one of <strong>4 alignment helpers</strong>:
- </p>
- </div>
+<div class="content">
+ <p>
+ You can align the text with the use of one of <strong>4 alignment helpers</strong>:
+ </p>
+</div>
-
<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>
+<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>
- {% include anchor.html name="Responsive Alignment" %}
+{% include anchor.html name="Responsive Alignment" %}
- 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>
+<div class="content">
+ <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>
- For example, here are the modifiers for <code>has-text-left</code>:
- </p>
- </div>
+ <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">
{{ thead }}
<tbody>
</tr>
</tbody>
</table>
+ </div>
+</div>
- {% include anchor.html name="Text transformation" %}
+{% include layout/main-open.html %}
- <div class="content">
- <p>
- You can transform the text with the use of one of <strong>4 text transformation helpers</strong>:
- </p>
- </div>
+{% include anchor.html name="Text transformation" %}
- <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>
+<div class="content">
+ <p>
+ You can transform the text with the use of one of <strong>4 text transformation helpers</strong>:
+ </p>
+</div>
- {% include anchor.html name="Text weight" %}
+<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>
- <div class="content">
- <p>
- You can transform the text weight with the use of one of <strong>4 text weight helpers</strong>:
- </p>
- </div>
+{% include anchor.html name="Text weight" %}
- <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 class="content">
+ <p>
+ You can transform the text weight with the use of one of <strong>4 text weight helpers</strong>:
+ </p>
+</div>
- </div>
-</section>
+<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>
projects / thirdparty / bulma.git / commitdiff
