Skip to content

Commit f69b168

Browse files
UnderlineWordsUnderlineWords
committed
012
1 parent 2d809ea commit f69b168

83 files changed

Lines changed: 166 additions & 166 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: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<title> Alert - Punica CSS Framework v3 </title>
88
<meta name="description" content="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, &lt;code&gt;.primary&lt;/code&gt;, &lt;code&gt;.success&lt;/code&gt;, &lt;code&gt;.warning&lt;/code&gt;, &lt;code&gt;.error&lt;/code&gt;, and &lt;code&gt;.dark&lt;/code&gt;. Alerts are highly customizable to suit various designs and themes. Simply add the &lt;code&gt;.alert&lt;/code&gt; class to a &lt;code&gt;span&lt;/code&gt; or &lt;code&gt;div&lt;/code&gt; container element to create an alert.">
99
<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.min.css">
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/codeforms/Punica-CSS-Framework@latest/dist/punica-dark.min.css">
1111
<link rel="stylesheet" href="https://codeforms.github.io/Punica-CSS-Framework/assets/build/css/prism.css">
1212
</head>
1313
<body class="overflow-auto">

‎components/badge/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<title> Badge - Punica CSS Framework v3 </title>
88
<meta name="description" content="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 &lt;code&gt;.badge&lt;/code&gt; class to a &lt;code&gt;span&lt;/code&gt; or &lt;code&gt;div&lt;/code&gt; container element to create a badge.">
99
<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.min.css">
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/codeforms/Punica-CSS-Framework@latest/dist/punica-dark.min.css">
1111
<link rel="stylesheet" href="https://codeforms.github.io/Punica-CSS-Framework/assets/build/css/prism.css">
1212
</head>
1313
<body class="overflow-auto">

‎components/breadcrumb/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<title> Breadcrumb - Punica CSS Framework v3 </title>
88
<meta name="description" content="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 &lt;code&gt;.breadcrumb&lt;/code&gt; class and add child elements with the &lt;code&gt;.item&lt;/code&gt; class.">
99
<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.min.css">
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/codeforms/Punica-CSS-Framework@latest/dist/punica-dark.min.css">
1111
<link rel="stylesheet" href="https://codeforms.github.io/Punica-CSS-Framework/assets/build/css/prism.css">
1212
</head>
1313
<body class="overflow-auto">

‎components/caption/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<title> Caption - Punica CSS Framework v3 </title>
88
<meta name="description" content="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 &lt;code&gt;.caption&lt;/code&gt; class to a &lt;code&gt;span&lt;/code&gt; or &lt;code&gt;div&lt;/code&gt; element to create a caption.">
99
<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.min.css">
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/codeforms/Punica-CSS-Framework@latest/dist/punica-dark.min.css">
1111
<link rel="stylesheet" href="https://codeforms.github.io/Punica-CSS-Framework/assets/build/css/prism.css">
1212
</head>
1313
<body class="overflow-auto">

‎components/card/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<title> Card - Punica CSS Framework v3 </title>
88
<meta name="description" content="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.">
99
<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.min.css">
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/codeforms/Punica-CSS-Framework@latest/dist/punica-dark.min.css">
1111
<link rel="stylesheet" href="https://codeforms.github.io/Punica-CSS-Framework/assets/build/css/prism.css">
1212
</head>
1313
<body class="overflow-auto">

‎components/label/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<title> Label - Punica CSS Framework v3 </title>
88
<meta name="description" content="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 &lt;code&gt;.label&lt;/code&gt; class to a &lt;code&gt;span&lt;/code&gt; or &lt;code&gt;div&lt;/code&gt; element to create a label.">
99
<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.min.css">
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/codeforms/Punica-CSS-Framework@latest/dist/punica-dark.min.css">
1111
<link rel="stylesheet" href="https://codeforms.github.io/Punica-CSS-Framework/assets/build/css/prism.css">
1212
</head>
1313
<body class="overflow-auto">

‎components/list/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<title> List - Punica CSS Framework v3 </title>
88
<meta name="description" content="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 &lt;code&gt;.list&lt;/code&gt; class to an unordered/ordered list or even &lt;code&gt;div&lt;/code&gt; element. And also, use the &lt;code&gt;.item&lt;/code&gt; class for each list items.">
99
<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.min.css">
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/codeforms/Punica-CSS-Framework@latest/dist/punica-dark.min.css">
1111
<link rel="stylesheet" href="https://codeforms.github.io/Punica-CSS-Framework/assets/build/css/prism.css">
1212
</head>
1313
<body class="overflow-auto">

‎components/menu/index.html‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<title> Menu - Punica CSS Framework v3 </title>
88
<meta name="description" content="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 &lt;code&gt;.menu&lt;/code&gt; class and add &lt;code&gt;.item&lt;/code&gt; class for child elements.">
99
<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.min.css">
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/codeforms/Punica-CSS-Framework@latest/dist/punica-dark.min.css">
1111
<link rel="stylesheet" href="https://codeforms.github.io/Punica-CSS-Framework/assets/build/css/prism.css">
1212
</head>
1313
<body class="overflow-auto">
@@ -204,19 +204,19 @@ <h2 class="display-flex mb-10">
204204
</div>
205205
<div class="col-xs-16 col-lg-8 offset-lg-8">
206206
<script type="text/plain" class="language-markup">
207-
<div class="menu">
208-
<div class="title">Title</div>
209-
<div class="item">
210-
<a href="" class="active">Item</a>
211-
</div>
212-
<div class="disabled item">
213-
<a href="">Item</a>
214-
</div>
215-
<div class="item">
216-
<a href="">Item</a>
207+
<div class="menu">
208+
<div class="title"></div>
209+
<div class="item">
210+
<a href="" class="active"></a>
211+
</div>
212+
<div class="disabled item">
213+
<a href=""></a>
214+
</div>
215+
<div class="item">
216+
<a href=""></a>
217+
</div>
217218
</div>
218-
</div>
219-
</script>
219+
</script>
220220
</div>
221221
</div>
222222
</div>
@@ -251,15 +251,15 @@ <h2 class="display-flex mb-10">
251251
<div class="col-xs-16 col-lg-8 offset-lg-8">
252252
<script type="text/plain" class="language-markup">
253253
<div class="divided pure small menu">
254-
<div class="title">Title</div>
254+
<div class="title"></div>
255255
<div class="item">
256-
<a href="">Item</a>
256+
<a href=""></a>
257257
</div>
258258
<div class="item">
259-
<a href="">Item</a>
259+
<a href=""></a>
260260
</div>
261261
<div class="item">
262-
<a href="">Item</a>
262+
<a href=""></a>
263263
</div>
264264
</div>
265265
</script>

‎components/navbar/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<title> Navbar - Punica CSS Framework v3 </title>
88
<meta name="description" content="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 &lt;code&gt;.section&lt;/code&gt; class will be evenly distributed in the container. And the last &lt;code&gt;.section&lt;/code&gt; item in the navbar will always to the right side.">
99
<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.min.css">
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/codeforms/Punica-CSS-Framework@latest/dist/punica-dark.min.css">
1111
<link rel="stylesheet" href="https://codeforms.github.io/Punica-CSS-Framework/assets/build/css/prism.css">
1212
</head>
1313
<body class="overflow-auto">

‎components/panel/index.html‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<title> Panel - Punica CSS Framework v3 </title>
88
<meta name="description" content="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 &lt;code&gt;.panel&lt;/code&gt; class to a container element.">
99
<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.min.css">
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/codeforms/Punica-CSS-Framework@latest/dist/punica-dark.min.css">
1111
<link rel="stylesheet" href="https://codeforms.github.io/Punica-CSS-Framework/assets/build/css/prism.css">
1212
</head>
1313
<body class="overflow-auto">
@@ -198,21 +198,21 @@ <h2 class="display-flex mb-10">
198198
</div>
199199
<div class="col-sm-16 col-xs-16 col-lg-8 offset-lg-8">
200200
<script type="text/plain" class="language-markup">
201-
<div class="panel">
202-
<div class="header">
203-
<div class="title">Title</div>
204-
<div class="actions">Actions</div>
205-
</div>
206-
<div class="content">
207-
<div class="headline">Headline</div>
208-
<p>Content</p>
209-
</div>
210-
<div class="bottom">
211-
Bottom
212-
<div class="actions">Actions</div>
201+
<div class="panel">
202+
<div class="header">
203+
<div class="title"></div>
204+
<div class="actions"></div>
205+
</div>
206+
<div class="content">
207+
<div class="headline"></div>
208+
<p></p>
209+
</div>
210+
<div class="bottom">
211+
Bottom
212+
<div class="actions"></div>
213+
</div>
213214
</div>
214-
</div>
215-
</script>
215+
</script>
216216
</div>
217217
</div>
218218
</div>

0 commit comments

Comments
 (0)