IS-UI

Another mobile-first front-end CSS framework.

Fork on GitHub Download v0.2.2 (beta)

Use

IS-UI is intended to be simple and easy. If you have any suggestions on how to make something simpler or a featur request, please submit an issue on GitHub

Buttons

Button Groups

Button Stacks

Button stacks will keep the width of the container that it's placed into. For this example, the container size is col-half which makes these buttons small.

1
2
3
4
1
2
3
4

Tooltip

Hover

Right Click

Whereever on the HTML has the two classes combined, dropdown and right-click, that will now be the right click default

<ul class="dropdown right-click" style='margin-left: 200px'>
	...
</ul>

Display

Selection

Class Example Description
.no-select Try to select this text Turn the selection of text off inside an element
.select-text Select This User can select only text inside of an element
.select-element Select This User can select only the element itself
.select-all Select This but you can select this User can select only the element itself

Pits

.pit

.pit .deep

.pit .shallow

.pit .sm

.pit .md

.pit .lg

.pit .xl

Bulge

Color
No Color
High
Low

Fill with hover

This is some text

Alerts

If this example code is placed onto the screen, the alert message will be placed into the fixed spot in the upper right corner. To make an alert (or any element) hidden, add the class .hidden.

Panels

This is the Panel's heading
Content goes inside of the panel body

Add the class .collapse to the head of a panel to collapse the panel body on click.

Collapsable

This is the Panel's heading
  • This is a list item
  • This is a list item
  • This is a list item
  • This is a list item

Colored Panels

Heading
Add blue to the class='panel'
Heading
Add green to the class='panel'
Heading
Add orange to the class='panel'
Heading
Add grey to the class='panel'
Heading
Add red to the class='panel'
Heading
Add pink to the class='panel'
Heading
Add peach to the class='panel'
Heading
Add white to the class='panel'