From 79888359d22443fa6c626ff460b5d0dda963008b Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Tue, 10 Apr 2018 11:45:48 +0100 Subject: [PATCH] Reorganize index --- docs/_includes/content/klmn.html | 26 +- docs/_includes/global/navbar.html | 4 +- docs/_includes/index/columns.html | 98 ++ docs/_includes/index/fullheight.html | 35 + docs/_includes/index/level.html | 60 + docs/_includes/index/media-object.html | 51 + docs/_includes/index/modifiers.html | 51 + docs/_includes/index/start.html | 19 + docs/_includes/index/tiles.html | 93 ++ docs/_includes/index/tws.html | 3 + docs/_includes/index/usual.html | 12 + docs/_layouts/post.html | 23 +- docs/_sass/example.sass | 5 +- docs/_sass/highlight.sass | 3 +- docs/_sass/route.sass | 8 - docs/_sass/specific.sass | 12 +- docs/bulma-docs.sass | 12 + docs/css/bulma-docs.css | 37 +- docs/documentation/columns/gap.html | 41 +- docs/documentation/columns/options.html | 42 +- .../documentation/columns/responsiveness.html | 26 +- docs/documentation/columns/sizes.html | 192 +-- docs/documentation/elements/tag.html | 2 - docs/documentation/grid/columns.html | 1056 ----------------- docs/documentation/grid/tiles.html | 899 -------------- docs/documentation/layout/container.html | 4 +- docs/documentation/layout/footer.html | 4 +- docs/documentation/layout/hero.html | 4 +- .../modifiers/color-helpers.html | 6 + docs/index.html | 455 +------ 30 files changed, 657 insertions(+), 2626 deletions(-) create mode 100644 docs/_includes/index/columns.html create mode 100644 docs/_includes/index/fullheight.html create mode 100644 docs/_includes/index/level.html create mode 100644 docs/_includes/index/media-object.html create mode 100644 docs/_includes/index/modifiers.html create mode 100644 docs/_includes/index/start.html create mode 100644 docs/_includes/index/tiles.html create mode 100644 docs/_includes/index/tws.html create mode 100644 docs/_includes/index/usual.html delete mode 100644 docs/documentation/grid/columns.html delete mode 100644 docs/documentation/grid/tiles.html diff --git a/docs/_includes/content/klmn.html b/docs/_includes/content/klmn.html index 6fcec764..81c74783 100644 --- a/docs/_includes/content/klmn.html +++ b/docs/_includes/content/klmn.html @@ -19,7 +19,7 @@
-
+
Main
@@ -27,17 +27,17 @@
-
+
Three columns
-
+
Three columns
-
+
Three columns
@@ -50,22 +50,22 @@
-
+
2
-
+
3
-
+
4
-
+
5
@@ -75,22 +75,22 @@
-
+
7
-
+
8
-
+
9
-
+
10
@@ -100,7 +100,7 @@
-
+
12
diff --git a/docs/_includes/global/navbar.html b/docs/_includes/global/navbar.html index ef57d4ac..a9a8a959 100644 --- a/docs/_includes/global/navbar.html +++ b/docs/_includes/global/navbar.html @@ -7,7 +7,7 @@ - + @@ -72,7 +72,7 @@
- + diff --git a/docs/_includes/index/columns.html b/docs/_includes/index/columns.html new file mode 100644 index 00000000..7a722587 --- /dev/null +++ b/docs/_includes/index/columns.html @@ -0,0 +1,98 @@ +{% capture columns %} +
+
1
+
2
+
3
+
4
+
5
+
+{% endcapture %} + +
+
+

+ + Simple columns + +

+

Just add columns, they will resize themselves

+
+
+
+

1

+
+
+
+
+

2

+
+
+
+
+

3

+
+
+
+
+

4

+
+
+
+
+

5

+
+
+ + + + + + + +
+
+

+ Add column +

+

+ Remove column +

+
+
+

Info

+

While it's possible to add as many columns as you want, it is recommended to stick with 12 columns.
+ If you want smaller divisions, you can always nest columns.

+
+
+ {% highlight html %}{{ columns }}{% endhighlight %} +
+
+
diff --git a/docs/_includes/index/fullheight.html b/docs/_includes/index/fullheight.html new file mode 100644 index 00000000..79dd9343 --- /dev/null +++ b/docs/_includes/index/fullheight.html @@ -0,0 +1,35 @@ +
+
+
+
+ +
+
+
+ +
+
+

+ + + + + Easy vertical centering in fullscreen + +

+

Include any content you want, it's always centered

+
+
+ +
+
+
+ +
+
+
+
diff --git a/docs/_includes/index/level.html b/docs/_includes/index/level.html new file mode 100644 index 00000000..2af097be --- /dev/null +++ b/docs/_includes/index/level.html @@ -0,0 +1,60 @@ +
+
+

+ + Flexible horizontal level + +

+

Include any type of element, they will remain vertically centered

+ +
+
diff --git a/docs/_includes/index/media-object.html b/docs/_includes/index/media-object.html new file mode 100644 index 00000000..7a3e0517 --- /dev/null +++ b/docs/_includes/index/media-object.html @@ -0,0 +1,51 @@ +
+
+
+
+

+ + + + + Versatile media object + +

+

A simple block with an image that will solve 90% of your UI problems

+
+ +
+
+
+
+
+ Image +
+
+
+
+

+ John Smith @johnsmith 31m +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis. +

+
+ +
+
+
+
+
+
+
diff --git a/docs/_includes/index/modifiers.html b/docs/_includes/index/modifiers.html new file mode 100644 index 00000000..32eede46 --- /dev/null +++ b/docs/_includes/index/modifiers.html @@ -0,0 +1,51 @@ +
+
+
+
+

+ + + + + Compose your element with modifier classes + +

+

Add and combine is-* CSS classes to quickly alter styles

+
+
+
+
+

+ button +

+
+ Button +
+
+
+

+ button is-primary +

+
+ Button +
+
+
+

+ button is-primary is-large +

+
+ Button +
+
+
+

+ button is-primary is-large is-loading +

+
+ Button +
+
+
+
+
diff --git a/docs/_includes/index/start.html b/docs/_includes/index/start.html new file mode 100644 index 00000000..fbbe19ff --- /dev/null +++ b/docs/_includes/index/start.html @@ -0,0 +1,19 @@ +
+
+

Get started

+
+ + + + + Check the docs + + + + + + Contribute + +
+
+
diff --git a/docs/_includes/index/tiles.html b/docs/_includes/index/tiles.html new file mode 100644 index 00000000..8b6c7d17 --- /dev/null +++ b/docs/_includes/index/tiles.html @@ -0,0 +1,93 @@ +{% capture tiles %} +
+
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+{% endcapture %} + +
+
+

+ + + + + Magic tiles + +

+

A single element for a Metro UI-style CSS grid

+
+
+
+
+
+

Vertical...

+

Top tile

+
+
+

...tiles

+

Bottom tile

+
+
+
+
+

Middle tile

+

With an image

+
+ +
+
+
+
+
+
+

Wide tile

+

Aligned with the right tile

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

+
+
+
+
+
+
+

Tall tile

+

With even more content

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

+

Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.

+

Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.

+
+
+
+
+
+ {% highlight html %}{{ tiles }}{% endhighlight %} +
+
+
diff --git a/docs/_includes/index/tws.html b/docs/_includes/index/tws.html new file mode 100644 index 00000000..de1cf176 --- /dev/null +++ b/docs/_includes/index/tws.html @@ -0,0 +1,3 @@ +
+ {% include elements/tws.html %} +
diff --git a/docs/_includes/index/usual.html b/docs/_includes/index/usual.html new file mode 100644 index 00000000..c7a4b07a --- /dev/null +++ b/docs/_includes/index/usual.html @@ -0,0 +1,12 @@ +
+
+

+ + + + + And all the usual elements and components + +

+
+
diff --git a/docs/_layouts/post.html b/docs/_layouts/post.html index 18cb2371..430bbc52 100644 --- a/docs/_layouts/post.html +++ b/docs/_layouts/post.html @@ -55,7 +55,6 @@ breadcrumb: {% endif %}
-

@@ -72,8 +71,12 @@ breadcrumb:

-
- {{ content }} +
+
+
+ {{ content }} +
+
@@ -91,20 +94,6 @@ breadcrumb: {% endif %}
- -
diff --git a/docs/_sass/example.sass b/docs/_sass/example.sass index 0b31b5c3..435910f7 100644 --- a/docs/_sass/example.sass +++ b/docs/_sass/example.sass @@ -1,7 +1,7 @@ .bd-example, .bd-structure, .bd-snippet - border: 1px solid $yellow + border: 2px solid $background position: relative &::before background: $yellow @@ -14,6 +14,7 @@ font-weight: bold left: -1px letter-spacing: 1px + margin-left: -1px padding: 3px 5px position: absolute text-transform: uppercase @@ -46,14 +47,12 @@ // Snippet .bd-snippet +block - border: 2px solid $background margin-top: 2rem position: relative &::before content: "Snippet" align-items: stretch display: flex - margin-left: -1px .bd-snippet-preview padding: 1.5rem diff --git a/docs/_sass/highlight.sass b/docs/_sass/highlight.sass index d9576b0d..ff2f896f 100644 --- a/docs/_sass/highlight.sass +++ b/docs/_sass/highlight.sass @@ -2,7 +2,8 @@ background-color: #f5f5f5 color: #586e75 pre - font-size: 12px + font-size: 0.875em + line-height: 1.375 .c color: #93a1a1 .err, diff --git a/docs/_sass/route.sass b/docs/_sass/route.sass index 9b0fa342..baca58a0 100644 --- a/docs/_sass/route.sass +++ b/docs/_sass/route.sass @@ -6,12 +6,6 @@ html.route-index position: relative .title.is-2 a:hover color: $blue - .title.is-2 .icon.is-medium - font-size: 56px - left: -80px - opacity: 0.1 - position: absolute - top: 10px .hero .title.is-2 a color: $white .hero .title.is-2 a:hover @@ -24,5 +18,3 @@ html.route-index @media screen and (max-width: 979px) .title.is-2 a padding-left: 0 - .title.is-2 .icon.is-medium - display: none diff --git a/docs/_sass/specific.sass b/docs/_sass/specific.sass index 7a67a7fc..94983954 100644 --- a/docs/_sass/specific.sass +++ b/docs/_sass/specific.sass @@ -1,3 +1,7 @@ ++selection + background-color: $primary + color: $primary-invert + .bd-links counter-reset: bd-links @@ -196,6 +200,8 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default .bd-notification background-color: $background border-radius: $radius + color: $text-light + font-weight: $weight-semibold padding: 1.25rem 0 position: relative text-align: center @@ -206,9 +212,11 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default color: currentColor code, pre - background: $white + background-color: rgba($black, 0.2) + border-radius: $radius + color: $white pre code - background: transparent + background-color: transparent // Colors @each $name, $pair in $colors $color: nth($pair, 1) diff --git a/docs/bulma-docs.sass b/docs/bulma-docs.sass index 3f339667..830f2da2 100644 --- a/docs/bulma-docs.sass +++ b/docs/bulma-docs.sass @@ -15,6 +15,18 @@ $rss: #f26522 $carbon-width: 300px $main-spacing: 3rem +=selection($current-selector: false) + @if $current-selector + &::-moz-selection + @content + &::selection + @content + @else + \::-moz-selection + @content + \::selection + @content + @import "../bulma" @import "./_sass/main" @import "./_sass/highlight" diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 55ade0eb..cc554e99 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -9715,7 +9715,8 @@ label.panel-block:hover { } .highlight pre { - font-size: 12px; + font-size: 0.875em; + line-height: 1.375; } .highlight .c { @@ -10561,6 +10562,16 @@ svg { text-decoration: underline; } +::-moz-selection { + background-color: #00d1b2; + color: #fff; +} + +::selection { + background-color: #00d1b2; + color: #fff; +} + .bd-links { counter-reset: bd-links; } @@ -10810,6 +10821,8 @@ svg { .bd-notification { background-color: whitesmoke; border-radius: 4px; + color: #7a7a7a; + font-weight: 600; padding: 1.25rem 0; position: relative; text-align: center; @@ -10824,11 +10837,13 @@ svg { .bd-notification code, .bd-notification pre { - background: white; + background-color: rgba(10, 10, 10, 0.2); + border-radius: 4px; + color: white; } .bd-notification pre code { - background: transparent; + background-color: transparent; } .bd-notification.is-white { @@ -10896,7 +10911,7 @@ svg { .bd-example, .bd-structure, .bd-snippet { - border: 1px solid #ffdd57; + border: 2px solid whitesmoke; position: relative; } @@ -10913,6 +10928,7 @@ svg { font-weight: bold; left: -1px; letter-spacing: 1px; + margin-left: -1px; padding: 3px 5px; position: absolute; text-transform: uppercase; @@ -10960,7 +10976,6 @@ svg { } .bd-snippet { - border: 2px solid whitesmoke; margin-top: 2rem; position: relative; } @@ -10969,7 +10984,6 @@ svg { content: "Snippet"; align-items: stretch; display: flex; - margin-left: -1px; } .bd-snippet-preview { @@ -11397,14 +11411,6 @@ html.route-index .title.is-2 a:hover { color: #3273dc; } -html.route-index .title.is-2 .icon.is-medium { - font-size: 56px; - left: -80px; - opacity: 0.1; - position: absolute; - top: 10px; -} - html.route-index .hero .title.is-2 a { color: white; } @@ -11426,9 +11432,6 @@ html.route-index .hero.is-primary a.column:hover .title strong { html.route-index .title.is-2 a { padding-left: 0; } - html.route-index .title.is-2 .icon.is-medium { - display: none; - } } .bd-tws-home { diff --git a/docs/documentation/columns/gap.html b/docs/documentation/columns/gap.html index 3172ffac..50c7e44b 100644 --- a/docs/documentation/columns/gap.html +++ b/docs/documentation/columns/gap.html @@ -13,22 +13,22 @@ breadcrumb: {% capture columns_default_gap %}
-

+

Default gap

-

+

Default gap

-

+

Default gap

-

+

Default gap

@@ -106,16 +106,16 @@ breadcrumb:
-

First column

+

First column

-

Second column

+

Second column

-

Third column

+

Third column

-

Fourth column

+

Fourth column

@@ -129,31 +129,31 @@ breadcrumb:
-

is-one-quarter

+

is-one-quarter

-

is-one-quarter

+

is-one-quarter

-

is-one-quarter

+

is-one-quarter

-

is-one-quarter

+

is-one-quarter

-

is-half

+

is-half

-

is-one-quarter

+

is-one-quarter

-

is-one-quarter

+

is-one-quarter

-

is-one-quarter

+

is-one-quarter

-

Auto

+

Auto

@@ -169,13 +169,6 @@ breadcrumb: Experimental
- -
-
- New - 0.5.2 -
-
diff --git a/docs/documentation/columns/options.html b/docs/documentation/columns/options.html index b3ae3092..d82dedb1 100644 --- a/docs/documentation/columns/options.html +++ b/docs/documentation/columns/options.html @@ -45,7 +45,7 @@ breadcrumb: {% capture columns_mobile_centered %}
-

+

is-half
is-narrow

@@ -56,31 +56,31 @@ breadcrumb: {% capture columns_mobile_multiline_centered %}
-

+

is-narrow
First Column

-

+

is-narrow
Our Second Column

-

+

is-narrow
Third Column

-

+

is-narrow
The Fourth Column

-

+

is-narrow
Fifth Column

@@ -96,31 +96,31 @@ breadcrumb:
-

is-one-quarter

+

is-one-quarter

-

is-one-quarter

+

is-one-quarter

-

is-one-quarter

+

is-one-quarter

-

is-one-quarter

+

is-one-quarter

-

is-half

+

is-half

-

is-one-quarter

+

is-one-quarter

-

is-one-quarter

+

is-one-quarter

-

is-one-quarter

+

is-one-quarter

-

Auto

+

Auto

@@ -136,7 +136,7 @@ breadcrumb:
-

+

is-half
is-narrow

@@ -153,31 +153,31 @@ breadcrumb:
-

+

is-narrow
First Column

-

+

is-narrow
Our Second Column

-

+

is-narrow
Third Column

-

+

is-narrow
The Fourth Column

-

+

is-narrow
Fifth Column

diff --git a/docs/documentation/columns/responsiveness.html b/docs/documentation/columns/responsiveness.html index c4112058..b04f1e22 100644 --- a/docs/documentation/columns/responsiveness.html +++ b/docs/documentation/columns/responsiveness.html @@ -54,16 +54,16 @@ breadcrumb:
-

1

+

1

-

2

+

2

-

3

+

3

-

4

+

4

@@ -86,16 +86,16 @@ breadcrumb:
-

1

+

1

-

2

+

2

-

3

+

3

-

4

+

4

@@ -109,23 +109,23 @@ breadcrumb:
-

+

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

-

1

+

1

-

1

+

1

-

1

+

1

-

1

+

1

diff --git a/docs/documentation/columns/sizes.html b/docs/documentation/columns/sizes.html index bcc2d098..71bed26c 100644 --- a/docs/documentation/columns/sizes.html +++ b/docs/documentation/columns/sizes.html @@ -144,127 +144,127 @@ breadcrumb:
-

+

is-four-fifths

-

Auto

+

Auto

-

Auto

+

Auto

-

+

is-three-quarters

-

Auto

+

Auto

-

Auto

+

Auto

-

+

is-two-thirds

-

Auto

+

Auto

-

Auto

+

Auto

-

+

is-three-fifths

-

Auto

+

Auto

-

Auto

+

Auto

-

+

is-half

-

Auto

+

Auto

-

Auto

+

Auto

-

+

is-two-fifths

-

Auto

+

Auto

-

Auto

+

Auto

-

+

is-one-third

-

Auto

+

Auto

-

Auto

+

Auto

-

+

is-one-quarter

-

Auto

+

Auto

-

Auto

+

Auto

-

+

is-one-fifth

-

Auto

+

Auto

-

Auto

+

Auto

@@ -297,217 +297,217 @@ breadcrumb:
-

is-2

+

is-2

-

1

+

1

-

1

+

1

-

1

+

1

-

1

+

1

-

1

+

1

-

1

+

1

-

1

+

1

-

1

+

1

-

1

+

1

-

1

+

1

-

is-3

+

is-3

-

1

+

1

-

1

+

1

-

1

+

1

-

1

+

1

-

1

+

1

-

1

+

1

-

1

+

1

-

1

+

1

-

1

+

1

-

is-4

+

is-4

-

1

+

1

-

1

+

1

-

1

+

1

-

1

+

1

-

1

+

1

-

1

+

1

-

1

+

1

-

1

+

1

-

is-5

+

is-5

-

1

+

1

-

1

+

1

-

1

+

1

-

1

+

1

-

1

+

1

-

1

+

1

-

1

+

1

-

is-6

+

is-6

-

1

+

1

-

1

+

1

-

1

+

1

-

1

+

1

-

1

+

1

-

1

+

1

-

is-7

+

is-7

-

1

+

1

-

1

+

1

-

1

+

1

-

1

+

1

-

1

+

1

-

is-8

+

is-8

-

1

+

1

-

1

+

1

-

1

+

1

-

1

+

1

-

is-9

+

is-9

-

1

+

1

-

1

+

1

-

1

+

1

-

is-10

+

is-10

-

1

+

1

-

1

+

1

-

is-11

+

is-11

-

1

+

1

@@ -521,7 +521,7 @@ breadcrumb:
-

+

is-half
is-offset-one-quarter

@@ -530,7 +530,7 @@ breadcrumb:
-

+

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

@@ -539,7 +539,7 @@ breadcrumb:
-

+

is-4
is-offset-8

@@ -548,7 +548,7 @@ breadcrumb:
-

+

is-11
is-offset-1

diff --git a/docs/documentation/elements/tag.html b/docs/documentation/elements/tag.html index 07443454..bb925391 100644 --- a/docs/documentation/elements/tag.html +++ b/docs/documentation/elements/tag.html @@ -133,8 +133,6 @@ meta:
{% endcapture %} -{% include subnav/subnav-elements.html %} - {% capture tags_blog_addons %}
diff --git a/docs/documentation/grid/columns.html b/docs/documentation/grid/columns.html deleted file mode 100644 index 47e8b946..00000000 --- a/docs/documentation/grid/columns.html +++ /dev/null @@ -1,1056 +0,0 @@ ---- -title: Columns powered by Flexbox -layout: documentation -doc-tab: grid -doc-subtab: columns ---- - - - -{% capture columns %} -
-
- First column -
-
- Second column -
-
- Third column -
-
- Fourth column -
-
-{% endcapture %} - -{% capture columns_sizes %} -
-
-

- is-four-fifths -

-
-
-

Auto

-
-
- -
-
-

- is-three-quarters -

-
-
-

Auto

-
-
-

Auto

-
-
- -
-
-

- is-two-thirds -

-
-
-

Auto

-
-
-

Auto

-
-
- -
-
-

- is-half -

-
-
-

Auto

-
-
-

Auto

-
-
- -
-
-

- is-one-third -

-
-
-

Auto

-
-
-

Auto

-
-
- -
-
-

- is-one-quarter -

-
-
-

Auto

-
-
- -
-
-

- is-one-fifth -

-
-
-

Auto

-
-
-

Auto

-
-
-

Auto

-
-
-{% endcapture %} - -{% capture columns_offset %} -
-
-
- -
-
-
- -
-
-
-{% endcapture %} - -{% capture columns_mobile_centered %} -
-
-

- is-half
- is-narrow -

-
-
-{% endcapture %} - -{% capture columns_mobile_multiline_centered %} -
-
-

- is-narrow
- First Column -

-
-
-

- is-narrow
- Our Second Column -

-
-
-

- is-narrow
- Third Column -

-
-
-

- is-narrow
- The Fourth Column -

-
-
-

- is-narrow
- Fifth Column -

-
-
-{% endcapture %} - -{% capture columns_mobile %} -
-
1
-
2
-
3
-
4
-
-{% endcapture %} - -{% capture columns_desktop %} -
-
1
-
2
-
3
-
4
-
-{% endcapture %} - -{% capture columns_multiple_breakpoints %} -
-
- is-half-mobile
- is-one-third-tablet
- is-one-quarter-desktop -
-
1
-
1
-
1
-
1
-
-{% endcapture %} - -{% capture columns_nesting %} -
-
- First column -
-
- First nested column -
-
- Second nested column -
-
-
-
- Second column -
-
- 50% -
-
- Auto -
-
- Auto -
-
-
-
-{% endcapture %} - -{% capture columns_multiline %} -
-
- is-one-quarter -
-
- is-one-quarter -
-
- is-one-quarter -
-
- is-one-quarter -
-
- is-half -
-
- is-one-quarter -
-
- is-one-quarter -
-
- Auto -
-
-{% endcapture %} - -{% capture columns_gapless %} -
-
First column
-
Second column
-
Third column
-
Fourth column
-
-{% endcapture %} - -{% capture columns_gapless_multiline %} -
-
- is-one-quarter -
-
- is-one-quarter -
-
- is-one-quarter -
-
- is-one-quarter -
-
- is-half -
-
- is-one-quarter -
-
- is-one-quarter -
-
- Auto -
-
-{% endcapture %} - -{% capture columns_narrow %} -
-
-
-

Narrow column

-

This column is only 200px wide.

-
-
-
-
-

Flexible column

-

This column will take up the remaining space available.

-
-
-
-{% endcapture %} - -{% include subnav/subnav-grid.html %} - -
-
-

Columns

-

A simple way to build responsive columns

-
-
-

To build a grid, just:

-
    -
  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 %} - - {% include elements/anchor.html name="Sizes" %} - -
-

If you want to change the size of a single column, you can use one 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-three-quarters -

-
-
-

Auto

-
-
-

Auto

-
-
-
-
-

- is-two-thirds -

-
-
-

Auto

-
-
-

Auto

-
-
-
-
-

- is-half -

-
-
-

Auto

-
-
-

Auto

-
-
-
-
-

- is-one-third -

-
-
-

Auto

-
-
-

Auto

-
-
-
-
-

- is-one-quarter -

-
-
-

Auto

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

12 columns

-
-

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
    • -
-
-
-

Naming

-

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.

-
- -
-
-

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

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

- 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-half
- is-offset-one-quarter -

-
-
- -
-
-

- is-4
- is-offset-8 -

-
-
- -
-
-

- is-11
- is-offset-1 -

-
-
- - {% highlight html %}{{ columns_offset }}{% endhighlight %} - - {% include elements/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 %} - - {% include elements/anchor.html name="Responsiveness" %} - -
-

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, just use the is-desktop modifier on the columns container:

-
-
-
-

1

-
-
-

2

-
-
-

3

-
-
-

4

-
-
- {% highlight html %}{{ columns_desktop }}{% endhighlight %} - -

Different 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 %} - - {% include elements/anchor.html name="Nesting" %} - -
-

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

-
    -
  • - columns: top-level columns container -
      -
    • - column -
        -
      • - columns: nested columns -
          -
        • - 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. -

-
- -
-
-

First column

-
-
-

First nested column

-
-
-

Second nested column

-
-
-
-
-

Second column

-
-
-

50%

-
-
-

Auto

-
-
-

Auto

-
-
-
-
- - {% highlight html %}{{ columns_nesting }}{% endhighlight %} - - {% include elements/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 elements/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-two-fifths

-
-
-

is-one-fifth

-
-
-

is-two-fifths

-
-
-

is-one-quarter

-
-
-

Auto

-
-
- {% highlight html %}{{ columns_gapless_multiline }}{% endhighlight %} - - {% include elements/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 -
    • -
-
-
-
diff --git a/docs/documentation/grid/tiles.html b/docs/documentation/grid/tiles.html deleted file mode 100644 index d42fded0..00000000 --- a/docs/documentation/grid/tiles.html +++ /dev/null @@ -1,899 +0,0 @@ ---- -title: Tiles powered by Flexbox -layout: documentation -doc-tab: grid -doc-subtab: tiles ---- - - - -{% include subnav/subnav-grid.html %} - -
-
-

Tiles

-

A single tile element to build 2-dimensional Metro-like, Pinterest-like, or whatever-you-like grids

- -
- -
-

To build intricate 2-dimensional layouts, you only need a single element: the tile:

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

Example

-
-
-
-
-
-

Vertical...

-

Top tile

-
-
-

...tiles

-

Bottom tile

-
-
-
-
-

Middle tile

-

With an image

-
- -
-
-
-
-
-
-

Wide tile

-

Aligned with the right tile

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-
-
-
-
-
-

Tall tile

-

With even more content

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

-

Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.

-

Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.

-
-
-
-
-
- -{% highlight html %} -
-
-
-
-
-

Vertical...

-

Top tile

-
-
-

...tiles

-

Bottom tile

-
-
-
-
-

Middle tile

-

With an image

-
- -
-
-
-
-
-
-

Wide tile

-

Aligned with the right tile

-
- -
-
-
-
-
-
-
-

Tall tile

-

With even more content

-
- -
-
-
-
-
-{% endhighlight %} - -
- -

Modifiers

- -
-

The tile element has 16 modifiers:

-
    -
  • - 3 contextual modifiers -
      -
    • is-ancestor
      • -
    • is-parent
      • -
    • is-child
      • -
    -
    • -
  • - 1 directional modifier -
      -
    • is-vertical
      • -
    -
    • -
  • - 12 horizontal size modifiers -
      -
    • from is-1
      • -
    • to is-12
      • -
    -
    • -
-
- -
- -

How it works: Nesting

-
-

Everything is a tile! To create a grid of tiles, you only need to nest tile elements.

-
- -
-
-

Start with an ancestor tile that will wrap all other tiles:

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

Add tile elements that will distribute themselves horizontally:

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

- You can resize any tile according to a 12 column grid. -
- For example, is-4 will take up 1/3 of the horizontal space: -

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

If you want to stack tiles vertically, add is-vertical on the parent tile:

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

As soon as you want to add content to a tile, just:

-
    -
  • add any class you want, like box
    • -
  • add the is-child modifier on the tile
    • -
  • add the is-parent modifier on the parent tile
    • -
-
-
-
-{% highlight html %} -
-
-
-

One

-
-
-

Two

-
-
-
-
-

Three

-
-
-
-{% endhighlight %} -
-
- -
-
-
-

One

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-

Two

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-
-
-

Three

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

-

Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.

-

Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.

-
-
-
- -{% highlight html %} -
-
-
-

One

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-

Two

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-
-
-

Three

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

-

Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.

-

Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.

-
-
-
-{% endhighlight %} - -
- -

Nesting requirements

- -
-
- 3 levels deep at least... -
-
-
-

You need at least 3 levels of hierarchy:

-{% highlight markdown %} -tile is-ancestor -| -└───tile is-parent - | - └───tile is-child -{% endhighlight %} -
-
-
- -
-
- ...but more levels if you want! -
-
-
-

You can, however, nest tiles deeper than that, and mix it up!

-{% highlight markdown %} -tile is-ancestor -| -├───tile is-vertical is-8 -| | -| ├───tile -| | | -| | ├───tile is-parent is-vertical -| | | ├───tile is-child -| | | └───tile is-child -| | | -| | └───tile is-parent -| | └───tile is-child -| | -| └───tile is-parent -| └───tile is-child -| -└───tile is-parent - └───tile is-child -{% endhighlight %} -
-
-
- -
-
-
-
-
-

Vertical tiles

-

Top box

-
-
-

Vertical tiles

-

Bottom box

-
-
-
-
-

Middle box

-

With an image

-
- -
-
-
-
-
-
-

Wide column

-

Aligned with the right column

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-
-
-
-
-
-

Tall column

-

With even more content

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

-

Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.

-

Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.

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

3 columns

- -
-
-
-

Hello World

-

What is up?

-
-
-
-
-

Foo

-

Bar

-
-
-
-
-

Third column

-

With some content

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-
-
-
-
-
-
-
-

Vertical tiles

-

Top box

-
-
-

Vertical tiles

-

Bottom box

-
-
-
-
-

Middle box

-

With an image

-
- -
-
-
-
-
-
-

Wide column

-

Aligned with the right column

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-
-
-
-
-
-

Tall column

-

With even more content

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

-

Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.

-

Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.

-
-
-
-
-
-
-
-
-

Side column

-

With some content

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-
-
-
-

Main column

-

With some content

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-
-
- -{% highlight html %} -
-
-
-

Hello World

-

What is up?

-
-
-
-
-

Foo

-

Bar

-
-
-
-
-

Third column

-

With some content

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-
-
- -
-
-
-
-
-

Vertical tiles

-

Top box

-
-
-

Vertical tiles

-

Bottom box

-
-
-
-
-

Middle box

-

With an image

-
- -
-
-
-
-
-
-

Wide column

-

Aligned with the right column

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-
-
-
-
-
-

Tall column

-

With even more content

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

-

Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.

-

Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.

-
-
-
-
-
- -
-
-
-

Side column

-

With some content

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-
-
-
-

Main column

-

With some content

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-
-
-{% endhighlight %} - -
- -

4 columns

- -
-
-
-

One

-

Subtitle

-
-
-
-
-

Two

-

Subtitle

-
-
-
-
-

Three

-

Subtitle

-
-
-
-
-

Four

-

Subtitle

-
-
-
-
-
-
-
-
-

Five

-

Subtitle

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

-
-
-
-
-
-
-
-

Six

-

Subtitle

-
-
-
-
-

Seven

-

Subtitle

-
-
-
-
-
-

Eight

-

Subtitle

-
-
-
-
-
-
-
-

Nine

-

Subtitle

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-
-
-
-

Ten

-

Subtitle

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-
-
-
-
-
-
-

Eleven

-

Subtitle

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

-

Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.

-
-
-
-
-
-
-
-
-

Twelve

-

Subtitle

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.

-
-
-
-
-
-

Thirteen

-

Subtitle

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-
-
-
-

Fourteen

-

Subtitle

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.

-
-
-
-
- -{% highlight html %} -
-
-
-

One

-

Subtitle

-
-
-
-
-

Two

-

Subtitle

-
-
-
-
-

Three

-

Subtitle

-
-
-
-
-

Four

-

Subtitle

-
-
-
- -
-
-
-
-
-

Five

-

Subtitle

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

-
-
-
-
-
-
-
-

Six

-

Subtitle

-
-
-
-
-

Seven

-

Subtitle

-
-
-
-
-
-

Eight

-

Subtitle

-
-
-
-
-
-
-
-

Nine

-

Subtitle

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-
-
-
-

Ten

-

Subtitle

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-
-
-
-
-
-
-

Eleven

-

Subtitle

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

-

Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.

-
-
-
-
-
- -
-
-
-

Twelve

-

Subtitle

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.

-
-
-
-
-
-

Thirteen

-

Subtitle

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-
-
-
-

Fourteen

-

Subtitle

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.

-
-
-
-
-{% endhighlight %} -
-
diff --git a/docs/documentation/layout/container.html b/docs/documentation/layout/container.html index dbc2f54f..8fd56411 100644 --- a/docs/documentation/layout/container.html +++ b/docs/documentation/layout/container.html @@ -1,7 +1,7 @@ --- title: Container layout: documentation -hide_carbon: true +hide_categories: true doc-tab: layout doc-subtab: container breadcrumb: @@ -66,7 +66,7 @@ breadcrumb:

The values 960, 1152 and 1344 have been chosen because they are divisible by both 12 and 16.

-{% include layout/main-close.html %} +{% include layout/main-close.html show_categories=true %}
{{container_example}} diff --git a/docs/documentation/layout/footer.html b/docs/documentation/layout/footer.html index 4e840d09..c61bf2cc 100644 --- a/docs/documentation/layout/footer.html +++ b/docs/documentation/layout/footer.html @@ -1,7 +1,7 @@ --- title: Footer layout: documentation -hide_carbon: true +hide_categories: true doc-tab: layout doc-subtab: footer breadcrumb: @@ -25,7 +25,7 @@ breadcrumb: {% endcapture %} -{% include layout/main-close.html %} +{% include layout/main-close.html show_categories=true %} {% include elements/snippet.html content=footer_example horizontal=true more=true fullwidth=true %} diff --git a/docs/documentation/layout/hero.html b/docs/documentation/layout/hero.html index 197e2946..64c07970 100644 --- a/docs/documentation/layout/hero.html +++ b/docs/documentation/layout/hero.html @@ -1,7 +1,7 @@ --- title: Hero layout: documentation -hide_carbon: true +hide_categories: true doc-tab: layout doc-subtab: hero breadcrumb: @@ -11,7 +11,7 @@ breadcrumb: - layout-hero --- -{% include layout/main-close.html %} +{% include layout/main-close.html show_categories=true %}
diff --git a/docs/documentation/modifiers/color-helpers.html b/docs/documentation/modifiers/color-helpers.html index 57567feb..c4c1e79f 100644 --- a/docs/documentation/modifiers/color-helpers.html +++ b/docs/documentation/modifiers/color-helpers.html @@ -52,6 +52,10 @@ breadcrumb: +{% assign vernum = site.version | downcase | remove: "." | plus: 0 %} + +{% if vernum >= 63 %} + {% include elements/anchor.html name="Background color" %} {% include elements/new-tag.html version="0.6.3" %} @@ -95,3 +99,5 @@ breadcrumb: has-background-white-bis{% include color/white-bis.html %} + +{% endif %} diff --git a/docs/index.html b/docs/index.html index 17be4190..0b965faf 100644 --- a/docs/index.html +++ b/docs/index.html @@ -5,450 +5,13 @@ fixed_navbar: true --- {% include global/navbar.html id="Index" %} - {% include index/intro.html %} - -
- {% include elements/tws.html %} -
- -
-
-

- - - - - Simple columns - -

-

Just add columns, they will resize themselves

-
-
-
-

1

-
-
-
-
-

2

-
-
-
-
-

3

-
-
-
-
-

4

-
-
-
-
-

5

-
-
- - - - - - - -
-
-

- Add column -

-

- Remove column -

-
-
-

Info

-

While it's possible to add as many columns as you want, it is recommended to stick with 12 columns.
- If you want smaller divisions, you can always nest columns.

-
-
-{% highlight html %} -
-
1
-
2
-
3
-
4
-
5
-
-{% endhighlight %} -
-
-
- -
- -
-
-

- - - - - Magic tiles - -

-

A single element for a Metro UI-style CSS grid

-
-
-
-
-
-

Vertical...

-

Top tile

-
-
-

...tiles

-

Bottom tile

-
-
-
-
-

Middle tile

-

With an image

-
- -
-
-
-
-
-
-

Wide tile

-

Aligned with the right tile

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

-
-
-
-
-
-
-

Tall tile

-

With even more content

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

-

Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.

-

Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.

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

- - - - - Flexible horizontal level - -

-

Include any type of element, they will remain vertically centered

- -
-
- -
- -
-
-
-
-

- - - - - Versatile media object - -

-

A simple block with an image that will solve 90% of your UI problems

-
- -
-
-
-
-
- Image -
-
-
-
-

- John Smith @johnsmith 31m -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis. -

-
- -
-
-
-
-
-
-
- -
-
-
-
- -
-
-
- -
-
-

- - - - - Easy vertical centering in fullscreen - -

-

Include any content you want, it's always centered

-
-
- -
-
-
- -
-
-
-
- -
-
-
-
-

- - - - - Compose your element with modifier classes - -

-

Add and combine is-* CSS classes to quickly alter styles

-
-
-
-
-

- button -

-
- Button -
-
-
-

- button is-primary -

-
- Button -
-
-
-

- button is-primary is-large -

-
- Button -
-
-
-

- button is-primary is-large is-loading -

-
- Button -
-
-
-
-
- -
- -
-
-

- - - - - And all the usual elements and components - -

-
-
- -{% include index/features.html %} - -
- -
-
-

Get started

-
- - - - - Check the docs - - - - - - Contribute - -
-
-
+{% include index/tws.html %} +{% include index/columns.html %} + +{% include index/level.html %} +{% include index/media-object.html %} +{% include index/fullheight.html %} + + +{% include index/start.html %}