├── .gitignore ├── README.md ├── fonts ├── CartoGothicStd-Book-webfont.eot ├── CartoGothicStd-Book-webfont.svg ├── CartoGothicStd-Book-webfont.ttf └── CartoGothicStd-Book-webfont.woff ├── index.html ├── photo_blog_cattails.jpg ├── photo_blog_construction.jpg ├── photo_blog_daisy.jpg ├── photo_blog_nutmeg.jpg ├── photo_blog_with_sticky_headers.css ├── photo_blog_with_sticky_headers.html ├── photo_blog_with_sticky_headers.js ├── responsive_table.css ├── responsive_table.html ├── responsive_table.js ├── responsive_table_vertical.css ├── responsive_table_vertical.js ├── source_ordering.css ├── source_ordering.html ├── three_column.html ├── three_column_big_footer.css ├── three_column_big_footer.html ├── two_column_blog.css ├── two_column_blog.html ├── two_column_stacked.css └── two_column_stacked.html /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | images/ 3 | javascripts/ 4 | stylesheets/ 5 | 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Sample layouts for the ZURB Foundation Framework 2 | 3 | To display these layouts, simply drop these files in your local Foundation folder and open them in your browser. 4 | By default, these layouts assume relative pathing to Foundation. Adjust as necessary. 5 | 6 | Find out more about Foundation [here](http://foundation.zurb.com// "Foundation Framework") 7 | 8 | [Google Group](http://groups.google.com/group/foundation-framework-?hl=en) 9 | -------------------------------------------------------------------------------- /fonts/CartoGothicStd-Book-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zurb/foundation-layouts/1d77c1f2442b426aefb55ef7dd0297a7bfc91050/fonts/CartoGothicStd-Book-webfont.eot -------------------------------------------------------------------------------- /fonts/CartoGothicStd-Book-webfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /fonts/CartoGothicStd-Book-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zurb/foundation-layouts/1d77c1f2442b426aefb55ef7dd0297a7bfc91050/fonts/CartoGothicStd-Book-webfont.ttf -------------------------------------------------------------------------------- /fonts/CartoGothicStd-Book-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zurb/foundation-layouts/1d77c1f2442b426aefb55ef7dd0297a7bfc91050/fonts/CartoGothicStd-Book-webfont.woff -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Welcome to Foundation 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 32 | 33 | 34 | 35 | 38 | 39 | 42 | 43 | 44 | 45 | 46 | 47 |

48 | 49 |

50 |

51 |

Foundation Layouts

52 |

Staging area for layouts that people can drop into Foundation and customize.

53 |

54 |

55 | 56 |

57 |

58 | 59 | 60 |

74 | 75 | 76 |

Three Column

77 |

78 | 79 |

80 | 81 | 82 |

96 | 97 | 98 |

Three Column Big Footer

99 |

100 | 101 |

102 | 103 | 104 |

115 | 116 | 117 |

Two Column Blog

118 |

119 | 120 |

121 | 122 | 123 |

141 | 142 |

Photo Blog (with sticky headers)

143 |

144 |

145 | 146 | 147 |

148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | -------------------------------------------------------------------------------- /photo_blog_cattails.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zurb/foundation-layouts/1d77c1f2442b426aefb55ef7dd0297a7bfc91050/photo_blog_cattails.jpg -------------------------------------------------------------------------------- /photo_blog_construction.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zurb/foundation-layouts/1d77c1f2442b426aefb55ef7dd0297a7bfc91050/photo_blog_construction.jpg -------------------------------------------------------------------------------- /photo_blog_daisy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zurb/foundation-layouts/1d77c1f2442b426aefb55ef7dd0297a7bfc91050/photo_blog_daisy.jpg -------------------------------------------------------------------------------- /photo_blog_nutmeg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zurb/foundation-layouts/1d77c1f2442b426aefb55ef7dd0297a7bfc91050/photo_blog_nutmeg.jpg -------------------------------------------------------------------------------- /photo_blog_with_sticky_headers.css: -------------------------------------------------------------------------------- 1 | /* Foundation v2.1.4 http://foundation.zurb.com */ 2 | /* Artfully masterminded by ZURB */ 3 | 4 | /* -------------------------------------------------- 5 | Table of Contents 6 | ----------------------------------------------------- 7 | :: Shared Styles 8 | :: Page Name 1 9 | :: Page Name 2 10 | */ 11 | 12 | /* License: http://www.fontsquirrel.com/license/CartoGothic-Std */ 13 | @font-face { 14 | font-family: 'CartoGothicStdBook'; 15 | src: url('fonts/CartoGothicStd-Book-webfont.eot'); 16 | src: url('fonts/CartoGothicStd-Book-webfont.eot?#iefix') format('embedded-opentype'), 17 | url('fonts/CartoGothicStd-Book-webfont.woff') format('woff'), 18 | url('fonts/CartoGothicStd-Book-webfont.ttf') format('truetype'), 19 | url('fonts/CartoGothicStd-Book-webfont.svg#CartoGothicStdBook') format('svg'); 20 | font-weight: normal; 21 | font-style: normal; 22 | 23 | } 24 | 25 | /* ----------------------------------------- 26 | Shared Styles 27 | ----------------------------------------- */ 28 | 29 | body { background: #222; color: #ccc; font-family: "CartoGothicStdBook", "Helvetica Neue", Helvetica, Arial, sans-serif; } 30 | h1 { margin-top: 10px; } 31 | h1, h2, h3, h4, h5, h6 { color: #fff; font-family: "CartoGothicStdBook", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; } 32 | hr { border-top: 1px solid #444; border-bottom: none; } 33 | 34 | p.lede { font-size: 16px; line-height: 1.4; } 35 | .showcase .title { height: 50px; width: 980px; } 36 | .showcase .title .twitter { float: right; padding-top: 12px; } 37 | .showcase .title.fixed .pinned { position: fixed; z-index: 1000; top: 0; background: rgba(0,0,0,0.6); width: 980px;} 38 | .showcase p, .showcase li { font-size: 15px; line-height: 1.4; } 39 | .showcase ul { list-style-type: circle; margin-left: 0; } 40 | 41 | /* ----------------------------------------- 42 | Page Name 1 43 | ----------------------------------------- */ 44 | 45 | 46 | 47 | 48 | /* ----------------------------------------- 49 | Page Name 2 50 | ----------------------------------------- */ 51 | 52 | 53 | -------------------------------------------------------------------------------- /photo_blog_with_sticky_headers.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Welcome to Foundation 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 35 | 36 | 37 | 38 | 41 | 42 | 43 | 44 | 45 |

46 | 47 |

48 |

49 |

Welcome to My Showcase

50 |

Brisket short ribs meatball, pork chop ham kielbasa shoulder salami cow sirloin frankfurter meatloaf filet mignon pig. Short ribs tongue shoulder ham hock ham, prosciutto leberkase beef pork ribeye jerky tail rump boudin. Capicola pancetta pork ham. T-bone turducken pork belly ribeye meatball tri-tip.

51 |

52 | 53 |

55 |
56 |
57 | Tweet 58 | 59 |
60 | 61 |
Daisy on the Grass
62 |
63 |
64 | 65 |
What a neat subtitle
66 |
67 |
68 |
Pork loin biltong ham hock hamburger, beef ribs chicken flank short loin pork chop bresaola frankfurter. Corned beef tri-tip kielbasa drumstick, ham beef flank biltong. Shank beef ribs ground round, hamburger sirloin tenderloin brisket pig chuck jowl ham ball tip drumstick turducken strip steak. Boudin t-bone meatball salami corned beef.
69 |
70 |
71 |
- Capicola turkey bresaola bacon, pork loin jowl t-bone prosciutto strip steak tongue frankfurter shankle leberkase drumstick.
- Brisket short ribs meatball, pork chop ham kielbasa shoulder salami cow sirloin frankfurter meatloaf filet mignon pig.
- Short ribs tongue shoulder ham hock ham, prosciutto leberkase beef pork ribeye jerky tail rump boudin. Capicola pancetta pork ham.
76 |
77 |
78 |
81 |
82 |
83 | Tweet 84 | 85 |
86 | 87 |
Nutmeg Begging for Ice Cream
88 |
89 |
90 | 91 |
I bet you'd like to learn more
92 |
93 |
94 |
Pork loin biltong ham hock hamburger, beef ribs chicken flank short loin pork chop bresaola frankfurter. Corned beef tri-tip kielbasa drumstick, ham beef flank biltong. Shank beef ribs ground round, hamburger sirloin tenderloin brisket pig chuck jowl ham ball tip drumstick turducken strip steak. Boudin t-bone meatball salami corned beef.
95 |
96 |
97 |
- Capicola turkey bresaola bacon, pork loin jowl t-bone prosciutto strip steak tongue frankfurter shankle leberkase drumstick.
- Brisket short ribs meatball, pork chop ham kielbasa shoulder salami cow sirloin frankfurter meatloaf filet mignon pig.
- Short ribs tongue shoulder ham hock ham, prosciutto leberkase beef pork ribeye jerky tail rump boudin. Capicola pancetta pork ham.
102 |
103 |
104 |
107 |
108 |
109 | Tweet 110 | 111 |
112 | 113 |
Construction on Highway 1
114 |
115 |
116 | 117 |
Details? I has them.
118 |
119 |
120 |
Pork loin biltong ham hock hamburger, beef ribs chicken flank short loin pork chop bresaola frankfurter. Corned beef tri-tip kielbasa drumstick, ham beef flank biltong. Shank beef ribs ground round, hamburger sirloin tenderloin brisket pig chuck jowl ham ball tip drumstick turducken strip steak. Boudin t-bone meatball salami corned beef.
121 |
122 |
123 |
- Capicola turkey bresaola bacon, pork loin jowl t-bone prosciutto strip steak tongue frankfurter shankle leberkase drumstick.
- Brisket short ribs meatball, pork chop ham kielbasa shoulder salami cow sirloin frankfurter meatloaf filet mignon pig.
- Short ribs tongue shoulder ham hock ham, prosciutto leberkase beef pork ribeye jerky tail rump boudin. Capicola pancetta pork ham.
128 |
129 |
130 |
133 |
134 |
135 | Tweet 136 | 137 |
138 | 139 |
Cattails by Lake Murray
140 |
141 |
142 | 143 |
Thought that was it? Nope!
144 |
145 |
146 |
Pork loin biltong ham hock hamburger, beef ribs chicken flank short loin pork chop bresaola frankfurter. Corned beef tri-tip kielbasa drumstick, ham beef flank biltong. Shank beef ribs ground round, hamburger sirloin tenderloin brisket pig chuck jowl ham ball tip drumstick turducken strip steak. Boudin t-bone meatball salami corned beef.
147 |
148 |
149 |
- Capicola turkey bresaola bacon, pork loin jowl t-bone prosciutto strip steak tongue frankfurter shankle leberkase drumstick.
- Brisket short ribs meatball, pork chop ham kielbasa shoulder salami cow sirloin frankfurter meatloaf filet mignon pig.
- Short ribs tongue shoulder ham hock ham, prosciutto leberkase beef pork ribeye jerky tail rump boudin. Capicola pancetta pork ham.
154 |
155 |
156 |

158 |

159 |

160 | 161 | 162 | 163 |

164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | -------------------------------------------------------------------------------- /photo_blog_with_sticky_headers.js: -------------------------------------------------------------------------------- 1 | /* Foundation v2.1.4 http://foundation.zurb.com */ 2 | $(document).ready(function () { 3 | 4 | $(window).scroll(function() { 5 | var scroll = Math.max($('body').scrollTop(), $('html,body').scrollTop()); 6 | 7 | $(".showcase .title").each(function(index, element) { 8 | var slide = $(this).closest("li"); 9 | var top = slide.offset().top 10 | var bottom = top + slide.outerHeight(); 11 | 12 | if (scroll > top && scroll < (top + $(this).siblings("img").outerHeight())) 13 | $(this).addClass("fixed"); 14 | else $(this).removeClass("fixed"); 15 | }); 16 | 17 | }); 18 | 19 | }); 20 | -------------------------------------------------------------------------------- /responsive_table.css: -------------------------------------------------------------------------------- 1 | /* Foundation v2.1.4 http://foundation.zurb.com */ 2 | /* Artfully masterminded by ZURB */ 3 | 4 | /* -------------------------------------------------- 5 | Table of Contents 6 | ----------------------------------------------------- 7 | :: Shared Styles 8 | :: Page Name 1 9 | :: Page Name 2 10 | */ 11 | 12 | 13 | /* ----------------------------------------- 14 | Shared Styles 15 | ----------------------------------------- */ 16 | 17 | table th { font-weight: bold; } 18 | table td, table th { padding: 9px 10px; text-align: left; } 19 | 20 | /* Mobile */ 21 | @media only screen and (max-width: 767px) { 22 | 23 | table.responsive { margin-bottom: 0; } 24 | 25 | .pinned { position: absolute; left: 0; top: 0; background: #fff; width: 35%; overflow: hidden; overflow-x: scroll; border-right: 1px solid #ccc; border-left: 1px solid #ccc; } 26 | .pinned table { border-right: none; border-left: none; width: 100%; } 27 | .pinned table th, .pinned table td { white-space: nowrap; } 28 | .pinned td:last-child { border-bottom: 0; } 29 | 30 | div.table-wrapper { position: relative; margin-bottom: 20px; overflow: hidden; border-right: 1px solid #ccc; } 31 | div.table-wrapper div.scrollable table { margin-left: 35%; } 32 | div.table-wrapper div.scrollable { overflow: scroll; overflow-y: hidden; } 33 | 34 | table.responsive td, table.responsive th { position: relative; white-space: nowrap; overflow: hidden; } 35 | table.responsive th:first-child, table.responsive td:first-child, table.responsive td:first-child, table.responsive.pinned td { display: none; } 36 | 37 | } 38 | 39 | /* ----------------------------------------- 40 | Page Name 1 41 | ----------------------------------------- */ 42 | 43 | 44 | 45 | 46 | /* ----------------------------------------- 47 | Page Name 2 48 | ----------------------------------------- */ 49 | 50 | 51 | -------------------------------------------------------------------------------- /responsive_table.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Welcome to Foundation 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 35 | 36 | 37 | 38 | 41 | 42 | 45 | 46 | 47 | 48 | 49 |

50 | 51 |

52 |

53 |

Responsive Tables

54 | 55 |

 56 | /* Attach the Table CSS and Javascript */
 57 | <link rel="stylesheet" href="responsive-tables.css">
 58 | <script src="stylesheet" href="responsive-tables.js"</script>
 59 |

60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 |

Header 1	Header 2	Header 3	Header 4	Header 5	Header 6	Header 7	Header 8
row 1, cell 1	row 1, cell 2	row 1, cell 3	row 1, cell 4	row 1, cell 5	row 1, cell 6	row 1, cell 7	row 1, cell 8
row 2, cell 1	row 2, cell 2	row 2, cell 3	row 2, cell 4	row 2, cell 5	row 2, cell 6	row 2, cell 7	row 2, cell 8
row 3, cell 1	row 3, cell 2	row 3, cell 3	row 3, cell 4	row 3, cell 5	row 3, cell 6	row 3, cell 7	row 3, cell 8
row 4, cell 1	row 4, cell 2	row 4, cell 3	row 4, cell 4	row 4, cell 5	row 4, cell 6	row 4, cell 7	row 4, cell 8

115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 |

Perk	Description	ID	Skill Req	Perk Req
Steel Smithing	Can create Steel armor and weapons at forges, and improve them twice as much.	000cb40d
Arcane Blacksmith	You can improve magical weapons and armor.	0005218e	60 Smithing	Steel Smithing
Dwarven Smithing	Can create Dwarven armor and weapons at forges, and improve them twice as much.	000cb40e	30 Smithing	Steel Smithing
Orcish Smithing	Can create Orcish armor and weapons at forges, and improve them twice as much.	000cb410	50 Smithing	Dwarven Smithing
Ebony Smithing	Can create Ebony armor and weapons at forges, and improve them twice as much.	000cb412	80 Smithing	Orcish Smithing
Daedric Smithing	Can create Daedric armor and weapons at forges, and improve them twice as much.	000cb413	90 Smithing	Ebony Smithing
Elven Smithing	Can create Elven armor and weapons at forges, and improve them twice as much.	000cb40f	30 Smithing	Steel Smithing
Advanced Armors	Can create Scaled and Plate armor at forges, and improve them twice as much. 176 \|	000cb414	50 Smithing	Elven Smithing
Glass Smithing	Can create Glass armor and weapons at forges, and improve them twice as much.	000cb411	70 Smithing	Advanced Armors
Dragon Armor	Can create Dragon armor at forges, and improve them twice as much.	00052190	100 Smithing	Daedric Smithing or Glass Smithing

195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 |

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

250 | 251 |

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.

252 |

253 |

254 | 255 | 256 | 257 |

258 | 259 | 260 | 261 | 262 | -------------------------------------------------------------------------------- /responsive_table.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | var switched = false; 3 | var updateTables = function() { 4 | if (($(window).width() < 767) && !switched ){ 5 | switched = true; 6 | $("table.responsive").each(function(i, element) { 7 | splitTable($(element)); 8 | }); 9 | return true; 10 | } 11 | else if (switched && ($(window).width() > 767)) { 12 | switched = false; 13 | $("table.responsive").each(function(i, element) { 14 | unsplitTable($(element)); 15 | }); 16 | } 17 | }; 18 | 19 | $(window).load(updateTables); 20 | $(window).bind("resize", updateTables); 21 | 22 | 23 | function splitTable(original) 24 | { 25 | original.wrap("

"); 33 | original.wrap("

"); 34 | } 35 | 36 | function unsplitTable(original) { 37 | original.closest(".table-wrapper").find(".pinned").remove(); 38 | original.unwrap(); 39 | original.unwrap(); 40 | } 41 | 42 | }); 43 | -------------------------------------------------------------------------------- /responsive_table_vertical.css: -------------------------------------------------------------------------------- 1 | table.responsive.vertical.pinned { max-width: auto; max-height: 200px; overflow: hidden; } 2 | 3 | table.responsive.vertical tr:first-child { position: absolute; top: 0; z-index: 10000;} 4 | div.scrollable.vertical { height: 400px; } -------------------------------------------------------------------------------- /responsive_table_vertical.js: -------------------------------------------------------------------------------- 1 | 2 | function splitTableVertically(original) 3 | { 4 | original.wrap("

"); 13 | } 14 | 15 | /* -------------------------------- 16 | Debugging 17 | --------------------------------*/ 18 | 19 | var cellWidths = new Array(5); 20 | 21 | //$("table.responsive .pinned").width(width); 22 | //setTableWidth($("table.responsive")); 23 | 24 | //saveCellWidths($("table.responsive")); 25 | //$("table.responsive").width($("table.responsive").width() + width); 26 | //setCellWidths($("table.responsive")); 27 | 28 | //var width = $("table.responsive .pinned:first-child").outerWidth(); 29 | //$("table.responsive td:not(.pinned), table.responsive th:not(.pinned)").css("left", width + "px"); 30 | 31 | 32 | function printSavedWidths() { 33 | for (var i = 0; i < cellWidths.length; i++) { 34 | console.log("cell " + i + ": " + cellWidths[i]); 35 | } 36 | } 37 | 38 | function printCellWidths(table) { 39 | table.find("tr:first-child").children("td, th").each(function(i, element) { 40 | console.log("Cell " + i + ": " + $(element).width()); 41 | }); 42 | } 43 | 44 | 45 | function setTableWidth(table) { 46 | var width = 0; 47 | table.find("tr:first-child").children("td, th").each(function(i, element) { 48 | cellWidths[i] = $(this).width(); 49 | width += $(this).outerWidth(); 50 | console.log("Width: " + width); 51 | }); 52 | table.width(width); 53 | } 54 | 55 | function saveCellWidths(table) { 56 | table.find("tr:first-child").children("td, th").each(function(i, element) { 57 | cellWidths[i] = $(element).outerWidth(); 58 | }); 59 | } 60 | 61 | function setCellWidths(table) { 62 | for (var i = 0; i < cellWidths.length; i++) { 63 | console.log("Setting max width to: " + cellWidths[i]); 64 | table.find("td:nth-child(" + i + "), th:nth-child(" + i + ")").width(cellWidths[i]); 65 | } 66 | } 67 | 68 | $(".table-wrapper").scroll(function(e) { 69 | 70 | //var left = $(this).scrollLeft(); 71 | //var top = $(this).scrollTop(); 72 | //console.log("Scroll top: " + top + ", left: " + left); 73 | 74 | 75 | 76 | 77 | /*if ($(this).scrollLeft() > 20) 78 | $("table.responsive th:first-child, table.responsive td:first-child").addClass("pinned"); 79 | else 80 | $("table.responsive th:first-child, table.responsive td:first-child").removeClass("pinned");*/ 81 | 82 | /*var scroll = Math.max($('body').scrollTop(), $('html,body').scrollTop()); 83 | 84 | var slide = $(this).closest("li"); 85 | var top = slide.offset().top 86 | var bottom = top + slide.outerHeight(); 87 | 88 | if (scroll > top && scroll < (top + $(this).siblings("img").outerHeight())) 89 | $(this).addClass("fixed"); 90 | else $(this).removeClass("fixed");*/ 91 | 92 | }); -------------------------------------------------------------------------------- /source_ordering.css: -------------------------------------------------------------------------------- 1 | header.row { 2 | border-bottom: solid 1px #E6E6E6; 3 | } 4 | footer.row { 5 | border-top: solid 1px #E6E6E6; 6 | padding-top: 20px; 7 | } 8 | 9 | @media only screen and (min-device-width: 800){ 10 | #side { 11 | border-right: solid 1px #EEE; 12 | } 13 | } 14 | 15 | #main p, 16 | #side p { 17 | padding: 20px 10px 0 10px; 18 | } 19 | 20 | -------------------------------------------------------------------------------- /source_ordering.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Welcome to Foundation 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 32 | 33 | 34 | 35 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 |

47 | 48 |

49 |

50 |

Welcome to Foundation

51 |

This is a source-ordered layout.

52 |

53 |

54 | 55 |

56 |

57 |

58 | Cupcake ipsum dolor sit amet tiramisu. Chupa chups ice cream jujubes toffee lollipop. Croissant carrot cake faworki chocolate danish lemon drops dragée pudding liquorice. Pastry sweet carrot cake carrot cake cotton candy applicake muffin soufflé caramels. Sugar plum sweet chocolate bar. Bear claw pudding pie. 59 | Cupcake ipsum dolor sit amet tiramisu. Chupa chups ice cream jujubes toffee lollipop. Croissant carrot cake faworki chocolate danish lemon drops dragée pudding liquorice. Pastry sweet carrot cake carrot cake cotton candy applicake muffin soufflé caramels. Sugar plum sweet chocolate bar. Bear claw pudding pie. 60 |

61 |

62 | Cupcake ipsum dolor sit amet tiramisu. Chupa chups ice cream jujubes toffee lollipop. Croissant carrot cake faworki chocolate danish lemon drops dragée pudding liquorice. Pastry sweet carrot cake carrot cake cotton candy applicake muffin soufflé caramels. Sugar plum sweet chocolate bar. Bear claw pudding pie. 63 | Cupcake ipsum dolor sit amet tiramisu. Chupa chups ice cream jujubes toffee lollipop. Croissant carrot cake faworki chocolate danish lemon drops dragée pudding liquorice. Pastry sweet carrot cake carrot cake cotton candy applicake muffin soufflé caramels. Sugar plum sweet chocolate bar. Bear claw pudding pie. 64 | Cupcake ipsum dolor sit amet tiramisu. Chupa chups ice cream jujubes toffee lollipop. Croissant carrot cake faworki chocolate danish lemon drops dragée pudding liquorice. Pastry sweet carrot cake carrot cake cotton candy applicake muffin soufflé caramels. Sugar plum sweet chocolate bar. Bear claw pudding pie. 65 | Cupcake ipsum dolor sit amet tiramisu. Chupa chups ice cream jujubes toffee lollipop. Croissant carrot cake faworki chocolate danish lemon drops dragée pudding liquorice. Pastry sweet carrot cake carrot cake cotton candy applicake muffin soufflé caramels. Sugar plum sweet chocolate bar. Bear claw pudding pie. 66 |

67 |

68 |

69 |

70 | Cupcake ipsum dolor sit amet tiramisu. Chupa chups ice cream jujubes toffee lollipop. Croissant carrot cake faworki chocolate danish lemon drops dragée pudding liquorice. Pastry sweet carrot cake carrot cake cotton candy applicake muffin soufflé caramels. Sugar plum sweet chocolate bar. Bear claw pudding pie. 71 | Cupcake ipsum dolor sit amet tiramisu. Chupa chups ice cream jujubes toffee lollipop. Croissant carrot cake faworki chocolate danish lemon drops dragée pudding liquorice. Pastry sweet carrot cake carrot cake cotton candy applicake muffin soufflé caramels. Sugar plum sweet chocolate bar. Bear claw pudding pie. 72 | Cupcake ipsum dolor sit amet tiramisu. Chupa chups ice cream jujubes toffee lollipop. Croissant carrot cake faworki chocolate danish lemon drops dragée pudding liquorice. Pastry sweet carrot cake carrot cake cotton candy applicake muffin soufflé caramels. Sugar plum sweet chocolate bar. Bear claw pudding pie. 73 | Cupcake ipsum dolor sit amet tiramisu. Chupa chups ice cream jujubes toffee lollipop. Croissant carrot cake faworki chocolate danish lemon drops dragée pudding liquorice. Pastry sweet carrot cake carrot cake cotton candy applicake muffin soufflé caramels. Sugar plum sweet chocolate bar. Bear claw pudding pie. 74 |

75 |

76 |

77 | 78 | 86 | 87 |

88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | -------------------------------------------------------------------------------- /three_column.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Welcome to Foundation 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 32 | 33 | 34 | 35 | 38 | 39 | 40 | 41 | 42 |

43 | 44 |

45 |

46 |

Welcome to Foundation

47 |

This is a really simple 3-column layout. The panels are optional.

48 |

49 |

50 | 51 |

52 |

53 |

54 |

55 |

56 |

Article 1

57 |

61 |

62 |

63 |

64 |

65 |

Article 1 - Continued

66 |

67 | Cupcake ipsum dolor sit amet tiramisu. Chupa chups ice cream jujubes toffee lollipop. Croissant carrot cake faworki chocolate danish lemon drops dragée pudding liquorice. Pastry sweet carrot cake carrot cake cotton candy applicake muffin soufflé caramels. Sugar plum sweet chocolate bar. Bear claw pudding pie. 68 | Cupcake ipsum dolor sit amet tiramisu. Chupa chups ice cream jujubes toffee lollipop. Croissant carrot cake faworki chocolate danish lemon drops dragée pudding liquorice. Pastry sweet carrot cake carrot cake cotton candy applicake muffin soufflé caramels. Sugar plum sweet chocolate bar. Bear claw pudding pie. 69 |

70 |

71 |

72 |

73 |

74 |

75 |

76 |

Article 2

77 |

78 | Cupcake ipsum dolor sit amet tiramisu. Chupa chups ice cream jujubes toffee lollipop. Croissant carrot cake faworki chocolate danish lemon drops dragée pudding liquorice. Pastry sweet carrot cake carrot cake cotton candy applicake muffin soufflé caramels. Sugar plum sweet chocolate bar. Bear claw pudding pie. 79 | Cupcake ipsum dolor sit amet tiramisu. Chupa chups ice cream jujubes toffee lollipop. Croissant carrot cake faworki chocolate danish lemon drops dragée pudding liquorice. Pastry sweet carrot cake carrot cake cotton candy applicake muffin soufflé caramels. Sugar plum sweet chocolate bar. Bear claw pudding pie. 80 |

81 |

82 |

83 |

84 | 85 |

86 | 87 | 103 | 104 |

105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | -------------------------------------------------------------------------------- /three_column_big_footer.css: -------------------------------------------------------------------------------- 1 | 2 | /* these styles should be moved to an external stylesheet */ 3 | 4 | body { background: #353535; color: #F6F6E6; } 5 | .container { margin: 0; padding: 0; } 6 | 7 | h1, h2, h3, h4, h5, h6 { color: #F6F6E6; } 8 | 9 | header { height: 100px; border-bottom: 1px groove #fff; } 10 | header h3, header form { margin-top: 20px; } 11 | .main-content { padding: 40px 0 40px 0; background: #404040; } 12 | 13 | blockquote { border-left: none; } 14 | 15 | footer { padding: 40px 40px 40px 40px; border-top: 1px groove #fff; } 16 | footer blockquote p { color: #F6F6E6; } 17 | 18 | -------------------------------------------------------------------------------- /three_column_big_footer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Welcome to Foundation 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 35 | 36 | 37 | 38 | 41 | 42 | 43 | 44 | 45 | 46 | 47 |

48 | 49 |

50 |

51 |

52 |

Foundation

53 |

54 |

55 | 59 |

60 |

61 | 62 |

63 |

64 |

65 |

Article 1

66 |

70 |

71 |

72 |

Article 2

73 |

74 | Cupcake ipsum dolor sit amet tiramisu. Chupa chups ice cream jujubes toffee lollipop. Croissant carrot cake faworki chocolate danish lemon drops dragée pudding liquorice. Pastry sweet carrot cake carrot cake cotton candy applicake muffin soufflé caramels. Sugar plum sweet chocolate bar. Bear claw pudding pie. 75 | Cupcake ipsum dolor sit amet tiramisu. Chupa chups ice cream jujubes toffee lollipop. Croissant carrot cake faworki chocolate danish lemon drops dragée pudding liquorice. Pastry sweet carrot cake carrot cake cotton candy applicake muffin soufflé caramels. Sugar plum sweet chocolate bar. Bear claw pudding pie. 76 |

77 |

78 |

79 |

Article 3

80 |

81 | Cupcake ipsum dolor sit amet tiramisu. Chupa chups ice cream jujubes toffee lollipop. Croissant carrot cake faworki chocolate danish lemon drops dragée pudding liquorice. Pastry sweet carrot cake carrot cake cotton candy applicake muffin soufflé caramels. Sugar plum sweet chocolate bar. Bear claw pudding pie. 82 | Cupcake ipsum dolor sit amet tiramisu. Chupa chups ice cream jujubes toffee lollipop. Croissant carrot cake faworki chocolate danish lemon drops dragée pudding liquorice. Pastry sweet carrot cake carrot cake cotton candy applicake muffin soufflé caramels. Sugar plum sweet chocolate bar. Bear claw pudding pie. 83 |

84 |

85 |

86 |

87 | 88 | 120 | 121 |

122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | -------------------------------------------------------------------------------- /two_column_blog.css: -------------------------------------------------------------------------------- 1 | /* these styles should be moved to an external stylesheet */ 2 | 3 | header.row { margin-bottom:40px; border-bottom: solid 1px #E6E6E6; } 4 | footer.row { margin-top: 40px; border-top: solid 1px #E6E6E6; padding-top: 20px; } -------------------------------------------------------------------------------- /two_column_blog.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Welcome to Foundation 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 35 | 36 | 37 | 38 | 41 | 42 | 43 | 44 | 45 |

46 | 47 |

48 |

49 |

Welcome to Foundation

50 |

This is a really simple 2-column layout.

51 |

52 |

53 | 54 |

55 |

56 |

57 |

Article 1

58 |

59 | Cupcake ipsum dolor sit amet tiramisu. Chupa chups ice cream jujubes toffee lollipop. Croissant carrot cake faworki chocolate danish lemon drops dragée pudding liquorice. Pastry sweet carrot cake carrot cake cotton candy applicake muffin soufflé caramels. Sugar plum sweet chocolate bar. Bear claw pudding pie. 60 | Cupcake ipsum dolor sit amet tiramisu. Chupa chups ice cream jujubes toffee lollipop. Croissant carrot cake faworki chocolate danish lemon drops dragée pudding liquorice. Pastry sweet carrot cake carrot cake cotton candy applicake muffin soufflé caramels. Sugar plum sweet chocolate bar. Bear claw pudding pie. 61 |

62 |

63 |

64 |

Article 2

65 |

66 | Cupcake ipsum dolor sit amet tiramisu. Chupa chups ice cream jujubes toffee lollipop. Croissant carrot cake faworki chocolate danish lemon drops dragée pudding liquorice. Pastry sweet carrot cake carrot cake cotton candy applicake muffin soufflé caramels. Sugar plum sweet chocolate bar. Bear claw pudding pie. 67 | Cupcake ipsum dolor sit amet tiramisu. Chupa chups ice cream jujubes toffee lollipop. Croissant carrot cake faworki chocolate danish lemon drops dragée pudding liquorice. Pastry sweet carrot cake carrot cake cotton candy applicake muffin soufflé caramels. Sugar plum sweet chocolate bar. Bear claw pudding pie. 68 | Cupcake ipsum dolor sit amet tiramisu. Chupa chups ice cream jujubes toffee lollipop. Croissant carrot cake faworki chocolate danish lemon drops dragée pudding liquorice. Pastry sweet carrot cake carrot cake cotton candy applicake muffin soufflé caramels. Sugar plum sweet chocolate bar. Bear claw pudding pie. 69 | Cupcake ipsum dolor sit amet tiramisu. Chupa chups ice cream jujubes toffee lollipop. Croissant carrot cake faworki chocolate danish lemon drops dragée pudding liquorice. Pastry sweet carrot cake carrot cake cotton candy applicake muffin soufflé caramels. Sugar plum sweet chocolate bar. Bear claw pudding pie. 70 |

71 |

72 |

73 |

74 |

75 | 79 | 80 |

84 |

85 |

86 |

Interesting Article

68 |

69 | Cupcake ipsum dolor sit amet tiramisu. Chupa chups ice cream jujubes toffee lollipop. Croissant carrot cake faworki chocolate danish lemon drops dragée pudding liquorice. Pastry sweet carrot cake carrot cake cotton candy applicake muffin soufflé caramels. Sugar plum sweet chocolate bar. Bear claw pudding pie. 70 | Cupcake ipsum dolor sit amet tiramisu. Chupa chups ice cream jujubes toffee lollipop. Croissant carrot cake faworki chocolate danish lemon drops dragée pudding liquorice. Pastry sweet carrot cake carrot cake cotton candy applicake muffin soufflé caramels. Sugar plum sweet chocolate bar. Bear claw pudding pie. 71 |

72 |

73 |

74 |

Yet Another Interesting Article

75 |

76 | Cupcake ipsum dolor sit amet tiramisu. Chupa chups ice cream jujubes toffee lollipop. Croissant carrot cake faworki chocolate danish lemon drops dragée pudding liquorice. Pastry sweet carrot cake carrot cake cotton candy applicake muffin soufflé caramels. Sugar plum sweet chocolate bar. Bear claw pudding pie. 77 | Cupcake ipsum dolor sit amet tiramisu. Chupa chups ice cream jujubes toffee lollipop. Croissant carrot cake faworki chocolate danish lemon drops dragée pudding liquorice. Pastry sweet carrot cake carrot cake cotton candy applicake muffin soufflé caramels. Sugar plum sweet chocolate bar. Bear claw pudding pie. 78 | Cupcake ipsum dolor sit amet tiramisu. Chupa chups ice cream jujubes toffee lollipop. Croissant carrot cake faworki chocolate danish lemon drops dragée pudding liquorice. Pastry sweet carrot cake carrot cake cotton candy applicake muffin soufflé caramels. Sugar plum sweet chocolate bar. Bear claw pudding pie. 79 | Cupcake ipsum dolor sit amet tiramisu. Chupa chups ice cream jujubes toffee lollipop. Croissant carrot cake faworki chocolate danish lemon drops dragée pudding liquorice. Pastry sweet carrot cake carrot cake cotton candy applicake muffin soufflé caramels. Sugar plum sweet chocolate bar. Bear claw pudding pie. 80 |

81 |

82 |

83 |

84 | 93 |

94 |

95 | 106 | 107 |

108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | --------------------------------------------------------------------------------

Welcome to My Showcase

Daisy on the Grass

What a neat subtitle

Nutmeg Begging for Ice Cream

I bet you'd like to learn more

Construction on Highway 1

Details? I has them.

Cattails by Lake Murray

Thought that was it? Nope!

Responsive Tables

Article 1

Article 1 - Continued

Article 2

Article 1

Article 2

Article 3

Article 1

Article 2