Typography

InvisCSS's styling is pretty much the default styling that you get after NormalizeCSS is finished:

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

Block Quote

A simple paragraph with a hyperlink. Keep on reading to see what InvisCSS brings to you:

Containers

InvisCss provides an optional containing element to wrap site contents.

Use container for a responsive, variable width container, with a pleasant amount of whitespace to the left and right, as you can see on this page.

If you prefer a more rigid system, you can use container-fixed instead.

<div class="container">
	...
</div>

Flexbox Grid

InvisCss uses a modified version of FlexBox Grid for grids. For anyone familiar with Bootstrap's Grid, you'll feel right at home.

Also provided is a generic, but also responsive, flex system. Start with a surrounding div having .flex (or .row):

Responsive Visibility

	Extra Small Devices	Small Devices	Medium Devices	Large Devices	State
.hidden-xs	Hidden	Visible	Visible	Visible	Visible
.hidden-sm	Visible	Hidden	Visible	Visible	Visible
.hidden-md	Visible	Visible	Hidden	Visible	Visible
.hidden-lg	Visible	Visible	Visible	Hidden	Visible
.hidden-xs-sm	Hidden	Hidden	Visible	Visible	Visible
.hidden-xs-md	Hidden	Hidden	Hidden	Visible	Visible
.hidden-sm-lg	Visible	Hidden	Hidden	Hidden	Visible
.hidden-md-lg	Visible	Visible	Hidden	Hidden	Visible

CSS Tables

Gone are the days of html tables for anything but data. InvisCss reinvigorates table layouts using properly formatted div's and CSS.

<div class="table stripe border">
	<div class="row">
		<div class="cell nowrap">...</div>
	</div>
</div>

Responsive Tables

<div class="table vert-stripe horiz-border outer-border">
	<div class="row">
		<div class="cell col-md-5">...</div>
	</div>
</div>

...or on the table itself

<div class="table stripe border col-md-8 center">
	...
</div>

Forms

Standard form

This is the default layout, with only aligned specified on the form. Label elements are rendered as right-aligned table cells automatically, and are responsive.

Email address

Small Text

Password With Error

Large Password

File input*

File drop*

Drop Files or Click Here... Drop Files or Click Here...

Number

Range

Date

DateTime

Time

Search

Tel

Check me out
radio1
radio2

Submit

<form ...>
	<div class="row"> 
		<label for="exampleInputEmail1">Email address</label> 
		<input id="exampleInputEmail1" placeholder="Email" type="email"> 
	</div> 
	...
</form>

* Requires Javascript

Stacked

Just add stacked to the form's class (or to a parent of the form elements) to always stack elements vertically.

Email address Small Text

Password With Error

Large Password

File input* Check me out Submit

<form class="center stack" ...>
	...
</form>

* Requires Javascript

Buttons

Alerts

<div class="alert success">
  ...
</div>
<div class="alert info fade">
  ...<i class="inv-cancel close"></i>
</div>
<div class="alert warning">
  ...
</div>
<div class="alert danger">
  ...
</div>
	

Timed Alerts

By adding .timeout and optional data-timeout="2500", you can choose to automatically close the alert. The timeout value is in milli-seconds.

Note: Dynamically adding alerts at run-time is supported on most browsers^* (^*except IE10, Opera Mini, Android 4.3)

Try It!

<div class="alert success fade timeout" data-timeout="3000">
  ...
</div>
	

Media

<div class="media">
	<div class="thumbnail">...</div>
	<div class="body">...</div>
</div>
	

Alternating Media

Wrap it in .media-alternate, or set individually using .right