Skip to content

Commit f2acb0e

Browse files
UnderlineWordsUnderlineWords
committed
b2111
1 parent aff1f48 commit f2acb0e

File tree

92 files changed

+414
-299
lines changed

Some content is hidden

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

92 files changed

+414
-299
lines changed

‎api/configuration/index.html

Lines changed: 14 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1">
66
<link rel="canonical" href="https://codeforms.github.io/Punica-CSS-Framework/api/configuration">
77
<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.">
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; (options, utilities, and themes), enabling effortless customization and recompilation for your project.">
99
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
1010
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/codeforms/Punica-CSS-Framework@3.x.x/dist/punica-dark.min.css">
1111
<link rel="stylesheet" href="https://codeforms.github.io/Punica-CSS-Framework/assets/build/css/prism.css">
@@ -127,59 +127,53 @@
127127
</div>
128128
</div>
129129
<main class="content-container display-flex flex-direction-column flex-1 ml-280 ">
130-
<div class="container-xxl">
130+
<div class="container-xl">
131131
<div class="row">
132-
<div class="col-lg-16 col-sm-16 col-xs-16 col-md-16 pt-20 pb-200 position-relative">
132+
<div class="col-lg-14 col-sm-16 col-xs-16 col-md-16 pt-20 pb-200 position-relative">
133133
<main class="row position-relative">
134-
<div class="col-lg-10 col-sm-16 col-xs-16">
134+
<div class="col-lg-12 col-sm-16 col-xs-16">
135135
<div class="row py-20 height-32 radius-8 align-items-center">
136136
<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>
140137
<div class="display-flex align-items-center border-bottom-1">
141138
<h2 class="display-flex mb-10">
142139
Configuration
143140
</h2>
144141
<div class="spacer"></div>
145142
</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>
143+
<div class="mt-20">Punica CSS Framework allows you to seamlessly modify all configuration settings through <span class='color-warning'>3 API files</span> (options, utilities, and themes), enabling effortless customization and recompilation for your project.</div>
147144
</div>
148145
</div>
149146
</div>
150-
<div class="col-lg-10 col-sm-16 col-xs-16">
147+
<div class="col-lg-12 col-sm-16 col-xs-16">
151148
<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.
149+
<div class="content pt-0">
150+
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 enable/disable any component/element or turn on/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.
157151
</div>
158152
<div class="content">
159153
<script type="text/plain" class="language-scss">
154+
// options.scss
160155
$options: (
161156
'alert': (
162157
'enabled': false,
158+
'features': (
159+
'styles': true,
160+
'sizes' : false
161+
),
163162
...
164163
</script>
165164
</div>
166-
<div class="header">
167-
<div class="h6">utilities.scss</div>
168-
</div>
169165
<div class="content">
170166
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.
171167
</div>
172168
<div class="content">
173169
<script type="text/plain" class="language-scss">
170+
// utilities.scss
174171
$utilities: (
175172
'accent-color': (
176173
'enabled': false,
177174
...
178175
</script>
179176
</div>
180-
<div class="header">
181-
<div class="h6">themes.scss</div>
182-
</div>
183177
<div class="content">
184178
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.
185179
</div>

‎api/core/global-colors/index.html

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -127,27 +127,29 @@
127127
</div>
128128
</div>
129129
<main class="content-container display-flex flex-direction-column flex-1 ml-280 ">
130-
<div class="container-xxl">
130+
<div class="container-xl">
131131
<div class="row">
132-
<div class="col-lg-16 col-sm-16 col-xs-16 col-md-16 pt-20 pb-200 position-relative">
132+
<div class="col-lg-14 col-sm-16 col-xs-16 col-md-16 pt-20 pb-200 position-relative">
133133
<main class="row position-relative">
134-
<div class="col-lg-10 col-sm-16 col-xs-16">
134+
<div class="col-lg-12 col-sm-16 col-xs-16">
135135
<div class="row py-20 height-32 radius-8 align-items-center">
136136
<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>
140137
<div class="display-flex align-items-center border-bottom-1">
141138
<h2 class="display-flex mb-10">
142139
Core/Global/Colors.scss
143140
</h2>
144141
<div class="spacer"></div>
142+
<div class="tiny buttons">
143+
<a href="https://github.com/codeforms/Punica-CSS-Framework/blob/master/src/Core/Global/Colors.scss" class="button " target="_blank">
144+
<span class="material-symbols-outlined mr-5 text-small">article</span> Source
145+
</a>
146+
</div>
145147
</div>
146148
<div class="mt-20">The <code>Colors.scss</code> file is used to add extra colors to Punica. The defined color variables can be applied across various files of Punica. These colors are completely separate from the dynamically generated color palette.</div>
147149
</div>
148150
</div>
149151
</div>
150-
<div class="col-lg-10 col-sm-16 col-xs-16">
152+
<div class="col-lg-12 col-sm-16 col-xs-16">
151153
<div class="pure panel reset">
152154
<div class="content">
153155
<script type="text/plain" class="language-scss">

‎api/core/global-getters/index.html

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -127,26 +127,28 @@
127127
</div>
128128
</div>
129129
<main class="content-container display-flex flex-direction-column flex-1 ml-280 ">
130-
<div class="container-xxl">
130+
<div class="container-xl">
131131
<div class="row">
132-
<div class="col-lg-16 col-sm-16 col-xs-16 col-md-16 pt-20 pb-200 position-relative">
132+
<div class="col-lg-14 col-sm-16 col-xs-16 col-md-16 pt-20 pb-200 position-relative">
133133
<main class="row position-relative">
134-
<div class="col-lg-10 col-sm-16 col-xs-16">
134+
<div class="col-lg-12 col-sm-16 col-xs-16">
135135
<div class="row py-20 height-32 radius-8 align-items-center">
136136
<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>
140137
<div class="display-flex align-items-center border-bottom-1">
141138
<h2 class="display-flex mb-10">
142139
Core/Global/Getters.scss
143140
</h2>
144141
<div class="spacer"></div>
142+
<div class="tiny buttons">
143+
<a href="https://github.com/codeforms/Punica-CSS-Framework/blob/master/src/Core/Global/Getters.scss" class="button " target="_blank">
144+
<span class="material-symbols-outlined mr-5 text-small">article</span> Source
145+
</a>
146+
</div>
145147
</div>
146148
</div>
147149
</div>
148150
</div>
149-
<div class="col-lg-10 col-sm-16 col-xs-16">
151+
<div class="col-lg-12 col-sm-16 col-xs-16">
150152
<div class="pure panel reset">
151153
<div class="header">
152154
<div class="h5">

‎api/core/global-options/index.html

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -127,27 +127,29 @@
127127
</div>
128128
</div>
129129
<main class="content-container display-flex flex-direction-column flex-1 ml-280 ">
130-
<div class="container-xxl">
130+
<div class="container-xl">
131131
<div class="row">
132-
<div class="col-lg-16 col-sm-16 col-xs-16 col-md-16 pt-20 pb-200 position-relative">
132+
<div class="col-lg-14 col-sm-16 col-xs-16 col-md-16 pt-20 pb-200 position-relative">
133133
<main class="row position-relative">
134-
<div class="col-lg-10 col-sm-16 col-xs-16">
134+
<div class="col-lg-12 col-sm-16 col-xs-16">
135135
<div class="row py-20 height-32 radius-8 align-items-center">
136136
<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>
140137
<div class="display-flex align-items-center border-bottom-1">
141138
<h2 class="display-flex mb-10">
142139
Core/Global/Options.scss
143140
</h2>
144141
<div class="spacer"></div>
142+
<div class="tiny buttons">
143+
<a href="https://github.com/codeforms/Punica-CSS-Framework/blob/master/src/Core/Global/Options.scss" class="button " target="_blank">
144+
<span class="material-symbols-outlined mr-5 text-small">article</span> Source
145+
</a>
146+
</div>
145147
</div>
146148
<div class="mt-20">This file consists of helper functions created to retrieve variables from the <code>options.scss</code> API file.</div>
147149
</div>
148150
</div>
149151
</div>
150-
<div class="col-lg-10 col-sm-16 col-xs-16">
152+
<div class="col-lg-12 col-sm-16 col-xs-16">
151153
<div class="pure panel reset">
152154
<div class="header">
153155
<div class="h5">

‎api/core/theme-getters/index.html

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -127,27 +127,29 @@
127127
</div>
128128
</div>
129129
<main class="content-container display-flex flex-direction-column flex-1 ml-280 ">
130-
<div class="container-xxl">
130+
<div class="container-xl">
131131
<div class="row">
132-
<div class="col-lg-16 col-sm-16 col-xs-16 col-md-16 pt-20 pb-200 position-relative">
132+
<div class="col-lg-14 col-sm-16 col-xs-16 col-md-16 pt-20 pb-200 position-relative">
133133
<main class="row position-relative">
134-
<div class="col-lg-10 col-sm-16 col-xs-16">
134+
<div class="col-lg-12 col-sm-16 col-xs-16">
135135
<div class="row py-20 height-32 radius-8 align-items-center">
136136
<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>
140137
<div class="display-flex align-items-center border-bottom-1">
141138
<h2 class="display-flex mb-10">
142139
Core/Theme/Getters.scss
143140
</h2>
144141
<div class="spacer"></div>
142+
<div class="tiny buttons">
143+
<a href="https://github.com/codeforms/Punica-CSS-Framework/blob/master/src/Core/Theme/Getters.scss" class="button " target="_blank">
144+
<span class="material-symbols-outlined mr-5 text-small">article</span> Source
145+
</a>
146+
</div>
145147
</div>
146148
<div class="mt-20">This file contains the <code>theme()</code> function, which retrieves variables specific to Punica's <u>active theme</u>.</div>
147149
</div>
148150
</div>
149151
</div>
150-
<div class="col-lg-10 col-sm-16 col-xs-16">
152+
<div class="col-lg-12 col-sm-16 col-xs-16">
151153
<div class="pure panel reset">
152154
<div class="header">
153155
<div class="h5">

‎api/installation/index.html

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -127,16 +127,13 @@
127127
</div>
128128
</div>
129129
<main class="content-container display-flex flex-direction-column flex-1 ml-280 ">
130-
<div class="container-xxl">
130+
<div class="container-xl">
131131
<div class="row">
132-
<div class="col-lg-16 col-sm-16 col-xs-16 col-md-16 pt-20 pb-200 position-relative">
132+
<div class="col-lg-14 col-sm-16 col-xs-16 col-md-16 pt-20 pb-200 position-relative">
133133
<main class="row position-relative">
134-
<div class="col-lg-10 col-sm-16 col-xs-16">
134+
<div class="col-lg-12 col-sm-16 col-xs-16">
135135
<div class="row py-20 height-32 radius-8 align-items-center">
136136
<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>
140137
<div class="display-flex align-items-center border-bottom-1">
141138
<h2 class="display-flex mb-10">
142139
Get Started
@@ -147,16 +144,16 @@ <h2 class="display-flex mb-10">
147144
</div>
148145
</div>
149146
</div>
150-
<div class="col-lg-10 col-sm-16 col-xs-16">
147+
<div class="col-lg-12 col-sm-16 col-xs-16">
151148
<div class="pure panel reset">
152149
<div class="content">
153-
<script type="text/plain" class="language-css">
150+
<script type="text/plain" class="language-markup">
154151
git clone https://github.com/codeforms/Punica-CSS-Framework.git
155152
</script>
156153
</div>
157154
<div class="content">
158155
Next, install official SASS package for Punica using the Node Package Manager;
159-
<script type="text/plain" class="language-css">
156+
<script type="text/plain" class="language-markup">
160157
npm install
161158
</script>
162159
</div>
@@ -168,15 +165,15 @@ <h2 class="display-flex mb-10">
168165
</div>
169166
<div class="content">
170167
<p>..compile the Punica then exit;</p>
171-
<script type="text/plain" class="language-css">
168+
<script type="text/plain" class="language-markup">
172169
npm run prod
173170
</script>
174171
<p class="mt-50">..Or compile the Punica then watch the files and recompile when one of them changes;</p>
175-
<script type="text/plain" class="language-css">
172+
<script type="text/plain" class="language-markup">
176173
npm run watch
177174
</script>
178175
<p class="mt-50">..Or;</p>
179-
<script type="text/plain" class="language-css">
176+
<script type="text/plain" class="language-markup">
180177
npm run unminify
181178
</script>
182179
</div>

0 commit comments

Comments
 (0)