From 425860f56f29781c33fbd93d602731fb13563a20 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Mon, 9 Apr 2018 17:11:24 +0100 Subject: [PATCH] Add modifiers links --- docs/_data/links.json | 25 + docs/_sass/main.sass | 31 +- docs/css/bulma-docs.css | 38 +- .../modifiers/color-helpers.html | 176 ++++--- docs/documentation/modifiers/helpers.html | 115 +++-- .../modifiers/responsive-helpers.html | 455 +++++++++--------- docs/documentation/modifiers/syntax.html | 245 +++++----- .../modifiers/typography-helpers.html | 436 +++++++++-------- 8 files changed, 780 insertions(+), 741 deletions(-) diff --git a/docs/_data/links.json b/docs/_data/links.json index 1c5c1eec..6c2997d2 100644 --- a/docs/_data/links.json +++ b/docs/_data/links.json @@ -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"] diff --git a/docs/_sass/main.sass b/docs/_sass/main.sass index db12616b..fe17a2ea 100644 --- a/docs/_sass/main.sass +++ b/docs/_sass/main.sass @@ -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 diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 44404ce9..83f84e47 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -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; } diff --git a/docs/documentation/modifiers/color-helpers.html b/docs/documentation/modifiers/color-helpers.html index 48c3d29d..b5a9c6ed 100644 --- a/docs/documentation/modifiers/color-helpers.html +++ b/docs/documentation/modifiers/color-helpers.html @@ -1,104 +1,98 @@ --- title: Color helpers +subtitle: "Change the color 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" %} -
-
-

Color helpers

-

- Change the color of the text and/or background -

+
+

+ You can set any element to one of the 9 colors or 9 shades of grey: +

+
- {% include anchor.html name="Text color" %} + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Class + + Color +
has-text-white{% include color/white.html %}
has-text-black{% include color/black.html %}
has-text-light{% include color/white-ter.html %}
has-text-dark{% include color/grey-darker.html %}
has-text-primary{% include color/turquoise.html %}
has-text-info{% include color/cyan.html %}
has-text-link{% include color/blue.html %}
has-text-success{% include color/green.html %}
has-text-warning{% include color/yellow.html %}
has-text-danger{% include color/red.html %}
has-text-black-bis{% include color/black-bis.html %}
has-text-black-ter{% include color/black-ter.html %}
has-text-grey-darker{% include color/grey-darker.html %}
has-text-grey-dark{% include color/grey-dark.html %}
has-text-grey{% include color/grey.html %}
has-text-grey-light{% include color/grey-light.html %}
has-text-grey-lighter{% include color/grey-lighter.html %}
has-text-white-ter{% include color/white-ter.html %}
has-text-white-bis{% include color/white-bis.html %}
-
-

- You can set any element to one of the 9 colors or 9 shades of grey: -

-
+{% include anchor.html name="Background color" %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Class - - Color -
has-text-white{% include color/white.html %}
has-text-black{% include color/black.html %}
has-text-light{% include color/white-ter.html %}
has-text-dark{% include color/grey-darker.html %}
has-text-primary{% include color/turquoise.html %}
has-text-info{% include color/cyan.html %}
has-text-link{% include color/blue.html %}
has-text-success{% include color/green.html %}
has-text-warning{% include color/yellow.html %}
has-text-danger{% include color/red.html %}
has-text-black-bis{% include color/black-bis.html %}
has-text-black-ter{% include color/black-ter.html %}
has-text-grey-darker{% include color/grey-darker.html %}
has-text-grey-dark{% include color/grey-dark.html %}
has-text-grey{% include color/grey.html %}
has-text-grey-light{% include color/grey-light.html %}
has-text-grey-lighter{% include color/grey-lighter.html %}
has-text-white-ter{% include color/white-ter.html %}
has-text-white-bis{% include color/white-bis.html %}
+{% include elements/new-tag.html version="0.6.3" %} - {% include anchor.html name="Background color" %} +
+

+ You can set any element to one of the 9 colors or 9 shades of grey: +

+
- {% include elements/new-tag.html version="0.6.3" %} - -
-

- You can set any element to one of the 9 colors or 9 shades of grey: -

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Class - - Background color -
has-background-white{% include color/white.html %}
has-background-black{% include color/black.html %}
has-background-light{% include color/white-ter.html %}
has-background-dark{% include color/grey-darker.html %}
has-background-primary{% include color/turquoise.html %}
has-background-info{% include color/cyan.html %}
has-background-link{% include color/blue.html %}
has-background-success{% include color/green.html %}
has-background-warning{% include color/yellow.html %}
has-background-danger{% include color/red.html %}
has-background-black-bis{% include color/black-bis.html %}
has-background-black-ter{% include color/black-ter.html %}
has-background-grey-darker{% include color/grey-darker.html %}
has-background-grey-dark{% include color/grey-dark.html %}
has-background-grey{% include color/grey.html %}
has-background-grey-light{% include color/grey-light.html %}
has-background-grey-lighter{% include color/grey-lighter.html %}
has-background-white-ter{% include color/white-ter.html %}
has-background-white-bis{% include color/white-bis.html %}
- -
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Class + + Background color +
has-background-white{% include color/white.html %}
has-background-black{% include color/black.html %}
has-background-light{% include color/white-ter.html %}
has-background-dark{% include color/grey-darker.html %}
has-background-primary{% include color/turquoise.html %}
has-background-info{% include color/cyan.html %}
has-background-link{% include color/blue.html %}
has-background-success{% include color/green.html %}
has-background-warning{% include color/yellow.html %}
has-background-danger{% include color/red.html %}
has-background-black-bis{% include color/black-bis.html %}
has-background-black-ter{% include color/black-ter.html %}
has-background-grey-darker{% include color/grey-darker.html %}
has-background-grey-dark{% include color/grey-dark.html %}
has-background-grey{% include color/grey.html %}
has-background-grey-light{% include color/grey-light.html %}
has-background-grey-lighter{% include color/grey-lighter.html %}
has-background-white-ter{% include color/white-ter.html %}
has-background-white-bis{% include color/white-bis.html %}
diff --git a/docs/documentation/modifiers/helpers.html b/docs/documentation/modifiers/helpers.html index 6a6cad71..f829ea7f 100644 --- a/docs/documentation/modifiers/helpers.html +++ b/docs/documentation/modifiers/helpers.html @@ -1,66 +1,63 @@ --- title: Helpers +subtitle: "You can apply helper classes 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 %} - -
-
-

Helpers

-

You can apply helper classes to almost any element, in order to alter its style.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Floatis-clearfixFixes an element's floating children
is-pulled-leftMoves an element to the left
is-pulled-rightMoves an element to the right
Spacingis-marginlessRemoves any margin
is-paddinglessRemoves any padding
Otheris-overlayCompletely covers the first positioned parent
is-clippedAdds overflow hidden
is-radiuslessRemoves any radius
is-shadowlessRemoves any shadow
is-unselectablePrevents the text from being selectable
is-invisibleAdds visibility hidden
-
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Floatis-clearfixFixes an element's floating children
is-pulled-leftMoves an element to the left
is-pulled-rightMoves an element to the right
Spacingis-marginlessRemoves any margin
is-paddinglessRemoves any padding
Otheris-overlayCompletely covers the first positioned parent
is-clippedAdds overflow hidden
is-radiuslessRemoves any radius
is-shadowlessRemoves any shadow
is-unselectablePrevents the text from being selectable
is-invisibleAdds visibility hidden
diff --git a/docs/documentation/modifiers/responsive-helpers.html b/docs/documentation/modifiers/responsive-helpers.html index c6990a60..aae26776 100644 --- a/docs/documentation/modifiers/responsive-helpers.html +++ b/docs/documentation/modifiers/responsive-helpers.html @@ -1,8 +1,14 @@ --- title: Responsive helpers +subtitle: "Show/hide content 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,237 +58,228 @@ doc-subtab: responsive-helpers {% endcapture %} -{% include subnav/subnav-modifiers.html %} +{% include anchor.html name="Show" %} -
-
-

Responsive helpers

-

Show/hide content depending on the width of the viewport

+
+

+ You can use one of the following display classes: +

+
    +
  • block
    • +
  • flex
    • +
  • inline
    • +
  • inline-block
    • +
  • inline-flex
    • +
+

For example, here's how the is-flex helper works:

+
- {% include anchor.html name="Show" %} + + {{ thead }} + + + + {{ flex }} + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + + + + {{ unchanged }} + {{ flex }} + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + + + + {{ unchanged }} + {{ unchanged }} + {{ flex }} + {{ unchanged }} + {{ unchanged }} + + + + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + {{ flex }} + {{ unchanged }} + + + + + + + {{ flex }} + {{ flex }} + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + + + + {{ unchanged }} + {{ flex }} + {{ flex }} + {{ flex }} + {{ flex }} + + + + {{ unchanged }} + {{ unchanged }} + {{ flex }} + {{ flex }} + {{ flex }} + + + + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + {{ flex }} + {{ flex }} + + + + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + {{ flex }} + + +
+ is-flex-mobile +
+ is-flex-tablet-only +
+ is-flex-desktop-only +
+ is-flex-widescreen-only +
+

Classes to display up to or from a specific breakpoint

+
+ is-flex-touch +
+ is-flex-tablet +
+ is-flex-desktop +
+ is-flex-widescreen +
+ is-flex-fullhd +
-
-

- You can use one of the following display classes: -

-
    -
  • block
    • -
  • flex
    • -
  • inline
    • -
  • inline-block
    • -
  • inline-flex
    • -
-

For example, here's how the is-flex helper works:

-
+
+

+ For the other display options, just replace is-flex with is-block is-inline is-inline-block or is-inline-flex +

+
- - {{ thead }} - - - - {{ flex }} - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - - - - {{ unchanged }} - {{ flex }} - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - - - - {{ unchanged }} - {{ unchanged }} - {{ flex }} - {{ unchanged }} - {{ unchanged }} - - - - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - {{ flex }} - {{ unchanged }} - - - - - - - {{ flex }} - {{ flex }} - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - - - - {{ unchanged }} - {{ flex }} - {{ flex }} - {{ flex }} - {{ flex }} - - - - {{ unchanged }} - {{ unchanged }} - {{ flex }} - {{ flex }} - {{ flex }} - - - - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - {{ flex }} - {{ flex }} - - - - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - {{ flex }} - - -
- is-flex-mobile -
- is-flex-tablet-only -
- is-flex-desktop-only -
- is-flex-widescreen-only -
-

Classes to display up to or from a specific breakpoint

-
- is-flex-touch -
- is-flex-tablet -
- is-flex-desktop -
- is-flex-widescreen -
- is-flex-fullhd -
+{% include anchor.html name="Hide" %} -
-

- For the other display options, just replace is-flex with is-block is-inline is-inline-block or is-inline-flex -

-
- - {% include anchor.html name="Hide" %} - - - {{ thead }} - - - - {{ hidden }} - {{ visible }} - {{ visible }} - {{ visible }} - {{ visible }} - - - - {{ visible }} - {{ hidden }} - {{ visible }} - {{ visible }} - {{ visible }} - - - - {{ visible }} - {{ visible }} - {{ hidden }} - {{ visible }} - {{ visible }} - - - - {{ visible }} - {{ visible }} - {{ visible }} - {{ hidden }} - {{ visible }} - - - - - - - {{ hidden }} - {{ hidden }} - {{ visible }} - {{ visible }} - {{ visible }} - - - - {{ visible }} - {{ hidden }} - {{ hidden }} - {{ hidden }} - {{ hidden }} - - - - {{ visible }} - {{ visible }} - {{ hidden }} - {{ hidden }} - {{ hidden }} - - - - {{ visible }} - {{ visible }} - {{ visible }} - {{ hidden }} - {{ hidden }} - - - - {{ visible }} - {{ visible }} - {{ visible }} - {{ visible }} - {{ hidden }} - - -
- is-hidden-mobile -
- is-hidden-tablet-only -
- is-hidden-desktop-only -
- is-hidden-widescreen-only -
-

Classes to hide up to or from a specific breakpoint

-
- is-hidden-touch -
- is-hidden-tablet -
- is-hidden-desktop -
- is-hidden-widescreen -
- is-hidden-fullhd -
-
-
+ + {{ thead }} + + + + {{ hidden }} + {{ visible }} + {{ visible }} + {{ visible }} + {{ visible }} + + + + {{ visible }} + {{ hidden }} + {{ visible }} + {{ visible }} + {{ visible }} + + + + {{ visible }} + {{ visible }} + {{ hidden }} + {{ visible }} + {{ visible }} + + + + {{ visible }} + {{ visible }} + {{ visible }} + {{ hidden }} + {{ visible }} + + + + + + + {{ hidden }} + {{ hidden }} + {{ visible }} + {{ visible }} + {{ visible }} + + + + {{ visible }} + {{ hidden }} + {{ hidden }} + {{ hidden }} + {{ hidden }} + + + + {{ visible }} + {{ visible }} + {{ hidden }} + {{ hidden }} + {{ hidden }} + + + + {{ visible }} + {{ visible }} + {{ visible }} + {{ hidden }} + {{ hidden }} + + + + {{ visible }} + {{ visible }} + {{ visible }} + {{ visible }} + {{ hidden }} + + +
+ is-hidden-mobile +
+ is-hidden-tablet-only +
+ is-hidden-desktop-only +
+ is-hidden-widescreen-only +
+

Classes to hide up to or from a specific breakpoint

+
+ is-hidden-touch +
+ is-hidden-tablet +
+ is-hidden-desktop +
+ is-hidden-widescreen +
+ is-hidden-fullhd +
diff --git a/docs/documentation/modifiers/syntax.html b/docs/documentation/modifiers/syntax.html index 0b50526d..be87980b 100644 --- a/docs/documentation/modifiers/syntax.html +++ b/docs/documentation/modifiers/syntax.html @@ -1,12 +1,16 @@ --- title: Modifiers syntax +subtitle: "Most Bulma elements have alternative styles. To apply them, you only need to append one of the modifier classes.
They all start with is- or has-." layout: documentation doc-tab: modifiers doc-subtab: syntax +breadcrumb: +- home +- documentation +- modifiers +- modifiers-syntax --- -{% include subnav/subnav-modifiers.html %} - {% capture button_example %} Button @@ -19,75 +23,68 @@ doc-subtab: syntax {% endcapture %} -
-
-

Modifiers syntax

-

Most Bulma elements have alternative styles. To apply them, you only need to append one of the modifier classes. -
- They all start with is- or has-.

-
-
-
-

Let's start with a simple button that uses the "button" CSS class:

-
-
-

- {{button_example}} -

-
-
- {% highlight html %}{{button_example}}{% endhighlight %} -
+
+
+

Let's start with a simple button that uses the "button" CSS class:

+
+
+

+ {{button_example}} +

+
+
+ {% highlight html %}{{button_example}}{% endhighlight %} +
+
+
+
+

By adding the "is-primary" CSS class, you can modify the color:

+
+
+

+ {{button_primary_example}} +

+
+
+ {% highlight html %}{{button_primary_example}}{% endhighlight %} +
+
+
+
+
+

You can use one of the 6 main colors:

+
    +
  • is-primary
    • +
  • is-link
    • +
  • is-info
    • +
  • is-success
    • +
  • is-warning
    • +
  • is-danger
    • +
-
-
-

By adding the "is-primary" CSS class, you can modify the color:

-
-
-

- {{button_primary_example}} -

-
-
- {% highlight html %}{{button_primary_example}}{% endhighlight %} -
-
-
-
-
-

You can use one of the 6 main colors:

-
    -
  • is-primary
    • -
  • is-link
    • -
  • is-info
    • -
  • is-success
    • -
  • is-warning
    • -
  • is-danger
    • -
-
-
-
-

- Button -

-

- Button -

-

- Button -

-

- Button -

-

- Button -

-

- Button -

-
-
-
+
+
+

+ Button +

+

+ Button +

+

+ Button +

+

+ Button +

+

+ Button +

+

+ Button +

+
+
+
{% highlight html %} Button @@ -108,35 +105,36 @@ doc-subtab: syntax Button {% endhighlight %} -
-
-
-
-
-

You can also alter the size:

-
    -
  • is-small
    • -
  • is-medium
    • -
  • is-large
    • -
-
-
-
-

- Button -

-

- Button -

-

- Button -

-

- Button -

-
-
+
+
+ +
+
+
+

You can also alter the size:

+
    +
  • is-small
    • +
  • is-medium
    • +
  • is-large
    • +
+
+
+
+

+ Button +

+

+ Button +

+

+ Button +

+

+ Button +

+
+
{% highlight html %} Button @@ -152,30 +150,31 @@ doc-subtab: syntax {% endhighlight %}
+
+ +
+
+
+

Or the style or state:

+
    +
  • is-outlined
    • +
  • is-loading
    • +
  • [disabled]
    • +
-
-
-
-

Or the style or state:

-
    -
  • is-outlined
    • -
  • is-loading
    • -
  • [disabled]
    • -
-
-
-
-

- Button -

-

- Button -

-

- Button -

-
-
+
+
+

+ Button +

+

+ Button +

+

+ Button +

+
+
{% highlight html %} Button @@ -188,6 +187,4 @@ doc-subtab: syntax {% endhighlight %}
-
-
-
+ diff --git a/docs/documentation/modifiers/typography-helpers.html b/docs/documentation/modifiers/typography-helpers.html index fbcbd108..74f0b214 100644 --- a/docs/documentation/modifiers/typography-helpers.html +++ b/docs/documentation/modifiers/typography-helpers.html @@ -1,8 +1,14 @@ --- title: Typography helpers +subtitle: "Change the size and color 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,56 +55,51 @@ doc-subtab: typography-helpers {% endcapture %} -{% include subnav/subnav-modifiers.html %} +{% include anchor.html name="Size" %} -
-
-

Typography helpers

-

- Change the size and color of the text for one or multiple viewport width -

+
+

+ There are {{ sizes | size }} sizes to choose from: +

+
- {% include anchor.html name="Size" %} + + + + + + + + + {% for size in sizes %} + + {% assign key = 'size-' | append: forloop.index %} + + + + {% endfor %} + +
+ Class + + Font-size +
is-size-{{ forloop.index }}{{ initial_vars[key].value }}
-
-

- There are {{ sizes | size }} sizes to choose from: -

-
+{% include anchor.html name="Responsive size" %} - - - - - - - - - {% for size in sizes %} - - {% assign key = 'size-' | append: forloop.index %} - - - - {% endfor %} - -
- Class - - Font-size -
is-size-{{ forloop.index }}{{ initial_vars[key].value }}
+
+

+ You can choose a specific size for each viewport width. You simply needed to append the viewport width to the size modifier. +

+

+ For example, here are the modifiers for $size-1: +

+
- {% include anchor.html name="Responsive size" %} - -
-

- You can choose a specific size for each viewport width. You simply needed to append the viewport width to the size modifier. -

-

- For example, here are the modifiers for $size-1: -

-
+{% include layout/main-close.html %} +
+
{{ thead }} @@ -152,106 +153,114 @@ doc-subtab: typography-helpers
+
+
-
-

- You can use the same logic for each of the 7 sizes. -

-
+{% include layout/main-open.html %} - {% include anchor.html name="Colors" %} +
+

+ You can use the same logic for each of the 7 sizes. +

+
-
-

- You can set any element to one of the 9 colors or 9 shades of grey: -

-
+{% include anchor.html name="Colors" %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Class - - Color -
has-text-white{% include color/white.html %}
has-text-black{% include color/black.html %}
has-text-light{% include color/white-ter.html %}
has-text-dark{% include color/grey-darker.html %}
has-text-primary{% include color/turquoise.html %}
has-text-info{% include color/cyan.html %}
has-text-link{% include color/blue.html %}
has-text-success{% include color/green.html %}
has-text-warning{% include color/yellow.html %}
has-text-danger{% include color/red.html %}
has-text-black-bis{% include color/black-bis.html %}
has-text-black-ter{% include color/black-ter.html %}
has-text-grey-darker{% include color/grey-darker.html %}
has-text-grey-dark{% include color/grey-dark.html %}
has-text-grey{% include color/grey.html %}
has-text-grey-light{% include color/grey-light.html %}
has-text-grey-lighter{% include color/grey-lighter.html %}
has-text-white-ter{% include color/white-ter.html %}
has-text-white-bis{% include color/white-bis.html %}
+
+

+ You can set any element to one of the 9 colors or 9 shades of grey: +

+
- {% include anchor.html name="Alignment" %} + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Class + + Color +
has-text-white{% include color/white.html %}
has-text-black{% include color/black.html %}
has-text-light{% include color/white-ter.html %}
has-text-dark{% include color/grey-darker.html %}
has-text-primary{% include color/turquoise.html %}
has-text-info{% include color/cyan.html %}
has-text-link{% include color/blue.html %}
has-text-success{% include color/green.html %}
has-text-warning{% include color/yellow.html %}
has-text-danger{% include color/red.html %}
has-text-black-bis{% include color/black-bis.html %}
has-text-black-ter{% include color/black-ter.html %}
has-text-grey-darker{% include color/grey-darker.html %}
has-text-grey-dark{% include color/grey-dark.html %}
has-text-grey{% include color/grey.html %}
has-text-grey-light{% include color/grey-light.html %}
has-text-grey-lighter{% include color/grey-lighter.html %}
has-text-white-ter{% include color/white-ter.html %}
has-text-white-bis{% include color/white-bis.html %}
-
-

- You can align the text with the use of one of 4 alignment helpers: -

-
+{% include anchor.html name="Alignment" %} - - - - - - - - - - - - - - - - - - - - - - - - - -
- Class - - Alignment -
has-text-centeredMakes the text centered
has-text-justifiedMakes the text justified
has-text-leftMakes the text aligned to the left
has-text-rightMakes the text aligned to the right
+
+

+ You can align the text with the use of one of 4 alignment helpers: +

+
- {% include anchor.html name="Responsive Alignment" %} + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Class + + Alignment +
has-text-centeredMakes the text centered
has-text-justifiedMakes the text justified
has-text-leftMakes the text aligned to the left
has-text-rightMakes the text aligned to the right
-
-

- You can now align text for each viewport width. You simply need to append the viewport width to the alignment modifier. -

+{% include anchor.html name="Responsive Alignment" %} -

- For example, here are the modifiers for has-text-left: -

-
+
+

+ You can now align text for each viewport width. You simply need to append the viewport width to the alignment modifier. +

+

+ For example, here are the modifiers for has-text-left: +

+
+ +{% include layout/main-close.html %} + +
+
{{ thead }} @@ -329,84 +338,85 @@ doc-subtab: typography-helpers
- - {% include anchor.html name="Text transformation" %} - -
-

- You can transform the text with the use of one of 4 text transformation helpers: -

-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- Class - - Transformation -
is-capitalizedTransforms the first character of each word to uppercase
is-lowercaseTransforms all characters to lowercase
is-uppercaseTransforms all characters to uppercase
is-italicTransforms all characters to italic
- - {% include anchor.html name="Text weight" %} - -
-

- You can transform the text weight with the use of one of 4 text weight helpers: -

-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- Class - - Weight -
has-text-weight-lightTransforms text weight to light
has-text-weight-normalTransforms text weight to normal
has-text-weight-semiboldTransforms text weight to semi-bold
has-text-weight-boldTransforms text weight to bold
-
-
+ + +{% include layout/main-open.html %} + +{% include anchor.html name="Text transformation" %} + +
+

+ You can transform the text with the use of one of 4 text transformation helpers: +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Class + + Transformation +
is-capitalizedTransforms the first character of each word to uppercase
is-lowercaseTransforms all characters to lowercase
is-uppercaseTransforms all characters to uppercase
is-italicTransforms all characters to italic
+ +{% include anchor.html name="Text weight" %} + +
+

+ You can transform the text weight with the use of one of 4 text weight helpers: +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Class + + Weight +
has-text-weight-lightTransforms text weight to light
has-text-weight-normalTransforms text weight to normal
has-text-weight-semiboldTransforms text weight to semi-bold
has-text-weight-boldTransforms text weight to bold