bulmacss/docs/_includes/index/columns.html at master · GlenSmale/bulmacss · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
{% capture columns %}
<div class="columns">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
  <div class="column">5</div>
</div>
{% endcapture %}

{% assign columns_link = site.data.links.by_id['columns-basics'] %}
{% assign heading_href = site.url | append: columns_link.path %}

<section class="bd-index-section" style="--bd-section-h: 229deg;">
  {%
    include components/heading.html
    color="link"
    icon="fas fa-columns"
    title="The <strong>simplest</strong> grid system"
    subtitle="Just add columns, they will <strong>resize themselves</strong>"
    href=heading_href
    button_icon_after="fas fa-arrow-right"
    button_label="See <strong>columns</strong> docs"
  %}

  <div class="container">
    <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-link has-text-centered">
          <p class="title">1</p>
        </div>
      </div>
      <div class="column">
        <div class="notification is-link has-text-centered">
          <p class="title">2</p>
        </div>
      </div>
      <div class="column">
        <div class="notification is-link has-text-centered">
          <p class="title">3</p>
        </div>
      </div>
      <div class="column">
        <div class="notification is-link has-text-centered">
          <p class="title">4</p>
        </div>
      </div>
      <div class="column">
        <div class="notification is-link has-text-centered">
          <p class="title">5</p>
        </div>
      </div>
      <div class="column" style="display: none;">
        <div class="notification is-link has-text-centered">
          <p class="title">6</p>
        </div>
      </div>
      <div class="column" style="display: none;">
        <div class="notification is-link has-text-centered">
          <p class="title">7</p>
        </div>
      </div>
      <div class="column" style="display: none;">
        <div class="notification is-link has-text-centered">
          <p class="title">8</p>
        </div>
      </div>
      <div class="column" style="display: none;">
        <div class="notification is-link has-text-centered">
          <p class="title">9</p>
        </div>
      </div>
      <div class="column" style="display: none;">
        <div class="notification is-link has-text-centered">
          <p class="title">10</p>
        </div>
      </div>
      <div class="column" style="display: none;">
        <div class="notification is-link has-text-centered">
          <p class="title">11</p>
        </div>
      </div>
      <div class="column" style="display: none;">
        <div class="notification is-link has-text-centered">
          <p class="title">12</p>
        </div>
      </div>
    </div>

    <div class="bd-columns-tools">
      <div class="bd-columns-tool bd-is-try">
        <div class="buttons bd-has-drawing">
          <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>
          {% include elements/drawing.html id='try-it-out' width=150 height=65
          %}
        </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>
</section>