IS-UI

Another mobile-first front-end CSS framework.

Vision

IS-UI is another mobile-first front-end CSS framework. The sole purpose of this is literally to be another alternative, to be another solution. With night you have day. With water you have land. With rice you have beans. All are good, neither are evil, both are useful. Let this be another resource for developing the web even furthur.

Sizing Concept

Each built in Element with IS-UI has a minumum of 5 different sizing options. Small, Medium, Default, Large, and X-Large. Each of these should be placed into the same element that you want resized. For Example:

Or another example is the modal, these could be resized differently. See modal in JavaScript for more information on modals

Color Concept

Colors are a large part of web design and UX/UI work, escpecially more so today. To help assist in color picking and to make it as simple as possible, we pre chose colors for you. Using a framework and not being able to customize would be hard to work with, so in response to that, just add the class name of the color into the class and we'll re-color everything how they should be which allows for maximum color customization.

Tables

Basic Table

Table Heading 1	Table Heading 2	Table Heading 3
1	This is table content	This is more table content
2	This is table content	This is more table content

Shaded header Table

Table Heading 1	Table Heading 2	Table Heading 3
1	This is table content	This is more table content
2	This is table content	This is more table content

Bottom Line Table

Table Heading 1	Table Heading 2	Table Heading 3
1	This is table content	This is more table content
2	This is table content	This is more table content

Hover Table Rows

Table Heading 1	Table Heading 2	Table Heading 3
1	This is table content	This is more table content
2	This is table content	This is more table content

Highlight Table Rows

Table Heading 1	Table Heading 2	Table Heading 3
1	This is table content	This is more table content
2	This is table content	This is more table content

Checkboxes in Headers

Title	Author	Date
Home	Chase Willden	08/28/2014
About Us	Chase Willden	08/28/2014
Contact Us	Chase Willden	08/28/2014

Buttons

Colored Buttons

A tag

.btn-sm .btn-md .btn-default .btn-lg .btn-xl

Input type Submit

Rounded Buttons

Not every circumstance is a square button going to be used. Here's another option

Block Buttons

Button blocks stretch the width of the area it's placed into.

Forms

Form Components

Text Password Textarea

Subscribe:

Login Form Example

Forgot Password | Register

Textareas

Single Form

First name

Last name

Password

Subscribe?

Thank You

Input Groups

In Progress

Grid System

The grid system is very easy and organized. Simply put, there is a row and inside of this row are columns. There is a total of 12 columns wide and any number combinations between. Each column could have multiple rows creating a nice grid layout with essentially a bunch of table cells.

Each Column is padded by 10px arround each edge.

.col-1

.col-2

.col-3

.col-4

.col-5

.col-2

.col-6

.col-7

.col-5

.col-8

.col-4

.col-9

.col-3

.col-10

.col-2

.col-11

.col-1

.col-12

Small Grid

.col-2

Medium Grid

.col-2

Large Grid

.col-2

No Mobile Grid

.mobile-off

Pictures

Standard

Picture Description

This is text concerning this image

Lightbox

This is text concerning this image

Picture Collage

Depending on the picture size, the collage will resize differently. When displayed as mobile, the collage will still hold its shape.

Picture Grid

This is text concerning this image

Hover Effects

This is text concerning this image

Hover Text

Typography

Bar Left

This is an example of a bar left.

This is a bar-left with a bulge

Sizing

This is a sm

This is md

This is lg

Color

This is a blue

This is a orange

This is a pink

This is grey

This is red

This is a peach

This is a white

This is green

Hyperlinks

There will be times when you may want a hyperlink, but you don't want to use the a tag. Here's another option

Link Example