Jump to:

Footprint Pattern Library

A Front-end pattern library for webdesigners made by Peter Ahlgren. Orinated from a course by Adi Purdila at Tuts+.

The Grid System


.col-12
.col-6
.col-6
.col-4
.col-4
.col-4
.col-3
.col-3
.col-3
.col-3
.col-5
.col-7
.col-4
.col-8
.col-9
.col-3
.col-10
.col-2
.col-11
.col-1
.col-half
.col-half
.col-third
.col-two-thirds
.col-quarter
.col-quarter
.col-half

Notes

Here's a few code snippets that will explain how the grid works.


<div class="row">
	<div class="col-quarter">
		<div class="demo-col">.col-quarter</div>
	</div> <!-- .col-quarter -->
	<div class="col-quarter">
		<div class="demo-col">.col-quarter</div>
	</div> <!-- .col-quarter -->
	<div class="col-half">
		<div class="demo-col">.col-half</div>
	</div> <!-- .col-half -->
</div> <!-- .row -->
					

Typography


Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam faucibus id ligula vitae placerat. Donec ultrices venenatis nulla, quis euismod mi convallis condimentum. Aenean in tellus nec massa hendrerit tincidunt. Vestibulum commodo, magna nec semper lobortis, arcu augue ullamcorper leo, id pellentesque erat mauris non nisl.

Proin ac dui non augue tincidunt aliquet eu a diam. Sed eu risus imperdiet, varius eros at, congue augue. Nam viverra lacinia quam, a ullamcorper mauris tempus sit amet. Phasellus elementum, ante ut efficitur suscipit, neque odio accumsan massa, eu rutrum magna ex in neque. Suspendisse non nunc ante. Nulla interdum, arcu a ullamcorper rutrum, felis eros ullamcorper neque, ut accumsan ipsum lacus nec metus. Proin interdum ipsum nisi, vitae posuere nibh feugiat id.

.row:after {
	content: "";

	display: table;
	clear: both;
}

Unordered list

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  5. Item 5

This is a blockquote.

Buttons


Button styles

Button sizes

HTML elements

Anchor tag

Forms


Inputs

This is a contextual help for the field above.

This is a error message for the field above.

Dadio buttons and checkboxes
Sign-in Form

* required fields

Sign-up Form

* required fields

Contact Form

* required fields

Icons


Bordered icons

Circle

Rounded

Square

Icon sizes

Default

Large

Huge

Feedback


Information

This is the body of the message!

Error

This is the body of the message!

Warning

This is the body of the message!

Success

This is the body of the message!

Navigation


Animations


bounce
flash
pulse
rubberBand
shake
swing

Tabs


Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer imperdiet laoreet risus a vulputate.

Lorem ipsum dolor sit amet,

Accordions


First

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, fuga.

Second

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer imperdiet laoreet risus a vulputate. Quisque sagittis urna vitae nisl lacinia molestie.

Third

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer imperdiet laoreet risus a vulputate. Quisque sagittis urna vitae nisl lacinia molestie. Praesent vel enim nec arcu mattis rhoncus vel ut dolor.

Carousels


Slider image 1 Slider image 2 Slider image 3 Slider image 4