Blueprint + Baseline with a dash of YUI = 24GS

This is just a working prototype and will not have a download link until the changes have been made final.

For more information contact me!

Widths

Column Width: 20px

Gutter Width: 20px

Column Count: 24 columns

Total Width: 940px

span-24 last (710px)

span-12 (350px)

span-12 last

span-8 (230px)

span-8

span-8 last

span-6 (170px)

span-6

span-6 last

span-4 (110px)

span-4

span-4 last

span-3 (80px)

span-3

span-3 last

span-2 (50px)

span-2

span-2 last

Testing media queries from Less Framework, seems to work but the margins need to be addressed.

1/2

1/4

3/4

1/4

1/3

2/3

1/5

2/5

3/5

2/5

1/6

5/6

1/8

3/8

1/8

3/8

5/8

7/8

1/8

1/4

1/2

1/4

1/8

1/2

1/8

1/4

1/12

5/12

1/12

7/12

5/12

11/12

1/12

1/24

5/24

7/24

11/24

17/24

7/24

19/24

5/24

23/24

1/24

Title — h1

Loud - dolor sit amet, consectetuer adipisci

Quiet - dolor sit amet, consectetuer adipisci

Large - dolor sit amet, consectetuer adipisci

Small - dolor sit amet, consectetuer adipisci

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Indented paragraph Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut.

Subtitle — h2

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Subtitle — h3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna alllamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Subtitle — h4

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip sse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Subtitle — h5

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam eraton ullamcorper suscipionsequat.

Subtitle — h6

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliaccumsan et iusto odio dignissim qui blandit praesent lgait nulla facilisi.

List item 01
List item 02
List item 03

Blockquote

“Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat , vel illum dolore eu feugiat nulla facilisis.”

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

List Types

Ordered list

List item
List item
List item
1. List item level 2
2. List item level 2
  1. List item level 3
  2. List item level 3

Unordered list

List item 01
List item 02
List item 03
- List item level 2
- List item level 2
  - List item level 3
  - List item level 3

Definition List

Definition list title: Definition list data
Definition list title: Definition list data
Definition list title: Definition list data

Dialog

Tables

Table caption
Header 1	Header 2
Data 1	Data 2
Data 3	Data 4
Footer 5	Footer 6

Other Styles

<strong>
~~<del> deleted~~
<dfn> dfn
<em> emphasis
hide
.added
.removed
.first
.last
.top
.bottom

Other Markup

hyperlink
abbreviation
offset text typically styled in bold
cited title of a work
code fragment
~~deleted text~~
defining instance
emphatic stress
offset text typically styled in italic
inserted text
user input
marked (highlighted) text
sample output
small print
strong importance
^superscript _subscript
variable or placeholder text

contact information

                                preformatted text

soft hyphen :  or 

White space

en space :  
em space :  
3-per-em space :  
4-per-em space :  
6-per-em space :  
figure space :  
punctuation space :  
thin space :  
hair space :

Forms

This is a <div> with the class .error. Link.

This is a <div> with the class .notice. Link.

This is a <div> with the class .info. Link.

This is a <div> with the class .success. Link.

Select, checkboxes, lists

Select field

Select with groups

Radio buttons
Radio one
Radio two
Radio three

Checkboxes
Check one
Check two
Check three

Alignment

Select field

Text input (title)

Select field Another field