bulmacss/docs/_includes/index/customize.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
{% assign customize_link = site.data.links.by_id['customize'] %}
{% assign heading_href = site.url | append: customize_link.path %}

<section class="bd-index-section" style="--bd-section-h: 330deg;">
  {%
    include components/heading.html
    color="sass"
    icon="fab fa-sass"
    title="So <strong>quick</strong> to customize"
    subtitle="Simply set your own Sass variables before importing Bulma"
    href=heading_href
    button_icon_after="fas fa-arrow-right"
    button_label="See <strong>customization</strong> docs"
  %}

  <div class="container">
    <header class="block is-size-5-desktop mb-6">
      {% include elements/tw.html tweet_id="1070320154452656128" %}
    </header>

    <div class="columns is-variable is-8">
      <div class="column">
        <div class="bd-highlight-full bd-has-drawing">
          {% highlight scss %}{% include snippets/customized.html %}{%
          endhighlight %} {% include elements/drawing.html id='customize'
          width=152 height=76 %}
        </div>
      </div>

      <div class="column">
        <div class="bd-index-custom bd-is-before">
          <p class="bd-index-custom-title">Before</p>
          <div class="bd-index-custom-example">
            <h1 class="title">
              Bulma
            </h1>
            <p class="subtitle">
              Modern CSS framework based on
              <a
                href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox"
                >Flexbox</a
              >
            </p>
            <div class="field">
              <div class="control">
                <input class="input" type="text" placeholder="Input" />
              </div>
            </div>
            <div class="field">
              <p class="control">
                <span class="select">
                  <select>
                    <option>Select dropdown</option>
                  </select>
                </span>
              </p>
            </div>
            <div class="buttons">
              <a class="button is-primary">Primary</a>
              <a class="button is-link">Link</a>
            </div>
          </div>
        </div>

        <div class="bd-index-custom bd-is-after">
          <p class="bd-index-custom-title">After</p>
          <div class="bd-index-custom-example">
            <h1 class="title">
              Bulma
            </h1>
            <p class="subtitle">
              Modern CSS framework based on
              <a
                href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox"
                >Flexbox</a
              >
            </p>
            <div class="field">
              <div class="control">
                <input class="input" type="text" placeholder="Input" />
              </div>
            </div>
            <div class="field">
              <p class="control">
                <span class="select">
                  <select>
                    <option>Select dropdown</option>
                  </select>
                </span>
              </p>
            </div>
            <div class="buttons">
              <a class="button is-primary">Primary</a>
              <a class="button is-link">Link</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>