mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Add light color helpers
This commit is contained in:
Jeremy Thomas
parent
a2a9564ca9
commit
8c65f02627
1
bulma.sass
vendored
1
bulma.sass
vendored
@ -6,4 +6,5 @@
|
||||
@import "sass/form/_all"
|
||||
@import "sass/components/_all"
|
||||
@import "sass/grid/_all"
|
||||
@import "sass/helpers/_all"
|
||||
@import "sass/layout/_all"
|
||||
|
||||
@ -167,6 +167,41 @@
|
||||
"icon": "font",
|
||||
"path": "/documentation/modifiers/typography-helpers"
|
||||
},
|
||||
"helpers": {
|
||||
"name": "Helpers",
|
||||
"subtitle": "Apply <strong>helper classes</strong> to almost any element, in order to alter their style",
|
||||
"color": "danger",
|
||||
"icon": "medkit",
|
||||
"path": "/documentation/helpers"
|
||||
},
|
||||
"helpers-color": {
|
||||
"name": "Color",
|
||||
"subtitle": "Change the <strong>color</strong> of the text and/or background",
|
||||
"color": "info",
|
||||
"icon": "tint",
|
||||
"path": "/documentation/helpers/color-helpers"
|
||||
},
|
||||
"helpers-typography": {
|
||||
"name": "Typography",
|
||||
"subtitle": "Change the <strong>size</strong>, weight, and other font properties of the text",
|
||||
"color": "grey-dark",
|
||||
"icon": "font",
|
||||
"path": "/documentation/helpers/typography-helpers"
|
||||
},
|
||||
"helpers-spacing": {
|
||||
"name": "Spacing",
|
||||
"subtitle": "Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width",
|
||||
"color": "grey-dark",
|
||||
"icon": "font",
|
||||
"path": "/documentation/helpers/spacing-helpers"
|
||||
},
|
||||
"helpers-visibility": {
|
||||
"name": "Visibility",
|
||||
"subtitle": "<strong>Show/hide content</strong> depending on the width of the viewport",
|
||||
"color": "primary",
|
||||
"icon": "arrows-alt-h",
|
||||
"path": "/documentation/helpers/visibility-helpers"
|
||||
},
|
||||
"columns": {
|
||||
"name": "Columns",
|
||||
"subtitle": "The power of <strong>Flexbox</strong> in a simple interface",
|
||||
@ -581,6 +616,7 @@
|
||||
"overview": ["overview-start", "overview-classes", "overview-modular", "overview-responsiveness", "overview-colors", "overview-functions", "overview-mixins"],
|
||||
"customize": ["customize-concepts", "customize-variables", "customize-node-sass", "customize-sass-cli", "customize-webpack"],
|
||||
"modifiers": ["modifiers-syntax", "modifiers-helpers", "modifiers-responsive-helpers", "modifiers-color-helpers", "modifiers-typography-helpers"],
|
||||
"helpers": ["helpers-color", "helpers-typography", "helpers-visibility", "helpers-spacing"],
|
||||
"columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"],
|
||||
"layout": ["layout-container", "layout-level", "layout-media", "layout-hero", "layout-section", "layout-footer", "layout-tiles"],
|
||||
"form": ["form-general", "form-input", "form-textarea", "form-select", "form-checkbox", "form-radio", "form-file"],
|
||||
|
||||
2
docs/_includes/color/blue-dark.html
Normal file
2
docs/_includes/color/blue-dark.html
Normal file
@ -0,0 +1,2 @@
|
||||
<span class="bd-color" style="background: hsl(217, 71%, 45%);"></span>
|
||||
<code>hsl(217, 71%, 45%)</code>
|
||||
2
docs/_includes/color/blue-light.html
Normal file
2
docs/_includes/color/blue-light.html
Normal file
@ -0,0 +1,2 @@
|
||||
<span class="bd-color" style="background: hsl(219, 70%, 96%);"></span>
|
||||
<code>hsl(219, 70%, 96%)</code>
|
||||
2
docs/_includes/color/cyan-dark.html
Normal file
2
docs/_includes/color/cyan-dark.html
Normal file
@ -0,0 +1,2 @@
|
||||
<span class="bd-color" style="background: hsl(204, 71%, 39%);"></span>
|
||||
<code>hsl(204, 71%, 39%)</code>
|
||||
2
docs/_includes/color/cyan-light.html
Normal file
2
docs/_includes/color/cyan-light.html
Normal file
@ -0,0 +1,2 @@
|
||||
<span class="bd-color" style="background: hsl(206, 70%, 96%);"></span>
|
||||
<code>hsl(206, 70%, 96%)</code>
|
||||
2
docs/_includes/color/green-dark.html
Normal file
2
docs/_includes/color/green-dark.html
Normal file
@ -0,0 +1,2 @@
|
||||
<span class="bd-color" style="background: hsl(141, 53%, 31%);"></span>
|
||||
<code>hsl(141, 53%, 31%)</code>
|
||||
2
docs/_includes/color/green-light.html
Normal file
2
docs/_includes/color/green-light.html
Normal file
@ -0,0 +1,2 @@
|
||||
<span class="bd-color" style="background: hsl(142, 52%, 96%);"></span>
|
||||
<code>hsl(142, 52%, 96%)</code>
|
||||
2
docs/_includes/color/red-dark.html
Normal file
2
docs/_includes/color/red-dark.html
Normal file
@ -0,0 +1,2 @@
|
||||
<span class="bd-color" style="background: hsl(348, 86%, 43%);"></span>
|
||||
<code>hsl(348, 86%, 43%)</code>
|
||||
2
docs/_includes/color/red-light.html
Normal file
2
docs/_includes/color/red-light.html
Normal file
@ -0,0 +1,2 @@
|
||||
<span class="bd-color" style="background: hsl(347, 90%, 96%);"></span>
|
||||
<code>hsl(347, 90%, 96%)</code>
|
||||
2
docs/_includes/color/turquoise-dark.html
Normal file
2
docs/_includes/color/turquoise-dark.html
Normal file
@ -0,0 +1,2 @@
|
||||
<span class="bd-color" style="background: hsl(171, 100%, 29%);"></span>
|
||||
<code>hsl(171, 100%, 29%)</code>
|
||||
2
docs/_includes/color/turquoise-light.html
Normal file
2
docs/_includes/color/turquoise-light.html
Normal file
@ -0,0 +1,2 @@
|
||||
<span class="bd-color" style="background: hsl(171, 100%, 96%);"></span>
|
||||
<code>hsl(171, 100%, 96%)</code>
|
||||
2
docs/_includes/color/yellow-dark.html
Normal file
2
docs/_includes/color/yellow-dark.html
Normal file
@ -0,0 +1,2 @@
|
||||
<span class="bd-color" style="background: hsl(48, 100%, 29%);"></span>
|
||||
<code>hsl(48, 100%, 29%)</code>
|
||||
2
docs/_includes/color/yellow-light.html
Normal file
2
docs/_includes/color/yellow-light.html
Normal file
@ -0,0 +1,2 @@
|
||||
<span class="bd-color" style="background: hsl(48, 100%, 96%);"></span>
|
||||
<code>hsl(48, 100%, 96%)</code>
|
||||
@ -13,8 +13,8 @@
|
||||
</a>
|
||||
<a class="bd-category-name {% if category_id == current_link_id %}is-active{% endif %}" href="{{ site.url }}{{ category_link.path }}">
|
||||
<strong>{{ category_link.name }}</strong>
|
||||
{% if category_link.name == 'Customize' %}
|
||||
<span class="tag bd-mini-tag is-success">
|
||||
{% if category_link.name == 'Helpers' %}
|
||||
<span class="tag bd-mini-tag is-danger">
|
||||
New!
|
||||
</span>
|
||||
{% endif %}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
2
docs/css/bulma-docs.min.css
vendored
2
docs/css/bulma-docs.min.css
vendored
File diff suppressed because one or more lines are too long
12
docs/documentation/helpers.html
Normal file
12
docs/documentation/helpers.html
Normal file
@ -0,0 +1,12 @@
|
||||
---
|
||||
title: Helpers
|
||||
layout: documentation
|
||||
doc-tab: helpers
|
||||
hide_tabs: true
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- helpers
|
||||
---
|
||||
|
||||
{% include components/links.html category_id='helpers' %}
|
||||
203
docs/documentation/helpers/color-helpers.html
Normal file
203
docs/documentation/helpers/color-helpers.html
Normal file
@ -0,0 +1,203 @@
|
||||
---
|
||||
title: Color helpers
|
||||
layout: documentation
|
||||
doc-tab: helpers
|
||||
doc-subtab: helpers-color
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- helpers
|
||||
- helpers-color
|
||||
---
|
||||
|
||||
{% include elements/anchor.html name="Text color" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can set any element to one of the <strong>10 colors</strong> or <strong>9 shades of grey</strong>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
<th>
|
||||
Color
|
||||
</th>
|
||||
<th>
|
||||
Example
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><code>has-text-white</code></td><td>{% include color/white.html %}</td><td class="has-text-white has-background-black">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-black</code></td><td>{% include color/black.html %}</td><td class="has-text-black">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-light</code></td><td>{% include color/white-ter.html %}</td><td class="has-text-light has-background-grey">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-dark</code></td><td>{% include color/grey-darker.html %}</td><td class="has-text-dark">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-primary</code></td><td>{% include color/turquoise.html %}</td><td class="has-text-primary">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-link</code></td><td>{% include color/blue.html %}</td><td class="has-text-link">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-info</code></td><td>{% include color/cyan.html %}</td><td class="has-text-info">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-success</code></td><td>{% include color/green.html %}</td><td class="has-text-success">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-warning</code></td><td>{% include color/yellow.html %}</td><td class="has-text-warning">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-danger</code></td><td>{% include color/red.html %}</td><td class="has-text-danger">Hello Bulma</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
<th>
|
||||
Shade
|
||||
</th>
|
||||
<th>
|
||||
Example
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><code>has-text-black-bis</code></td><td>{% include color/black-bis.html %}</td><td class="has-text-black-bis">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-black-ter</code></td><td>{% include color/black-ter.html %}</td><td class="has-text-black-ter">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-grey-darker</code></td><td>{% include color/grey-darker.html %}</td><td class="has-text-grey-darker">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-grey-dark</code></td><td>{% include color/grey-dark.html %}</td><td class="has-text-grey-dark">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-grey</code></td><td>{% include color/grey.html %}</td><td class="has-text-grey">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-grey-light</code></td><td>{% include color/grey-light.html %}</td><td class="has-text-grey-light">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-grey-lighter</code></td><td>{% include color/grey-lighter.html %}</td><td class="has-text-grey-lighter">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-white-ter</code></td><td>{% include color/white-ter.html %}</td><td class="has-background-black-ter has-text-white-ter">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-white-bis</code></td><td>{% include color/white-bis.html %}</td><td class="has-background-black-bis has-text-white-bis">Hello Bulma</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% include elements/new-tag.html version="0.9.0" %}
|
||||
|
||||
<p class="block">You can use each color in their <strong>light</strong> and <strong>dark versions</strong>. Simply append <code>*-light</code> or <code>*-dark</code>.</p>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
<th>
|
||||
Light/Dark color
|
||||
</th>
|
||||
<th>
|
||||
Example
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><code>has-text-primary-light</code></td><td>{% include color/turquoise-light.html %}</td><td class="has-background-dark has-text-primary-light">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-link-light</code></td><td>{% include color/blue-light.html %}</td><td class="has-background-dark has-text-link-light">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-info-light</code></td><td>{% include color/cyan-light.html %}</td><td class="has-background-dark has-text-info-light">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-success-light</code></td><td>{% include color/green-light.html %}</td><td class="has-background-dark has-text-success-light">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-warning-light</code></td><td>{% include color/yellow-light.html %}</td><td class="has-background-dark has-text-warning-light">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-danger-light</code></td><td>{% include color/red-light.html %}</td><td class="has-background-dark has-text-danger-light">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-primary-dark</code></td><td>{% include color/turquoise-dark.html %}</td><td class="has-text-primary-dark">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-link-dark</code></td><td>{% include color/blue-dark.html %}</td><td class="has-text-link-dark">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-info-dark</code></td><td>{% include color/cyan-dark.html %}</td><td class="has-text-info-dark">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-success-dark</code></td><td>{% include color/green-dark.html %}</td><td class="has-text-success-dark">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-warning-dark</code></td><td>{% include color/yellow-dark.html %}</td><td class="has-text-warning-dark">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-danger-dark</code></td><td>{% include color/red-dark.html %}</td><td class="has-text-danger-dark">Hello Bulma</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% assign vernum = site.data.meta.version | downcase | remove: "." | plus: 0 %}
|
||||
|
||||
{% include elements/anchor.html name="Background color" %}
|
||||
|
||||
{% include elements/new-tag.html version="0.7.0" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can set any element to one of the <strong>10 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-link</code></td><td>{% include color/blue.html %}</td></tr>
|
||||
<tr><td><code>has-background-info</code></td><td>{% include color/cyan.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>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
<th>
|
||||
Background shade
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<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>
|
||||
|
||||
{% include elements/new-tag.html version="0.9.0" %}
|
||||
|
||||
<p class="block">You can use each color in their <strong>light</strong> and <strong>dark versions</strong>. Simply append <code>*-light</code> or <code>*-dark</code>.</p>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
<th>
|
||||
Light/Dark background
|
||||
</th>
|
||||
<th>
|
||||
Example
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><code>has-background-primary-light</code></td><td>{% include color/turquoise-light.html %}</td><td class="has-text-primary has-background-primary-light">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-background-link-light</code></td><td>{% include color/blue-light.html %}</td><td class="has-text-link has-background-link-light">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-background-info-light</code></td><td>{% include color/cyan-light.html %}</td><td class="has-text-info has-background-info-light">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-background-success-light</code></td><td>{% include color/green-light.html %}</td><td class="has-text-success has-background-success-light">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-background-warning-light</code></td><td>{% include color/yellow-light.html %}</td><td class="has-text-warning has-background-warning-light">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-background-danger-light</code></td><td>{% include color/red-light.html %}</td><td class="has-text-danger has-background-danger-light">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-background-primary-dark</code></td><td>{% include color/turquoise-dark.html %}</td><td class="has-text-white has-background-primary-dark">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-background-link-dark</code></td><td>{% include color/blue-dark.html %}</td><td class="has-text-white has-background-link-dark">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-background-info-dark</code></td><td>{% include color/cyan-dark.html %}</td><td class="has-text-white has-background-info-dark">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-background-success-dark</code></td><td>{% include color/green-dark.html %}</td><td class="has-text-white has-background-success-dark">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-background-warning-dark</code></td><td>{% include color/yellow-dark.html %}</td><td class="has-text-white has-background-warning-dark">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-background-danger-dark</code></td><td>{% include color/red-dark.html %}</td><td class="has-text-white has-background-danger-dark">Hello Bulma</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
13
docs/documentation/helpers/spacing-helpers.html
Normal file
13
docs/documentation/helpers/spacing-helpers.html
Normal file
@ -0,0 +1,13 @@
|
||||
---
|
||||
title: Spacing helpers
|
||||
layout: documentation
|
||||
doc-tab: helpers
|
||||
doc-subtab: helpers-spacing
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- helpers
|
||||
- helpers-spacing
|
||||
---
|
||||
|
||||
{% include elements/anchor.html name="Text spacing" %}
|
||||
409
docs/documentation/helpers/typography-helpers.html
Normal file
409
docs/documentation/helpers/typography-helpers.html
Normal file
@ -0,0 +1,409 @@
|
||||
---
|
||||
title: Typography helpers
|
||||
layout: documentation
|
||||
doc-tab: helpers
|
||||
doc-subtab: helpers-typography
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- helpers
|
||||
- helpers-typography
|
||||
---
|
||||
|
||||
{% assign initial_vars = site.data.variables.utilities.initial-variables.by_name %}
|
||||
{% assign sizes = site.data.variables.utilities.derived-variables.by_name['$sizes'].value | split: ' ' %}
|
||||
|
||||
{% capture thead %}
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
{% for breakpoint_hash in site.data.breakpoints %}
|
||||
{% assign breakpoint = breakpoint_hash[1] %}
|
||||
<th>
|
||||
{{ breakpoint.name }}<br>
|
||||
{% if breakpoint.id == 'mobile' %}
|
||||
Up to <code>{{ breakpoint.to }}px</code>
|
||||
{% elsif breakpoint.id == 'fullhd' %}
|
||||
<code>{{ breakpoint.from }}px</code> and above
|
||||
{% else %}
|
||||
Between <code>{{ breakpoint.from }}px</code> and <code>{{ breakpoint.to }}px</code>
|
||||
{% endif %}
|
||||
</th>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture size1 %}
|
||||
<td class="is-narrow">
|
||||
<p class="notification is-primary"><code>{{ initial_vars['$size-1'].value }}</code></p>
|
||||
</td>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture unchanged %}
|
||||
<td class="is-narrow">
|
||||
<p class="notification">unchanged</p>
|
||||
</td>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture left %}
|
||||
<td class="is-narrow">
|
||||
<p class="notification is-primary">left-aligned</p>
|
||||
</td>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/anchor.html name="Size" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
There are <strong>{{ sizes | size }} sizes</strong> to choose from:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
{% include elements/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 need 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="table-container">
|
||||
<table class="table is-bordered">
|
||||
{{ thead }}
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>is-size-1-mobile</code></td>
|
||||
{{ size1 }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-size-1-tablet</code></td>
|
||||
{{ unchanged }}
|
||||
{{ size1 }}
|
||||
{{ size1 }}
|
||||
{{ size1 }}
|
||||
{{ size1 }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-size-1-touch</code></td>
|
||||
{{ size1 }}
|
||||
{{ size1 }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-size-1-desktop</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ size1 }}
|
||||
{{ size1 }}
|
||||
{{ size1 }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-size-1-widescreen</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ size1 }}
|
||||
{{ size1 }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-size-1-fullhd</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ size1 }}
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can use the same logic for each of the <strong>7 sizes</strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Alignment" %}
|
||||
|
||||
<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>
|
||||
|
||||
{% include elements/anchor.html name="Responsive Alignment" %}
|
||||
|
||||
<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>
|
||||
|
||||
<p>
|
||||
For example, here are the modifiers for <code>has-text-left</code>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="table-container">
|
||||
<table class="table is-bordered">
|
||||
{{ thead }}
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>has-text-left-mobile</code></td>
|
||||
{{ left }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-left-tablet</code></td>
|
||||
{{ unchanged }}
|
||||
{{ left }}
|
||||
{{ left }}
|
||||
{{ left }}
|
||||
{{ left }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-left-tablet-only</code></td>
|
||||
{{ unchanged }}
|
||||
{{ left }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-left-touch</code></td>
|
||||
{{ left }}
|
||||
{{ left }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-left-desktop</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ left }}
|
||||
{{ left }}
|
||||
{{ left }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-left-desktop-only</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ left }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-left-widescreen</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ left }}
|
||||
{{ left }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-left-widescreen-only</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ left }}
|
||||
{{ unchanged }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-left-fullhd</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ left }}
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
{% include elements/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 elements/anchor.html name="Text weight" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can transform the text weight with the use of one of <strong>5 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-medium</code></td>
|
||||
<td>Transforms text weight to <strong>medium</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>
|
||||
|
||||
{% include elements/anchor.html name="Font family" %}
|
||||
|
||||
{% include elements/new-tag.html version="0.7.4" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can change the font family with the use of one of <strong>5 font family helpers</strong>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% assign font_families = "sans-serif,monospace,primary,secondary,code" | split: ',' %}
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
<th>
|
||||
Family
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for family in font_families %}
|
||||
<tr>
|
||||
<td><code>is-family-{{ family }}</code></td>
|
||||
<td>Sets font family to <code>$family-{{ family }}</code></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
288
docs/documentation/helpers/visibility-helpers.html
Normal file
288
docs/documentation/helpers/visibility-helpers.html
Normal file
@ -0,0 +1,288 @@
|
||||
---
|
||||
title: Responsive helpers
|
||||
layout: documentation
|
||||
doc-tab: helpers
|
||||
doc-subtab: helpers-visibility
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- helpers
|
||||
- helpers-visibility
|
||||
---
|
||||
|
||||
{% capture thead %}
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
{% for breakpoint_hash in site.data.breakpoints %}
|
||||
{% assign breakpoint = breakpoint_hash[1] %}
|
||||
<th>
|
||||
{{ breakpoint.name }}<br>
|
||||
{% if breakpoint.id == 'mobile' %}
|
||||
Up to <code>{{ breakpoint.to }}px</code>
|
||||
{% elsif breakpoint.id == 'fullhd' %}
|
||||
<code>{{ breakpoint.from }}px</code> and above
|
||||
{% else %}
|
||||
Between <code>{{ breakpoint.from }}px</code> and <code>{{ breakpoint.to }}px</code>
|
||||
{% endif %}
|
||||
</th>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture flex %}
|
||||
<td class="is-narrow has-background-primary-light">
|
||||
<p><strong class="has-text-primary">Flex</strong></p>
|
||||
</td>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture visible %}
|
||||
<td class="is-narrow has-background-primary-light">
|
||||
<p><strong class="has-text-primary">Visible</strong></p>
|
||||
</td>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture hidden %}
|
||||
<td class="is-narrow">
|
||||
<p class="has-text-grey-light">Hidden</p>
|
||||
</td>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture unchanged %}
|
||||
<td class="is-narrow">
|
||||
<p class="has-text-grey-light">Unchanged</p>
|
||||
</td>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/anchor.html name="Show" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can use one of the following <code>display</code> classes:
|
||||
</p>
|
||||
<ul>
|
||||
<li><code>is-block</code></li>
|
||||
<li><code>is-flex</code></li>
|
||||
<li><code>is-inline</code></li>
|
||||
<li><code>is-inline-block</code></li>
|
||||
<li><code>is-inline-flex</code></li>
|
||||
</ul>
|
||||
<p>For example, here's how the <code>is-flex</code> helper works:</p>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<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>
|
||||
|
||||
<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 elements/anchor.html name="Hide" %}
|
||||
|
||||
<div class="table-container">
|
||||
<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>
|
||||
@ -9,95 +9,3 @@ breadcrumb:
|
||||
- modifiers
|
||||
- modifiers-color-helpers
|
||||
---
|
||||
|
||||
{% include elements/anchor.html name="Text 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>
|
||||
|
||||
<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>
|
||||
|
||||
{% assign vernum = site.data.meta.version | downcase | remove: "." | plus: 0 %}
|
||||
|
||||
{% if vernum >= 70 %}
|
||||
|
||||
{% include elements/anchor.html name="Background color" %}
|
||||
|
||||
{% include elements/new-tag.html version="0.7.0" %}
|
||||
|
||||
<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>
|
||||
|
||||
{% endif %}
|
||||
|
||||
@ -10,443 +10,3 @@ breadcrumb:
|
||||
- modifiers-typography-helpers
|
||||
---
|
||||
|
||||
{% assign initial_vars = site.data.variables.utilities.initial-variables.by_name %}
|
||||
{% assign sizes = site.data.variables.utilities.derived-variables.by_name['$sizes'].value | split: ' ' %}
|
||||
|
||||
{% capture thead %}
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
{% for breakpoint_hash in site.data.breakpoints %}
|
||||
{% assign breakpoint = breakpoint_hash[1] %}
|
||||
<th>
|
||||
{{ breakpoint.name }}<br>
|
||||
{% if breakpoint.id == 'mobile' %}
|
||||
Up to <code>{{ breakpoint.to }}px</code>
|
||||
{% elsif breakpoint.id == 'fullhd' %}
|
||||
<code>{{ breakpoint.from }}px</code> and above
|
||||
{% else %}
|
||||
Between <code>{{ breakpoint.from }}px</code> and <code>{{ breakpoint.to }}px</code>
|
||||
{% endif %}
|
||||
</th>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture size1 %}
|
||||
<td class="is-narrow">
|
||||
<p class="notification is-primary"><code>{{ initial_vars['$size-1'].value }}</code></p>
|
||||
</td>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture unchanged %}
|
||||
<td class="is-narrow">
|
||||
<p class="notification">unchanged</p>
|
||||
</td>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture left %}
|
||||
<td class="is-narrow">
|
||||
<p class="notification is-primary">left-aligned</p>
|
||||
</td>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/anchor.html name="Size" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
There are <strong>{{ sizes | size }} sizes</strong> to choose from:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
{% include elements/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 need 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="table-container">
|
||||
<table class="table is-bordered">
|
||||
{{ thead }}
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>is-size-1-mobile</code></td>
|
||||
{{ size1 }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-size-1-tablet</code></td>
|
||||
{{ unchanged }}
|
||||
{{ size1 }}
|
||||
{{ size1 }}
|
||||
{{ size1 }}
|
||||
{{ size1 }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-size-1-touch</code></td>
|
||||
{{ size1 }}
|
||||
{{ size1 }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-size-1-desktop</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ size1 }}
|
||||
{{ size1 }}
|
||||
{{ size1 }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-size-1-widescreen</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ size1 }}
|
||||
{{ size1 }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-size-1-fullhd</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ size1 }}
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can use the same logic for each of the <strong>7 sizes</strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Colors" %}
|
||||
|
||||
<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 elements/anchor.html name="Alignment" %}
|
||||
|
||||
<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>
|
||||
|
||||
{% include elements/anchor.html name="Responsive Alignment" %}
|
||||
|
||||
<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>
|
||||
|
||||
<p>
|
||||
For example, here are the modifiers for <code>has-text-left</code>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="table-container">
|
||||
<table class="table is-bordered">
|
||||
{{ thead }}
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>has-text-left-mobile</code></td>
|
||||
{{ left }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-left-tablet</code></td>
|
||||
{{ unchanged }}
|
||||
{{ left }}
|
||||
{{ left }}
|
||||
{{ left }}
|
||||
{{ left }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-left-tablet-only</code></td>
|
||||
{{ unchanged }}
|
||||
{{ left }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-left-touch</code></td>
|
||||
{{ left }}
|
||||
{{ left }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-left-desktop</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ left }}
|
||||
{{ left }}
|
||||
{{ left }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-left-desktop-only</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ left }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-left-widescreen</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ left }}
|
||||
{{ left }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-left-widescreen-only</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ left }}
|
||||
{{ unchanged }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-left-fullhd</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ left }}
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
{% include elements/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 elements/anchor.html name="Text weight" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can transform the text weight with the use of one of <strong>5 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-medium</code></td>
|
||||
<td>Transforms text weight to <strong>medium</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>
|
||||
|
||||
{% include elements/anchor.html name="Font family" %}
|
||||
|
||||
{% include elements/new-tag.html version="0.7.4" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can change the font family with the use of one of <strong>5 font family helpers</strong>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% assign font_families = "sans-serif,monospace,primary,secondary,code" | split: ',' %}
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
<th>
|
||||
Family
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for family in font_families %}
|
||||
<tr>
|
||||
<td><code>is-family-{{ family }}</code></td>
|
||||
<td>Sets font family to <code>$family-{{ family }}</code></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
@ -2,4 +2,3 @@
|
||||
|
||||
@import "minireset.sass"
|
||||
@import "generic.sass"
|
||||
@import "helpers.sass"
|
||||
|
||||
@ -8,6 +8,27 @@
|
||||
color: bulmaDarken($color, 10%) !important
|
||||
.has-background-#{$name}
|
||||
background-color: $color !important
|
||||
@if length($pair) >= 4
|
||||
$color-light: nth($pair, 3)
|
||||
$color-dark: nth($pair, 4)
|
||||
// Light
|
||||
.has-text-#{$name}-light
|
||||
color: $color-light !important
|
||||
a.has-text-#{$name}-light
|
||||
&:hover,
|
||||
&:focus
|
||||
color: bulmaDarken($color-light, 10%) !important
|
||||
.has-background-#{$name}-light
|
||||
background-color: $color-light !important
|
||||
// Dark
|
||||
.has-text-#{$name}-dark
|
||||
color: $color-dark !important
|
||||
a.has-text-#{$name}-dark
|
||||
&:hover,
|
||||
&:focus
|
||||
color: bulmaLighten($color-dark, 10%) !important
|
||||
.has-background-#{$name}-dark
|
||||
background-color: $color-dark !important
|
||||
|
||||
@each $name, $shade in $shades
|
||||
.has-text-#{$name}
|
||||
|
||||
@ -108,3 +108,8 @@
|
||||
@if type-of($color) != 'color'
|
||||
@return $color
|
||||
@return darken($color, $amount)
|
||||
|
||||
@function bulmaLighten($color, $amount)
|
||||
@if type-of($color) != 'color'
|
||||
@return $color
|
||||
@return lighten($color, $amount)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user