changeset
Finished example 1.
Tue, 03 Jul 2012 12:48:34 -0700
- author
- Tab Atkins Jr. <jackalmage@gmail.com>
- date
- Tue, 03 Jul 2012 12:48:34 -0700
- changeset 6142
- 5e72f83c1374
- parent 6141
- 1679c430a941
- child 6143
- fe49684fd58b
Finished example 1.
1.1 --- a/css3-flexbox/Overview.html Mon Jul 02 18:00:37 2012 -0700 1.2 +++ b/css3-flexbox/Overview.html Tue Jul 03 12:48:34 2012 -0700 1.3 @@ -429,14 +429,42 @@ 1.4 </ul> 1.5 1.6 <div class=example> 1.7 - <p> Stuff 1.8 - 1.9 - <pre> 1.10 + <p> Here's an example of a catalog where each item has a title, an photo, 1.11 + a description, and a purchase button. The designer's intention is that 1.12 + each entry has the same overall size, that the photo be above the text, 1.13 + and the purchase buttons aligned at the bottom, regardless of the length 1.14 + of the item's description. Flex layout makes many aspects of this design 1.15 + easy: 1.16 + 1.17 + <ul> 1.18 + <li> The catalog uses flex layout to lay out a row of items horizontally, 1.19 + and to ensure they're all equal-height. Each entry is then itself a 1.20 + column flex container, laying out its contents vertically. 1.21 + 1.22 + <li> Within each entry, content is ordered logically with the title 1.23 + first, followed by the description and the photo. For a more compelling 1.24 + visual presentation, however, ‘<a href="#order"><code 1.25 + class=property>order</code></a>’ is used to pull the image up from 1.26 + later in the content to the top, and ‘<a href="#align-self"><code 1.27 + class=property>align-self</code></a>’ to center it horizontally. 1.28 + 1.29 + <li> An ‘<a href="#align-self-auto"><code class=css>auto</code></a>’ 1.30 + margin above the purchase button forces it to the bottom of the entry 1.31 + box, regardless of the height of the description. 1.32 + </ul> 1.33 + 1.34 + <div style="display:table;"> 1.35 + <div style="display:table-cell;"> 1.36 + <pre> 1.37 <style> 1.38 +#deals { 1.39 + display: flex; 1.40 + flex-flow: row; 1.41 +} 1.42 .sale-item { 1.43 - display: flexbox; 1.44 + display: flex; 1.45 + flex-flow: column; 1.46 padding: 1em; 1.47 - height: 600px; 1.48 } 1.49 .sale-item > img { 1.50 order: -1; 1.51 @@ -445,49 +473,110 @@ 1.52 .sale-item > button { 1.53 margin: auto 1em 0; 1.54 } 1.55 -</style> 1.56 -<section class='sale-item'> 1.57 - <h1>Computer Starter Kit</h1> 1.58 +</style></pre> 1.59 + </div> 1.60 + 1.61 + <div style="display:table-cell;"> 1.62 + <pre> 1.63 +<section id='deals'> 1.64 + <section class='sale-item'> 1.65 + <h1>Computer Starter Kit</h1> 1.66 + <p> 1.67 + This is the best computer money can buy, 1.68 + if you don't have much money. 1.69 + <ul> 1.70 + <li>Computer 1.71 + <li>Monitor 1.72 + <li>Keyboard 1.73 + <li>Mouse 1.74 + </ul> 1.75 + <img src="images/computer.jpg" 1.76 + alt='[A white computer with matching keyboard and monitor.]'> 1.77 + <button>BUY NOW</button> 1.78 + </section> 1.79 1.80 - <p> 1.81 - This is the best computer money can buy, 1.82 - if you don't have much money. 1.83 - 1.84 - <ul> 1.85 - <li>Computer 1.86 - <li>Monitor 1.87 - <li>Keyboard 1.88 - <li>Mouse 1.89 - <li>Nothing else! 1.90 - </ul> 1.91 - 1.92 - <img src="images/computer.jpg"> 1.93 - 1.94 - <button>BUY NOW</button> 1.95 + <section class='sale-item'> 1.96 + <h1>Printer</h1> 1.97 + <p> 1.98 + Only capable of printing 1.99 + ASCII art. 1.100 + <ul> 1.101 + <li>Paper and ink not included. 1.102 + </ul> 1.103 + <img src="images/printer.jpg" alt=''> 1.104 + <button>BUY NOW</button> 1.105 + </section> 1.106 </section></pre> 1.107 - <section class=sale-item 1.108 - style="width: 300px; height: 600px; padding: 1em; position: relative; "> 1.109 - <img src="images/computer.jpg" style="margin: 0 auto;" width=250> 1.110 - <h1 style="font-size: 1.4em;">Computer Starter Kit</h1> 1.111 - 1.112 - <p> This is the best computer money can buy, if you don't have much money. 1.113 - 1.114 - 1.115 - <ul> 1.116 - <li>Computer 1.117 - 1.118 - <li>Monitor 1.119 - 1.120 - <li>Keyboard 1.121 - 1.122 - <li>Mouse 1.123 - 1.124 - <li>Nothing else! 1.125 - </ul> 1.126 - <button 1.127 - style="position: absolute; bottom: 1em; left: 1em; right: 1em;">BUY 1.128 - NOW</button> </section></div> 1.129 - 1.130 + </div> 1.131 + </div> 1.132 + 1.133 + <div style="display:table; margin: 1em auto; border-spacing: .5em;"> 1.134 + <section class=computer-example> <img 1.135 + alt="[A white computer with matching keyboard and monitor.]" 1.136 + src="images/computer.jpg"> 1.137 + <h1 style="font-size: 1.4em;">Computer Starter Kit</h1> 1.138 + 1.139 + <p> This is the best computer money can buy, if you don't have much 1.140 + money. 1.141 + 1.142 + <ul> 1.143 + <li>Computer 1.144 + 1.145 + <li>Monitor 1.146 + 1.147 + <li>Keyboard 1.148 + 1.149 + <li>Mouse 1.150 + </ul> 1.151 + <button>BUY NOW</button> </section> <section class=computer-example> <img 1.152 + alt="" src="images/printer.png"> 1.153 + <h1 style="font-size: 1.4em;">Printer</h1> 1.154 + 1.155 + <p> Only capable of printing ASCII art. 1.156 + 1.157 + <ul> 1.158 + <li>Paper and ink not included. 1.159 + </ul> 1.160 + <button>BUY NOW</button> </section></div> 1.161 + </div> 1.162 + 1.163 + <head> 1.164 + <style scoped> 1.165 + .computer-example { 1.166 + display: table-cell; 1.167 + vertical-align: top; 1.168 + width: 300px; 1.169 + padding: 1em 1em 100px; 1.170 + position: relative; 1.171 + background: hsl(60,100%,90%); 1.172 + border: thick solid hsl(60,80%,50%); 1.173 + border-radius: 1em; 1.174 + } 1.175 + .computer-example > img { 1.176 + margin: 0 auto; 1.177 + display: block; 1.178 + } 1.179 + .computer-example > h1 { 1.180 + background: transparent; 1.181 + text-decoration: underline; 1.182 + } 1.183 + .computer-example > button { 1.184 + background-color: hsl(120,100%,40%); 1.185 + border: medium inset hsl(120,70%,40%); 1.186 + border-radius: 1em; 1.187 + padding: .5em; 1.188 + font-weight: bold; 1.189 + color: white; 1.190 + font-size: 1.6em; 1.191 + cursor: pointer; 1.192 + position: absolute; 1.193 + left: 1em; 1.194 + right: 1em; 1.195 + bottom: 1em; 1.196 + } 1.197 + </style> 1.198 + 1.199 + <body> 1.200 <h3 id=placement><span class=secno>1.2. </span> Module interactions</h3> 1.201 1.202 <p> This module extends the definition of the ‘<code
2.1 --- a/css3-flexbox/Overview.src.html Mon Jul 02 18:00:37 2012 -0700 2.2 +++ b/css3-flexbox/Overview.src.html Tue Jul 03 12:48:34 2012 -0700 2.3 @@ -161,14 +161,43 @@ 2.4 2.5 <div class='example'> 2.6 <p> 2.7 - Stuff 2.8 - 2.9 - <pre> 2.10 + Here's an example of a catalog where each item has a title, an photo, a description, and a purchase button. 2.11 + The designer's intention is that each entry has the same overall size, 2.12 + that the photo be above the text, 2.13 + and the purchase buttons aligned at the bottom, regardless of the length of the item's description. 2.14 + Flex layout makes many aspects of this design easy: 2.15 + 2.16 + <ul> 2.17 + <li> 2.18 + The catalog uses flex layout to lay out a row of items horizontally, 2.19 + and to ensure they're all equal-height. 2.20 + Each entry is then itself a column flex container, 2.21 + laying out its contents vertically. 2.22 + 2.23 + <li> 2.24 + Within each entry, content is ordered logically with the title first, 2.25 + followed by the description and the photo. 2.26 + For a more compelling visual presentation, however, 2.27 + 'order' is used to pull the image up from later in the content to the top, 2.28 + and 'align-self' to center it horizontally. 2.29 + 2.30 + <li> 2.31 + An ''auto'' margin above the purchase button 2.32 + forces it to the bottom of the entry box, 2.33 + regardless of the height of the description. 2.34 + </ul> 2.35 + 2.36 + <div style="display:table;"> 2.37 + <div style="display:table-cell;"><pre> 2.38 <style> 2.39 +#deals { 2.40 + display: flex; 2.41 + flex-flow: row; 2.42 +} 2.43 .sale-item { 2.44 - display: flexbox; 2.45 + display: flex; 2.46 + flex-flow: column; 2.47 padding: 1em; 2.48 - height: 600px; 2.49 } 2.50 .sale-item > img { 2.51 order: -1; 2.52 @@ -177,47 +206,107 @@ 2.53 .sale-item > button { 2.54 margin: auto 1em 0; 2.55 } 2.56 -</style> 2.57 -<section class='sale-item'> 2.58 - <h1>Computer Starter Kit</h1> 2.59 - 2.60 - <p> 2.61 - This is the best computer money can buy, 2.62 - if you don't have much money. 2.63 - 2.64 - <ul> 2.65 - <li>Computer 2.66 - <li>Monitor 2.67 - <li>Keyboard 2.68 - <li>Mouse 2.69 - <li>Nothing else! 2.70 - </ul> 2.71 - 2.72 - <img src="images/computer.jpg"> 2.73 - 2.74 - <button>BUY NOW</button> 2.75 -</section></pre> 2.76 - 2.77 - <section class='sale-item' style="width: 300px; height: 600px; padding: 1em; position: relative; "> 2.78 - <img src="images/computer.jpg" width=250 style="margin: 0 auto;"> 2.79 - 2.80 - <h1 style="font-size: 1.4em;">Computer Starter Kit</h1> 2.81 - 2.82 - <p> 2.83 - This is the best computer money can buy, 2.84 - if you don't have much money. 2.85 - 2.86 - <ul> 2.87 - <li>Computer 2.88 - <li>Monitor 2.89 - <li>Keyboard 2.90 - <li>Mouse 2.91 - <li>Nothing else! 2.92 - </ul> 2.93 - 2.94 - 2.95 - <button style="position: absolute; bottom: 1em; left: 1em; right: 1em;">BUY NOW</button> 2.96 - </section> 2.97 +</style></pre></div> 2.98 + <div style="display:table-cell;"><pre> 2.99 +<section id='deals'> 2.100 + <section class='sale-item'> 2.101 + <h1>Computer Starter Kit</h1> 2.102 + <p> 2.103 + This is the best computer money can buy, 2.104 + if you don't have much money. 2.105 + <ul> 2.106 + <li>Computer 2.107 + <li>Monitor 2.108 + <li>Keyboard 2.109 + <li>Mouse 2.110 + </ul> 2.111 + <img src="images/computer.jpg" 2.112 + alt='[A white computer with matching keyboard and monitor.]'> 2.113 + <button>BUY NOW</button> 2.114 + </section> 2.115 + 2.116 + <section class='sale-item'> 2.117 + <h1>Printer</h1> 2.118 + <p> 2.119 + Only capable of printing 2.120 + ASCII art. 2.121 + <ul> 2.122 + <li>Paper and ink not included. 2.123 + </ul> 2.124 + <img src="images/printer.jpg" alt=''> 2.125 + <button>BUY NOW</button> 2.126 + </section> 2.127 +</section></pre></div> 2.128 + </div> 2.129 + <div style="display:table; margin: 1em auto; border-spacing: .5em;"> 2.130 + <section class='computer-example'> 2.131 + <img src="images/computer.jpg" alt='[A white computer with matching keyboard and monitor.]'> 2.132 + 2.133 + <h1 style="font-size: 1.4em;">Computer Starter Kit</h1> 2.134 + 2.135 + <p> 2.136 + This is the best computer money can buy, 2.137 + if you don't have much money. 2.138 + 2.139 + <ul> 2.140 + <li>Computer 2.141 + <li>Monitor 2.142 + <li>Keyboard 2.143 + <li>Mouse 2.144 + </ul> 2.145 + 2.146 + <button>BUY NOW</button> 2.147 + </section> 2.148 + <section class='computer-example'> 2.149 + <img src="images/printer.png" alt=''> 2.150 + 2.151 + <h1 style="font-size: 1.4em;">Printer</h1> 2.152 + 2.153 + <p> 2.154 + Only capable of printing 2.155 + ASCII art. 2.156 + 2.157 + <ul> 2.158 + <li>Paper and ink not included. 2.159 + </ul> 2.160 + 2.161 + <button>BUY NOW</button> 2.162 + </section> 2.163 + </div> 2.164 + <style scoped> 2.165 + .computer-example { 2.166 + display: table-cell; 2.167 + vertical-align: top; 2.168 + width: 300px; 2.169 + padding: 1em 1em 100px; 2.170 + position: relative; 2.171 + background: hsl(60,100%,90%); 2.172 + border: thick solid hsl(60,80%,50%); 2.173 + border-radius: 1em; 2.174 + } 2.175 + .computer-example > img { 2.176 + margin: 0 auto; 2.177 + display: block; 2.178 + } 2.179 + .computer-example > h1 { 2.180 + background: transparent; 2.181 + text-decoration: underline; 2.182 + } 2.183 + .computer-example > button { 2.184 + background-color: hsl(120,100%,40%); 2.185 + border: medium inset hsl(120,70%,40%); 2.186 + border-radius: 1em; 2.187 + padding: .5em; 2.188 + font-weight: bold; 2.189 + color: white; 2.190 + font-size: 1.6em; 2.191 + cursor: pointer; 2.192 + position: absolute; 2.193 + left: 1em; 2.194 + right: 1em; 2.195 + bottom: 1em; 2.196 + } 2.197 + </style> 2.198 </div> 2.199 2.200 <h3 id="placement">
3.1 Binary file css3-flexbox/images/computer.jpg has changed
4.1 Binary file css3-flexbox/images/printer.png has changed
