Jump to:

Tuts+ Pattern Library

A project by Adi Purdila. Made for a Tuts+ course.

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> <!-- end col-quarter -->
				<div class="col-quarter">
					<div class="demo-col">.col-quarter</div>
				</div> <!-- end col-quarter -->
				<div class="col-half">
					<div class="demo-col">.col-half</div>
				</div> <!-- end col-half -->
			</div> <!-- end row -->

Typography


Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quo nihil architecto, qui modi at, accusantium optio laudantium consequuntur delectus facere non alias natus perspiciatis esse officiis eum hic nam tenetur enim ratione reiciendis eos quam. Facere minima porro, modi assumenda est inventore.

Eaque tempore nam, quam ipsa ducimus dolores quibusdam sint! Voluptate nobis nesciunt aspernatur alias expedita excepturi culpa atque dicta corrupti sed vitae deleniti labore nam cum, maiores dolorum amet sint veritatis, facilis iure dignissimos officia. Magni facilis amet blanditiis, laborum consectetur corrupti quia odit nobis minima maxime natus, quibusdam veritatis nostrum aut voluptates possimus vero ab! Fugiat.

.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 an error message for the field above.

Radio 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 adipisicing elit. Numquam, natus?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque officia dicta omnis ipsam quos ad dolorem quisquam ratione. Voluptate, molestiae.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi alias beatae cupiditate mollitia ullam facere illum, sed quos error, veritatis neque natus voluptatem facilis officiis harum esse, fuga quod ipsa.

Accordions


First

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

Second

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam magni ducimus architecto laudantium placeat natus atque quia, ullam veniam necessitatibus.

Third

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis nostrum amet ducimus tenetur, minus perferendis dolorem obcaecati odio, expedita molestias dolor, aliquid enim tempore harum doloribus. Rem, itaque perferendis voluptates.

Carousels


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