Fastart/docs.html at dev · manismk/Fastart · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Fastart | Docs</title>
    <link rel="icon" href="/assets/favicon.png" />
    <link rel="apple-touch-icon" href="/assets/apple-touch-icon.png" />
    <link rel="manifest" href="/assets/manifest.webmanifest" />
    <link rel="stylesheet" href="/css/guide.css" />
    <link rel="stylesheet" href="/css/header.css" />
    <link rel="stylesheet" href="/css/docs.css" />
  </head>
  <body>
    <header class="header">
      <div class="logo">
        <a href="./index.html">Fastart</a>
      </div>
      <nav>
        <a
          class="nav-link"
          target="_blank"
          href="https://github.com/manismk/fastart"
          >Github</a
        >
      </nav>
    </header>
    <main>
      <aside class="sidenavbar">
        <nav>
          <p class="heading--4 text--bold">Get Started</p>
          <a href="/docs.html" class="side--nav--link active">Usage</a>
          <p class="heading--4 text--bold">Components</p>
          <a href="/components/alert/alert.html" class="side--nav--link"
            >Alert</a
          >
          <a href="/components/avatar/avatar.html" class="side--nav--link"
            >Avatar</a
          >
          <a href="/components/badge/badge.html" class="side--nav--link"
            >Badge</a
          >
          <a href="/components/button/button.html" class="side--nav--link"
            >Button</a
          >
          <a href="/components/card/card.html" class="side--nav--link">Card</a>
          <a href="/components/grid/grid.html" class="side--nav--link">Grid</a>
          <a href="/components/image/image.html" class="side--nav--link"
            >Image</a
          >
          <a href="/components/input/input.html" class="side--nav--link"
            >Input</a
          >
          <a href="/components/list/list.html" class="side--nav--link">List</a>
          <a href="/components/modal/modal.html" class="side--nav--link"
            >Modal</a
          >
          <a
            href="/components/navigation/navigation.html"
            class="side--nav--link"
            >Navigation</a
          >
          <a href="/components/rating/rating.html" class="side--nav--link"
            >Rating</a
          >
          <a href="/components/slider/slider.html" class="side--nav--link"
            >Slider</a
          >
          <a href="/components/text/text.html" class="side--nav--link">Text</a>
          <a href="/components/toast/toast.html" class="side--nav--link"
            >Toast</a
          >
        </nav>
      </aside>
      <section class="main--container">
        <div class="m-v-1">
          <h1 class="heading--2">Usage</h1>
          <p>
            Fastart is a component library which allows you to build apps faster
            by using the small components. To use Fastart component library in
            your projects you can simply import by adding the below code.
          </p>

          <div class="embed--container">
            <embed
              src="https://www.thiscodeworks.com/embed/61ffc5964dd44f0015f3cbec"
              class="embed--code"
            />
          </div>
          <p>
            You can select each component and see the detailed usage of the
            component.We have included the fontawesome cdn to our file.so no
            need to import it separately.
          </p>
          <div class="m-v-1"></div>
          <h3 class="heading--3">Resources</h3>
          <p>Resources that help in building fastart includes</p>
          <ol class="res--list">
            <li>Google Fonts</li>
            <li>Fontawesome</li>
            <li>Thiscodeworks</li>
            <li>Picsum</li>
            <li>Randomuser.me</li>
          </ol>
          <p class="text--bold">Keep Building! Happy coding!!</p>
        </div>

        <div class="pagination">
          <p></p>
          <a href="/components/alert/alert.html" class="pagination--link">
            Alert &gt</a
          >
        </div>
      </section>
    </main>
  </body>
</html>