diff --git a/examples/fb-timeline.html b/examples/fb-timeline.html new file mode 100644 index 000000000000..9071a314fb6c --- /dev/null +++ b/examples/fb-timeline.html @@ -0,0 +1,459 @@ + + + + + Canvas / Fbootstrapp by Clemens Krack, based on Bootstrap, from Twitter + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ +
+

Hello, world!

+

Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

+

Learn more »

+
+ + +
+
+

Heading

+

Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

+

View details »

+
+
+

Heading

+

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

+

View details »

+
+
+

Heading

+

Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+

View details »

+
+
+
+ + +
+
+

Media Example images

+
+ + + + + +
+ + + +
+
+

Tables For, you guessed it, tabular data

+
+ +

Example: Default table styles

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#First NameLast NameLanguage
1SomeOneEnglish
2JoeSixpackEnglish
3StuDentCode
+ +

Example: Zebra-striped

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#First NameLast NameLanguage
1SomeOneEnglish
2JoeSixpackEnglish
3StuDentCode
+ span 4 columns +
+ span 2 columns + + span 2 columns +
+ +
+ + + + +
+
+

Forms

+
+ +
+
+ Example form legend +
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ Example form legend +
+ +
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+ + Note: Labels surround all the options for much larger click areas and a more usable form. + +
+
+
+ +
+ + + Block of help text to describe the field above if need be. + +
+
+
+ +
+
    +
  • + +
    • +
  • + +
    • +
+
+
+
+   +   +   + +
+
+
+ +
+ + + + + + + + + +
+ +
+ × +

Holy guacamole! Best check yo self, you’re not looking too good.

+
+
+ × +

Oh snap! Change this and that and try again.

+
+
+ × +

Well done! You successfully read this alert message.

+
+
+ × +

Heads up! This is an alert that needs your attention, but it’s not a huge priority just yet.

+
+ +
+ × +

Holy guacamole! This is a warning! Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

+
+ Take this action Or do this +
+
+
+ × +

Oh snap! You got an error! Change this and that and try again.

+
    +
  • Duis mollis est non commodo luctus
    • +
  • Nisi erat porttitor ligula
    • +
  • Eget lacinia odio sem nec elit
    • +
+
+ Take this action Or do this +
+
+
+ × +

Well done! You successfully read this alert message. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.

+
+ Take this action Or do this +
+
+
+ × +

Heads up! This is an alert that needs your attention, but it’s not a huge priority just yet.

+
+ Take this action Or do this +
+
+ +
+ + + +
+ + + diff --git a/lib/bootstrap.less b/lib/bootstrap.less index 929f25a80896..8046ed852a48 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -18,6 +18,7 @@ // Grid system and page structure @import "grid-canvas.less"; +@import "grid-timeline.less"; @import "scaffolding.less"; // Styled patterns and elements diff --git a/lib/grid-timeline.less b/lib/grid-timeline.less new file mode 100644 index 000000000000..972ab16abc17 --- /dev/null +++ b/lib/grid-timeline.less @@ -0,0 +1,163 @@ +// GRID DUPLICATION FOR THE CANVAS SIZED APPS +// ---------------- +.container.timeline { + @gridColumns: 12; + @gridColumnWidth: 49px; + @gridGutterWidth: 20px; + @extraSpace: (@gridGutterWidth * 2); // For our grid calculations + @siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); + + .fixed-container(); + +// GRID MIXINS +// ---------------- + + .fixed-container() { + width: @siteWidth; + margin-left: auto; + margin-right: auto; + .clearfix(); + } + + .columns(@columnSpan: 1) { + width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)); + } + .offset(@columnOffset: 1) { + margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace; + } + // Necessary grid styles for every column to make them appear next to each other horizontally + .gridColumn() { + display: inline; + float: left; + margin-left: @gridGutterWidth; + } + // makeColumn can be used to mark any element (e.g., .content-primary) as a column without changing markup to .span something + .makeColumn(@columnSpan: 1) { + .gridColumn(); + .columns(@columnSpan); + } + +// THE GRID +// ---------------- + + .row { + .clearfix(); + margin-left: -@gridGutterWidth; + } + + // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7) + // Credit to @dhg for the idea + .row > [class*="span"] { + .gridColumn(); + } + + // Default columns + .span1 { .columns(1); } + .span2 { .columns(2); } + .span3 { .columns(3); } + .span4 { .columns(4); } + .span5 { .columns(5); } + .span6 { .columns(6); } + .span7 { .columns(7); } + .span8 { .columns(8); } + .span9 { .columns(9); } + .span10 { .columns(10); } + .span11 { .columns(11); } + .span12 { .columns(12); } + .span13 { .columns(13); } + .span14 { .columns(14); } + .span15 { .columns(15); } + .span16 { .columns(16); } + + // For optional 24-column grid + .span17 { .columns(17); } + .span18 { .columns(18); } + .span19 { .columns(19); } + .span20 { .columns(20); } + .span21 { .columns(21); } + .span22 { .columns(22); } + .span23 { .columns(23); } + .span24 { .columns(24); } + + // Offset column options + .row { + > .offset1 { .offset(1); } + > .offset2 { .offset(2); } + > .offset3 { .offset(3); } + > .offset4 { .offset(4); } + > .offset5 { .offset(5); } + > .offset6 { .offset(6); } + > .offset7 { .offset(7); } + > .offset8 { .offset(8); } + > .offset9 { .offset(9); } + > .offset10 { .offset(10); } + > .offset11 { .offset(11); } + > .offset12 { .offset(12); } + } + + // Unique column sizes for 12-column grid + .span-one-third { width: 263px; } + .span-two-thirds { width: 546px; } + .row { + > .offset-one-third { margin-left: 284px; } + > .offset-two-thirds { margin-left: 588px; } + } + +// FORM INPUT SIZES +// ---------------- + + .formColumns(@columnSpan: 1) { + display: inline-block; + float: none; + width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 10; + margin-left: 0; + } + input, + textarea { + // Default columns + &.span1 { .formColumns(1); } + &.span2 { .formColumns(2); } + &.span3 { .formColumns(3); } + &.span4 { .formColumns(4); } + &.span5 { .formColumns(5); } + &.span6 { .formColumns(6); } + &.span7 { .formColumns(7); } + &.span8 { .formColumns(8); } + &.span9 { .formColumns(9); } + &.span10 { .formColumns(10); } + &.span11 { .formColumns(11); } + &.span12 { .formColumns(12); } + &.span13 { .formColumns(13); } + &.span14 { .formColumns(14); } + &.span15 { .formColumns(15); } + &.span16 { .formColumns(16); } + } + +// TABLE CELL SIZES +// ---------------- + + // This is a duplication of the main grid .columns() mixin, but subtracts 20px to account for input padding and border + .tableColumns(@columnSpan: 1) { + width: ((@gridColumnWidth - 20) * @columnSpan) + ((@gridColumnWidth - 20) * (@columnSpan - 1)); + } + table { + // Default columns + .span1 { .tableColumns(1); } + .span2 { .tableColumns(2); } + .span3 { .tableColumns(3); } + .span4 { .tableColumns(4); } + .span5 { .tableColumns(5); } + .span6 { .tableColumns(6); } + .span7 { .tableColumns(7); } + .span8 { .tableColumns(8); } + .span9 { .tableColumns(9); } + .span10 { .tableColumns(10); } + .span11 { .tableColumns(11); } + .span12 { .tableColumns(12); } + .span13 { .tableColumns(13); } + .span14 { .tableColumns(14); } + .span15 { .tableColumns(15); } + .span16 { .tableColumns(16); } + } + +} \ No newline at end of file