Responsive, Modern and Fully Customizable Pure CSS Framework – Punica

Category: CSS & CSS3 , Frameworks | October 24, 2020
Author:codeforms
Views Total:21 views
Official Page:Go to website
Last Update:October 24, 2020
License:MIT

Preview:

Responsive, Modern and Fully Customizable Pure CSS Framework – Punica

Description:

Punica is a lightweight, responsive, modern, and fully customizable front-end framework written in pure CSS/SASS/SCSS.

Grid Layout:

  • Fully responsive layout system based on CSS Grid

Elements Included:

Components Included:

How to use it:

1. Import the punica.min.css into the document and we’re ready to go.

<link rel="stylesheet" href="./dist/punica.min.css" />

2. Customize the CSS framework by overriding the default variables in the variables.scss.

/*****************************************************
*** GLOBAL DEFINITIONS ******************************/
/*
FONT *************************************************/
@import url('https://fonts.googleapis.com/css2?family=Nunito:[email protected];400;700;900&display=swap');
/*
TYPOGRAPHY *******************************************/
$main-font-family : 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
$main-font-weight : 400;
$main-font-size : 13px;
$main-line-height : 1.7;
$main-title-weight : 900;
/*
BASE COLORS ******************************************/
$main-bg : white;
$main-secondary-bg : #e6e6e6; // Platinum
$main-font-color : #3f4143; // Onyx
$main-invert-color : white;
$main-grey-color : #77878b; // Roman Silver
$main-dark-color : #414552; // Charcoal
/*
THEME COLORS *****************************************/
$primary-color : #0a8fff; // Dodger Blue
$success-color : #2ec4b6; // Tiffany Blue
$warning-color : #de9e36; // Gamboge
$error-color : #d62828; // Maximum Red
/*
BORDER ***********************************************/
$main-border-width : 1px;
$main-border-style : solid;
$main-border-color : #c6c6c6; // Silver Sand
$main-border-radius : 4px;
/*
SCROLLBAR ********************************************/
$scrollbar-width : 4px;
$scrollbar-bg : $main-secondary-bg;
$scrollbar-color : $main-dark-color;
/*
MAIN GRID NAMING
It is used in card and form.
******************************************************/
$grids: (
  "one": "1",
  "two": "2",
  "three": "3",
  "four": "4",
  "five": "5",
  "six": "6",
  "seven": "7",
  "eight": "8",
  "nine": "9",
  "ten": "10",
  "eleven": "11",
  "twelve": "12",
  "thirteen": "13",
  "fourteen": "14",
  "fifteen": "15",
  "sixteen": "16"
);

Previews:

Punica CSS Framework Palette

Palette

Punica CSS Framework Grid Layout

Grid Layout

Punica CSS Framework Buttons

Buttons

Punica CSS Framework Form Elements

Form Elements

Punica CSS Framework Table

Table

Punica CSS Framework Alerts

Alerts

Punica CSS Framework Cards

Cards

Punica CSS Framework Navbar

Navbar

Punica CSS Framework Timeline

Timeline

Punica CSS Framework Process

Process

Changelog:

v1.4.495 (10/24/2020)

  • Form: added validation states to input style (.error, .success)
  • Button: added a new size called “.tiny”
  • Button: updated default font weight
  • Button: removed unnecessary $button-force variable

v1.4.308 (10/18/2020)

  • List: added a new class called “.subtitle”
  • List: added line-height value to .title
  • Form: added max-width value to .form
  • Helpers: added a specificity for font weights
  • List: some of minor updates
  • List: deleted image width value of list items (and removed $list-media-width from variables)

v1.4.28 (10/18/2020)

  • Card : fixed style of horizontal cards

v1.4.0 (10/15/2020)

  • Menu: added a new divided class
  • Menu: added width value
  • Helpers: added a specificity for display properties
  • Helpers: fixed align-self typo
  • Panel: deleted paragraphy size in Panel
  • Menu: deleted an unnecessary variable

v1.3.459 (10/11/2020)

  • Card : fixed syntax
  • Card : fixed width value for single card
  • Breadcrumb : updated item style

v1.3.429 (10/10/2020)

  • Form : updated button sizes
  • Form : updated label weight

v1.3.405 (10/09/2020)

  • Fixed container width for mobile devices

v1.3.302 (10/07/2020)

  • Button : fixed font-weight of buttons

v1.3.269 (10/06/2020)

  • Menu : fixed badge style and size of menu items.
  • Button : updated font size, weight and padding.
  • Navbar : updated font weight and padding of navbar buttons.
  • Tabnav : updated padding of tabnav buttons.

v1.3.200 (10/02/2020)

  • Added a new style class called “dark” for Label, Alert, Badge, Billboard, Process, Progress and Timeline

v1.3.0 (10/02/2020)

  • Tabnav: added new color styles
  • Helpers: added a new class called “pure”
  • Panel: specific “pure” class was removed
  • Menu: specific “pure” class was removed

v1.2.5 (09/28/2020)

  • Button: added new warning style
  • Button: updated active class
  • Tabnav: updated font-weight value of active buttons
  • Updated general shadow value
  • Fixed bugs

v1.2.0 (09/27/2020)

  • Badge : added new color styles and sizes
  • Label : added sizes

v1.1.590 (09/24/2020)

  • Helpers: helper classes fully optimized
  • Table: Updated border color
  • Button: Updated bg color of hover state
  • Navbar: fixed color value of dark theme

v1.1.472 (09/22/2020)

  • Helpers : added a new filter class called “filter-gray”
  • fixed border-radius value of dropdown button in Tabnav
  • components updated

v1.1.377 (09/20/2020)

  • Fixed shadow value of dropdown top menu

v1.1.180 (09/14/2020)

  • Base : updated default href color
  • Breadcrumb : added href color property
  • Menu : updated min-width value
  • Menu : updated icon color

v1.1.151 (09/12/2020)

  • Added a new .reversed class to reverse the items of process
  • Updated transition property

v1.1.10 (09/10/2020)

  • Updated Tabnav component

v1.1.0 (09/09/2020)

  • Added a new component called “Tabnav”
  • Updated blockquote style

v1.0.451 (09/08/2020)

  • Updated navbar component

You Might Be Interested In:


Leave a Reply