Author: | codeforms |
---|---|
Views Total: | 52 views |
Official Page: | Go to website |
Last Update: | January 6, 2021 |
License: | MIT |
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:
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:

Palette

Grid Layout

Buttons

Form Elements

Table

Alerts

Cards

Navbar

Timeline

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
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.