From a6d5f6743f41c0e62fa7e97dc7faa5d1a47f2456 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 3 May 2011 17:35:08 -0700 Subject: [PATCH] Changing up boostrap for better grid variable management and grid structuring --- grid.html | 168 ++++++++++++++++++++++++++++++++++++++++++++ less/bootstrap.less | 16 ++++- less/docs.less | 3 +- 3 files changed, 183 insertions(+), 4 deletions(-) create mode 100644 grid.html diff --git a/grid.html b/grid.html new file mode 100644 index 0000000000..3ce74984c1 --- /dev/null +++ b/grid.html @@ -0,0 +1,168 @@ + + + + + Twitter Baseline + + + + + + + + + + + + + + + + + + + + + + + + +
+
+

+ +
+
+ +
+
+

Typography

+
+ +
+
+

Body Text

+

Headings and paragraphs for writing to your heart's content.

+

Heading 2

+

Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+

Heading 3

+

Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+

Heading 4

+

Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+
Heading 5
+

Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+
Heading 6
+

Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+
+
+

Lists

+

Includes unordered (bullets), ordered (numbers), and even definition (term and description).

+

Unordered List

+

For a list of items in which the order has no explicit meaning.

+
    +
  • Mattis
    • +
  • Tortor
    • +
  • Sollicitudin
    • +
  • Sit
    • +
  • Porta
    • +
+
+

Ordered List

+

For a list of items in which order does matter.

+
    +
  1. Cras
    2. +
  2. Euismod
    3. +
  3. Quam
    4. +
  4. Egestas
    5. +
  5. Nibh
    6. +
+
+

Definition List

+

For list terms and their definitions or descriptions.

+
+
Ullamcorper
+
Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+
Porta
+
Nulla vitae elit libero, a pharetra augue.
+
Pharetra
+
Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+
+
+
+

Misc. Elements

+

More elements that have special typographic styles, such as emphasis, address, abbr, and acronym.

+

Emphasis in a Paragraph

+

Cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.

+

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 12345
+ P: (408) 123-4567 +
+

Note: Each line in an address must have a line-break (<br />) after it to properly structure the content as it is read in real life.

+

Abbreviations & Acronyms

+

Acronyms are actually a subset of abbreviations, a shortern form of another word. The difference is that regular abbreviations are just shorthand notations for a word, while acronyms are strings of the first letter in a multi-word phrase.

+

Example acronyms include HTML and CSS, while a great abbreviation is Prof. (short for Professor).

+
+
+ +
+ + + + + \ No newline at end of file diff --git a/less/bootstrap.less b/less/bootstrap.less index a261babf01..9e131a9096 100644 --- a/less/bootstrap.less +++ b/less/bootstrap.less @@ -32,6 +32,12 @@ // Baseline grid @baseline: 20px; +// Griditude +@grid_columns: 16; +@grid_column_width: 40px; +@grid_gutter_width: 20px; +@site_width: (@grid_columns * @grid_column_width) + (@grid_gutter_width * (@grid_columns - 1)); + /* Mixins -------------------------------------------------- */ @@ -92,9 +98,10 @@ } // Grid System -@grid_columns: 16; -@grid_column_width: 40px; -@grid_gutter_width: 20px; +.container { + width: @site_width; + margin: 0 auto; +} .columns(@column_span: 1) { display: inline; float: left; @@ -104,6 +111,9 @@ margin-left: 0; } } +.offset(@column_offset: 1) { + margin-left: (@grid_column_width * @column_offset) + (@grid_gutter_width * (@column_offset - 1)) !important; +} // Border Radius .border-radius(@radius: 5px) { diff --git a/less/docs.less b/less/docs.less index b10eb29a08..0f17c5083b 100644 --- a/less/docs.less +++ b/less/docs.less @@ -121,6 +121,7 @@ section { margin-left: -490px; } #grid div.vert { + #translucent > .background(#00CED1, .075); width: 39px; border: solid darkturquoise; border-width: 0 1px; @@ -130,7 +131,7 @@ section { margin-left: 19px; } #grid div.horiz { - height: 19px; + height: @baseline - 1; border-bottom: 1px solid rgba(255,0,0,.1); margin: 0; padding: 0;