bulma/docs/extensions.html at master · bsor-dev/bulma · 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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
---
title: Extensions
layout: default
route: extensions
extensions:
- name: bulma-pricingtable
  url: https://wikiki.github.io/bulma-extensions/pricing-table
  slug: bulma-pricingtable
  width: 1125
  height: 423
- name: bulma-megamenu
  url: https://github.com/hunzaboy/bulma-megamenu
  slug: bulma-megamenu
  width: 668
  height: 182
- name: bulma-coolcheckboxes
  url: https://github.com/hunzaboy/Cool-Checkboxes-for-Bulma.io
  slug: bulma-coolcheckbox
  width: 450
  height: 184
- name: bulma-slider
  url: https://wikiki.github.io/bulma-extensions/slider
  slug: bulma-slider
  width: 1119
  height: 158
- name: bulma.io-axure
  url: https://github.com/Code-Mine-Development/Bulma.io-axure
  slug: bulma.io-axure
  width: 888
  height: 541
- name: bulma-checkradio
  url: https://wikiki.github.io/bulma-extensions/checkradio
  slug: bulma-checkradio
  width: 758
  height: 67
- name: bulma-switch
  url: https://wikiki.github.io/bulma-extensions/switch
  slug: bulma-switch
  width: 1113
  height: 178
- name: bulma-steps (alternative)
  url: https://aramvisser.github.io/bulma-steps/
  slug: bulma-steps-alternative
  width: 1078
  height: 280
- name: bulma-divider
  url: https://wikiki.github.io/bulma-extensions/divider
  slug: bulma-divider
  width: 1112
  height: 676
- name: bulma-calendar
  url: https://wikiki.github.io/bulma-extensions/calendar
  slug: bulma-calendar
  width: 382
  height: 338
- name: bulma-pageloader
  url: https://wikiki.github.io/bulma-extensions/pageloader
  slug: bulma-pageloader
  width: 490
  height: 278
- name: bulma-ribbon
  url: https://wikiki.github.io/bulma-extensions/ribbon
  slug: bulma-ribbon
  width: 646
  height: 174
- name: bulma-badge
  url: https://wikiki.github.io/bulma-extensions/badge
  slug: bulma-badge
  width: 406
  height: 162
- name: bulma-steps
  url: https://wikiki.github.io/bulma-extensions/steps
  slug: bulma-steps
  width: 989
  height: 89
- name: bulma-tooltip
  url: https://wikiki.github.io/bulma-extensions/tooltip
  slug: bulma-tooltip
  width: 215
  height: 55
- name: bulma-timeline
  url: https://wikiki.github.io/bulma-extensions/timeline
  slug: bulma-timeline
  width: 401
  height: 352
---

{% include navbar.html id="Extensions" %}

<section class="hero is-primary">
  <div class="hero-body">
    <div class="container">
      <div class="columns is-vcentered">
        <div class="column">
          <h1 class="title">
            <a href="{{ site.url }}/blog">Extensions</a>
          </h1>
          <p class="subtitle">
            Side projects to enhance Bulma
          </p>
        </div>
        <div class="column is-narrow">
          {% include carbon.html %}
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section">
  <div class="container">
    {% for extension in page.extensions %}
      <a class="box" href="{{ extension.url }}">
        <div class="columns">
          <div class="column is-one-third">
            <h3 class="title is-4">
              <strong>{{ extension.name }}</strong>
            </h3>
            <h4 class="subtitle is-6">
              {{ extension.url | remove:'http://' | remove:'https://' | remove:'www.' }}
            </h4>
          </div>
          <div class="column">
            <img src="{{site.url}}/images/extensions/{{ extension.slug }}.png" width="{{ extension.width }}" height="{{ extension.height }}">
          </div>
        </div>
      </a>
    {% endfor %}

    <div class="message">
      <div class="message-body">
        <div class="level">
          <div class="level-left">
            <div class="level-item">
              <p>Have an extension to share with the community?</p>
            </div>
          </div>
          <div class="level-right">
            <div class="level-item">
              <a class="button is-primary" href="https://github.com/jgthms/bulma/pulls">
                Submit a Pull Request
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>