CSS Framework Guide
for Invision Power Suite 4
by RADStudios

 

 

 

Components

A lot of work is still to be completed and we urge you to contribute if you can: GitHub Repo

 

Buttons

Button Sizes

Button Groups

 

 

Breadcrumb

 

 

 

Widgets

Horizontal Widget

Widget Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus, urna eget dapibus dapibus, ipsum massa pharetra lacus, at iaculis arcu est ac nisl. Quisque faucibus libero at aliquam malesuada. Donec ut orci id velit accumsan pharetra at eu eros. Fusce facilisis est aliquet, tincidunt tellus vitae, imperdiet lectus.

 

Vertical Widget

Widget Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus, urna eget dapibus dapibus, ipsum massa pharetra lacus, at iaculis arcu est ac nisl. Quisque faucibus libero at aliquam malesuada. Donec ut orci id velit accumsan pharetra at eu eros. Fusce facilisis est aliquet, tincidunt tellus vitae, imperdiet lectus.

Widget Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus, urna eget dapibus dapibus, ipsum massa pharetra lacus, at iaculis arcu est ac nisl. Quisque faucibus libero at aliquam malesuada. Donec ut orci id velit accumsan pharetra at eu eros. Fusce facilisis est aliquet, tincidunt tellus vitae, imperdiet lectus.

Widget Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus, urna eget dapibus dapibus, ipsum massa pharetra lacus, at iaculis arcu est ac nisl. Quisque faucibus libero at aliquam malesuada. Donec ut orci id velit accumsan pharetra at eu eros. Fusce facilisis est aliquet, tincidunt tellus vitae, imperdiet lectus.

 

 

 

Tables

Standard

ID Name Position Department
1 John Doe Executive Sales
2 John Doe Executive Sales
3 John Doe Executive Sales

Matrix Themed + Zebra Stripes

ID Name Position Department
1 John Doe Executive Sales
2 John Doe Executive Sales
3 John Doe Executive Sales

 

 

 

Tabs

Not sure on the panel part just yet? if anyone can contribute please do

  • Tab 1
  • Tab 2
  • Tab 3
  • Tab 4

 

 

 

Forms

Form Header

  • Text Field Required

    Optional description text.
  • Select Box Required

  • Multiple Select Box Required

  • Yes / No Required
    On
    This "checkbox" alternative requires Javascript which we have not yet begun to document.

 

 

 

Tags & Badges

Tags

I am a tag
I am another tag
I am the tag everybody speaks of!

Badges

WARNING BADGE POSITIVE BADGE NEGATIVE BADGE NEUTRAL BADGE INTERMEDIARY BADGE
i c o n

Badge Sizes

.ipsBadge_normal .ipsBadge_medium .ipsBadge_large

 

 

 

Message Alerts

Information: Look behind you!
Danger: Seriously..... Look behind you!
Warning: Is that a robot?!? Be careful it bites!
Success: Wow where did you get that rocket launcher! *BOOM*
General: Yay it has powered down. Thank god no one got hurt!