Documentation | Nightly Builds | Templates | Changelog
Punica CSS is a clean, lightweight, responsive, modern and fully customizable (even class names) pure CSS Framework based on SASS/SCSS with multi-theme support.
Punica also lets you create your custom CSS Framework. You can customize all the class names, apply your color scheme, enable or disable features of element/component, change all variables as your need and create your themes according to your taste. You are completely free!
Punica API is based on SCSS maps for various options, values, generating class names, and themes. The Punica SCSS maps contain a key list of options/values/class names/theme variables. For example, you can customize the Punica as you wish with the options.scss and classnames.scss API files and of course generate your custom themes with Punica's theme maps. Take a look at the official SASS docs to get started about SASS maps.
If you want to quickly add the Punica CSS to your project, you can use the JsDelivr CDN;
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/codeforms/Punica-CSS-Framework@2.x.x/dist/punica.min.css" crossorigin="anonymous">For your default setup, add the Punica CSS file to the element of your HTML5 document. Also Punica CSS uses Material Symbols and Icons library, therefore you should include this library as well. That's it!
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<link rel="stylesheet" href="punica.min.css" />
</head>
<body>
</body>
</html>