From b9d6acf766728b0bf28fe4d7644a80651f9b0e1c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 27 Apr 2011 15:40:12 -0700 Subject: [PATCH] More documentation and content changes --- index.html | 429 ++++++++++++++++++++++++++----------------------- less/docs.less | 10 +- 2 files changed, 232 insertions(+), 207 deletions(-) diff --git a/index.html b/index.html index 654d5cc338..c62f7e86aa 100644 --- a/index.html +++ b/index.html @@ -326,9 +326,12 @@

Typography Headings, paragraphs, lists, and other inline type elements

-

Headings and paragraphs

-

A standard typographic hierarchy for structuring your webpages.

+
+
+

Headings and copy

+

A standard typographic hierarchy for structuring your webpages.

+

h1. Heading 1

h2. Heading 2

@@ -342,40 +345,55 @@

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

-

Emphasis, addresses, & abbreviations

-

- <strong> - <em> - <address> - <abbr> -

-

When to use

-

Emphasis tags (<strong> and <em>) should be used to add visual distinction between a word or phrase and its surrounding copy. Use <strong> for plain old attention and <em> for slick attention and titles.

-

Emphasis in a paragraph

-

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

-

Addresses

-

The address element is used for—you guessed it!—addresses. Here's how it looks:

-
- Twitter, Inc.
- 795 Folsom Ave, Suite 600
- San Francisco, CA 94107
- P: (123) 456-7890 -
-

Note: Each line in an address must end with a line-break (<br />) to properly structure the content as it is read in real life without any styles applied.

-

Abbreviations

-

For abbreviations and acronyms, use the abbr tag (acronym is deprecated in HTML5). Put the shorthand form within the tag and set a title for the complete name.

-

Blockquotes

-

- <blockquote> - <p> - <cite> -

-

Be sure to wrap your blockquote around paragraph and cite tags. When citing a source, use the cite element. The CSS will automatically preface a name with an em dash (&mdash;).

-
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...

- Dr. Julius Hibbert -
+
+
+

Misc. elements

+

Using emphasis, addresses, & abbreviations

+

+ <strong> + <em> + <address> + <abbr> +

+
+
+

When to use

+

Emphasis tags (<strong> and <em>) should be used to add visual distinction between a word or phrase and its surrounding copy. Use <strong> for plain old attention and <em> for slick attention and titles.

+

Emphasis in a paragraph

+

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

+

Addresses

+

The address element is used for—you guessed it!—addresses. Here's how it looks:

+
+ Twitter, Inc.
+ 795 Folsom Ave, Suite 600
+ San Francisco, CA 94107
+ P: (123) 456-7890 +
+

Note: Each line in an address must end with a line-break (<br />) to properly structure the content as it is read in real life without any styles applied.

+

Abbreviations

+

For abbreviations and acronyms, use the abbr tag (acronym is deprecated in HTML5). Put the shorthand form within the tag and set a title for the complete name.

+
+
+ +
+
+

Blockquotes

+

+ <blockquote> + <p> + <cite> +

+
+
+

Be sure to wrap your blockquote around paragraph and cite tags. When citing a source, use the cite element. The CSS will automatically preface a name with an em dash (&mdash;).

+
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...

+ Dr. Julius Hibbert +
+
+
+

Lists

@@ -627,178 +645,185 @@

Forms and buttons

-

All forms are given default styles to present them in a readable and scalable way.

-
-
- Example form legend -
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- Some Value Here -
-
-
- -
- -
-
-
- -
- -
-
-
-
- Example form legend -
- -
-
- @ - + +
+
+

All forms are given default styles to present them in a readable and scalable way.

+
+
+ +
+ Example form legend +
+ +
+
-
-
-
- -
-
- - +
+
+ +
+
-
-
-
- -
-
- - +
+
+ +
+
-
-
-
- -
- -
-
-
-
- Example form legend -
- -
-
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
- - Note: Labels surround all the options for much larger click areas and a more usable form. - -
-
-
- -
-
- - - to - - - All times are shown as Pacific Standard Time (GMT -08:00). +
+
+ +
+ Some Value Here
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+
+ Example form legend +
+ +
+
+ @ + +
+
+
+
+ +
+
+ + +
+
+
+
+ +
+
+ + +
+
+
+
+ +
+ +
+
+
+
+ Example form legend +
+ +
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+ + Note: Labels surround all the options for much larger click areas and a more usable form. + +
+
+
+ +
+
+ + + to + + + All times are shown as Pacific Standard Time (GMT -08:00). +
+
+
+
+ +
+ + + Block of help text to describe the field above if need be. + +
+
+
+ +
+
    +
  • + +
    • +
  • + +
    • +
+
+
+
+ +
-
-
- -
- - - Block of help text to describe the field above if need be. - -
-
-
- -
-
    -
  • - -
    • -
  • - -
    • -
-
-
-
- - -
- - + + + +
diff --git a/less/docs.less b/less/docs.less index 30b561118c..b4a93b8812 100644 --- a/less/docs.less +++ b/less/docs.less @@ -85,10 +85,7 @@ section { margin-bottom: 40px; } -// Hashgrid grid -/** - * Grid - */ +// Hashgrid.js grid #grid { width: 980px; position: absolute; @@ -107,7 +104,10 @@ section { } #grid div.horiz { height: 19px; - border-bottom: 1px dotted rgba(255,0,0,.25); + border-bottom: 1px solid rgba(255,0,0,.1); margin: 0; padding: 0; + &:nth-child(5n) { + border-color: rgba(255,0,0,.25); + } }