mirror of
https://github.com/jgthms/bulma.git
synced 2025-01-09 15:44:25 +00:00
Add modifiers links
This commit is contained in:
Jeremy Thomas
parent
5d4e3582f0
commit
425860f56f
@ -8,6 +8,30 @@
|
||||
"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"
|
||||
@ -191,6 +215,7 @@
|
||||
},
|
||||
"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"]
|
||||
|
||||
@ -7,7 +7,6 @@ $main-spacing: 2.5rem
|
||||
// Lead
|
||||
|
||||
.bd-lead
|
||||
// border: 1px solid lightskyblue
|
||||
position: relative
|
||||
|
||||
.bd-breadcrumb
|
||||
@ -39,17 +38,23 @@ $main-spacing: 2.5rem
|
||||
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
|
||||
@ -65,6 +70,8 @@ $main-spacing: 2.5rem
|
||||
.bd-lead,
|
||||
.bd-side
|
||||
padding: 1.5rem
|
||||
.bd-header-carbon
|
||||
margin-top: 1.5rem
|
||||
|
||||
+mobile
|
||||
.bd-side-background
|
||||
@ -78,16 +85,6 @@ $main-spacing: 2.5rem
|
||||
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
|
||||
@ -99,5 +96,15 @@ $main-spacing: 2.5rem
|
||||
.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
|
||||
|
||||
@ -9534,6 +9534,7 @@ label.panel-block:hover {
|
||||
|
||||
.bd-header .subtitle {
|
||||
color: #7a7a7a;
|
||||
max-width: 21em;
|
||||
}
|
||||
|
||||
.bd-header .subtitle strong {
|
||||
@ -9544,6 +9545,14 @@ label.panel-block:hover {
|
||||
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;
|
||||
@ -9566,6 +9575,9 @@ label.panel-block:hover {
|
||||
.bd-side {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
.bd-header-carbon {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
@ -9584,19 +9596,6 @@ label.panel-block:hover {
|
||||
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;
|
||||
}
|
||||
@ -9613,6 +9612,19 @@ label.panel-block:hover {
|
||||
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;
|
||||
}
|
||||
|
||||
@ -1,28 +1,25 @@
|
||||
---
|
||||
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>
|
||||
|
||||
{% include anchor.html name="Text color" %}
|
||||
|
||||
<div class="content">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
@ -54,19 +51,19 @@ doc-subtab: color-helpers
|
||||
<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>
|
||||
</table>
|
||||
|
||||
{% include anchor.html name="Background color" %}
|
||||
{% include anchor.html name="Background color" %}
|
||||
|
||||
{% include elements/new-tag.html version="0.6.3" %}
|
||||
{% include elements/new-tag.html version="0.6.3" %}
|
||||
|
||||
<div class="content">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
@ -98,7 +95,4 @@ doc-subtab: color-helpers
|
||||
<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>
|
||||
|
||||
@ -1,18 +1,17 @@
|
||||
---
|
||||
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">
|
||||
<table class="table is-bordered">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th rowspan="3">Float</th>
|
||||
@ -61,6 +60,4 @@ doc-subtab: helpers
|
||||
<td>Adds visibility <strong>hidden</strong></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</table>
|
||||
|
||||
@ -1,8 +1,14 @@
|
||||
---
|
||||
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 %}
|
||||
@ -52,16 +58,9 @@ doc-subtab: responsive-helpers
|
||||
</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>
|
||||
|
||||
{% include anchor.html name="Show" %}
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can use one of the following <code>display</code> classes:
|
||||
</p>
|
||||
@ -73,9 +72,9 @@ doc-subtab: responsive-helpers
|
||||
<li><code>inline-flex</code></li>
|
||||
</ul>
|
||||
<p>For example, here's how the <code>is-flex</code> helper works:</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<table class="table is-bordered">
|
||||
{{ thead }}
|
||||
<tbody>
|
||||
<tr>
|
||||
@ -174,17 +173,17 @@ doc-subtab: responsive-helpers
|
||||
{{ flex }}
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</table>
|
||||
|
||||
<div class="content">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Hide" %}
|
||||
{% include anchor.html name="Hide" %}
|
||||
|
||||
<table class="table is-bordered">
|
||||
<table class="table is-bordered">
|
||||
{{ thead }}
|
||||
<tbody>
|
||||
<tr>
|
||||
@ -283,6 +282,4 @@ doc-subtab: responsive-helpers
|
||||
{{ hidden }}
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</table>
|
||||
|
||||
@ -1,12 +1,16 @@
|
||||
---
|
||||
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
|
||||
@ -19,14 +23,7 @@ doc-subtab: syntax
|
||||
</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="columns">
|
||||
<div class="column">
|
||||
<p>Let's start with a simple <strong>button</strong> that uses the <code>"button"</code> CSS class:</p>
|
||||
</div>
|
||||
@ -38,8 +35,8 @@ doc-subtab: syntax
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{button_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
</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>
|
||||
@ -51,8 +48,8 @@ doc-subtab: syntax
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{button_primary_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>You can use one of the <strong>6 main colors</strong>:</p>
|
||||
@ -110,8 +107,9 @@ doc-subtab: syntax
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>You can also alter the <strong>size</strong>:</p>
|
||||
@ -152,8 +150,9 @@ doc-subtab: syntax
|
||||
</a>
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>Or the <strong>style</strong> or <strong>state</strong>:</p>
|
||||
@ -188,6 +187,4 @@ doc-subtab: syntax
|
||||
</a>
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@ -1,8 +1,14 @@
|
||||
---
|
||||
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 %}
|
||||
@ -49,24 +55,15 @@ doc-subtab: typography-helpers
|
||||
</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>
|
||||
|
||||
{% include anchor.html name="Size" %}
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>
|
||||
There are <strong>{{ sizes | size }} sizes</strong> to choose from:
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
@ -86,19 +83,23 @@ doc-subtab: typography-helpers
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</table>
|
||||
|
||||
{% include anchor.html name="Responsive size" %}
|
||||
{% include anchor.html name="Responsive size" %}
|
||||
|
||||
<div class="content">
|
||||
<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>
|
||||
|
||||
{% include layout/main-close.html %}
|
||||
|
||||
<div class="container">
|
||||
<div class="table-container">
|
||||
<table class="table is-bordered">
|
||||
{{ thead }}
|
||||
<tbody>
|
||||
@ -152,22 +153,26 @@ doc-subtab: typography-helpers
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
{% include layout/main-open.html %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can use the same logic for each of the <strong>7 sizes</strong>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Colors" %}
|
||||
{% include anchor.html name="Colors" %}
|
||||
|
||||
<div class="content">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
@ -199,17 +204,17 @@ doc-subtab: typography-helpers
|
||||
<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>
|
||||
</table>
|
||||
|
||||
{% include anchor.html name="Alignment" %}
|
||||
{% include anchor.html name="Alignment" %}
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can align the text with the use of one of <strong>4 alignment helpers</strong>:
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
@ -238,11 +243,11 @@ doc-subtab: typography-helpers
|
||||
<td>Makes the text aligned to the <strong>right</strong></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</table>
|
||||
|
||||
{% include anchor.html name="Responsive Alignment" %}
|
||||
{% include anchor.html name="Responsive Alignment" %}
|
||||
|
||||
<div class="content">
|
||||
<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>
|
||||
@ -250,8 +255,12 @@ doc-subtab: typography-helpers
|
||||
<p>
|
||||
For example, here are the modifiers for <code>has-text-left</code>:
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include layout/main-close.html %}
|
||||
|
||||
<div class="container">
|
||||
<div class="table-container">
|
||||
<table class="table is-bordered">
|
||||
{{ thead }}
|
||||
<tbody>
|
||||
@ -329,16 +338,20 @@ doc-subtab: typography-helpers
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Text transformation" %}
|
||||
{% include layout/main-open.html %}
|
||||
|
||||
<div class="content">
|
||||
{% 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>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
@ -367,17 +380,17 @@ doc-subtab: typography-helpers
|
||||
<td>Transforms <strong>all characters</strong> to <strong>italic</strong></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</table>
|
||||
|
||||
{% include anchor.html name="Text weight" %}
|
||||
{% include anchor.html name="Text weight" %}
|
||||
|
||||
<div class="content">
|
||||
<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>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
@ -406,7 +419,4 @@ doc-subtab: typography-helpers
|
||||
<td>Transforms text weight to <strong>bold</strong></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</table>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user