Jaspersoft Style Guide v.8 (Responsive)

This is a work in progress and subject to change


Colors

  • #003649
  • #3F5E6F
  • #567B98
  • #BFD1E5
  • #165077
  • #28628E
  • #0078BF
  • #0084D5
  • #006848
  • #00845A
  • #BE5400
  • #D76300
  • #E47E1A
  • #E68835
  • #27251A
  • #2F2A1F
  • #363027
  • #50473B
  • #7E7972
  • #ACA7A3
  • #C9C5C1
  • #DBD8D4
  • #E9E6E1
  • #F4F2F0
  • #F8F7F6



Buttons

			<a class="button">Register</a>
		

Sizes

			<a class="button expand">Register</a>
		
			<a class="button small">Register</a>
		
			<a class="button smaller">Register</a>
		
			<a class="button tiny">Register</a>
		

Colors

			<a class="button blue-dark">Sign Up Now</a>
		
			<a class="button blue-highlight">Chat Now</a>
		
			<a class="button blue-soft">Sign Up Now</a>
		
			<a class="button teal">Sign Up Now</a>
		
			<a class="button orange">Sign Up Now</a>
		
			<a class="button orange-light">Sign Up Now</a>
		
			<a class="button secondary">Cancel</a>
		
			<a class="button smaller gray">Additional Resources</a>
		

Extras

			<a class="button smaller arrow">Checkout</a>
		
			<a class="blue-soft bold">Sign Up for the Webinar</a>
		
			<a class="button teal">
				Download Now
				<div class="sub-label">Windows 7, 200MB</div>
			</a>
		



Type

Headings

Heading 1 .large - H&FJ Gotham 600 2rem #003649 Uppercase

Heading 1 - H&FJ Gotham 600 1.875rem #003649 Uppercase

Heading 2 - H&FJ Gotham 200 1.5rem #BE5400

Heading 3 - H&FJ Gotham 500 1.375rem #BE5400 Uppercase

Heading 4 - H&FJ Gotham 500 1.25rem #165077

Heading 5 - H&FJ Gotham 600 1.125rem #3F5E6F
Heading 6 - H&FJ Gotham 400 1rem #3F5E6F

Paragraphs

Paragraph text - H&FJ Whitney 400 16px #222222

Paragraph text (<p class="bg-blue t-wt">) - White on Medium Blue

Paragraph text (<p class="bg-blue-dk t-blue-lt">) - Light Blue on Dark Blue




Grid

This theme is mobile-first. Code for small screens first, and larger devices will inherit those styles. Customize for larger screens as necessary.

HTML

	<div class="row">
		<div class="small-2 large-4 columns">...</div>
		<div class="small-4 large-4 columns">...</div>
		<div class="small-6 large-4 columns">...</div>
	</div>
	<div class="row">
		<div class="large-3 columns">...</div>
		<div class="large-6 columns">...</div>
		<div class="large-3 columns">...</div>
	</div>
	<div class="row">
		<div class="small-6 large-2 columns">...</div>
		<div class="small-6 large-8 columns">...</div>
		<div class="small-12 large-2 columns">...</div>
	</div>
	<div class="row">
		<div class="small-6 large-5 columns">...</div>
		<div class="small-6 large-7 columns">...</div>
	</div>
	<div class="row">
		<div class="large-6 medium-4 small-10 columns">...</div>
		<div class="large-6 medium-8 small-2 columns">...</div>
	</div>

Rendered HTML

small-2 large-4
small-4 large-4
small-6 large-4
large-3
large-6
large-3
small-6 large-2
small-6 large-8
small-12 large-2
small-6 large-5
small-6 large-7
large-6 medium-4 small-10
large-6 medium-8 small-2



Page Elements

Tooltips

	<span data-tooltip data-options="disable_for_touch:true" class="has-tip tip-right" title="Tooltips are awesome, you should totally use them!">extended information</span>

extended information


Breadcrumbs



Subnavigation


Pagination




Forms

			<form>
				<div class="row">
					<div class="large-12 columns">
						<label>Input Label
							<input type="text" class="error" placeholder="large-12.columns" />
						</label>
					</div>
				</div>
				<div class="row">
					<div class="large-4 columns">
						<label>Input Label
							<input type="text" placeholder="large-4.columns" />
						</label>
					</div>
					<div class="large-4 columns">
						<label>Input Label
							<input type="text" placeholder="large-4.columns" />
						</label>
					</div>
					<div class="large-4 columns">
						<div class="row collapse">
							<label>Input Label</label>
							<div class="small-9 columns">
								<input type="text" placeholder="small-9.columns" />
							</div>
							<div class="small-3 columns">
								<span class="postfix">.com</span>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="large-12 columns">
						<label>Select Box
							<select>
								<option value="husker">Husker</option>
								<option value="starbuck">Starbuck</option>
								<option value="hotdog">Hot Dog</option>
								<option value="apollo">Apollo</option>
							</select>
						</label>
					</div>
				</div>
				<div class="row">
					<div class="large-6 columns">
						<label>Choose Your Favorite</label>
						<input type="radio" name="pokemon" value="Red" id="pokemonRed"><label for="pokemonRed">Red</label>
						<input type="radio" name="pokemon" value="Blue" id="pokemonBlue"><label for="pokemonBlue">Blue</label>
					</div>
					<div class="large-6 columns">
						<label>Check these out</label>
						<input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
						<input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
					</div>
				</div>
				<div class="row">
					<div class="large-12 columns">
						<label>Textarea Label
							<textarea placeholder="small-12.columns"></textarea>
						</label>
					</div>
				</div>
			</form>
		
Invalid entry
.com



Icons

  •  

    icon-home

  •  

    icon-newspaper

  •  

    icon-pencil

  •  

    icon-paint-format

  •  

    icon-image

  •  

    icon-images

  •  

    icon-play

  •  

    icon-file

  •  

    icon-profile

  •  

    icon-file2

  •  

    icon-file3

  •  

    icon-book

  •  

    icon-books

  •  

    icon-connection

  •  

    icon-bullhorn

  •  

    icon-film

  •  

    icon-copy

  •  

    icon-paste

  •  

    icon-stack

  •  

    icon-folder-open

  •  

    icon-tag

  •  

    icon-tags

  •  

    icon-cart

  •  

    icon-coin

  •  

    icon-calculate

  •  

    icon-support

  •  

    icon-phone

  •  

    icon-notebook

  •  

    icon-envelope

  •  

    icon-pushpin

  •  

    icon-location

  •  

    icon-location2

  •  

    icon-compass

  •  

    icon-map

  •  

    icon-history

  •  

    icon-clock

  •  

    icon-alarm

  •  

    icon-bell

  •  

    icon-stopwatch

  •  

    icon-calendar

  •  

    icon-print

  •  

    icon-keyboard

  •  

    icon-screen

  •  

    icon-mobile

  •  

    icon-tablet

  •  

    icon-tv

  •  

    icon-box-add

  •  

    icon-box-remove

  •  

    icon-download

  •  

    icon-upload

  •  

    icon-disk

  •  

    icon-undo

  •  

    icon-redo

  •  

    icon-undo2

  •  

    icon-forward

  •  

    icon-redo2

  •  

    icon-reply

  •  

    icon-bubble

  •  

    icon-bubbles

  •  

    icon-bubbles2

  •  

    icon-users

  •  

    icon-user

  •  

    icon-busy

  •  

    icon-spinner

  •  

    icon-binoculars

  •  

    icon-search

  •  

    icon-expand

  •  

    icon-contract

  •  

    icon-contract2

  •  

    icon-key

  •  

    icon-lock

  •  

    icon-unlocked

  •  

    icon-wrench

  •  

    icon-settings

  •  

    icon-cog

  •  

    icon-equalizer

  •  

    icon-cogs

  •  

    icon-cog2

  •  

    icon-hammer

  •  

    icon-aid

  •  

    icon-bug

  •  

    icon-pie

  •  

    icon-stats

  •  

    icon-bars

  •  

    icon-bars2

  •  

    icon-trophy

  •  

    icon-food

  •  

    icon-leaf

  •  

    icon-rocket

  •  

    icon-meter

  •  

    icon-dashboard

  •  

    icon-hammer2

  •  

    icon-fire

  •  

    icon-lab

  •  

    icon-remove

  •  

    icon-briefcase

  •  

    icon-airplane

  •  

    icon-target

  •  

    icon-shield

  •  

    icon-lightning

  •  

    icon-switch

  •  

    icon-power-cord

  • icon-signup

  •  

    icon-list

  •  

    icon-list2

  •  

    icon-numbered-list

  •  

    icon-tree

  •  

    icon-cloud

  •  

    icon-cloud-download

  •  

    icon-cloud-upload

  •  

    icon-globe

  •  

    icon-earth

  •  

    icon-link

  •  

    icon-flag

  •  

    icon-attachment

  •  

    icon-eye

  •  

    icon-bookmarks

  •  

    icon-bookmark

  •  

    icon-star

  •  

    icon-star2

  •  

    icon-warning

  •  

    icon-notification

  •  

    icon-question

  •  

    icon-info

  •  

    icon-info2

  •  

    icon-blocked

  •  

    icon-cancel-circle

  •  

    icon-checkmark-circle

  •  

    icon-spam

  •  

    icon-close

  •  

    icon-checkmark

  •  

    icon-enter

  •  

    icon-exit

  •  

    icon-loop

  •  

    icon-loop2

  •  

    icon-loop3

  •  

    icon-shuffle

  •  

    icon-arrow-right

  •  

    icon-arrow-up

  •  

    icon-arrow-down

  •  

    icon-arrow-left

  •  

    icon-arrow-right2

  •  

    icon-arrow-up2

  •  

    icon-arrow-down2

  •  

    icon-arrow-left2

  •  

    icon-tab

  •  

    icon-checkbox-partial

  •  

    icon-checkbox-checked

  •  

    icon-checkbox-unchecked

  •  

    icon-radio-checked

  •  

    icon-radio-unchecked

  •  

    icon-scissors

  •  

    icon-filter

  •  

    icon-table

  •  

    icon-new-tab

  •  

    icon-share

  •  

    icon-google-plus

  •  

    icon-google

  •  

    icon-google-plus2

  •  

    icon-google-plus3

  •  

    icon-facebook

  •  

    icon-facebook2

  •  

    icon-facebook3

  •  

    icon-twitter

  •  

    icon-twitter2

  •  

    icon-twitter3

  •  

    icon-feed

  •  

    icon-feed2

  •  

    icon-feed3

  •  

    icon-youtube

  •  

    icon-youtube2

  •  

    icon-github

  •  

    icon-github2

  •  

    icon-github3

  •  

    icon-tux

  •  

    icon-apple

  •  

    icon-finder

  •  

    icon-android

  •  

    icon-windows

  •  

    icon-windows8

  •  

    icon-linkedin

  •  

    icon-stackoverflow

  •  

    icon-paypal

  •  

    icon-paypal2

  •  

    icon-file-pdf

  •  

    icon-file-openoffice

  •  

    icon-file-word

  •  

    icon-file-excel

  •  

    icon-file-powerpoint

  •  

    icon-file-zip

  •  

    icon-file-xml

  •  

    icon-html5

  •  

    icon-html52

  •  

    icon-chrome

  •  

    icon-firefox

  •  

    icon-IE

  •  

    icon-opera

  •  

    icon-safari

  •  

    icon-css3

  •  

    icon-database

  •  

    icon-atom

  •  

    icon-target2

  •  

    icon-code

  •  

    icon-mouse

  •  

    icon-ipod

  •  

    icon-flag2

  •  

    icon-bug2

  •  

    icon-chart

  •  

    icon-earth2

  •  

    icon-eye2

  •  

    icon-steering-wheel

  •  

    icon-chart2

  •  

    icon-chart-alt

  •  

    icon-bars3

  •  

    icon-bars-alt

  •  

    icon-fork

  •  

    icon-layers

  •  

    icon-layers-alt

  •  

    icon-share2

  •  

    icon-equalizer2

  •  

    icon-th-large

  •  

    icon-signal

  •  

    icon-time

  •  

    icon-print2

  •  

    icon-facetime-video

  •  

    icon-picture

  •  

    icon-pencil2

  •  

    icon-question-sign

  •  

    icon-info-sign

  •  

    icon-ok-sign

  •  

    icon-remove-sign

  •  

    icon-shopping-cart

  •  

    icon-calendar2

  •  

    icon-twitter4

  •  

    icon-facebook4

  •  

    icon-github4

  •  

    icon-linkedin2

  •  

    icon-dashboard2

  •  

    icon-google-plus4

  •  

    icon-google-plus-sign

  •  

    icon-cloud2

  •  

    icon-group

  •  

    icon-cloud-download2

  •  

    icon-cloud-upload2

  •  

    icon-dollar

  •  

    icon-youtube-play

  •  

    icon-android2

  •  

    icon-windows2

  •  

    icon-apple2

  •  

    icon-youtube3

  •  

    icon-youtube-sign