Punica pure CSS Framework

CSSBundle.com // Punica pure CSS Framework

Grid Example

Lorem ipsum dolor sit amet, ex timeam dissentiet definitionem ius, no vix nihil iriure.

col-4

Lorem ipsum dolor sit amet, ex timeam dissentiet definitionem ius, no vix nihil iriure. Mel ad quodsi nonumes vulputate, sed cibo incorrupte ad, no nam atqui accusam.

col-4

Equal Height Columns

Lorem ipsum dolor sit amet, ex timeam dissentiet definitionem ius, no vix nihil iriure.

col-4

Lorem ipsum dolor sit amet, ex timeam dissentiet definitionem ius, no vix nihil iriure. Mel ad quodsi nonumes vulputate, sed cibo incorrupte ad, no nam atqui accusam.

col-4

Buttons

Default

Active

Disabled

Inactive

Link

Secondary

Active

Disabled

Inactive

Active

Disabled

Inactive

Active

Disabled

Inactive

Active

Disabled

Inactive

Active

Disabled

Inactive

Add the .tiny, .mini, .small, .large or .huge class to a button to make it smaller or larger. Also, you can add the .block class for a full-width button.

Tiny Mini Small Default Large Huge

Block Button

To create a button group, add the .buttons class to a div element around the buttons.

Button

Secondary

person

254

launch

458

thumb_up

276

lock

input

395

$175

Checkout Now !

Shadowless

To remove the shadow from a button group, add the .shadowless helper class to a .buttons container class.

launch person directions_run

Sizes of button groups

Also, add the .tiny, .mini, .small, .large or .huge class to .buttons to make it smaller or larger group buttons.

launch person directions_run

Full-width Button Groups

And you can add the .block class to .buttons for a full-width button group.

Button Button Button

You can add the .secondary class to a .button or .buttons to change the style as secondary.

launch person directions_run

A button can be used to trigger a dropdown menu.

Small Dropdown

drafts Mini

254

drafts

254

drafts

You can change the direction of the dropdown by adding any .right .left .top .top.left .top.right .bottom.left .bottom.right classes to .dropdown container.

Also, just add the .vertical class to .buttons to make it vertical button group.

Caption

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga delectus commodi illo dolore, officia ratione?

Form Elements

Icon

Material Icons

3d_rotation

Label

Default

Primary

Success

Warning

Error

Dark

Table

Table Heading	Table Heading	Table Heading
Table Data	Table Data	Table Data

Alert

Default

Primary

Success

Warning

Error

Dark

Badge

336

89567

549

Billboard

Lorem ipsum dolor sit amet..

Button

Breadcrumb

Card

Card Title

Card Subtitle

Lorem ipsum dolor sit amet...

List

List Title

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet (active)
Lorem ipsum dolor sit amet

List Title

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet (active)

You can add the zebra-striping to a list by adding the .striped class and add the .hovered class to display a hover state on list items.

Striped List

Lorem ipsum dolor sit amet

Hovered List

Lorem ipsum dolor sit amet

edit delete

Lorem ipsum dolor sit amet

edit delete

Lorem ipsum dolor sit amet

edit delete

Lists can contain variety of form inputs.

edit delete

Also, Lists can contain variety of media elements and actions buttons.

Title Subtitle Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Title Subtitle Lorem ipsum dolor sit amet consectetur.

Props	Default Class Name
Container	`.list`
List Items	`.item`
Avtive Item	`.active`
List Item Body	`.body`
List Item Title	`.title`
List Item Subtitle	`.subtitle`
List Item Actions	`.actions`
Divided List	`.divided`
Hovered List	`.hovered`
Striped List	`.striped`

<div class="menu">
    <div class="title">Menu</div>
    <div class="item">
        <a href="" class="active">
            Item
        </a>
    </div>
    <div class="item">
        <a href="">
            Item
        </a>
    </div>
    <div class="item">
        <a href="">
            Item
        </a>
    </div>
</div>

Props	Default Class Name
Container	`.menu`
Small Menu	`.small`
Divided Menu	`.divided`
Menu Item	`.item`
Menu Title	`.title`
Active Item	`.active`
Disabled Item	`.disabled`
Menu Badge	`.badge`

Navbar

To see the responsive hamburger menu, please check the main menu of the page.

If you want a light or dark navbar, just add the .light or .dark class to .navbar.

<header class="navbar light shadowed">
    <div class="container">

        <!-- responsive hamburger menu -->
        <input type="checkbox" id="burger">
        <label for="burger" class="burger"></label>
        <!-- /responsive hamburger menu-->

        <!-- navbar brand -->
        <section class="brand">
            <a href="">
                <img src="">
            </a>
        </section>

        <!-- navbar links -->
        <section class="links">
            <div class="section">
                <div class="buttons">
                    <div class="dropdown">
                        <a class="button toggle" tabindex="0">
                            Item <span class="material-icons">keyboard_arrow_down</span>
                        </a>
                        <ul class="menu">
                            <li class="item"><a href="">Link 1</a></li>
                            <li class="item"><a href="">Link 2</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="section">
                <div class="buttons">
                    <a href="" class="button">
                        <span class="material-icons">person</span>
                    </a>
                </div>
                <div class="form">
                    <div class="group">
                        <input type="text" name="query" placeholder="search..." id="query">
                        <button class="button dark">
                            <i class="material-icons">search</i>
                        </button>
                    </div>
                </div>
            </div>
        </section>
    </div>
</header>

Add the .mini or .small class to a .navbar to make it smaller. It's that easy!

<div class="navbar divided">
    ...
</div>

Props	Default Class Name
Container	`.navbar`
Navbar Sections	`.section`
Navbar Links	`.links`
Navbar Link Items	`.buttons` or `.button`
Navbar Brand	`.brand`
Navbar Dropdown Item	`.dropdown`
Divided Navbar Items	`.divided`
Navbar Burger Menu	`.burger`
Navbar Spacer (if navbar is fixed)	`.navbar-spacer`

Styles & States	Default Class Name
Light	`.light`
Dark	`.dark`
Fixed	`.fixed`
Navbar with Shadow	`.shadowed`

Spacers	Default Class Name	Property	Default value
Default	`.navbar-spacer`	`margin-top`	`120px`
Mini	`.navbar-spacer-mini`	`margin-top`	`80px`
Small	`.navbar-spacer-small`	`margin-top`	`100px`

Sizes	Default Class Name
Mini	`.mini`
Small	`.small`

Pagination

keyboard_arrow_left 1 2 3 56 57 58 keyboard_arrow_right

<div class="buttons">
    <a class="button" href="">
        <span class="material-icons">keyboard_arrow_left</span>
    </a>
    <a class="button" href="">1</a>
    <a class="button active" href="">2</a>
    <a class="button" href="">3</a>
    <button class="button inactive">...</button>
    <a class="button" href="">56</a>
    <a class="button" href="">57</a>
    <a class="button" href="">58</a>
    <a class="button" href="">
        <span class="material-icons">keyboard_arrow_right</span>
    </a>
</div>

Also, add the .tiny, .mini, .small, .large or .huge class to .buttons to make it smaller or larger pagination.

keyboard_arrow_left 1 2 3 56 57 58 keyboard_arrow_right

<div class="buttons tiny">
    <a class="button" href="">
        <span class="material-icons">keyboard_arrow_left</span>
    </a>
    ...
    ...
</div>

Panel

Headline

Content

Bottom

Actions

<div class="panel">
    <div class="header">
        <div class="title">Title</div>
        <div class="actions">Actions</div>
    </div>
    <div class="content">
        <div class="headline">Headline</div>
        <p>Content</p>
    </div>
    <div class="bottom">
        Bottom
        <div class="actions">Actions</div>
    </div>
</div>

Process

Planning

Design

Content

Coding

Testing

Maintenance

Prewriting

Research

Drafting

Revising

Editing

Publishing

Prewriting

Research

Drafting

Revising

Editing

Publishing

Step 1

Step 2

Step 3

Step 4

<div class="process">
    <div class="item">
        <a href="">Step 1</a>
    </div>
    <div class="item active">
        <a href="">Step 2</a>
    </div>
    ...
    ...
</div>

Also, just add the .vertical class to .process to make it vertical style. It's that easy!

Vertical style is also used for mobile devices.

Planning

Design

Content

Coding

Testing

Maintenance

<div class="process vertical">
    <div class="item">
        <a href="">Step 1</a>
    </div>
    <div class="item active">
        <a href="">Step 2</a>
    </div>
    ...
    ...
</div>

And also, you can reverse the items of process using by .reversed class.

Planning

Design

Content

Coding

Testing

Maintenance

<div class="reversed vertical success process">
    <div class="item">
        <a href="">Step 1</a>
    </div>
    <div class="item active">
        <a href="">Step 2</a>
    </div>
    ...
    ...
</div>

Props	Default Class Name
Container	`.process`
Process Item	`.item`
Active Item	`.active`
Vertical Style	`.vertical`

Positions	Default Class Name
Horizontal (default)	-
Vertical	`.vertical`
Reversed Vertical	`.reversed`

Styles	Default Class Name
Primary (default)	-
Success	`.success`
Warning	`.warning`
Error	`.error`
Dark	`.dark`

Progress

Tabnav

Item

Active 45

Disabled

Add

Item

Active 45

Disabled

Add

<div class="tab">
    <div class="button">Item</div>
    <div class="button active">Active <span class="badge small primary ml-10">45</span></div>
    <div class="button disabled">Disabled</div>
    <div class="spacer"></div>
    <div class="button">
        <i class="material-icons mr-5">add</i> Add
    </div>
    <div class="buttons">
        <div class="dropdown bottom right">
            <a tabindex="0" class="button active toggle">
                Options <span class="material-icons ml-5">keyboard_arrow_down</span>
            </a>
            <ul class="menu">
                <li class="item"><a href="#">Options 1</a></li>
                <li class="item"><a href="#">Options 2</a></li>
                <li class="item"><a href="#">Options 3</a></li>
            </ul>
        </div>
    </div>
</div>

Item

Active

Disabled

Add

Item

Active

Disabled

Add

<div class="bottom error tab">
    ...
</div>

Notifications 45

Privacy

Account Info

<div class="centered tab">
    <div class="button">Email</div>
    <div class="button active">Notifications <span class="badge small primary ml-10">45</span></div>
    <div class="button">Privacy</div>
    <div class="button">Account Info</div>
</div>

You can modify tab view with the Punica's helper classes.

Item

Active 45

Disabled

Add

<div class="tab bordered radius-4 shadowed">
    ...
    ...
</div>

Props	Default Class Name
Container	`.tab`
Active Tab	`.active`

Positions	Default Class Name
Top (default)	-
Bottom	`.bottom`

Styles	Default Class Name
Primary (default)	`-`
Success	`.success`
Warning	`.warning`
Error	`.error`
Dark	`.dark`

Timeline

lock

12.12.2020

John Doe,

Te vidisse cotidieque est, in adhuc honestatis his.

lock

12.12.2020

Jane Doe,

Te vidisse cotidieque est, in adhuc honestatis his.

wifi_protected_setup

Jane Doe aliquid consequat debitis eos.

extension

John Doe,

Oeehhh, that's awesome.. Me too!

12.12.2020

build

Jane Doe,

Lorem ipsum dolor sit amet, eam ut singulis vituperata!

12.12.2020

build

John Doe,

Random words in front of other random words create a random sentence.

12.12.2020