-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
47 lines (42 loc) · 1.68 KB
/
index.html
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
<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 CSS</h1>
<p style="font-size: 22px; line-height: 28px" class="text-white">
The home of the CSS implementation of Fabric,
</p>
<p style="font-size: 22px; line-height: 28px" class="text-white">FINN's design system.</p>
</div>
</div>
</div>
<main slot="content">
<div class="md:grid lg:grid-cols-3 gap-16">
<div class="lg:col-span-2">
<h1>Introduction</h1>
<p>
It's important to understand that Fabric CSS is built on top of an open source project called
Tailwind. We built on top of Tailwind in order to take advantage of its enormous set of utility
classes that can be used to achieve just about anything. You almost never have to write CSS
again.
</p>
<h2>Getting started</h2>
<p>
You can use our getting started guide to install Fabric in your project.
Head on over to the <a href="https://www.fabric-ds.io/guide-setup">setup guide</a> to begin.
</p>
</div>
<div>
<f-docs-highlight-box></f-docs-highlight-box>
</div>
</div>
</main>
<%- include('footer.html'); -%>
</f-docs-template>
<%- include('scripts.html'); -%>
</body>
</html>