component-library/index.html at main · r4j2k/component-library · 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
<!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>Component Library</title>
    <link href="styles.css" rel="stylesheet"/>
</head>
<body>
    <h1>CodeMonkey's Component Library</h1>
    <p>I'm currently attending neog.camp and I want to make a library which would make all my projects look good and consistent.</p>

    <hr>

    <h2>@Typography</h2>
    <h1>This is the biggest heading</h1>
    <h2>This is the second biggest heading</h2>
    <p>This is a normal text. It's free flowing and will wrap at the end like a paragraph.</p>
    <small>This is relatively Small Texts.</small>

    <h2>@Containers</h2>

    <h3>fluid Container.</h3>
    <div class="container container-fluid">This is a fluid container and it will go till the end of the page.</div>

    <h3>centered container</h3>
    <div class="container container-center">This is a centered container and it will go till the specified width</div>

    <hr>

    <h2>@Links</h2>

    <a class="link link-primary" href="/">Primary Link</a>
    <a class="link link-secondary" href="/">Secondary Link</a>

    <hr>

    <h2>@lists</h2>

    <h3>Unordered list</h3>
    <ul class="list-non-bullet">
        <li>Item One</li>
        <li>Item Two</li>
        <li>Item Three</li>
    </ul>

    <h3>Unordered inline list</h3>
    <ul>
        <li class="list-item-inline">Inline Item One</li>
        <li class="list-item-inline">Inline Item Two</li>
        <li class="list-item-inline">Inline Item Three</li>
    </ul>

    <h3>Reverse Ordered List</h3>
    <ol reversed>
        <li>Item One</li>
        <li>Item Two</li>
        <li>Item Three</li>
    </ol>

    <hr>

    <h2>@nav</h2>

    <nav class="navigation container">
        <div class="nav-brand">CodeMonkey</div>
        <ul class="list-non-bullet nav-pills">
            <li class="list-item-inline">
                <a class="link link-active" href="/">home</a>
            </li>
            <li class="list-item-inline">
                <a class="link link-active" href="/">projects</a>
            </li>
            <li class="list-item-inline">
                <a class="link link-active" href="/">about</a>
            </li>
        </ul>
    </nav>

    <hr>

    <h2>@header</h2>

    <header class="hero">
        <img class="hero-img" src="images/hero.svg"/>
        <h1 class="hero-heading">Header inside Hero</h1>
    </header>

    <hr>

    <h2>@sections</h2>

    <section class="section">
        <div class="container container-center">
            <h1>A white section</h3>
            <p>This would've a white background</p>
        </div>
    </section>

    <section class="section ow">
        <div class="container container-center">
            <h1>off white section</h3>
            <p>This would've a gray background</p>
        </div>
    </section>

    <hr>

    <h2>@footer</h2>
    <footer clas="footer">
        <div class="footer-header">A small heading inside the footer</div>
        <ul class="social-links list-non-bullet">
            <li class="list-item-inline">
                <a class="link" href="/">socialOne</a>
            </li>
            <li class="list-item-inline">
                <a class="link" href="/">socialTwo</a>
            </li>
            <li class="list-item-inline">
                <a class="link" href="/">socialThree</a>
            </li>
        </ul>
    </footer>

    <!--
        Color Code: #63A8FF
    -->
</body>
</html>