From 8932a3e67fb2c8320c17163cc207b452a2cdcb74 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Tue, 10 Apr 2018 12:26:37 +0100 Subject: [PATCH] Fix index columns --- docs/_includes/index/columns.html | 59 +++++++++++++------ docs/_javascript/index.js | 2 +- docs/_sass/index.sass | 67 ++++++++++++++++++---- docs/_sass/route.sass | 13 +++-- docs/_sass/sponsors.sass | 3 +- docs/bulma-docs.sass | 5 ++ docs/css/bulma-docs.css | 94 +++++++++++++++++++++++++------ docs/lib/index.js | 2 +- 8 files changed, 188 insertions(+), 57 deletions(-) diff --git a/docs/_includes/index/columns.html b/docs/_includes/index/columns.html index 7a722587..8aa126b7 100644 --- a/docs/_includes/index/columns.html +++ b/docs/_includes/index/columns.html @@ -8,14 +8,30 @@ {% endcapture %} -
+{% assign columns_link = site.data.links.by_id['columns-basics'] %} + +
-

- - Simple columns - -

-

Just add columns, they will resize themselves

+
+

+ + The simplest grid system + +

+

+ Just add columns, they will resize themselves +

+
+ +
+

+ Better on desktop +

+

+ This interactive tool works better on larger screens! That's because Bulma columns are vertical by default. I recommend revisiting this page later when you're on desktop. 😉 +

+
+
@@ -78,21 +94,30 @@
-
-

- Add column -

-

- Remove column -

+ +
+
+
+ + Add column + + + Remove + +
+
+ +
+
+ {% highlight html %}{{ columns }}{% endhighlight %} +
+
+

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/_javascript/index.js b/docs/_javascript/index.js index fd09327c..08753358 100644 --- a/docs/_javascript/index.js +++ b/docs/_javascript/index.js @@ -47,7 +47,7 @@ document.addEventListener('DOMContentLoaded', () => { $message.style.display = 'none'; } - showing = Math.min(Math.max(parseInt(showing), 2), 12); + showing = Math.min(Math.max(parseInt(showing), 1), 12); $columns.forEach($el => { $el.style.display = 'none'; diff --git a/docs/_sass/index.sass b/docs/_sass/index.sass index 090c5bee..2378bf6d 100644 --- a/docs/_sass/index.sass +++ b/docs/_sass/index.sass @@ -1,3 +1,56 @@ +// Columns + +.bd-columns-header + margin-bottom: 3rem + text-align: center + strong + color: $primary + font-weight: $weight-semibold + .subtitle + color: $grey-light + +#grid + .notification + padding-left: 0 + padding-right: 0 + +.bd-columns-tools + margin-top: 3rem + +.bd-columns-tool + @extend %center + &.bd-is-try + .buttons + justify-content: center + .button + strong + font-weight: $weight-semibold + +#markup + width: 100% + .highlight pre + max-height: none + +#message + display: none + margin-top: 3rem + ++mobile + .bd-columns-tool + &.bd-is-markup + margin-top: 3rem + ++tablet + .bd-columns-tools + align-items: flex-start + display: flex + .bd-columns-tool + width: 50% + &.bd-is-try + padding-top: 60px + +// Focus + .bd-focus margin: 6rem auto 0 max-width: $intro-width @@ -27,6 +80,8 @@ .fa-github-alt color: $github +// Intro + .intro-content margin-left: auto margin-right: auto @@ -210,15 +265,3 @@ margin-top: -11px &:not(:last-child) margin-bottom: 20px - -#grid - .notification - padding-left: 0 - padding-right: 0 - -#message - display: none - -#markup - .highlight pre - max-height: none diff --git a/docs/_sass/route.sass b/docs/_sass/route.sass index baca58a0..3084fb3f 100644 --- a/docs/_sass/route.sass +++ b/docs/_sass/route.sass @@ -1,11 +1,12 @@ html.route-index - .title.is-2 + .title.is-2, + .title.is-3 position: relative - .title.is-2 a - color: $text-strong - position: relative - .title.is-2 a:hover - color: $blue + a + color: $text-strong + position: relative + a:hover + color: $blue .hero .title.is-2 a color: $white .hero .title.is-2 a:hover diff --git a/docs/_sass/sponsors.sass b/docs/_sass/sponsors.sass index 2d5ab668..8556a645 100644 --- a/docs/_sass/sponsors.sass +++ b/docs/_sass/sponsors.sass @@ -13,12 +13,11 @@ display: flex flex-wrap: wrap justify-content: space-between - margin-bottom: -1rem a align-items: center display: flex justify-content: center - margin: 0 1rem 1rem 0 + margin-right: 1rem min-height: $carbon-height .bd-partners diff --git a/docs/bulma-docs.sass b/docs/bulma-docs.sass index 1f615134..f0b63562 100644 --- a/docs/bulma-docs.sass +++ b/docs/bulma-docs.sass @@ -17,6 +17,11 @@ $carbon-height: 100px $main-spacing: 3rem $intro-width: 1130px +%center + align-items: center + display: flex + justify-content: center + =selection($current-selector: false) @if $current-selector &::-moz-selection diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 8c66779b..1b45110a 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -1,4 +1,10 @@ @charset "UTF-8"; +.bd-columns-tool { + align-items: center; + display: flex; + justify-content: center; +} + /*! bulma.io v0.6.2 | MIT License | github.com/jgthms/bulma */ @keyframes spinAround { from { @@ -10089,6 +10095,69 @@ svg { text-decoration: underline; } +.bd-columns-header { + margin-bottom: 3rem; + text-align: center; +} + +.bd-columns-header strong { + color: #00d1b2; + font-weight: 600; +} + +.bd-columns-header .subtitle { + color: #b5b5b5; +} + +#grid .notification { + padding-left: 0; + padding-right: 0; +} + +.bd-columns-tools { + margin-top: 3rem; +} + +.bd-columns-tool.bd-is-try .buttons { + justify-content: center; +} + +.bd-columns-tool.bd-is-try .button strong { + font-weight: 600; +} + +#markup { + width: 100%; +} + +#markup .highlight pre { + max-height: none; +} + +#message { + display: none; + margin-top: 3rem; +} + +@media screen and (max-width: 768px) { + .bd-columns-tool.bd-is-markup { + margin-top: 3rem; + } +} + +@media screen and (min-width: 769px), print { + .bd-columns-tools { + align-items: flex-start; + display: flex; + } + .bd-columns-tool { + width: 50%; + } + .bd-columns-tool.bd-is-try { + padding-top: 60px; + } +} + .bd-focus { margin: 6rem auto 0; max-width: 1130px; @@ -10376,19 +10445,6 @@ svg { } } -#grid .notification { - padding-left: 0; - padding-right: 0; -} - -#message { - display: none; -} - -#markup .highlight pre { - max-height: none; -} - #github { color: #333333; border-color: #333333; @@ -11390,16 +11446,19 @@ svg { } } -html.route-index .title.is-2 { +html.route-index .title.is-2, +html.route-index .title.is-3 { position: relative; } -html.route-index .title.is-2 a { +html.route-index .title.is-2 a, +html.route-index .title.is-3 a { color: #363636; position: relative; } -html.route-index .title.is-2 a:hover { +html.route-index .title.is-2 a:hover, +html.route-index .title.is-3 a:hover { color: #3273dc; } @@ -12161,14 +12220,13 @@ html.route-index .hero.is-primary a.column:hover .title strong { display: flex; flex-wrap: wrap; justify-content: space-between; - margin-bottom: -1rem; } .bd-partner-sponsors a { align-items: center; display: flex; justify-content: center; - margin: 0 1rem 1rem 0; + margin-right: 1rem; min-height: 100px; } diff --git a/docs/lib/index.js b/docs/lib/index.js index 9546d5d0..e476325a 100644 --- a/docs/lib/index.js +++ b/docs/lib/index.js @@ -49,7 +49,7 @@ document.addEventListener('DOMContentLoaded', function () { $message.style.display = 'none'; } - showing = Math.min(Math.max(parseInt(showing), 2), 12); + showing = Math.min(Math.max(parseInt(showing), 1), 12); $columns.forEach(function ($el) { $el.style.display = 'none';