Responsive, Modern and Fully Customizable Pure CSS Framework – Punica

Category: CSS & CSS3 , Frameworks | January 6, 2021
Author: codeforms
Views Total: 52 views
Official Page: Go to website
Last Update: January 6, 2021
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.7.5 (01/06/2021)

  • Helpers : added new helpers for positioned elements and border radius
  • Optimized code
  • List : deleted flex-direction property for mobile devices

v1.7.4 (12/30/2020)

  • Badge : added tiny size
  • Badge : fixed border style
  • Tabnav : fixed item align
  • Badge : updated small badge size
  • Form : updated height of form item
  • Form : updated checkbox and radio styles
  • Form : updated form label
  • Panel : updated padding
  • Typography : updated <p> size
  • Panel : deleted min-height property for panel header
  • Button : deleted unnecessary property from .link.button
  • Button : deleted unnecessary variable
  • Breadcrumb : deleted display property
  • Badge : deleted unnecessary variables
  • Table : deleted overflow and flex property

v1.7.0 (12/02/2020)

  • Dropdown : added new dropdown positions
  • Button : added new vertical button groups
  • Button : added a css selector pattern for dropdown
  • Tabnav : added a css selector pattern for tab buttons
  • Panel : added a css selector pattern for panel
  • Grid : removed unnecessary first column offset
  • Updated scrollbar width
  • General code fixes
  • Card : deleted unnecessary property from .horizontal.card>.media

v1.6.0 (11/19/2020)

  • Card: added media group feature
  • List: added active class
  • Panel: added dotted and dashed classes
  • Form: fixed margin for form items
  • Panel: fixed media img position
  • Timeline: fixed media img position
  • General code fix

v1.5.20 (10/28/2020)

  • Form : added time input
  • Helpers : added new helper classes (flex-direction, user-select, z-index and position properties)
  • Breadcrumb : added cursor value for ::after content

v1.5.0 (10/28/2020)

  • Timeline: added a new “photo columns” feature
  • Panel: added a new “photo columns” feature
  • Helpers: added auto value for padding and margin
  • Dropdown: added z-index value for menu in dropdown
  • Button: updated padding for tiny buttons
  • General code fixes

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:


One thought on “Responsive, Modern and Fully Customizable Pure CSS Framework – Punica

  1. Opacity

    Hello Fatih Kececi ,I am very interested in Punica Framework. Such a great work. I want to join you & with your punica project to next level with JavaScript. I also owned a framework but not modern like you. here it is https://code-opacity.github.io/opacity/

    Please reply soon. i wont find your contact info anywhere.

    Reply

Leave a Reply