From 0f9d338f66183580c2e2ebddea567b78ee14e88c Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Mon, 9 Apr 2018 12:45:52 +0100 Subject: [PATCH] Create links nav --- docs/_data/links.json | 51 + docs/_data/variables/elements/title.json | 17 +- docs/_includes/anchor.html | 2 +- docs/_includes/elements/improve-page.html | 2 +- docs/_layouts/documentation.html | 65 +- docs/_sass/main.sass | 22 + docs/css/bulma-docs.css | 55 +- docs/documentation/columns/basics.html | 65 +- docs/documentation/columns/gap.html | 268 +++-- docs/documentation/columns/nesting.html | 102 +- docs/documentation/columns/options.html | 205 ++-- .../documentation/columns/responsiveness.html | 197 ++-- docs/documentation/columns/sizes.html | 959 +++++++++--------- docs/documentation/elements/button.html | 5 + sass/base/generic.sass | 4 +- sass/components/breadcrumb.sass | 20 +- sass/elements/title.sass | 11 +- 17 files changed, 1087 insertions(+), 963 deletions(-) create mode 100644 docs/_data/links.json diff --git a/docs/_data/links.json b/docs/_data/links.json new file mode 100644 index 00000000..187dc34e --- /dev/null +++ b/docs/_data/links.json @@ -0,0 +1,51 @@ +{ + "by_id": { + "home": { + "name": "Home", + "path": "" + }, + "documentation": { + "name": "Documentation", + "path": "/documentation" + }, + "columns": { + "name": "Columns", + "path": "/documentation/columns" + }, + "columns-basics": { + "name": "Basics", + "path": "/documentation/columns/basics" + }, + "columns-gap": { + "name": "Gap", + "path": "/documentation/columns/gap" + }, + "columns-nesting": { + "name": "Nesting", + "path": "/documentation/columns/nesting" + }, + "columns-options": { + "name": "Options", + "path": "/documentation/columns/options" + }, + "columns-responsiveness": { + "name": "Responsiveness", + "path": "/documentation/columns/responsiveness" + }, + "columns-sizes": { + "name": "Sizes", + "path": "/documentation/columns/sizes" + }, + "elements": { + "name": "Elements", + "path": "/documentation/elements" + }, + "button": { + "name": "Button", + "path": "/documentation/elements/button" + } + }, + "order": { + "columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"] + } +} diff --git a/docs/_data/variables/elements/title.json b/docs/_data/variables/elements/title.json index 5896a6c7..3f5f9b6b 100644 --- a/docs/_data/variables/elements/title.json +++ b/docs/_data/variables/elements/title.json @@ -31,6 +31,11 @@ "name": "$title-strong-weight", "value": "inherit" }, + "title-line-height": { + "id": "title-line-height", + "name": "$title-line-height", + "value": "1.125" + }, "subtitle-color": { "id": "subtitle-color", "name": "$subtitle-color", @@ -46,6 +51,11 @@ "name": "$subtitle-weight", "value": "$weight-normal" }, + "subtitle-line-height": { + "id": "subtitle-line-height", + "name": "$subtitle-line-height", + "value": "1.25" + }, "subtitle-strong-color": { "id": "subtitle-strong-color", "name": "$subtitle-strong-color", @@ -55,6 +65,11 @@ "id": "subtitle-strong-weight", "name": "$subtitle-strong-weight", "value": "$weight-semibold" + }, + "subtitle-negative-margin": { + "id": "subtitle-negative-margin", + "name": "$subtitle-negative-margin", + "value": "-1.25rem" } } -} \ No newline at end of file +} diff --git a/docs/_includes/anchor.html b/docs/_includes/anchor.html index c8f3bcb9..946f49ca 100644 --- a/docs/_includes/anchor.html +++ b/docs/_includes/anchor.html @@ -1,4 +1,4 @@ -
+

{{ include.name }} diff --git a/docs/_includes/elements/improve-page.html b/docs/_includes/elements/improve-page.html index 791877a3..738dd03f 100644 --- a/docs/_includes/elements/improve-page.html +++ b/docs/_includes/elements/improve-page.html @@ -1,6 +1,6 @@
-

+

Made with Bulma diff --git a/docs/_layouts/documentation.html b/docs/_layouts/documentation.html index 6b252601..a2603258 100644 --- a/docs/_layouts/documentation.html +++ b/docs/_layouts/documentation.html @@ -5,6 +5,25 @@ route: documentation {% include navbar.html id="Documentation" %} +{% assign current_link_id = page.breadcrumb | last %} +{% assign category_links = site.data.links.order[page.doc-tab] %} + +{% for link_id in category_links %} + {% if link_id == current_link_id %} + {% unless forloop.first %} + {% assign previous_index = forloop.index0 | minus: 1 %} + {% assign previous_link_id = category_links[previous_index] %} + {% assign previous_link = site.data.links.by_id[previous_link_id] %} + {% endunless %} + + {% unless forloop.last %} + {% assign next_index = forloop.index0 | plus: 1 %} + {% assign next_link_id = category_links[next_index] %} + {% assign next_link = site.data.links.by_id[next_link_id] %} + {% endunless %} + {% endif %} +{% endfor %} +

@@ -13,27 +32,43 @@ route: documentation
+ +

{{ page.title }}

-

+

{{ page.subtitle }}

@@ -41,6 +76,8 @@ route: documentation
{{ content }}
+ + {% include elements/improve-page.html %}
- -{% include elements/improve-page.html %} diff --git a/docs/_sass/main.sass b/docs/_sass/main.sass index 09a17057..442f3896 100644 --- a/docs/_sass/main.sass +++ b/docs/_sass/main.sass @@ -9,7 +9,27 @@ position: relative .bd-breadcrumb + display: flex + justify-content: space-between margin-bottom: 2.5rem + .breadcrumb:not(:last-child) + margin-bottom: 0 + +.bd-prev-next + align-items: flex-start + color: $grey-light + display: none + flex-grow: 0 + flex-shrink: 0 + margin-left: 0.5rem + text-align: center + a, + span + border-radius: $radius + width: 1.5rem + a + &:hover + background-color: $background .bd-header margin-bottom: 2.5rem @@ -52,6 +72,8 @@ overflow: hidden flex-grow: 1 flex-shrink: 1 + .bd-prev-next + display: flex .bd-side flex: 0 0 300px diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 003fd5c3..5e804bc8 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -347,10 +347,10 @@ code { } hr { - background-color: #dbdbdb; + background-color: whitesmoke; border: none; display: block; - height: 1px; + height: 2px; margin: 1.5rem 0; } @@ -4960,7 +4960,7 @@ a.tag:hover { } .title:not(.is-spaced) + .subtitle { - margin-top: -1.5rem; + margin-top: -1.25rem; } .title.is-1 { @@ -5004,7 +5004,7 @@ a.tag:hover { } .subtitle:not(.is-spaced) + .title { - margin-top: -1.5rem; + margin-top: -1.25rem; } .subtitle.is-1 { @@ -5071,11 +5071,7 @@ a.tag:hover { } .breadcrumb { - align-items: stretch; - display: flex; font-size: 1rem; - overflow: hidden; - overflow-x: auto; white-space: nowrap; } @@ -5107,15 +5103,15 @@ a.tag:hover { } .breadcrumb li + li::before { - color: #4a4a4a; + color: #b5b5b5; content: "\0002f"; } -.breadcrumb ul, .breadcrumb ol { - align-items: center; +.breadcrumb ul, +.breadcrumb ol { + align-items: flex-start; display: flex; - flex-grow: 1; - flex-shrink: 0; + flex-wrap: wrap; justify-content: flex-start; } @@ -5127,11 +5123,11 @@ a.tag:hover { margin-left: 0.5em; } -.breadcrumb.is-centered ol, .breadcrumb.is-centered ul { +.breadcrumb.is-centered ol { justify-content: center; } -.breadcrumb.is-right ol, .breadcrumb.is-right ul { +.breadcrumb.is-right ol { justify-content: flex-end; } @@ -9502,9 +9498,35 @@ label.panel-block:hover { } .bd-breadcrumb { + display: flex; + justify-content: space-between; margin-bottom: 2.5rem; } +.bd-breadcrumb .breadcrumb:not(:last-child) { + margin-bottom: 0; +} + +.bd-prev-next { + align-items: flex-start; + color: #b5b5b5; + display: none; + flex-grow: 0; + flex-shrink: 0; + margin-left: 0.5rem; + text-align: center; +} + +.bd-prev-next a, +.bd-prev-next span { + border-radius: 3px; + width: 1.5rem; +} + +.bd-prev-next a:hover { + background-color: whitesmoke; +} + .bd-header { margin-bottom: 2.5rem; } @@ -9557,6 +9579,9 @@ label.panel-block:hover { flex-grow: 1; flex-shrink: 1; } + .bd-prev-next { + display: flex; + } .bd-side { flex: 0 0 300px; } diff --git a/docs/documentation/columns/basics.html b/docs/documentation/columns/basics.html index fcf69742..023663c0 100644 --- a/docs/documentation/columns/basics.html +++ b/docs/documentation/columns/basics.html @@ -1,8 +1,14 @@ --- title: Columns powered by Flexbox +subtitle: "A simple way to build responsive columns" layout: documentation doc-tab: columns doc-subtab: basics +breadcrumb: +- home +- documentation +- columns +- columns-basics --- {% capture columns %} @@ -22,39 +28,30 @@ doc-subtab: basics {% endcapture %} -{% include subnav/subnav-columns.html %} +
+

Building a columns layout with Bulma is very simple:

+
    +
  1. Add a columns container
    2. +
  2. Add as many column elements as you want
    3. +
+

Each column will have an equal width, no matter the number of columns.

+
-
-
-

Columns

-

A simple way to build responsive columns

-
-
-

Building a columns layout with Bulma is very simple:

-
    -
  1. Add a columns container
    2. -
  2. Add as many column elements as you want
    3. -
-

Each column will have an equal width, no matter the number of columns.

-
- -
-
-

First column

-
-
-

Second column

-
-
-

Third column

-
-
-

Fourth column

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

First column

-
+
+

Second column

+
+
+

Third column

+
+
+

Fourth column

+
+ + +
+ {% highlight html %}{{ columns }}{% endhighlight %} +
diff --git a/docs/documentation/columns/gap.html b/docs/documentation/columns/gap.html index 7a24977b..727dbfb0 100644 --- a/docs/documentation/columns/gap.html +++ b/docs/documentation/columns/gap.html @@ -1,8 +1,14 @@ --- title: Columns gap +subtitle: Customize the gap between the columns layout: documentation doc-tab: columns doc-subtab: gap +breadcrumb: +- home +- documentation +- columns +- columns-gap --- {% capture columns_default_gap %} @@ -79,146 +85,134 @@ doc-subtab: gap {% endcapture %} -{% include subnav/subnav-columns.html %} +{% include anchor.html name="Default gap" %} -
-
-

Columns gap

-

- Customize the gap between the columns -

+
+

+ Each column has a gap equal to the variable $column-gap, which has a default value of 0.75rem. +
+ Since the gap is on each side of a column, the gap between two adjacent columns will be twice the value of $column-gap, or 1.5rem by default. +

+
- {% include anchor.html name="Default gap" %} +{{ columns_default_gap }} -
-

- Each column has a gap equal to the variable $column-gap, which has a default value of 0.75rem. -
- Since the gap is on each side of a column, the gap between two adjacent columns will be twice the value of $column-gap, or 1.5rem by default. -

-
+{% include anchor.html name="Gapless" %} - {{ columns_default_gap }} - - {% include anchor.html name="Gapless" %} - -
-

- If you want to remove the space between the columns, add the is-gapless modifier on the columns container: -

-
- -
-
-

First column

-
-
-

Second column

-
-
-

Third column

-
-
-

Fourth column

-
-
- -
- {% highlight html %}{{ columns_gapless }}{% endhighlight %} -
- -
-

You can combine it with the is-multiline modifier:

-
- -
-
-

is-one-quarter

-
-
-

is-one-quarter

-
-
-

is-one-quarter

-
-
-

is-one-quarter

-
-
-

is-half

-
-
-

is-one-quarter

-
-
-

is-one-quarter

-
-
-

is-one-quarter

-
-
-

Auto

-
-
- -
- {% highlight html %}{{ columns_gapless_multiline }}{% endhighlight %} -
- - {% include anchor.html name="Variable gap" %} - -
-
-
- Experimental -
-
- -
-
- New - 0.5.2 -
-
-
- -
-

- You can specify a custom column gap by appending one of 9 modifiers on the .columns container. -

-
    -
  • - is-0 will remove any gap (similar to is-gapless) -
    • -
  • - is-3 is the default value, equivalent to the 0.75rem value -
    • -
  • - is-8 is the maximum gap of 2rem -
    • -
-

- Additionally, .is-variable should be added on the .columns container. -

-
- - {% include klmn.html %} - -
-
-

- This feature is only available in browsers that support CSS Variables: -

-
-
- -
-
-

- If your Sass setup doesn't support CSS Variables, you can disable this feature by setting $variable-columns to false. -

-
-
+
+

+ If you want to remove the space between the columns, add the is-gapless modifier on the columns container: +

+
+
+
+

First column

-
+
+

Second column

+
+
+

Third column

+
+
+

Fourth column

+
+ + +
+ {% highlight html %}{{ columns_gapless }}{% endhighlight %} +
+ +
+

You can combine it with the is-multiline modifier:

+
+ +
+
+

is-one-quarter

+
+
+

is-one-quarter

+
+
+

is-one-quarter

+
+
+

is-one-quarter

+
+
+

is-half

+
+
+

is-one-quarter

+
+
+

is-one-quarter

+
+
+

is-one-quarter

+
+
+

Auto

+
+
+ +
+ {% highlight html %}{{ columns_gapless_multiline }}{% endhighlight %} +
+ +{% include anchor.html name="Variable gap" %} + +
+
+
+ Experimental +
+
+ +
+
+ New + 0.5.2 +
+
+
+ +
+

+ You can specify a custom column gap by appending one of 9 modifiers on the .columns container. +

+
    +
  • + is-0 will remove any gap (similar to is-gapless) +
    • +
  • + is-3 is the default value, equivalent to the 0.75rem value +
    • +
  • + is-8 is the maximum gap of 2rem +
    • +
+

+ Additionally, .is-variable should be added on the .columns container. +

+
+ +{% include klmn.html %} + +
+
+

+ This feature is only available in browsers that support CSS Variables: +

+
+
+ +
+
+

+ If your Sass setup doesn't support CSS Variables, you can disable this feature by setting $variable-columns to false. +

+
+
diff --git a/docs/documentation/columns/nesting.html b/docs/documentation/columns/nesting.html index 7c66cc6e..64cf551c 100644 --- a/docs/documentation/columns/nesting.html +++ b/docs/documentation/columns/nesting.html @@ -1,79 +1,75 @@ --- title: Nesting columns +subtitle: "A simple way to build responsive columns" layout: documentation doc-tab: columns doc-subtab: nesting +breadcrumb: +- home +- documentation +- columns +- columns-nesting --- -{% include subnav/subnav-columns.html %} - -
-
-

Nesting columns

-

A simple way to build responsive columns

-
- -
-

- You can nest columns to have more flexibility in your design. You only need to follow this structure: -

+
+

+ You can nest columns to have more flexibility in your design. You only need to follow this structure: +

+
    +
  • + columns: top-level columns container
    • - columns: top-level columns container + column
      • - column + columns: nested columns
        • - columns: nested columns -
            -
          • - column and so on… -
            • -
          + column and so on…
    -

    - The difference with multiline columns is the order in the HTML code: all the blue columns appear before the red ones. Resize to a narrower viewport to see the result. -

    -
+ + +

+ The difference with multiline columns is the order in the HTML code: all the blue columns appear before the red ones. Resize to a narrower viewport to see the result. +

+
-
+
+
+

First column

+
-

First column

-
-
-

First nested column

-
-
-

Second nested column

-
-
+

First nested column

-

Second column

-
-
-

50%

-
-
-

Auto

-
-
-

Auto

-
-
+

Second nested column

- -
-

- Multiline columns will also have a gap between each line. -

-
-
+
+

Second column

+
+
+

50%

+
+
+

Auto

+
+
+

Auto

+
+
+
+ + +
+

+ Multiline columns will also have a gap between each line. +

+
diff --git a/docs/documentation/columns/options.html b/docs/documentation/columns/options.html index 9662ca20..5448a6c8 100644 --- a/docs/documentation/columns/options.html +++ b/docs/documentation/columns/options.html @@ -1,8 +1,14 @@ --- title: Column options +subtitle: "Design different types of column layouts" layout: documentation doc-tab: columns doc-subtab: options +breadcrumb: +- home +- documentation +- columns +- columns-options --- {% capture columns_multiline %} @@ -83,111 +89,100 @@ doc-subtab: options {% endcapture %} -{% include subnav/subnav-columns.html %} +{% include anchor.html name="Multiline" %} -
-
-

Column options

-

- Design different types of column layouts -

+
+

Whenever you want to start a new line, you can close a columns container and start a new one. But you can also add the is-multiline modifier and add more column elements that would fit in a single row.

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

Whenever you want to start a new line, you can close a columns container and start a new one. But you can also add the is-multiline modifier and add more column elements that would fit in a single row.

-
- -
-
-

is-one-quarter

-
-
-

is-one-quarter

-
-
-

is-one-quarter

-
-
-

is-one-quarter

-
-
-

is-half

-
-
-

is-one-quarter

-
-
-

is-one-quarter

-
-
-

is-one-quarter

-
-
-

Auto

-
-
- - {% highlight html %}{{ columns_multiline }}{% endhighlight %} - - {% include anchor.html name="Centering columns" %} - -
-

- While you can use empty columns (like <div class="column"></div>) to create horizontal space around .column elements, you can also use .is-centered on the parent .columns element: -

-
- -
-
-

- is-half
- is-narrow -

-
-
- - {% highlight html %}{{ columns_mobile_centered }}{% endhighlight %} - -
-

- Use with .is-multiline to create a flexible, centered list (try resizing to see centering in different viewport sizes): -

-
- -
-
-

- is-narrow
- First Column -

-
-
-

- is-narrow
- Our Second Column -

-
-
-

- is-narrow
- Third Column -

-
-
-

- is-narrow
- The Fourth Column -

-
-
-

- is-narrow
- Fifth Column -

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

is-one-quarter

-
+
+

is-one-quarter

+
+
+

is-one-quarter

+
+
+

is-one-quarter

+
+
+

is-half

+
+
+

is-one-quarter

+
+
+

is-one-quarter

+
+
+

is-one-quarter

+
+
+

Auto

+
+ + +{% highlight html %}{{ columns_multiline }}{% endhighlight %} + +{% include anchor.html name="Centering columns" %} + +
+

+ While you can use empty columns (like <div class="column"></div>) to create horizontal space around .column elements, you can also use .is-centered on the parent .columns element: +

+
+ +
+
+

+ is-half
+ is-narrow +

+
+
+ +{% highlight html %}{{ columns_mobile_centered }}{% endhighlight %} + +
+

+ Use with .is-multiline to create a flexible, centered list (try resizing to see centering in different viewport sizes): +

+
+ +
+
+

+ is-narrow
+ First Column +

+
+
+

+ is-narrow
+ Our Second Column +

+
+
+

+ is-narrow
+ Third Column +

+
+
+

+ is-narrow
+ The Fourth Column +

+
+
+

+ is-narrow
+ Fifth Column +

+
+
+ +{% highlight html %}{{ columns_mobile_multiline_centered }}{% endhighlight %} diff --git a/docs/documentation/columns/responsiveness.html b/docs/documentation/columns/responsiveness.html index c10ebc8f..139c0c10 100644 --- a/docs/documentation/columns/responsiveness.html +++ b/docs/documentation/columns/responsiveness.html @@ -1,8 +1,14 @@ --- title: Columns responsiveness +subtitle: "Handle different column layouts for each breakpoint" layout: documentation doc-tab: columns doc-subtab: responsiveness +breadcrumb: +- home +- documentation +- columns +- columns-responsiveness --- {% capture columns_mobile %} @@ -37,107 +43,96 @@ doc-subtab: responsiveness {% endcapture %} -{% include subnav/subnav-columns.html %} +{% include anchor.html name="Mobile columns" %} -
-
-

Columns responsiveness

-

- Handle different column layouts for each breakpoint -

+
+

+ By default, columns are only activated from tablet onwards. This means columns are stacked on top of each other on mobile. +
+ If you want columns to work on mobile too, just add the is-mobile modifier on the columns container: +

+
- {% include anchor.html name="Mobile columns" %} - -
-

- By default, columns are only activated from tablet onwards. This means columns are stacked on top of each other on mobile. -
- If you want columns to work on mobile too, just add the is-mobile modifier on the columns container: -

-
- -
-
-

1

-
-
-

2

-
-
-

3

-
-
-

4

-
-
- - {% highlight html %}{{ columns_mobile }}{% endhighlight %} - -
-

- Resize -

-

- If you want to see the difference, resize your browser and see when the columns are stacked and when they are horizontally distributed. -

-
- -
-

- If you only want columns on desktop upwards, just use the is-desktop modifier on the columns container: -

-
- -
-
-

1

-
-
-

2

-
-
-

3

-
-
-

4

-
-
- - {% highlight html %}{{ columns_desktop }}{% endhighlight %} - - {% include anchor.html name="Different column sizes per breakpoint" %} - -
-

You can define a column size for each viewport size: mobile, tablet, and desktop.

-
- -
-
-

- is-half-mobile
- is-one-third-tablet
- is-one-quarter-desktop -

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
- -
-

Resize

-

If you want to see these classes in action, resize your browser window and see how the same column varies in width at each breakpoint.

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

1

-
+
+

2

+
+
+

3

+
+
+

4

+
+ + +{% highlight html %}{{ columns_mobile }}{% endhighlight %} + +
+

+ Resize +

+

+ If you want to see the difference, resize your browser and see when the columns are stacked and when they are horizontally distributed. +

+
+ +
+

+ If you only want columns on desktop upwards, just use the is-desktop modifier on the columns container: +

+
+ +
+
+

1

+
+
+

2

+
+
+

3

+
+
+

4

+
+
+ +{% highlight html %}{{ columns_desktop }}{% endhighlight %} + +{% include anchor.html name="Different column sizes per breakpoint" %} + +
+

You can define a column size for each viewport size: mobile, tablet, and desktop.

+
+ +
+
+

+ is-half-mobile
+ is-one-third-tablet
+ is-one-quarter-desktop +

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+ +
+

Resize

+

If you want to see these classes in action, resize your browser window and see how the same column varies in width at each breakpoint.

+
+ +{% highlight html %}{{ columns_multiple_breakpoints }}{% endhighlight %} diff --git a/docs/documentation/columns/sizes.html b/docs/documentation/columns/sizes.html index fe47b563..901698f3 100644 --- a/docs/documentation/columns/sizes.html +++ b/docs/documentation/columns/sizes.html @@ -1,8 +1,14 @@ --- title: Column sizes +subtitle: "Define the size of each column individually" layout: documentation doc-tab: columns doc-subtab: sizes +breadcrumb: +- home +- documentation +- columns +- columns-sizes --- {% capture columns_sizes %} @@ -95,514 +101,501 @@ doc-subtab: sizes {% endcapture %} -{% include subnav/subnav-columns.html %} +
+

If you want to change the size of a single column, you can use one of the following classes:

+
    +
  • + is-three-quarters +
    • +
  • + is-two-thirds +
    • +
  • + is-half +
    • +
  • + is-one-third +
    • +
  • + is-one-quarter +
    • +
+

The other columns will fill up the remaining space automatically.

+
-
-
-

Column sizes

-

- Define the size of each column individually -

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

You can now use the following multiples of 20% as well:

+
    +
  • + is-four-fifths +
    • +
  • + is-three-fifths +
    • +
  • + is-two-fifths +
    • +
  • + is-one-fifth +
    • +
+
-
-

If you want to change the size of a single column, you can use one of the following classes:

-
    -
  • - is-three-quarters -
    • -
  • - is-two-thirds -
    • -
  • - is-half -
    • -
  • - is-one-third -
    • -
  • - is-one-quarter -
    • -
-

The other columns will fill up the remaining space automatically.

-
+
+
+

+ is-four-fifths +

+
+
+

Auto

+
+
+

Auto

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

+ is-three-quarters +

+
+
+

Auto

+
+
+

Auto

+
+
-
-

You can now use the following multiples of 20% as well:

-
    -
  • - is-four-fifths -
    • -
  • - is-three-fifths -
    • -
  • - is-two-fifths -
    • -
  • - is-one-fifth -
    • -
-
+
+
+

+ is-two-thirds +

+
+
+

Auto

+
+
+

Auto

+
+
-
-
-

- is-four-fifths -

-
-
-

Auto

-
-
-

Auto

-
-
+
+
+

+ is-three-fifths +

+
+
+

Auto

+
+
+

Auto

+
+
-
-
-

- is-three-quarters -

-
-
-

Auto

-
-
-

Auto

-
-
+
+
+

+ is-half +

+
+
+

Auto

+
+
+

Auto

+
+
-
-
-

- is-two-thirds -

-
-
-

Auto

-
-
-

Auto

-
-
+
+
+

+ is-two-fifths +

+
+
+

Auto

+
+
+

Auto

+
+
-
-
-

- is-three-fifths -

-
-
-

Auto

-
-
-

Auto

-
-
+
+
+

+ is-one-third +

+
+
+

Auto

+
+
+

Auto

+
+
-
-
-

- is-half -

-
-
-

Auto

-
-
-

Auto

-
-
+
+
+

+ is-one-quarter +

+
+
+

Auto

+
+
+

Auto

+
+
-
-
-

- is-two-fifths -

-
-
-

Auto

-
-
-

Auto

-
-
+
+
+

+ is-one-fifth +

+
+
+

Auto

+
+
+

Auto

+
+
-
-
-

- is-one-third -

-
-
-

Auto

-
-
-

Auto

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

- is-one-quarter -

-
-
-

Auto

-
-
-

Auto

-
-
+{% include anchor.html name="12 columns system" %} -
-
-

- is-one-fifth -

-
-
-

Auto

-
-
-

Auto

-
-
+
+

As the grid can be divided into 12 columns, there are size classes for each division:

+
    +
  • is-2
    • +
  • is-3
    • +
  • is-4
    • +
  • is-5
    • +
  • is-6
    • +
  • is-7
    • +
  • is-8
    • +
  • is-9
    • +
  • is-10
    • +
  • is-11
    • +
+
-
- {% highlight html %}{{ columns_sizes }}{% endhighlight %} -
+
+

Naming convention

+

Each modifier class is named after how many columns you want out of 12. So if you want 7 columns out of 12, use is-7.

+
- {% include anchor.html name="12 columns system" %} +
+
+

is-2

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+
+
+

is-3

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+
+
+

is-4

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+
+
+

is-5

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+
+
+

is-6

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+
+
+

is-7

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+
+
+

is-8

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+
+
+

is-9

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+
+
+

is-10

+
+
+

1

+
+
+

1

+
+
+
+
+

is-11

+
+
+

1

+
+
-
-

As the grid can be divided into 12 columns, there are size classes for each division:

-
    -
  • is-2
    • -
  • is-3
    • -
  • is-4
    • -
  • is-5
    • -
  • is-6
    • -
  • is-7
    • -
  • is-8
    • -
  • is-9
    • -
  • is-10
    • -
  • is-11
    • -
-
+{% include anchor.html name="Offset" %} -
-

Naming convention

-

Each modifier class is named after how many columns you want out of 12. So if you want 7 columns out of 12, use is-7.

-
+
+

+ While you can use empty columns (like <div class="column"></div>) to create horizontal space around .column elements, you can also use offset modifiers like .is-offset-x: +

+
-
-
-

is-2

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-
-
-

is-3

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-
-
-

is-4

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-
-
-

is-5

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-
-
-

is-6

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-
-
-

is-7

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-
-
-

is-8

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-
-
-

is-9

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-
-
-

is-10

-
-
-

1

-
-
-

1

-
-
-
-
-

is-11

-
-
-

1

-
-
+
+
+

+ is-half
+ is-offset-one-quarter +

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

+ is-three-fifths
+ is-offset-one-fifth +

+
+
-
-

- While you can use empty columns (like <div class="column"></div>) to create horizontal space around .column elements, you can also use offset modifiers like .is-offset-x: -

-
+
+
+

+ is-4
+ is-offset-8 +

+
+
-
-
-

- is-half
- is-offset-one-quarter -

-
-
+
+
+

+ is-11
+ is-offset-1 +

+
+
-
-
-

- is-three-fifths
- is-offset-one-fifth -

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

- is-4
- is-offset-8 -

-
-
+{% include anchor.html name="Narrow column" %} -
-
-

- is-11
- is-offset-1 -

-
-
+
+

If you want a column to only take the space it needs, use the is-narrow modifier. The other column(s) will fill up the remaining space.

+
-
- {% highlight html %}{{ columns_offset }}{% endhighlight %} -
- - {% include anchor.html name="Narrow column" %} - -
-

If you want a column to only take the space it needs, use the is-narrow modifier. The other column(s) will fill up the remaining space.

-
- -
-
-
-

Narrow column

-

This column is only 200px wide.

-
-
-
-
-

Flexible column

-

This column will take up the remaining space available.

-
-
-
- -
- {% highlight html %}{{ columns_narrow }}{% endhighlight %} -
- -
-

As for the size modifiers, you can have narrow columns for different breakpoints:

-
    -
  • - is-narrow-mobile -
    • -
  • - is-narrow-tablet -
    • -
  • - is-narrow-desktop -
    • -
+
+
+
+

Narrow column

+

This column is only 200px wide.

-
+
+
+

Flexible column

+

This column will take up the remaining space available.

+
+
+ + +
+ {% highlight html %}{{ columns_narrow }}{% endhighlight %} +
+ +
+

As for the size modifiers, you can have narrow columns for different breakpoints:

+
    +
  • + is-narrow-mobile +
    • +
  • + is-narrow-tablet +
    • +
  • + is-narrow-desktop +
    • +
+
diff --git a/docs/documentation/elements/button.html b/docs/documentation/elements/button.html index 47989a99..122a2147 100644 --- a/docs/documentation/elements/button.html +++ b/docs/documentation/elements/button.html @@ -4,6 +4,11 @@ subtitle: "The classic button, in different colors, sizes, and layout: documentation doc-tab: elements doc-subtab: button +breadcrumb: +- home +- documentation +- elements +- button meta: - colors: true - sizes: true diff --git a/sass/base/generic.sass b/sass/base/generic.sass index 6fd58484..bb0e37af 100644 --- a/sass/base/generic.sass +++ b/sass/base/generic.sass @@ -11,8 +11,8 @@ $code-padding: 0.25em 0.5em 0.25em !default $code-weight: normal !default $code-size: 0.875em !default -$hr-background-color: $border !default -$hr-height: 1px !default +$hr-background-color: $background !default +$hr-height: 2px !default $hr-margin: 1.5rem 0 !default $strong-color: $text-strong !default diff --git a/sass/components/breadcrumb.sass b/sass/components/breadcrumb.sass index 57bb2de2..fb84b229 100644 --- a/sass/components/breadcrumb.sass +++ b/sass/components/breadcrumb.sass @@ -5,16 +5,12 @@ $breadcrumb-item-active-color: $text-strong !default $breadcrumb-item-padding-vertical: 0 !default $breadcrumb-item-padding-horizontal: 0.75em !default -$breadcrumb-item-separator-color: $text !default +$breadcrumb-item-separator-color: $grey-light !default .breadcrumb +block +unselectable - align-items: stretch - display: flex font-size: $size-normal - overflow: hidden - overflow-x: auto white-space: nowrap a align-items: center @@ -37,11 +33,11 @@ $breadcrumb-item-separator-color: $text !default & + li::before color: $breadcrumb-item-separator-color content: "\0002f" - ul, ol - align-items: center + ul, + ol + align-items: flex-start display: flex - flex-grow: 1 - flex-shrink: 0 + flex-wrap: wrap justify-content: flex-start .icon &:first-child @@ -50,10 +46,12 @@ $breadcrumb-item-separator-color: $text !default margin-left: 0.5em // Alignment &.is-centered - ol, ul + ol, + ul justify-content: center &.is-right - ol, ul + ol, + ul justify-content: flex-end // Sizes &.is-small diff --git a/sass/elements/title.sass b/sass/elements/title.sass index 77353601..46f66680 100644 --- a/sass/elements/title.sass +++ b/sass/elements/title.sass @@ -1,6 +1,7 @@ $title-color: $grey-darker !default $title-size: $size-3 !default $title-weight: $weight-semibold !default +$title-line-height: 1.125 !default $title-strong-color: inherit !default $title-strong-weight: inherit !default $title-sub-size: 0.75em !default @@ -9,8 +10,10 @@ $title-sup-size: 0.75em !default $subtitle-color: $grey-dark !default $subtitle-size: $size-5 !default $subtitle-weight: $weight-normal !default +$subtitle-line-height: 1.25 !default $subtitle-strong-color: $grey-darker !default $subtitle-strong-weight: $weight-semibold !default +$subtitle-negative-margin: -1.25rem !default .title, .subtitle @@ -30,14 +33,14 @@ $subtitle-strong-weight: $weight-semibold !default color: $title-color font-size: $title-size font-weight: $title-weight - line-height: 1.125 + line-height: $title-line-height strong color: $title-strong-color font-weight: $title-strong-weight & + .highlight margin-top: -0.75rem &:not(.is-spaced) + .subtitle - margin-top: -1.5rem + margin-top: $subtitle-negative-margin // Sizes @each $size in $sizes $i: index($sizes, $size) @@ -48,12 +51,12 @@ $subtitle-strong-weight: $weight-semibold !default color: $subtitle-color font-size: $subtitle-size font-weight: $subtitle-weight - line-height: 1.25 + line-height: $subtitle-line-height strong color: $subtitle-strong-color font-weight: $subtitle-strong-weight &:not(.is-spaced) + .title - margin-top: -1.5rem + margin-top: $subtitle-negative-margin // Sizes @each $size in $sizes $i: index($sizes, $size)