H1. Style Guide

This is the infopackets.com styleguide. It provides all of the reusable styles available for this site.

H2. Common Markup

H3. Paragraphs

This section provides samples of all the common html markup. All general block element text should be separated by the paragraph (code: <p>) tag. Paragraphs should not be separated by a <br /> tag.

“This is a block quote. 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.”

—Mark Jardine from radiantmars.com

H3. Block Quotes

A block quote is contained by the <blockquote> tag. The block quote can be used for two purposes. First, it is used for quoting a source. The second purpose is to use it as a pull-quote. Just add a pull class to the blockquote like this: <blockquote class="pull">. This will change the style of the blockquote to a more elegant solution. A pull-quote is a very short excerpt (a phrase or sentence at most) from the displayed article that might draw people to read the article instead of skim through it.

“The second purpose is to use it as a pull-quote.”

H3. Lists

There are three types of lists. Unordered lists, ordered lists, and definition lists. Here’s an example of an unordered list:

• Unordered List item 1
• Unordered List item 2
  • Unordered List sub-item 1
  • Unordered List sub-item 2
• Unordered List item 3
• Unordered List item 4

Here’s an example of an ordered list:

1. Ordered List item 1
2. Ordered List item 2
   1. Ordered List sub-item 1
   2. Ordered List sub-item 2
3. Ordered List item 3
4. Ordered List item 4

A definition list consists of two components. The definition term, and it’s description. Here is an example:

Definition Term

Definition Description 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.

Definition Term

Definition Description 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.

Definition Term

Definition Description 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.

Other Useful Inline Markup Tags

H4. Strong & Emphasis

Strong and Emphasis are in a nutshell, Bold and Italic respectively. Use <strong> and <em>.

H4. Code, Definitions, Abbreviations & Acronyms

Paragraph about them

H2. Columns

2 Column Grid

H2. Block Styles

H2. Tables

Tables are automatically formatted by default. The table headers use the <th> tag.

Table Header	Table Header	Table Header
Table Data	Table Data	Table Data
Table Data	Table Data	Table Data
Table Data	Table Data	Table Data
Table Data	Table Data	Table Data

H2. Forms

Intro to forms

Group Name

Text Box:

Helper Line

Password Box:

• This is a checkbox

Text Area:

Another Group

For checkboxes or radios with a title:

Option 1

Option 2

Option 3

Option 4

Dropdowns: Select an Option Option 1

• Home
• Subscribe
• Unsubscribe
• About
• Contact
• Advertise
• Privacy Policy

Copyright © Computer 411 | Infopackets.com. All rights reserved.