Responsive, Modern and Fully Customizable Pure CSS Framework – Punica

Preview:

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:

• Button & Dropdown
• Form
• Icon
• Label
• Table
• Typography

Components Included:

• Alert
• Badge
• Billboard
• Breadcrumbs
• Card
• List
• Menu
• Navbar
• Pagination
• Panel
• Process
• Progress
• Timeline
• Tooltip

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:

Palette

Grid Layout

Buttons

Form Elements

Table

Alerts

Cards

Navbar

Timeline

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