elements/index.html at main · runarb/elements · 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
<html lang="en">
  <%- include('head.html'); -%>
  <body>
    <f-docs-template>
      <%- include('nav.html'); -%>

      <div slot="banner" class="mx-auto p-32" style="max-width: 1024">
        <div class="md:grid md:grid-cols-3">
          <div class="md:col-span-2">
            <h1
              style="font-size: 48px; line-height: 56px"
              class="text-white mb-16"
            >
              Fabric Elements
            </h1>
            <p style="font-size: 22px; line-height: 28px" class="text-white">
              The home of the web component, or custom elements, implementation
              of Fabric, FINN's design system.
            </p>
          </div>
        </div>
      </div>

      <main slot="content">
        <div class="grid lg:grid-cols-3 gap-16">
          <div class="lg:col-span-2">
            <h2 class="mb-16">Installation</h2>

            <p>
              All the Fabric Elements code is provided as a single package and
              each component can be imported from this package.
            </p>

            <h3 class="mt-24 mb-16">Install from NPM</h3>

            <p>The Fabric Elements package can be installed from NPM.</p>

            <syntax-highlight>npm install @fabric-ds/elements</syntax-highlight>

            <h3 class="mt-24 mb-16">Install from Eik</h3>

            <p>The same package is also available via our Eik CDN server</p>

            <syntax-highlight
              >https://assets.finn.no/pkg/@fabric-ds/elements/v0/index.js</syntax-highlight
            >

            <h2 class="mt-32 mb-16">Using Components</h2>

            <p>Once installed, components can be used in your HTML markup.</p>
            <syntax-highlight>
              <f-breadcrumbs class="mt-10">
                <a href="#/url/1">Eiendom</a>
                <a href="#/url/2">Bolig til salgs</a>
                <a href="#/url/3" aria-current="page"> Oslo </a>
              </f-breadcrumbs>
            </syntax-highlight>

            <f-breadcrumbs class="mt-10">
              <a href="#/url/1">Eiendom</a>
              <a href="#/url/2">Bolig til salgs</a>
              <a href="#/url/3" aria-current="page"> Oslo </a>
            </f-breadcrumbs>

            <br />

            <h4 class="mt-24 mb-16">Importing from the NPM package</h4>

            👉
            <strong
              ><i
                >This is the most common method and should be used in most
                cases</i
              ></strong
            >

            When importing from NPM you will need to ensure you have build
            tooling in place. If you are working with Podium podlets or layouts
            which is the most common use case at Finn, you likely already have
            Eik in place with Rollup or Esbuild in which case no further action
            should be needed.

            <i>Example</i>
            <syntax-highlight>import '@fabric-ds/elements';</syntax-highlight>

            <h4 class="mt-24 mb-16">Importing directly from Eik</h4>

            👉
            <strong
              ><i
                >This is great for prototyping (can also be used in
                production)</i
              ></strong
            >

            <p>
              It is also possible to import components directly from the URL on
              our Eik server. While not common, it should be possible to write
              Elements code without the need for a build setup. You might find
              this useful for rapid prototyping something on a hack day for
              example!
            </p>

            <i>Example</i>
            <syntax-highlight>
              import
              'https://assets.finn.no/pkg/@fabric-ds/elements/v0/index.js';
            </syntax-highlight>
          </div>
          <div>
            <f-docs-highlight-box></f-docs-highlight-box>
          </div>
        </div>
      </main>
      <%- include('footer.html'); -%>
    </f-docs-template>

    <%- include('scripts.html'); -%>
  </body>
</html>