Grid

Code notes

						<div class="line>

						  <div class="unit size1of2">Half width</div>

						  <div class="unit size1of4">Quarter width</div>

						  <div class="unit size1of4 lastUnit">Quarter width</div>

						</div>
					

						<div class="line">

						  <div class="unit size1of2"><h3>Section title</h3></div>

						  <div class="unit size1of2 lastUnit alignRight">

						    <a href="">Link1</a>

						    <a href="">Link2</a>

						  </div>

						</div>
					

Typography

H0 marketing headline

H1 headline

H2 subheadline

H3 section header

H4 section section header

Xlarge text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Large text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Normal text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Bolded text is in Helvetica Neue Medium. This is a link.

Code notes

Much of the theory of typography comes from The Elements of Typographic Style Applied to the Web.

Our title font is Avenir Heavy and our body fonts are Helvetica Neue Light (normal) and Helvetical Neue Medium (bold). These are defined by $titleFontStack and $bodyFontStack.

Use <h1>, <h2>, <h3>, <h4>, .xlarge, .large, and .normal to keep typography consistent. You can use .h0 for an extra big text as well as any of the headers as classes (.h1, .h2, etc). There is a secret .small class but use it wisely. Smaller text strains people's eyes, especially those of older users.

Use p tags to wrap non-heading and form text. They have a max-width that keeps text readable.

For all text including headings and buttons, capitalize only the first letter. All caps text is harder to read and looks too formal.

P.S. Letterspacing is a font crime.

Color

Code notes

Tint color by adding white and shade colors by adding black. This keeps our color scheme consistent. With Sass this is done with darken($color, 20%) and lighter($color, 20%). Our main color is $blueLight and Panjiva blue is $blueDark. Green (#2ECC71) means success and red (#E74C3C) means danger.

Forms

Code notes

Unfortunately profileV4 overrides many of these styles. That's why there are several !important additions. If this causes you grief, my apologies.

Navigation

• Active link
• Link
• Link

				<ul class="localNav">

				  <li class="active"><a href="">Account</a></li>

				  <li><a href="">Profile</a></li>

				  <li><a href="">Order History</a></li>

				</ul>
			

Table

						<table>

						  <thead>

						    <tr>

						      <td>Name</td>

						      <td>Email</td>

						    </tr>

						  </thead>

						  <tr>

						    <td>Sally Sullivan (me)</td>

						    <td>ssullivan@furniture.com</td>

						  </tr>

						  <tr>

						    <td>Alex Subotnick</td>

						    <td>asubotnick@furniture.com</td>

						  </tr>

						  <tr class="focus">

						    <td>

						    <fieldset>

						      <label for="inputFirstName">Name</label>

						      <input type="text" placeholder="" id="inputFirstName">

						    </fieldset>

						    </td>

						    <td>

						    <fieldset>

						      <span class="label">It's free!</span><br>

						      <button>Invite User</button>

						    </fieldset>

						    </td>

						  </tr>

						</table>
					

Icons

Icon block

panjiva-icon-user iconBlock disabled

panjiva-icon-user iconBlock