Skip to content

Commit e42fab6

Browse files
UnderlineWordsUnderlineWords
committed
004
1 parent 343f8cf commit e42fab6

68 files changed

Lines changed: 1790 additions & 162 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.

‎components/card/index.html‎

Lines changed: 185 additions & 148 deletions
Large diffs are not rendered by default.

‎components/navbar/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -706,8 +706,8 @@ <h2 class="display-flex mb-10">
706706
</thead>
707707
<tbody>
708708
<tr>
709-
<td><code>light</code></td>
710-
<td><code>.light.navbar</code></td>
709+
<td><code>primary</code></td>
710+
<td><code>.primary.navbar</code></td>
711711
</tr>
712712
<tr>
713713
<td><code>dark</code></td>

‎elements/button/index.html‎

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -232,7 +232,7 @@ <h2 class="display-flex mb-10">
232232
</div>
233233

234234
<div class="col-16 mt-40">
235-
<div class="buttons mini">
235+
<div class="mini buttons">
236236
<a href="javascript:" class="button">
237237
<i class="material-symbols-outlined">person</i>
238238
</a>
@@ -253,7 +253,7 @@ <h2 class="display-flex mb-10">
253253
</div>
254254

255255
<div class="col-16 mt-40">
256-
<div class="buttons">
256+
<div class="shadowless buttons">
257257
<div class="button inactive">
258258
<i class="material-symbols-outlined mr-10 ml-10">shopping_cart</i>
259259
</div>
@@ -266,6 +266,33 @@ <h2 class="display-flex mb-10">
266266
</div>
267267
</div>
268268
</div>
269+
<div class="content">
270+
<div class="mini buttons">
271+
<a class="button" href="javascript:">
272+
<span class="material-symbols-outlined">keyboard_arrow_left</span>
273+
</a>
274+
<a class="button" href="javascript:">1</a>
275+
<a class="button active" href="javascript:">2</a>
276+
<a class="button" href="javascript:">3</a>
277+
<div class="dropdown top right">
278+
<a tabindex="0" class="button toggle">
279+
<span class="material-symbols-outlined">keyboard_arrow_up</span>
280+
</a>
281+
<ul class="small menu">
282+
<div class="title">Per Page</div>
283+
<li class="item"><a href="#">10 items</a></li>
284+
<li class="item"><a href="#">20 items</a></li>
285+
<li class="item"><a href="#">30 items</a></li>
286+
</ul>
287+
</div>
288+
<a class="button" href="javascript:">56</a>
289+
<a class="button" href="javascript:">57</a>
290+
<a class="button" href="javascript:">58</a>
291+
<a class="button" href="javascript:">
292+
<span class="material-symbols-outlined">keyboard_arrow_right</span>
293+
</a>
294+
</div>
295+
</div>
269296
<div class="content">
270297
<script type="text/plain" class="language-markup">
271298
<div class="buttons">

‎elements/form/index.html‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -149,12 +149,7 @@ <h2 class="display-flex mb-10">
149149
</div>
150150
<div class="content">
151151
<p>
152-
Form inputs are designed to be flexible to your form elements. You can choose an arbitrary column count per
153-
row. Default
154-
system allows maximum 5 items (two through six as class name). The example below shows three items <code>.three .items</code> will fit in
155-
the
156-
first row
157-
and the fourth item dynamically moves to the second row.
152+
Form inputs in Punica are designed to adapt seamlessly to your form's layout requirements. You can specify a custom column count per row, with the default system supporting up to five items. For instance, using the <code>.three.items</code> classes will arrange three items in the first row, with the fourth item automatically flowing to the second row. This flexibility ensures clean and organized form layouts.
158153
</p>
159154
<div class="form mt-50">
160155
<div class="three items">
@@ -212,9 +207,7 @@ <h2 class="display-flex mb-10">
212207
<span class="title">Validation Feedbacks</span>
213208
</div>
214209
<div class="content">
215-
You can indicate invalid or valid form fields with <code>.error</code>, <code>.warning</code>, or <code>.success</code> classes for
216-
input validation states. Just add the <code>.error</code>, <code>.warning</code>, or <code>.success</code> class to
217-
<code>&lt;input></code>, <code>&lt;textarea></code> and <code>&lt;select></code> element.
210+
You can indicate the validation state of form fields using the <code>.error</code>, <code>.warning</code>, or <code>.success</code> classes. Simply add the appropriate class to the <code>input</code>, <code>textarea</code>, or <code>select</code> elements to reflect the desired validation state.
218211
</div>
219212
<div class="content">
220213
<div class="form">
@@ -257,7 +250,7 @@ <h2 class="display-flex mb-10">
257250
<span class="title">Form Groups</span>
258251
</div>
259252
<div class="content">
260-
You can attach select, input or button along with an input. Just add the <code>.group</code> class to a container class in the <code>.item</code> container.
253+
You can group form elements such as <code>select</code>, <code>input</code>, or <code>button</code> together with an input field. To apply this, add the <code>.group</code> class to a container within the <code>.item</code> wrapper.
261254
</div>
262255
<div class="content">
263256
<div class="form">

‎elements/grid/index.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -351,6 +351,9 @@ <h2 class="display-flex mb-10">
351351
Offset
352352
</div>
353353
</div>
354+
<div class="content">
355+
Punica CSS Framework's Grid system supports up to 16 columns and includes an offset feature with responsive flexibility. Offset classes, such as <code>offset-sm-2</code>, <code>offset-md-5</code>, <code>offset-lg-2</code>, <code>offset-xl-9</code>, and <code>offset-xxl-8</code>, allow you to create empty spaces within the grid at different breakpoints. This enables precise control over content alignment and spacing, ensuring adaptable and balanced layouts across various screen sizes.
356+
</div>
354357
<div class="content">
355358
<div class="row text-center gap-8">
356359
<div class="col-lg-4 offset-lg-2 col-xs-16 bordered p-10">
@@ -397,6 +400,25 @@ <h2 class="display-flex mb-10">
397400
</div>
398401
</script>
399402
</div>
403+
<div class="header">
404+
<div class="title">
405+
Containers
406+
</div>
407+
</div>
408+
<div class="content">
409+
Punica CSS Framework's Grid system features flexible container classes—<code>container-sm</code>, <code>container-md</code>, <code>container-lg</code>, <code>container-xl</code>, and <code>container-xxl</code>—that provide responsive layout control. These containers ensure consistent alignment and structure, adapting seamlessly to different screen sizes while forming the foundation for Punica's Grid-based designs.
410+
</div>
411+
<div class="content">
412+
<div class="container-sm bordered p-5">container-sm</div>
413+
<div class="container-md bordered p-5">container-md</div>
414+
<div class="container-lg bordered p-5">container-lg</div>
415+
</div>
416+
<div class="content">
417+
<script type="text/plain" class="language-html">
418+
<div class="container-xl"></div>
419+
<div class="container-xxl"></div>
420+
</script>
421+
</div>
400422
</div>
401423
</div>
402424
</div>

‎utilities/accent-color/index.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -462,6 +462,33 @@ <h2 class="display-flex mb-10">
462462
</tr>
463463
</tbody>
464464
</table>
465+
466+
<div class="shadowless small panel mt-70 border-grey border-top-10 border-bottom-6 radius-12">
467+
<div class="header border-dashed">
468+
<span class="title">utilities.scss API</span>
469+
</div>
470+
<div class="content reset">
471+
<script type="text/plain" class="language-scss m-0 borderless">
472+
'accent-color': (
473+
'enabled' : true, // true or false
474+
'property' : 'accent-color', // css property name (don't change it !)
475+
'prefix' : 'accent-', // prefix of class name
476+
'specificity': !important, // or null
477+
'unit' : null, // length/angle units (px, rem, em, %, vh, vw etc)
478+
'args' : null, // for extra variables
479+
'variables' : (
480+
// class name (suffix), value
481+
("primary", theme('color', 'primary')),
482+
("success", theme('color', 'success')),
483+
("warning", theme('color', 'warning')),
484+
("error", theme('color', 'error')),
485+
("dark", theme('color', 'dark'))
486+
)
487+
)
488+
</script>
489+
</div>
490+
</div>
491+
465492
</div>
466493
</div>
467494
</div>

‎utilities/align-content/index.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -478,6 +478,25 @@ <h2 class="display-flex mb-10">
478478
</tr>
479479
</tbody>
480480
</table>
481+
482+
<div class="shadowless small panel mt-70 border-grey border-top-10 border-bottom-6 radius-12">
483+
<div class="header border-dashed">
484+
<span class="title">utilities.scss API</span>
485+
</div>
486+
<div class="content reset">
487+
<script type="text/plain" class="language-scss m-0 borderless">
488+
'align-content': (
489+
'enabled' : true, // true or false
490+
'property' : 'align-content', // css property name (don't change it !)
491+
'prefix' : 'align-content-', // prefix of class name
492+
'specificity': !important, // or null
493+
'unit' : null, // length/angle units (px, rem, em, %, vh, vw etc)
494+
'args' : null, // for extra variables
495+
'variables' : (stretch, center, flex-start, flex-end, space-between, space-around, space-evenly)
496+
)
497+
</script>
498+
</div>
499+
</div>
481500
</div>
482501
</div>
483502
</div>

‎utilities/align-items/index.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -462,6 +462,25 @@ <h2 class="display-flex mb-10">
462462
</tr>
463463
</tbody>
464464
</table>
465+
466+
<div class="shadowless small panel mt-70 border-grey border-top-10 border-bottom-6 radius-12">
467+
<div class="header border-dashed">
468+
<span class="title">utilities.scss API</span>
469+
</div>
470+
<div class="content reset">
471+
<script type="text/plain" class="language-scss m-0 borderless">
472+
'align-items': (
473+
'enabled' : true, // true or false
474+
'property' : 'align-items', // css property name (don't change it !)
475+
'prefix' : 'align-items-', // prefix of class name
476+
'specificity': !important, // or null
477+
'unit' : null, // length/angle units (px, rem, em, %, vh, vw etc)
478+
'args' : null, // for extra variables
479+
'variables' : (baseline, flex-start, flex-end, center, stretch)
480+
)
481+
</script>
482+
</div>
483+
</div>
465484
</div>
466485
</div>
467486
</div>

‎utilities/align-self/index.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -470,6 +470,25 @@ <h2 class="display-flex mb-10">
470470
</tr>
471471
</tbody>
472472
</table>
473+
474+
<div class="shadowless small panel mt-70 border-grey border-top-10 border-bottom-6 radius-12">
475+
<div class="header border-dashed">
476+
<span class="title">utilities.scss API</span>
477+
</div>
478+
<div class="content reset">
479+
<script type="text/plain" class="language-scss m-0 borderless">
480+
'align-self': (
481+
'enabled' : true, // true or false
482+
'property' : 'align-self', // css property name (don't change it !)
483+
'prefix' : 'align-self-', // prefix of class name
484+
'specificity': !important, // or null
485+
'unit' : null, // length/angle units (px, rem, em, %, vh, vw etc)
486+
'args' : null, // for extra variables
487+
'variables' : (auto, baseline, flex-start, flex-end, center, stretch)
488+
)
489+
</script>
490+
</div>
491+
</div>
473492
</div>
474493
</div>
475494
</div>

‎utilities/appearance/index.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -438,6 +438,25 @@ <h2 class="display-flex mb-10">
438438
</tr>
439439
</tbody>
440440
</table>
441+
442+
<div class="shadowless small panel mt-70 border-grey border-top-10 border-bottom-6 radius-12">
443+
<div class="header border-dashed">
444+
<span class="title">utilities.scss API</span>
445+
</div>
446+
<div class="content reset">
447+
<script type="text/plain" class="language-scss m-0 borderless">
448+
'appearance': (
449+
'enabled' : true, // true or false
450+
'property' : 'appearance', // css property name (don't change it !)
451+
'prefix' : 'appearance-', // prefix of class name
452+
'specificity': !important, // or null
453+
'unit' : null, // length/angle units (px, rem, em, %, vh, vw etc)
454+
'args' : null, // for extra variables
455+
'variables' : (auto, none)
456+
)
457+
</script>
458+
</div>
459+
</div>
441460
</div>
442461
</div>
443462
</div>

0 commit comments

Comments
 (0)