Punica-CSS-Framework
Punica-CSS-Framework copied to clipboard
codeforms
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.
Introduction
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.
Your custom CSS Framework
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!
API for Developers
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.
Install From CDN
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/[email protected]/dist/punica.min.css" crossorigin="anonymous">
HTML Markup & Including Material Symbols and Icons library
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>
codeforms