Skip to content

Commit aff1f48

Browse files
UnderlineWordsUnderlineWords
committed
b20
1 parent 0a4fd5b commit aff1f48

92 files changed

Lines changed: 7320 additions & 6287 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎api/configuration/index.html‎

Lines changed: 222 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,222 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<link rel="canonical" href="https://codeforms.github.io/Punica-CSS-Framework/api/configuration">
7+
<title> Configuration - Punica CSS Framework v3 </title>
8+
<meta name="description" content="Punica CSS Framework allows you to seamlessly modify all configuration settings through &lt;span class=&#039;color-warning&#039;&gt;3 API files&lt;/span&gt;, enabling effortless customization and recompilation for your project.">
9+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/codeforms/Punica-CSS-Framework@3.x.x/dist/punica-dark.min.css">
11+
<link rel="stylesheet" href="https://codeforms.github.io/Punica-CSS-Framework/assets/build/css/prism.css">
12+
</head>
13+
<body class="overflow-auto">
14+
<div class="reset container">
15+
<header class="fixed small navbar border-bottom-1 bg-color">
16+
<div class="container reset">
17+
<!-- responsive hamburger menu -->
18+
<input type="checkbox" id="burger">
19+
<label for="burger" class="burger"></label>
20+
<!-- /responsive hamburger menu-->
21+
22+
<section class="brand width-240">
23+
<a href="https://codeforms.github.io/Punica-CSS-Framework/" class="display-flex align-items-center text-large">
24+
Punica CSS <span class="weight-normal ml-5 text-small">v3</span>
25+
</a>
26+
</section>
27+
28+
<section class="links">
29+
<div class="divided section justify-content-flex-start">
30+
<div class="full height borderless tab align-items-center">
31+
<a href="https://codeforms.github.io/Punica-CSS-Framework/components/alert" class="button color-text-lighten-20 weight-500 height-30 border-1 px-0 mx-15 ">Components</a>
32+
<a href="https://codeforms.github.io/Punica-CSS-Framework/elements/button" class="button color-text-lighten-20 weight-500 height-30 border-1 px-0 mx-15 ">Elements</a>
33+
<a href="https://codeforms.github.io/Punica-CSS-Framework/utilities/accent-color" class="button color-text-lighten-20 weight-500 height-30 border-1 px-0 mx-15 ">Utilities</a>
34+
<a href="https://codeforms.github.io/Punica-CSS-Framework/api/installation" class="button color-text-lighten-20 weight-500 height-30 border-1 px-0 mx-15 active">API Docs</a>
35+
</div>
36+
</div>
37+
<div class="section justify-content-flex-end flex-initial px-50">
38+
<div class="buttons">
39+
<div class="dropdown bottom right">
40+
<a class="button toggle " tabindex="0">
41+
Preview <i class="material-symbols-outlined ml-5">keyboard_arrow_down</i>
42+
</a>
43+
<ul class="small menu">
44+
<li class="item">
45+
<a href="https://codeforms.github.io/Punica-CSS-Framework/preview/default" target="_blank">
46+
Default Theme
47+
</a>
48+
</li>
49+
<li class="item">
50+
<a href="https://codeforms.github.io/Punica-CSS-Framework/preview/dark" target="_blank">
51+
Default Dark Theme
52+
</a>
53+
</li>
54+
</ul>
55+
</div>
56+
</div>
57+
<a href="https://github.com/codeforms/Punica-CSS-Framework" class="mx-20" target="_blank">
58+
<svg viewBox="0 0 20 20" style="fill: white;" class="width-30 height-30"><path d="M10 0C4.475 0 0 4.475 0 10a9.994 9.994 0 006.838 9.488c.5.087.687-.213.687-.476 0-.237-.013-1.024-.013-1.862-2.512.463-3.162-.612-3.362-1.175-.113-.287-.6-1.175-1.025-1.412-.35-.188-.85-.65-.013-.663.788-.013 1.35.725 1.538 1.025.9 1.512 2.337 1.087 2.912.825.088-.65.35-1.088.638-1.338-2.225-.25-4.55-1.112-4.55-4.937 0-1.088.387-1.987 1.025-2.688-.1-.25-.45-1.274.1-2.65 0 0 .837-.262 2.75 1.026a9.28 9.28 0 012.5-.338c.85 0 1.7.112 2.5.337 1.912-1.3 2.75-1.024 2.75-1.024.55 1.375.2 2.4.1 2.65.637.7 1.025 1.587 1.025 2.687 0 3.838-2.337 4.688-4.562 4.938.362.312.675.912.675 1.85 0 1.337-.013 2.412-.013 2.75 0 .262.188.574.688.474A10.016 10.016 0 0020 10c0-5.525-4.475-10-10-10z"></path></svg>
59+
</a>
60+
</div>
61+
</section>
62+
</div>
63+
</header>
64+
<div class="main-container display-flex" style="margin-top: 65px;">
65+
<div class="sidebar display-flex border-right-1 width-280 shrink-0 position-fixed left-0" style="height: calc(-65px + 100vh); padding-bottom: calc(-65px + 100vh); top: 65px;">
66+
<div class="position-sticky top-0 left-0 height-100 border-bottom-1 border-x-0 border-top-0 border-grey weight-normal border-solid mb-10 pt-0 full width display-block">
67+
<div class="leading-1 display-flex align-items-center full height width border-left-10 border-dark">
68+
<div class="full width px-40">
69+
<div class="h5 weight-normal">api docs</div>
70+
<small class="letter-widest disabled">Configuration</small>
71+
</div>
72+
</div>
73+
<div class="pure small menu display-block overflow-y-auto pb-100 pt-20 px-30" style="height: calc(-145px + 100vh);">
74+
<li class="item">
75+
<a href="https://codeforms.github.io/Punica-CSS-Framework/api/installation" class="py-0 ">Installation</a>
76+
</li>
77+
<li class="item">
78+
<a href="https://codeforms.github.io/Punica-CSS-Framework/api/configuration" class="py-0 active bg-dark">Configuration</a>
79+
</li>
80+
<li class="item">
81+
<a href="javascript:" class="py-0 disabled mt-15 weight-400">Root Directory</a>
82+
<div class="pure menu pt-0">
83+
<div class="item">
84+
<a href="https://codeforms.github.io/Punica-CSS-Framework/api/options" class="py-0 ">
85+
options.scss
86+
</a>
87+
<a href="https://codeforms.github.io/Punica-CSS-Framework/api/utils" class="py-0 ">
88+
utilities.scss
89+
</a>
90+
<a href="https://codeforms.github.io/Punica-CSS-Framework/api/themes" class="py-0 ">
91+
themes.scss
92+
</a>
93+
<a href="javascript:" class="py-0 disabled">
94+
<i class="material-symbols-outlined mr-5">folder_open</i> Core / Global
95+
</a>
96+
<div class="pure menu pt-0 px-30">
97+
<div class="item">
98+
<a href="https://codeforms.github.io/Punica-CSS-Framework/api/core/global-colors" class="py-0 pl-10 ">
99+
Colors.scss
100+
</a>
101+
</div>
102+
<div class="item">
103+
<a href="https://codeforms.github.io/Punica-CSS-Framework/api/core/global-getters" class="py-0 pl-10 ">
104+
Getters.scss
105+
</a>
106+
</div>
107+
<div class="item">
108+
<a href="https://codeforms.github.io/Punica-CSS-Framework/api/core/global-options" class="py-0 pl-10 ">
109+
Options.scss
110+
</a>
111+
</div>
112+
</div>
113+
<a href="javascript:" class="py-0 disabled">
114+
<i class="material-symbols-outlined mr-5">folder_open</i> Core / Theme
115+
<div class="pure menu pt-0 px-30">
116+
<div class="item">
117+
<a href="https://codeforms.github.io/Punica-CSS-Framework/api/core/theme-getters" class="py-0 pl-10 ">
118+
Getters.scss
119+
</a>
120+
</div>
121+
</div>
122+
</a>
123+
</div>
124+
</div>
125+
</li>
126+
</div>
127+
</div>
128+
</div>
129+
<main class="content-container display-flex flex-direction-column flex-1 ml-280 ">
130+
<div class="container-xxl">
131+
<div class="row">
132+
<div class="col-lg-16 col-sm-16 col-xs-16 col-md-16 pt-20 pb-200 position-relative">
133+
<main class="row position-relative">
134+
<div class="col-lg-10 col-sm-16 col-xs-16">
135+
<div class="row py-20 height-32 radius-8 align-items-center">
136+
<div class="col-16 px-20 opacity-1">
137+
<div class="small alert center align text-italic">
138+
API documentation is not yet complete.
139+
</div>
140+
<div class="display-flex align-items-center border-bottom-1">
141+
<h2 class="display-flex mb-10">
142+
Configuration
143+
</h2>
144+
<div class="spacer"></div>
145+
</div>
146+
<div class="mt-20">Punica CSS Framework allows you to seamlessly modify all configuration settings through <span class='color-warning'>3 API files</span>, enabling effortless customization and recompilation for your project.</div>
147+
</div>
148+
</div>
149+
</div>
150+
<div class="col-lg-10 col-sm-16 col-xs-16">
151+
<div class="pure panel reset">
152+
<div class="header">
153+
<div class="h6">options.scss</div>
154+
</div>
155+
<div class="content">
156+
The <a href="https://codeforms.github.io/Punica-CSS-Framework/api/options">options.scss</a> API file defines the settings and options for all components and elements. It allows you to completely disable any component/element or turn off its features. You can also customize styles by adding new size or color options, renaming class names, and modifying all CSS properties for full flexibility.
157+
</div>
158+
<div class="content">
159+
<script type="text/plain" class="language-scss">
160+
$options: (
161+
'alert': (
162+
'enabled': false,
163+
...
164+
</script>
165+
</div>
166+
<div class="header">
167+
<div class="h6">utilities.scss</div>
168+
</div>
169+
<div class="content">
170+
The <a href="https://codeforms.github.io/Punica-CSS-Framework/api/utils">utilities.scss</a> API file provides a flexible interface for managing and customizing Punica’s utility class library. It allows you to add new utility classes, disable existing ones, and adjust predefined settings to seamlessly align with your project’s needs.
171+
</div>
172+
<div class="content">
173+
<script type="text/plain" class="language-scss">
174+
$utilities: (
175+
'accent-color': (
176+
'enabled': false,
177+
...
178+
</script>
179+
</div>
180+
<div class="header">
181+
<div class="h6">themes.scss</div>
182+
</div>
183+
<div class="content">
184+
You can create new themes using the <a href="https://codeforms.github.io/Punica-CSS-Framework/api/themes">themes.scss</a> API file and manage all settings in the <code>options.scss</code> and <code>utilities.scss</code> API files through your theme map. This approach allows for easy customization and flexibility, enabling you to adapt Punica to meet the specific needs of your project. By consolidating all configuration settings into <u>a single theme map</u>, you streamline the process of updating or switching between themes without the need for modifying multiple files.
185+
</div>
186+
</div>
187+
</div>
188+
</main>
189+
</div>
190+
</div>
191+
</div>
192+
</main>
193+
</div>
194+
</div>
195+
<script src="https://codeforms.github.io/Punica-CSS-Framework/assets/build/js/prism.js"></script>
196+
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
197+
<style type="text/css">
198+
@media only screen and (max-width: 1024px) {
199+
.sidebar {
200+
position: relative !important;
201+
top: auto !important;
202+
width: 100% !important;
203+
z-index: 0;
204+
}
205+
.main-container {
206+
flex-direction: column !important;
207+
}
208+
.content-container,
209+
.main-container {
210+
margin: 0 !important;
211+
}
212+
.navbar .section .dark.tab {
213+
flex-direction: column !important;
214+
align-items: flex-start !important;
215+
}
216+
.navbar .section .dark.tab > .button {
217+
width: 100%;
218+
}
219+
}
220+
</style>
221+
</body>
222+
</html>

0 commit comments

Comments
 (0)