Skip to content

Latest commit

 

History

History
44 lines (38 loc) · 2.66 KB

README.md

File metadata and controls

44 lines (38 loc) · 2.66 KB
Raw

Introduction

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/Punica-CSS-Framework@2.x.x/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>