mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-28 12:24:23 +00:00
Fix index columns
This commit is contained in:
Jeremy Thomas
parent
b61f9d15dc
commit
8932a3e67f
@ -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>
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user