Pixelbite-CSS.github.io/index.html at main · Pixelbite-CSS/Pixelbite-CSS.github.io · 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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Home | PixelbiteCSS</title>
    <link rel="stylesheet" href="https://pixelbite-css.github.io/pixelbite-css/style/1.6/pixelbite-min.css">
</head>
<body class="darkmodeClassics">
    <component path="./components/header.html" class="fixed w-100%" backfolder="."></component>
    <div class="w-100% darkmodeFont gradient-transparent-cherry96-0 dark:gradient-transparent-cherry9-0">
        <div class="h-500px pos-absolute bottom-0 left-0 w-100%">
            <component path="./components/tiled_wallpaper.html"></component>
        </div>
        <div class="auto-width p-128px-32px flexColumn flexCenter flexMiddle g-18px max1000:mt-0px min1000:mt-0">
            <component path="./home/components/version_block.html" object:object="https://pixelbite-css.github.io/pixelbite-css/assets/object.json"></component>
            <img src="./assets/logo_white_shield.svg" height="128"/>
            <p class="of-hidden ta-center lh-1.2">
                <span class="fs-52px fw-800">Framework that makes website development <span class="c-primary" id="animate">easier</span>.</span>
            </p>
            <p class="w-60% o-.7 ta-center">
                Customisable CSS and Javascript framework, that uses its own classes like <a class="c-primary fw-500">flex</a>, <a class="c-primary fw-500">ta-center</a> or <a class="c-primary fw-500">slideshow</a> to help you create websites faster and responsive.
            </p>
            <p>
                <div class="g-8px min700:flexDirection-column max700:flexDirection-row ta-center">
                    <a href="./docs" class="fs-14px td-none c-white bg-primary d-inline_block p-6px-18px br-6px fw-600 mb-8px">
                        Get started
                        <i class="fa-solid fa-arrow-right-long ml-20px"></i>
                    </a>
                    <a href="./news" class="fs-14px td-none c-black dark:c-white bg-rgba(128,128,128,.4) d-inline_block p-6px-18px br-6px fw-600 mb-8px">
                        Read what's new
                        <i class="fa-solid fa-arrow-right-long ml-20px"></i>
                    </a>
                </div>
            </p>
            <div class="fs-16px w-100% pos-relative">
                <component path="./components/codeblock.html"></component>
            </div>
        </div>
    </div>
    <div class="auto-width flexCenter flexMiddle flexColumn p-64px-14px" id="getting_started">
        <component path="./components/title_icon.html" icon="fa-solid fa-cube"></component>
        <p class="fw-700 fs-42px ta-center m-0">Getting started</p>
        <p class="ta-center o-.8 w-500px">
            Start using <span class="c-primary">PixelbiteCSS</span> now by selecting version you want to use or you can optionally donwload library via <a href="https://www.jsdelivr.com/package/npm/pixelbite-css" target="_blank">npm</a> or <a href="https://github.com/Pixelbite-CSS/pixelbite-css" target="_blank">Github</a>.
            <br><br>
            <a href="./docs">Read installation docs</a>
        </p>
        <div class="flexRow flexWrap-wrap flexCenter flexLeft w-100% p-32px g-48px">
            <div class="w-820px flexColumn flexLeft bg-cherry98 dark:bg-cherry6 br-16px p-12px-28px">
                <component path="./home/components/link_block.html" object:object="https://pixelbite-css.github.io/pixelbite-css/assets/object.json"></component>
            </div>
        </div>
    </div>
    <div class="auto-width flexRow flexCenter flexTop flexWrap g-0px-48px foreach:ta-left">
        <div class="w-560px flexLeft flexMiddle flexColumn mb-128px">
            <component path="./components/title_icon.html" icon="fa-solid fa-fill-drip"></component>
            <p class="fw-600 fs-42px ta-center m-0">Easy to customize</p>
            <p class="ta-left o-.8 w-600px">
                You can customize every aspect of <a href="./">PixelbiteCSS</a>'s framework. Change or add colors, variables, classes, elements, scripts and more
                with fully customizable <b>.conf</b> files.
            </p>
            <a href="./docs" class="fs-14px td-none c-white bg-primary d-inline_block p-6px-18px br-6px fw-600">
                Read docs
                <i class="fa-solid fa-arrow-right-long ml-20px"></i>
            </a>
        </div>
        <div class="w-560px flexLeft flexMiddle flexColumn mb-128px">
            <component path="./components/title_icon.html" icon="fa-solid fa-shapes"></component>
            <p class="fw-600 fs-42px ta-center m-0">Custom components</p>
            <p class="ta-left o-.8 w-600px">
                Since version 1.5 you can use your own custom created components stright inside of HTML files. Use tags such as <code>${variable}</code> inside
                your code to make use of <b>custom variables</b>.
            </p>
            <a href="./docs" class="fs-14px td-none c-white bg-primary d-inline_block p-6px-18px br-6px fw-600">
                Read docs
                <i class="fa-solid fa-arrow-right-long ml-20px"></i>
            </a>
        </div>
        <div class="w-560px flexLeft flexMiddle flexColumn mb-128px">
            <component path="./components/title_icon.html" icon="fa-solid fa-palette"></component>
            <p class="fw-600 fs-42px ta-center m-0">Custom themes</p>
            <p class="ta-left o-.8 w-600px">
                You can use, create or edit themes on <a href="https://github.com/Pixelbite-CSS/themes" target="_blank">Github themes repository</a> to make
                websites even faster and nicer.
            </p>
            <a href="https://github.com/Pixelbite-CSS/themes" target="_blank" class="fs-14px td-none c-white bg-primary d-inline_block p-6px-18px br-6px fw-600">
                Visit themes
                <i class="fa-solid fa-arrow-right-long ml-20px"></i>
            </a>
        </div>
        <div class="w-560px flexLeft flexMiddle flexColumn mb-128px">
            <component path="./components/title_icon.html" icon="fa-solid fa-circle-half-stroke"></component>
            <p class="fw-600 fs-42px ta-center m-0">Darkmode</p>
            <p class="ta-left o-.8 w-600px">
                <b>PixelbiteCSS</b> uses it's own custom <b>darkmode</b>. Implement your own custom <b>darkmode</b> theme for your website with easy to use prefixes.
            </p>
            <a href="./docs" class="fs-14px td-none c-white bg-primary d-inline_block p-6px-18px br-6px fw-600">
                Read docs
                <i class="fa-solid fa-arrow-right-long ml-20px"></i>
            </a>
        </div>
        <div class="w-560px flexLeft flexMiddle flexColumn mb-128px">
            <component path="./components/title_icon.html" icon="fa-solid fa-font-awesome"></component>
            <p class="fw-600 fs-42px ta-center m-0">FontAwesome support</p>
            <p class="ta-left o-.8 w-600px">
                <b>PixelbiteCSS</b> supports implementation of <a href="https://fontawesome.com" target="_blank">FontAwesome</a>'s icons. Change <b>FontAwesome</b>
                url in <i>config file</i>.
            </p>
            <a href="https://fontawesome.com" target="_blank" class="fs-14px td-none c-white bg-primary d-inline_block p-6px-18px br-6px fw-600">
                Visit FontAwesome
                <i class="fa-solid fa-arrow-right-long ml-20px"></i>
            </a>
        </div>
        <div class="w-560px flexLeft flexMiddle flexColumn mb-128px">
            <component path="./components/title_icon.html" icon="fa-solid fa-box-open"></component>
            <p class="fw-600 fs-42px ta-center m-0">Open Source</p>
            <p class="ta-left o-.8 w-600px">
                This project is fully backed by its own community. Join us now at our <a href="https://github.com/Pixelbite-CSS" target="_blank">Github</a> and
                help contribute.
            </p>
            <a href="https://github.com/Pixelbite-CSS" target="_blank" class="fs-14px td-none c-white bg-primary d-inline_block p-6px-18px br-6px fw-600">
                Visit Github
                <i class="fa-solid fa-arrow-right-long ml-20px"></i>
            </a>
        </div>
    </div>
    <div class="auto-width p-48px-12px flexColumn g-32px">
        <p class="fw-700 fs-42px ta-center m-0">FAQ's</p>
        <div class="flexColumn g-12px">
            <div class="q1 b-1px-solid-cherry70 dark:b-1px-solid-cherry30 bg-cherry97 dark:bg-cherry10 w-500px p-22px-32px br-4px flexRow g-12px pointer" onclick="toggleElement('q1')">
                <i class="fa-solid fa-plus fs-23px"></i>
                <div>What is PixelbiteCSS?</div>
            </div>
            <div class="q1 hidden shadow b-1px-solid-cherry70 dark:b-1px-solid-cherry30 w-500px p-22px-32px br-4px flexRow g-12px pointer flexTop flexLeft" onclick="toggleElement('q1')">
                <i class="fa-solid fa-minus fs-23px c-cherry50 mt-1px"></i>
                <div>
                    What is PixelbiteCSS?<br>
                    <div class="fs-14px o-.8">
                        PixelbiteCSS is an open-source frontend development framework designed to streamline the process of building responsive and modern web applications. It provides a set of pre-designed components, styles, and utilities to accelerate development while maintaining flexibility for customization.
                    </div>
                </div>
            </div>
            <div class="q2 b-1px-solid-cherry70 dark:b-1px-solid-cherry30 bg-cherry97 dark:bg-cherry10 w-500px p-22px-32px br-4px flexRow g-12px pointer" onclick="toggleElement('q2')">
                <i class="fa-solid fa-plus fs-23px mb-25px"></i>
                <div>How does PixelbiteCSS differ from other frontend frameworks?</div>
            </div>
            <div class="q2 hidden shadow b-1px-solid-cherry70 dark:b-1px-solid-cherry30 w-500px p-22px-32px br-4px flexRow g-12px pointer flexTop flexLeft" onclick="toggleElement('q2')">
                <i class="fa-solid fa-minus fs-23px c-cherry50 mt-1px"></i>
                <div>
                    How does PixelbiteCSS differ from other frontend frameworks?<br>
                    <div class="fs-14px o-.8">
                        PixelbiteCSS stands out for its lightweight nature, simplicity, and emphasis on customization. It offers a minimalist approach, allowing developers to pick and choose components and styles according to their project's requirements, without unnecessary bloat.
                    </div>
                </div>
            </div>
            <div class="q3 b-1px-solid-cherry70 dark:b-1px-solid-cherry30 bg-cherry97 dark:bg-cherry10 w-500px p-22px-32px br-4px flexRow g-12px pointer" onclick="toggleElement('q3')">
                <i class="fa-solid fa-plus fs-23px mb-25px"></i>
                <div>Is PixelbiteCSS suitable for both beginners and experienced developers?</div>
            </div>
            <div class="q3 hidden shadow b-1px-solid-cherry70 dark:b-1px-solid-cherry30 w-500px p-22px-32px br-4px flexRow g-12px pointer flexTop flexLeft" onclick="toggleElement('q3')">
                <i class="fa-solid fa-minus fs-23px c-cherry50 mt-1px"></i>
                <div>
                    Is PixelbiteCSS suitable for both beginners and experienced developers?<br>
                    <div class="fs-14px o-.8">
                        Absolutely! PixelbiteCSS is designed with a user-friendly syntax that makes it accessible for beginners, while offering advanced customization options for experienced developers. Whether you're just starting or looking for a flexible framework, PixelbiteCSS caters to a wide range of skill levels.
                    </div>
                </div>
            </div>
            <div class="q4 b-1px-solid-cherry70 dark:b-1px-solid-cherry30 bg-cherry97 dark:bg-cherry10 w-500px p-22px-32px br-4px flexRow g-12px pointer" onclick="toggleElement('q4')">
                <i class="fa-solid fa-plus fs-23px"></i>
                <div>What are the key features of PixelbiteCSS?</div>
            </div>
            <div class="q4 hidden shadow b-1px-solid-cherry70 dark:b-1px-solid-cherry30 w-500px p-22px-32px br-4px flexRow g-12px pointer flexTop flexLeft" onclick="toggleElement('q4')">
                <i class="fa-solid fa-minus fs-23px c-cherry50 mt-1px"></i>
                <div>
                    What are the key features of PixelbiteCSS?<br>
                    <div class="fs-14px o-.8">
                        PixelbiteCSS includes fully generative range of custom utility classes and seamless integration with Font Awesome icons. It prioritizes customizability and ease of use for developers.
                    </div>
                </div>
            </div>
            <div class="q5 b-1px-solid-cherry70 dark:b-1px-solid-cherry30 bg-cherry97 dark:bg-cherry10 w-500px p-22px-32px br-4px flexRow g-12px pointer" onclick="toggleElement('q5')">
                <i class="fa-solid fa-plus fs-23px"></i>
                <div>How can I contribute to PixelbiteCSS?</div>
            </div>
            <div class="q5 hidden shadow b-1px-solid-cherry70 dark:b-1px-solid-cherry30 w-500px p-22px-32px br-4px flexRow g-12px pointer flexTop flexLeft" onclick="toggleElement('q5')">
                <i class="fa-solid fa-minus fs-23px c-cherry50 mt-1px"></i>
                <div>
                    How can I contribute to PixelbiteCSS?<br>
                    <div class="fs-14px o-.8">
                        We welcome contributions! You can contribute to PixelbiteCSS by reporting issues, submitting pull requests, and getting involved in discussions on our GitHub repository. Additionally, we are currently looking for contributors to join our team; check our <a href='./team/positions'>Open Positions</a> for more information.
                    </div>
                </div>
            </div>
            <div class="q6 b-1px-solid-cherry70 dark:b-1px-solid-cherry30 bg-cherry97 dark:bg-cherry10 w-500px p-22px-32px br-4px flexRow g-12px pointer" onclick="toggleElement('q6')">
                <i class="fa-solid fa-plus fs-23px  mb-25px"></i>
                <div>What kind of support is available for PixelbiteCSS users?</div>
            </div>
            <div class="q6 hidden shadow b-1px-solid-cherry70 dark:b-1px-solid-cherry30 w-500px p-22px-32px br-4px flexRow g-12px pointer flexTop flexLeft" onclick="toggleElement('q6')">
                <i class="fa-solid fa-minus fs-23px c-cherry50 mt-1px"></i>
                <div>
                    What kind of support is available for PixelbiteCSS users?<br>
                    <div class="fs-14px o-.8">
                        We provide community support through <a href='https://github.com/orgs/Pixelbite-CSS/discussions/6' target="_blank">GitHub discussions</a>, where users can ask questions, share experiences, and get help from the community.
                    </div>
                </div>
            </div>
            <div class="flexColumn g-12px mt-12px mb-128px">
                <div class="ta-center">
                    Have any questions? Ask us in our <a href="https://github.com/orgs/Pixelbite-CSS/discussions/6" target="_blank">Github issues</a>.
                </div>
            </div>
        </div>
    </div>
    <div class="auto-width p-12px">
        <div class="bg-cherry60 c-white dark:bg-cherry40 p-48px-64px br-8px shadow-0-10px-20px-rgba(0,0,0,.3)
            flex flexDirection-row flexJustifyContent-space_between min1000:flexDirection-column g-24px of-hidden pos-relative
        ">
            <div class="pos-absolute bottom-_100px right-80px fs-256px o-.5 c-black">
                <i class="fa-solid fa-folder-open"></i>
            </div>
            <div>
                <h2 class="fw-600">PixelbiteCSS blank template</h2>
                <p class="o-.8">
                    Download PixelbiteCSS's blank template for fast start up. Template includes recommended version with config
                    ready to use.
                </p>
            </div>
            <div class="w-300px ta-right">
                <button class="bg-transparent c-white b-1px-solid-white" onclick="href('https://github.com/Pixelbite-CSS', true)">Download template</button>
            </div>
        </div>
    </div>
    <component path="./components/footer.html" class="w-100%" backfolder="."></component>
</body>
<div class="loader loader-page flexCenter flexMiddle bg-custom">
    <div class="loader-line"></div>
</div>
<script src="https://pixelbite-css.github.io/pixelbite-css/script/1.6/pixelbite-min.js"></script>
<script src="./home/animate.js"></script>
</body>
</html>