Skip to content

Commit 343f8cf

Browse files
UnderlineWordsUnderlineWords
committed
003
1 parent 6bab428 commit 343f8cf

83 files changed

Lines changed: 226 additions & 604 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/alert/index.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121

2222
<section class="brand width-240">
2323
<a href="https://codeforms.github.io/Punica-CSS-Framework/" class="display-flex align-items-center">
24-
Punica CSS <span class="weight-normal ml-5 text-small">v3</span>
24+
Punica CSS <span class="weight-normal ml-5 text-small">v3 Beta</span>
2525
</a>
2626
</section>
2727

@@ -161,13 +161,13 @@ <h2 class="display-flex mb-10">
161161
Alert
162162
</h2>
163163
<div class="spacer"></div>
164-
<div>
164+
<div>
165165
<div class="mini buttons">
166-
<a href="https://github.com/codeforms/Punica-CSS-Framework/blob/master/src/Modules/Components/Alert/Alert.scss" class="button" target="_blank">Source</a>
167-
<a href="https://github.com/codeforms/Punica-CSS-Framework/blob/master/src/options.scss" class="button" target="_blank">API</a>
166+
<a href="https://github.com/codeforms/Punica-CSS-Framework/blob/master/src/Modules/Components/Alert/Alert.scss" class="button " target="_blank">Source</a>
167+
<a href="https://github.com/codeforms/Punica-CSS-Framework/blob/master/src/options.scss" class="button " target="_blank">API</a>
168168
</div>
169169
</div>
170-
</div>
170+
</div>
171171
<div class="mt-20">The Alert component is designed to display important messages or notifications to users. It offers a straightforward and effective way to capture attention, emphasize key information, or convey the status of an action. With six available themes—default, <code>.primary</code>, <code>.success</code>, <code>.warning</code>, <code>.error</code>, and <code>.dark</code>—Alerts are highly customizable to suit various designs and themes. Simply add the <code>.alert</code> class to a <code>span</code> or <code>div</code> container element to create an alert.</div>
172172
</div>
173173
</div>

‎components/badge/index.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121

2222
<section class="brand width-240">
2323
<a href="https://codeforms.github.io/Punica-CSS-Framework/" class="display-flex align-items-center">
24-
Punica CSS <span class="weight-normal ml-5 text-small">v3</span>
24+
Punica CSS <span class="weight-normal ml-5 text-small">v3 Beta</span>
2525
</a>
2626
</section>
2727

@@ -161,13 +161,13 @@ <h2 class="display-flex mb-10">
161161
Badge
162162
</h2>
163163
<div class="spacer"></div>
164-
<div>
164+
<div>
165165
<div class="mini buttons">
166-
<a href="https://github.com/codeforms/Punica-CSS-Framework/blob/master/src/Modules/Components/Badge/Badge.scss" class="button" target="_blank">Source</a>
167-
<a href="https://github.com/codeforms/Punica-CSS-Framework/blob/master/src/options.scss" class="button" target="_blank">API</a>
166+
<a href="https://github.com/codeforms/Punica-CSS-Framework/blob/master/src/Modules/Components/Badge/Badge.scss" class="button " target="_blank">Source</a>
167+
<a href="https://github.com/codeforms/Punica-CSS-Framework/blob/master/src/options.scss" class="button " target="_blank">API</a>
168168
</div>
169169
</div>
170-
</div>
170+
</div>
171171
<div class="mt-20">The Badge component is a small, attention-grabbing element used to display additional information or highlight specific content. Commonly used to indicate notifications, counts, or status labels, Badges are versatile and can be easily attached to buttons, icons, or other UI elements. With customizable styles and sizes, they seamlessly integrate into any design. Just add the <code>.badge</code> class to a <code>span</code> or <code>div</code> container element to create a badge.</div>
172172
</div>
173173
</div>

‎components/breadcrumb/index.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121

2222
<section class="brand width-240">
2323
<a href="https://codeforms.github.io/Punica-CSS-Framework/" class="display-flex align-items-center">
24-
Punica CSS <span class="weight-normal ml-5 text-small">v3</span>
24+
Punica CSS <span class="weight-normal ml-5 text-small">v3 Beta</span>
2525
</a>
2626
</section>
2727

@@ -161,13 +161,13 @@ <h2 class="display-flex mb-10">
161161
Breadcrumb
162162
</h2>
163163
<div class="spacer"></div>
164-
<div>
164+
<div>
165165
<div class="mini buttons">
166-
<a href="https://github.com/codeforms/Punica-CSS-Framework/blob/master/src/Modules/Components/Breadcrumb/Breadcrumb.scss" class="button" target="_blank">Source</a>
167-
<a href="https://github.com/codeforms/Punica-CSS-Framework/blob/master/src/options.scss" class="button" target="_blank">API</a>
166+
<a href="https://github.com/codeforms/Punica-CSS-Framework/blob/master/src/Modules/Components/Breadcrumb/Breadcrumb.scss" class="button " target="_blank">Source</a>
167+
<a href="https://github.com/codeforms/Punica-CSS-Framework/blob/master/src/options.scss" class="button " target="_blank">API</a>
168168
</div>
169169
</div>
170-
</div>
170+
</div>
171171
<div class="mt-20">Breadcrumbs are used to show navigational hierarchies between contents. You can easily create breadcrumbs to show users their location within a website. To apply this component, add a container element with the <code>.breadcrumb</code> class and add child elements with the <code>.item</code> class.</div>
172172
</div>
173173
</div>

‎components/caption/index.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121

2222
<section class="brand width-240">
2323
<a href="https://codeforms.github.io/Punica-CSS-Framework/" class="display-flex align-items-center">
24-
Punica CSS <span class="weight-normal ml-5 text-small">v3</span>
24+
Punica CSS <span class="weight-normal ml-5 text-small">v3 Beta</span>
2525
</a>
2626
</section>
2727

@@ -161,13 +161,13 @@ <h2 class="display-flex mb-10">
161161
Caption
162162
</h2>
163163
<div class="spacer"></div>
164-
<div>
164+
<div>
165165
<div class="mini buttons">
166-
<a href="https://github.com/codeforms/Punica-CSS-Framework/blob/master/src/Modules/Components/Caption/Caption.scss" class="button" target="_blank">Source</a>
167-
<a href="https://github.com/codeforms/Punica-CSS-Framework/blob/master/src/options.scss" class="button" target="_blank">API</a>
166+
<a href="https://github.com/codeforms/Punica-CSS-Framework/blob/master/src/Modules/Components/Caption/Caption.scss" class="button " target="_blank">Source</a>
167+
<a href="https://github.com/codeforms/Punica-CSS-Framework/blob/master/src/options.scss" class="button " target="_blank">API</a>
168168
</div>
169169
</div>
170-
</div>
170+
</div>
171171
<div class="mt-20">The Caption component highlights short, descriptive text with a large font size and a supporting image or icon. It provides a clean, visually appealing way to emphasize key information. Just add the <code>.caption</code> class to a span or div element to create a caption.</div>
172172
</div>
173173
</div>

‎components/card/index.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121

2222
<section class="brand width-240">
2323
<a href="https://codeforms.github.io/Punica-CSS-Framework/" class="display-flex align-items-center">
24-
Punica CSS <span class="weight-normal ml-5 text-small">v3</span>
24+
Punica CSS <span class="weight-normal ml-5 text-small">v3 Beta</span>
2525
</a>
2626
</section>
2727

@@ -161,13 +161,13 @@ <h2 class="display-flex mb-10">
161161
Card
162162
</h2>
163163
<div class="spacer"></div>
164-
<div>
164+
<div>
165165
<div class="mini buttons">
166-
<a href="https://github.com/codeforms/Punica-CSS-Framework/blob/master/src/Modules/Components/Card/Card.scss" class="button" target="_blank">Source</a>
167-
<a href="https://github.com/codeforms/Punica-CSS-Framework/blob/master/src/options.scss" class="button" target="_blank">API</a>
166+
<a href="https://github.com/codeforms/Punica-CSS-Framework/blob/master/src/Modules/Components/Card/Card.scss" class="button " target="_blank">Source</a>
167+
<a href="https://github.com/codeforms/Punica-CSS-Framework/blob/master/src/options.scss" class="button " target="_blank">API</a>
168168
</div>
169169
</div>
170-
</div>
170+
</div>
171171
<div class="mt-20">The Card component is a flexible and modular container for displaying content. It typically includes elements like a title/subtitle, image, description, and actions section, but can be customized to suit various needs. Cards are perfect for organizing information in a visually appealing and consistent layout.</div>
172172
</div>
173173
</div>

‎components/label/index.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121

2222
<section class="brand width-240">
2323
<a href="https://codeforms.github.io/Punica-CSS-Framework/" class="display-flex align-items-center">
24-
Punica CSS <span class="weight-normal ml-5 text-small">v3</span>
24+
Punica CSS <span class="weight-normal ml-5 text-small">v3 Beta</span>
2525
</a>
2626
</section>
2727

@@ -161,13 +161,13 @@ <h2 class="display-flex mb-10">
161161
Label
162162
</h2>
163163
<div class="spacer"></div>
164-
<div>
164+
<div>
165165
<div class="mini buttons">
166-
<a href="https://github.com/codeforms/Punica-CSS-Framework/blob/master/src/Modules/Components/Label/Label.scss" class="button" target="_blank">Source</a>
167-
<a href="https://github.com/codeforms/Punica-CSS-Framework/blob/master/src/options.scss" class="button" target="_blank">API</a>
166+
<a href="https://github.com/codeforms/Punica-CSS-Framework/blob/master/src/Modules/Components/Label/Label.scss" class="button " target="_blank">Source</a>
167+
<a href="https://github.com/codeforms/Punica-CSS-Framework/blob/master/src/options.scss" class="button " target="_blank">API</a>
168168
</div>
169169
</div>
170-
</div>
170+
</div>
171171
<div class="mt-20">The Label component is used to provide clear and concise descriptions or identifiers for tags or status indicators. It enhances usability and accessibility by associating text with specific UI elements. With flexible styling options, Labels can be easily customized to fit various designs and contexts. Just add the <code>.label</code> class to a <code>span</code> or <code>div</code> element to create a label.</div>
172172
</div>
173173
</div>

‎components/list/index.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121

2222
<section class="brand width-240">
2323
<a href="https://codeforms.github.io/Punica-CSS-Framework/" class="display-flex align-items-center">
24-
Punica CSS <span class="weight-normal ml-5 text-small">v3</span>
24+
Punica CSS <span class="weight-normal ml-5 text-small">v3 Beta</span>
2525
</a>
2626
</section>
2727

@@ -161,13 +161,13 @@ <h2 class="display-flex mb-10">
161161
List
162162
</h2>
163163
<div class="spacer"></div>
164-
<div>
164+
<div>
165165
<div class="mini buttons">
166-
<a href="https://github.com/codeforms/Punica-CSS-Framework/blob/master/src/Modules/Components/List/List.scss" class="button" target="_blank">Source</a>
167-
<a href="https://github.com/codeforms/Punica-CSS-Framework/blob/master/src/options.scss" class="button" target="_blank">API</a>
166+
<a href="https://github.com/codeforms/Punica-CSS-Framework/blob/master/src/Modules/Components/List/List.scss" class="button " target="_blank">Source</a>
167+
<a href="https://github.com/codeforms/Punica-CSS-Framework/blob/master/src/options.scss" class="button " target="_blank">API</a>
168168
</div>
169169
</div>
170-
</div>
170+
</div>
171171
<div class="mt-20">The List component is a versatile tool for organizing and displaying items in a structured and sequential manner. It supports both ordered and unordered formats and can include form elements or visuals alongside text for enhanced functionality and design. With customizable styles and layouts, the List component adapts seamlessly to various use cases. To apply this component, add the <code>.list</code> class to an unordered/ordered list or even <code>div</code> element. And also, use the <code>.item</code> class for each list items.</div>
172172
</div>
173173
</div>

‎components/menu/index.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121

2222
<section class="brand width-240">
2323
<a href="https://codeforms.github.io/Punica-CSS-Framework/" class="display-flex align-items-center">
24-
Punica CSS <span class="weight-normal ml-5 text-small">v3</span>
24+
Punica CSS <span class="weight-normal ml-5 text-small">v3 Beta</span>
2525
</a>
2626
</section>
2727

@@ -161,13 +161,13 @@ <h2 class="display-flex mb-10">
161161
Menu
162162
</h2>
163163
<div class="spacer"></div>
164-
<div>
164+
<div>
165165
<div class="mini buttons">
166-
<a href="https://github.com/codeforms/Punica-CSS-Framework/blob/master/src/Modules/Components/Menu/Menu.scss" class="button" target="_blank">Source</a>
167-
<a href="https://github.com/codeforms/Punica-CSS-Framework/blob/master/src/options.scss" class="button" target="_blank">API</a>
166+
<a href="https://github.com/codeforms/Punica-CSS-Framework/blob/master/src/Modules/Components/Menu/Menu.scss" class="button " target="_blank">Source</a>
167+
<a href="https://github.com/codeforms/Punica-CSS-Framework/blob/master/src/options.scss" class="button " target="_blank">API</a>
168168
</div>
169169
</div>
170-
</div>
170+
</div>
171171
<div class="mt-20">The Menu component is designed to display navigation options or actions in a vertical layout. It enables easy organization of links or actions, and can include icons or Badge component for enhanced functionality. With helper classes, the Menu component can seamlessly integrates into a variety of designs. To apply this component, add a container element with the <code>.menu</code> class and add <code>.item</code> class for child elements.</div>
172172
</div>
173173
</div>

‎components/navbar/index.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121

2222
<section class="brand width-240">
2323
<a href="https://codeforms.github.io/Punica-CSS-Framework/" class="display-flex align-items-center">
24-
Punica CSS <span class="weight-normal ml-5 text-small">v3</span>
24+
Punica CSS <span class="weight-normal ml-5 text-small">v3 Beta</span>
2525
</a>
2626
</section>
2727

@@ -161,13 +161,13 @@ <h2 class="display-flex mb-10">
161161
Navbar
162162
</h2>
163163
<div class="spacer"></div>
164-
<div>
164+
<div>
165165
<div class="mini buttons">
166-
<a href="https://github.com/codeforms/Punica-CSS-Framework/blob/master/src/Modules/Components/Navbar/Navbar.scss" class="button" target="_blank">Source</a>
167-
<a href="https://github.com/codeforms/Punica-CSS-Framework/blob/master/src/options.scss" class="button" target="_blank">API</a>
166+
<a href="https://github.com/codeforms/Punica-CSS-Framework/blob/master/src/Modules/Components/Navbar/Navbar.scss" class="button " target="_blank">Source</a>
167+
<a href="https://github.com/codeforms/Punica-CSS-Framework/blob/master/src/options.scss" class="button " target="_blank">API</a>
168168
</div>
169169
</div>
170-
</div>
170+
</div>
171171
<div class="mt-20">The Navbar component is a flexible navigation bar that allows users to easily access different sections of a website or application. It typically includes links, branding, and optional elements like icons, search bars, or dropdowns. Each section with the <code>.section</code> class will be evenly distributed in the container. And the last <code>.section</code> item in the navbar will always to the right side.</div>
172172
</div>
173173
</div>

‎components/panel/index.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121

2222
<section class="brand width-240">
2323
<a href="https://codeforms.github.io/Punica-CSS-Framework/" class="display-flex align-items-center">
24-
Punica CSS <span class="weight-normal ml-5 text-small">v3</span>
24+
Punica CSS <span class="weight-normal ml-5 text-small">v3 Beta</span>
2525
</a>
2626
</section>
2727

@@ -161,13 +161,13 @@ <h2 class="display-flex mb-10">
161161
Panel
162162
</h2>
163163
<div class="spacer"></div>
164-
<div>
164+
<div>
165165
<div class="mini buttons">
166-
<a href="https://github.com/codeforms/Punica-CSS-Framework/blob/master/src/Modules/Components/Panel/Panel.scss" class="button" target="_blank">Source</a>
167-
<a href="https://github.com/codeforms/Punica-CSS-Framework/blob/master/src/options.scss" class="button" target="_blank">API</a>
166+
<a href="https://github.com/codeforms/Punica-CSS-Framework/blob/master/src/Modules/Components/Panel/Panel.scss" class="button " target="_blank">Source</a>
167+
<a href="https://github.com/codeforms/Punica-CSS-Framework/blob/master/src/options.scss" class="button " target="_blank">API</a>
168168
</div>
169169
</div>
170-
</div>
170+
</div>
171171
<div class="mt-20">The Panel component is a versatile container used to group and organize content into distinct sections. It includes a header, content area, and footer, and can be customized with elements like buttons, links, or forms. Panels are ideal for separating information or actions within a layout, helping to provide clarity and structure. To apply this component, just add the <code>.panel</code> class to a container element.</div>
172172
</div>
173173
</div>

0 commit comments

Comments
 (0)