Fix index columns

This commit is contained in:
Jeremy Thomas 2018-04-10 12:26:37 +01:00
parent b61f9d15dc
commit 8932a3e67f
8 changed files with 188 additions and 57 deletions

View File

@ -8,14 +8,30 @@
</div>
{% endcapture %}
<section class="section is-medium">
{% assign columns_link = site.data.links.by_id['columns-basics'] %}
<section class="bd-columns section is-medium">
<div class="container">
<h3 class="title is-2">
<a href="{{ site.url }}/documentation/columns/basics">
Simple <strong>columns</strong>
<header class="bd-columns-header">
<h3 class="title is-3">
<a href="{{ site.url }}{{ columns_link.path }}">
The <strong>simplest</strong> grid system
</a>
</h3>
<h4 class="subtitle is-4">Just add columns, they will resize themselves</h4>
<h4 class="subtitle is-4">
Just add columns, they will resize themselves
</h4>
</header>
<div class="message is-warning is-hidden-tablet">
<p class="message-header">
Better on desktop
</p>
<p class="message-body">
This interactive tool works better on larger screens! That's because Bulma columns are <strong>vertical by default</strong>. I recommend revisiting this page later when you're on desktop. 😉
</p>
</div>
<div id="grid" class="columns">
<div class="column">
<div class="notification is-primary has-text-centered">
@ -78,21 +94,30 @@
</div>
</div>
</div>
<div class="field has-addons has-addons-centered">
<p class="control">
<a id="add" class="button is-unselectable">Add column</a>
</p>
<p class="control">
<a id="remove" class="button is-unselectable">Remove column</a>
</p>
<div class="bd-columns-tools">
<div class="bd-columns-tool bd-is-try">
<div class="buttons">
<a id="add" class="button is-large is-link is-unselectable">
<strong>Add column</strong>
</a>
<a id="remove" class="button is-large is-light is-unselectable">
<strong>Remove</strong>
</a>
</div>
</div>
<div class="bd-columns-tool bd-is-markup">
<div id="markup">
{% highlight html %}{{ columns }}{% endhighlight %}
</div>
</div>
</div>
<div id="message" class="message is-info">
<p class="message-header">Info</p>
<p class="message-body">While it's possible to add as many columns as you want, it is recommended to stick with <strong>12 columns</strong>.<br>
If you want smaller divisions, you can always <strong>nest</strong> columns.</p>
</div>
<div id="markup">
{% highlight html %}{{ columns }}{% endhighlight %}
</div>
</div>
</section>

View File

@ -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';

View File

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

View File

@ -1,10 +1,11 @@
html.route-index
.title.is-2
.title.is-2,
.title.is-3
position: relative
.title.is-2 a
a
color: $text-strong
position: relative
.title.is-2 a:hover
a:hover
color: $blue
.hero .title.is-2 a
color: $white

View File

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

View File

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

View File

@ -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;
}

View File

@ -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';