From fbe924e013943c21ce4f32e5ccddfe851a0ee3f2 Mon Sep 17 00:00:00 2001 From: Jonathan Smiley Date: Thu, 17 May 2012 00:17:52 -0700 Subject: [PATCH] Renamed files, added in explanation content --- index.html | 299 ++++++++++++++++++ responsive_table.css => responsive-tables.css | 0 responsive_table.js => responsive-tables.js | 0 responsive_table.html | 261 --------------- stylesheets/app.css | 8 +- 5 files changed, 306 insertions(+), 262 deletions(-) create mode 100644 index.html rename responsive_table.css => responsive-tables.css (100%) rename responsive_table.js => responsive-tables.js (100%) delete mode 100644 responsive_table.html diff --git a/index.html b/index.html new file mode 100644 index 0000000..df15cbd --- /dev/null +++ b/index.html @@ -0,0 +1,299 @@ + + + + + + + + + + + + + + Responsive Tables by ZURB + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+

Responsive Tables

+

A CSS/JS solution for tables that allows them to shrink on small devices with sacrificing the value of tables, comparison of columns.

+ +
+
+

Our solution for responsive tables requires two included files (both linked on this page): responsive-tables.css and responsive-tables.js.

+

The JS will help us create some new elements on small devices, so we don't have to modify our table markup on the page. The CSS applies the requisite positioning and overflow styles to make the new elements work.

+
+
+ 
+/* Attach the Table CSS and Javascript */
+<link rel="stylesheet" href="responsive-tables.css">
+<script src="stylesheet" href="responsive-tables.js"</script>
+
+
+ +
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Header 1Header 2Header 3Header 4Header 5Header 6Header 7Header 8
row 1, cell 1row 1, cell 2row 1, cell 3row 1, cell 4row 1, cell 5row 1, cell 6row 1, cell 7row 1, cell 8
row 2, cell 1row 2, cell 2row 2, cell 3row 2, cell 4row 2, cell 5row 2, cell 6row 2, cell 7row 2, cell 8
row 3, cell 1row 3, cell 2row 3, cell 3row 3, cell 4row 3, cell 5row 3, cell 6row 3, cell 7row 3, cell 8
row 4, cell 1row 4, cell 2row 4, cell 3row 4, cell 4row 4, cell 5row 4, cell 6row 4, cell 7row 4, cell 8
+
+
+
Small Word Table
+

In most cases, tables like this are okay at smaller sizes (since they'll break on every small word). However with this many columns a very small device like a phone would still be a problem.

+

By attaching a class of .responsive to the table, our JS/CSS will kick in.

+
+
+
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PerkDescriptionIDSkill ReqPerk Req
Steel SmithingCan create Steel armor and weapons at forges, and improve them twice as much.000cb40d
Arcane BlacksmithYou can improve magical weapons and armor.0005218e60 SmithingSteel Smithing
Dwarven SmithingCan create Dwarven armor and weapons at forges, and improve them twice as much.000cb40e30 SmithingSteel Smithing
Orcish SmithingCan create Orcish armor and weapons at forges, and improve them twice as much.000cb41050 SmithingDwarven Smithing
Ebony SmithingCan create Ebony armor and weapons at forges, and improve them twice as much.000cb41280 SmithingOrcish Smithing
Daedric SmithingCan create Daedric armor and weapons at forges, and improve them twice as much.000cb41390 SmithingEbony Smithing
Elven SmithingCan create Elven armor and weapons at forges, and improve them twice as much.000cb40f30 SmithingSteel Smithing
Advanced ArmorsCan create Scaled and Plate armor at forges, and improve them twice as much. + 000cb41450 SmithingElven Smithing
Glass SmithingCan create Glass armor and weapons at forges, and improve them twice as much.000cb41170 SmithingAdvanced Armors
Dragon ArmorCan create Dragon armor at forges, and improve them twice as much.00052190100 SmithingDaedric Smithing or Glass Smithing
+
+
+
Larger Content Table
+

The effect is even more pronounced on a table like this exciting one detailing how to craft different armor types in Skyrim (we're nerds, okay).

+

Notice on a small device how we maintain the left column with this much content.

+
+
+ +
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Header 1Header 2Header 3Header 4Header 5Header 6Header 7Header 8
Ham pork leberkas bresaola, brisket t-bone filet mignon hamburger salami andouille short loin sausage.row 1, cell 2row 1, cell 3row 1, cell 4row 1, cell 5row 1, cell 6row 1, cell 7row 1, cell 8
Ham pork leberkas bresaola, brisket t-bone filet mignon hamburger salami andouille short loin sausage.row 2, cell 2row 2, cell 3row 2, cell 4row 2, cell 5row 2, cell 6row 2, cell 7row 2, cell 8
Ham pork leberkas bresaola, brisket t-bone filet mignon hamburger salami andouille short loin sausage.row 3, cell 2row 3, cell 3row 3, cell 4row 3, cell 5row 3, cell 6row 3, cell 7row 3, cell 8
Ham pork leberkas bresaola, brisket t-bone filet mignon hamburger salami andouille short loin sausage.row 4, cell 2row 4, cell 3row 4, cell 4row 4, cell 5row 4, cell 6row 4, cell 7row 4, cell 8
+
+
+
Very Long 1st Cell Content
+

Finally, in this example you'll see how this works for very long first-cell content. Both the first cell and the remaining cells are independently scrollable on small devices.

+

We do this so we can correctly predict the height of the cells for both the pinned columns and the rest of the columns.

+
+
+
+ + + +
+ + + + diff --git a/responsive_table.css b/responsive-tables.css similarity index 100% rename from responsive_table.css rename to responsive-tables.css diff --git a/responsive_table.js b/responsive-tables.js similarity index 100% rename from responsive_table.js rename to responsive-tables.js diff --git a/responsive_table.html b/responsive_table.html deleted file mode 100644 index 9761800..0000000 --- a/responsive_table.html +++ /dev/null @@ -1,261 +0,0 @@ - - - - - - - - - - - - - - Welcome to Foundation - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
-
-

Responsive Tables

- - 
-/* Attach the Table CSS and Javascript */
-<link rel="stylesheet" href="responsive-tables.css">
-<script src="stylesheet" href="responsive-tables.js"</script>
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Header 1Header 2Header 3Header 4Header 5Header 6Header 7Header 8
row 1, cell 1row 1, cell 2row 1, cell 3row 1, cell 4row 1, cell 5row 1, cell 6row 1, cell 7row 1, cell 8
row 2, cell 1row 2, cell 2row 2, cell 3row 2, cell 4row 2, cell 5row 2, cell 6row 2, cell 7row 2, cell 8
row 3, cell 1row 3, cell 2row 3, cell 3row 3, cell 4row 3, cell 5row 3, cell 6row 3, cell 7row 3, cell 8
row 4, cell 1row 4, cell 2row 4, cell 3row 4, cell 4row 4, cell 5row 4, cell 6row 4, cell 7row 4, cell 8
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PerkDescriptionIDSkill ReqPerk Req
Steel SmithingCan create Steel armor and weapons at forges, and improve them twice as much.000cb40d
Arcane BlacksmithYou can improve magical weapons and armor.0005218e60 SmithingSteel Smithing
Dwarven SmithingCan create Dwarven armor and weapons at forges, and improve them twice as much.000cb40e30 SmithingSteel Smithing
Orcish SmithingCan create Orcish armor and weapons at forges, and improve them twice as much.000cb41050 SmithingDwarven Smithing
Ebony SmithingCan create Ebony armor and weapons at forges, and improve them twice as much.000cb41280 SmithingOrcish Smithing
Daedric SmithingCan create Daedric armor and weapons at forges, and improve them twice as much.000cb41390 SmithingEbony Smithing
Elven SmithingCan create Elven armor and weapons at forges, and improve them twice as much.000cb40f30 SmithingSteel Smithing
Advanced ArmorsCan create Scaled and Plate armor at forges, and improve them twice as much. - 000cb41450 SmithingElven Smithing
Glass SmithingCan create Glass armor and weapons at forges, and improve them twice as much.000cb41170 SmithingAdvanced Armors
Dragon ArmorCan create Dragon armor at forges, and improve them twice as much.00052190100 SmithingDaedric Smithing or Glass Smithing
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Header 1Header 2Header 3Header 4Header 5Header 6Header 7Header 8
Ham pork leberkas bresaola, brisket t-bone filet mignon hamburger salami andouille short loin sausage.row 1, cell 2row 1, cell 3row 1, cell 4row 1, cell 5row 1, cell 6row 1, cell 7row 1, cell 8
Ham pork leberkas bresaola, brisket t-bone filet mignon hamburger salami andouille short loin sausage.row 2, cell 2row 2, cell 3row 2, cell 4row 2, cell 5row 2, cell 6row 2, cell 7row 2, cell 8
Ham pork leberkas bresaola, brisket t-bone filet mignon hamburger salami andouille short loin sausage.row 3, cell 2row 3, cell 3row 3, cell 4row 3, cell 5row 3, cell 6row 3, cell 7row 3, cell 8
Ham pork leberkas bresaola, brisket t-bone filet mignon hamburger salami andouille short loin sausage.row 4, cell 2row 4, cell 3row 4, cell 4row 4, cell 5row 4, cell 6row 4, cell 7row 4, cell 8
- -

Flank jowl ground round, swine shank kielbasa prosciutto pastrami ball tip brisket leberkas ribeye. Chicken biltong hamburger shoulder, prosciutto venison turkey sausage corned beef. Pancetta bresaola ground round, shank t-bone tail short ribs salami. Sirloin chicken turkey, beef ribs fatback ground round meatball beef swine. Andouille short ribs biltong shank strip steak. Cow short loin shank, speck ground round tongue ribeye turducken tail. Ham pork leberkas bresaola, brisket t-bone filet mignon hamburger salami andouille short loin sausage.

-
-
- - - -
- - - - diff --git a/stylesheets/app.css b/stylesheets/app.css index bfe9173..df7368e 100644 --- a/stylesheets/app.css +++ b/stylesheets/app.css @@ -13,7 +13,13 @@ Shared Styles ----------------------------------------- */ - + body { background: #f4f4f4; } + .container { max-width: 1000px; box-shadow: 0px 2px 5px rgba(0,0,0,0.25); background: #fff; margin: 0 auto; } + + h1 { margin: 20px 0 0; } + h4.subhead { font-weight: lighter; color: #777; margin-bottom: 20px; } + + pre { -moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px; margin: 0; display: block; font: 11px Monaco, monospace !important; padding: 15px; background-color: #1C1C1C; overflow: auto; color: #D0D0D0; line-height: 125%; margin-bottom: 30px; } /* ----------------------------------------- Page Name 1