diff --git a/9781430265023.jpg b/9781430265023.jpg new file mode 100644 index 0000000..16740f8 Binary files /dev/null and b/9781430265023.jpg differ diff --git a/9781430265023/Examples/.DS_Store b/9781430265023/Examples/.DS_Store new file mode 100644 index 0000000..6f30702 Binary files /dev/null and b/9781430265023/Examples/.DS_Store differ diff --git a/9781430265023/Examples/chapter3/3.1.html b/9781430265023/Examples/chapter3/3.1.html new file mode 100644 index 0000000..ced72f6 --- /dev/null +++ b/9781430265023/Examples/chapter3/3.1.html @@ -0,0 +1,33 @@ + + + + + Example of Relative and Absolute Positioning + + + +
Element 1
+
Element 2
+
Element 3
+
Element 4
+
Element 5
+
Element 6
+ + \ No newline at end of file diff --git a/9781430265023/Examples/chapter3/3.2.html b/9781430265023/Examples/chapter3/3.2.html new file mode 100644 index 0000000..568504d --- /dev/null +++ b/9781430265023/Examples/chapter3/3.2.html @@ -0,0 +1,54 @@ + + + + + Example of Relative and Absolute Positioning + + + +
+ Element 1 +
Element 4
+
+
Element 2
+
+ Element 3 +
Element 5
+
+
Element 6
+ + \ No newline at end of file diff --git a/9781430265023/Examples/chapter3/3.3.html b/9781430265023/Examples/chapter3/3.3.html new file mode 100644 index 0000000..63ffda3 --- /dev/null +++ b/9781430265023/Examples/chapter3/3.3.html @@ -0,0 +1,31 @@ + + + + + Example of Relative and Absolute Positioning + + + +
+
Floating element
+

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

+
+ + + \ No newline at end of file diff --git a/9781430265023/Examples/chapter3/3.4.html b/9781430265023/Examples/chapter3/3.4.html new file mode 100644 index 0000000..e2f9b80 --- /dev/null +++ b/9781430265023/Examples/chapter3/3.4.html @@ -0,0 +1,33 @@ + + + + + Example of Relative and Absolute Positioning + + + +
+
Floating element 1
+
Floating element 2
+
Floating element 3
+
Floating element 4
+

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

+
+ + \ No newline at end of file diff --git a/9781430265023/Examples/chapter3/3.5.html b/9781430265023/Examples/chapter3/3.5.html new file mode 100644 index 0000000..981d20e --- /dev/null +++ b/9781430265023/Examples/chapter3/3.5.html @@ -0,0 +1,37 @@ + + + + + Example of Relative and Absolute Positioning + + + +
+
Floating element 1
+
Floating element 2
+
Floating element 3
+
Floating element 4
+

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

+
+
+ + \ No newline at end of file diff --git a/9781430265023/Examples/chapter3/3.6.html b/9781430265023/Examples/chapter3/3.6.html new file mode 100644 index 0000000..66891e8 --- /dev/null +++ b/9781430265023/Examples/chapter3/3.6.html @@ -0,0 +1,35 @@ + + + + + Example of Relative and Absolute Positioning + + + + +
+

Example of inline-block

+

Here is some content that includes an inline <span> element.

+

Here’s some more content, and this time the <span> elements have the class navitem applied to them: Item 1 Item 2 Item 3

+

Note that inline-block elements contribute to the layout.

+
+ + + + \ No newline at end of file diff --git a/9781430265023/Examples/chapter3/3.7.html b/9781430265023/Examples/chapter3/3.7.html new file mode 100644 index 0000000..ec683a6 --- /dev/null +++ b/9781430265023/Examples/chapter3/3.7.html @@ -0,0 +1,106 @@ + + + + + Example of Relative and Absolute Positioning + + + + + +
+ + + +
+

Welcome to our website

+

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

+

Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor. Donec sed odio dui. Maecenas sed diam eget risus varius blandit sit amet non magna.

+

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue.

+

Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam id dolor id nibh ultricies vehicula ut id elit.

+
+
+
+ + \ No newline at end of file diff --git a/9781430265023/Examples/chapter3/3.8.html b/9781430265023/Examples/chapter3/3.8.html new file mode 100644 index 0000000..2f47019 --- /dev/null +++ b/9781430265023/Examples/chapter3/3.8.html @@ -0,0 +1,50 @@ + + + + + Example of Relative and Absolute Positioning + + + + +
+
+

This is a normal div, but displays like a cell in a table!

+

This is another table cell

+
+
+

Here is a third cell, in a second row

+

And a final cell.

+
+
+ + + \ No newline at end of file diff --git a/9781430265023/Examples/chapter4/.DS_Store b/9781430265023/Examples/chapter4/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/9781430265023/Examples/chapter4/.DS_Store differ diff --git a/9781430265023/Examples/chapter4/4.1.html b/9781430265023/Examples/chapter4/4.1.html new file mode 100644 index 0000000..36c4060 --- /dev/null +++ b/9781430265023/Examples/chapter4/4.1.html @@ -0,0 +1,68 @@ + + + + + Example of CSS Multi-Column Layout + + + + +
+

Moby Dick; Or the Whale

+

by Herman Melville

+
+ Cover of Moby Dick +
Voyage of the Pequod, illustrated by Everett Henry
+
+

Call me Ishmael. Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off—then, I account it high time to get to sea as soon as I can. This is my substitute for pistol and ball. With a philosophical flourish Cato throws himself upon his sword; I quietly take to the ship. There is nothing surprising in this. If they but knew it, almost all men in their degree, some time or other, cherish very nearly the same feelings towards the ocean with me.

+

There now is your insular city of the Manhattoes, belted round by wharves as Indian isles by coral reefs—commerce surrounds it with her surf. Right and left, the streets take you waterward. Its extreme downtown is the battery, where that noble mole is washed by waves, and cooled by breezes, which a few hours previous were out of sight of land. Look at the crowds of water-gazers there.

+

Circumambulate the city of a dreamy Sabbath afternoon. Go from Corlears Hook to Coenties Slip, and from thence, by Whitehall, northward. What do you see?—Posted like silent sentinels all around the town, stand thousands upon thousands of mortal men fixed in ocean reveries. Some leaning against the spiles; some seated upon the pier-heads; some looking over the bulwarks of ships from China; some high aloft in the rigging, as if striving to get a still better seaward peep. But these are all landsmen; of week days pent up in lath and plaster—tied to counters, nailed to benches, clinched to desks. How then is this? Are the green fields gone? What do they here?

+
+ + \ No newline at end of file diff --git a/9781430265023/Examples/chapter4/4.xx.html b/9781430265023/Examples/chapter4/4.xx.html new file mode 100644 index 0000000..376432e --- /dev/null +++ b/9781430265023/Examples/chapter4/4.xx.html @@ -0,0 +1,552 @@ + + + + + thenews - an example of CSS Multi-Column Layout + + + +
+
+
+

thenews

+

Your daily news

+
+ +
+
+ +
+
+
+
+ +

Banks in Recovery

+
+
+ +

Weekend ideas

+
+
+ +

New museum set to open

+
+
+
+

Island boat service due to stop in September

+
+ +
Above: The service provides a lifeline to the local island community
+
+

Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit.

+

Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+

Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+
+
+ +
+
+
+ + \ No newline at end of file diff --git a/9781430265023/Examples/chapter4/images/article.jpg b/9781430265023/Examples/chapter4/images/article.jpg new file mode 100644 index 0000000..4788c31 Binary files /dev/null and b/9781430265023/Examples/chapter4/images/article.jpg differ diff --git a/9781430265023/Examples/chapter4/images/callout1.jpg b/9781430265023/Examples/chapter4/images/callout1.jpg new file mode 100644 index 0000000..db9a464 Binary files /dev/null and b/9781430265023/Examples/chapter4/images/callout1.jpg differ diff --git a/9781430265023/Examples/chapter4/images/callout2.jpg b/9781430265023/Examples/chapter4/images/callout2.jpg new file mode 100644 index 0000000..e701777 Binary files /dev/null and b/9781430265023/Examples/chapter4/images/callout2.jpg differ diff --git a/9781430265023/Examples/chapter4/images/callout3.jpg b/9781430265023/Examples/chapter4/images/callout3.jpg new file mode 100644 index 0000000..4d61d54 Binary files /dev/null and b/9781430265023/Examples/chapter4/images/callout3.jpg differ diff --git a/9781430265023/Examples/chapter4/images/featured1.jpg b/9781430265023/Examples/chapter4/images/featured1.jpg new file mode 100644 index 0000000..ce41894 Binary files /dev/null and b/9781430265023/Examples/chapter4/images/featured1.jpg differ diff --git a/9781430265023/Examples/chapter4/images/featured2.jpg b/9781430265023/Examples/chapter4/images/featured2.jpg new file mode 100644 index 0000000..8c79eb1 Binary files /dev/null and b/9781430265023/Examples/chapter4/images/featured2.jpg differ diff --git a/9781430265023/Examples/chapter4/images/featured3.jpg b/9781430265023/Examples/chapter4/images/featured3.jpg new file mode 100644 index 0000000..711728c Binary files /dev/null and b/9781430265023/Examples/chapter4/images/featured3.jpg differ diff --git a/9781430265023/Examples/chapter4/images/featured4.jpg b/9781430265023/Examples/chapter4/images/featured4.jpg new file mode 100644 index 0000000..c68027a Binary files /dev/null and b/9781430265023/Examples/chapter4/images/featured4.jpg differ diff --git a/9781430265023/Examples/chapter4/images/featured5.jpg b/9781430265023/Examples/chapter4/images/featured5.jpg new file mode 100644 index 0000000..3c1bfd1 Binary files /dev/null and b/9781430265023/Examples/chapter4/images/featured5.jpg differ diff --git a/9781430265023/Examples/chapter4/images/featured6.jpg b/9781430265023/Examples/chapter4/images/featured6.jpg new file mode 100644 index 0000000..be9e9f8 Binary files /dev/null and b/9781430265023/Examples/chapter4/images/featured6.jpg differ diff --git a/9781430265023/Examples/chapter4/images/featured7.jpg b/9781430265023/Examples/chapter4/images/featured7.jpg new file mode 100644 index 0000000..09e97f6 Binary files /dev/null and b/9781430265023/Examples/chapter4/images/featured7.jpg differ diff --git a/9781430265023/Examples/chapter4/images/featured8.jpg b/9781430265023/Examples/chapter4/images/featured8.jpg new file mode 100644 index 0000000..21e4fab Binary files /dev/null and b/9781430265023/Examples/chapter4/images/featured8.jpg differ diff --git a/9781430265023/Examples/chapter4/images/featured9.jpg b/9781430265023/Examples/chapter4/images/featured9.jpg new file mode 100644 index 0000000..e12fa82 Binary files /dev/null and b/9781430265023/Examples/chapter4/images/featured9.jpg differ diff --git a/9781430265023/Examples/chapter4/images/mobydick.jpg b/9781430265023/Examples/chapter4/images/mobydick.jpg new file mode 100644 index 0000000..a544e29 Binary files /dev/null and b/9781430265023/Examples/chapter4/images/mobydick.jpg differ diff --git a/9781430265023/Examples/chapter4/images/promoted1.jpg b/9781430265023/Examples/chapter4/images/promoted1.jpg new file mode 100644 index 0000000..843bc4d Binary files /dev/null and b/9781430265023/Examples/chapter4/images/promoted1.jpg differ diff --git a/9781430265023/Examples/chapter4/images/promoted2.jpg b/9781430265023/Examples/chapter4/images/promoted2.jpg new file mode 100644 index 0000000..4dace74 Binary files /dev/null and b/9781430265023/Examples/chapter4/images/promoted2.jpg differ diff --git a/9781430265023/Examples/chapter4/images/rightarrow.png b/9781430265023/Examples/chapter4/images/rightarrow.png new file mode 100644 index 0000000..15ca584 Binary files /dev/null and b/9781430265023/Examples/chapter4/images/rightarrow.png differ diff --git a/9781430265023/Examples/chapter5/.DS_Store b/9781430265023/Examples/chapter5/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/9781430265023/Examples/chapter5/.DS_Store differ diff --git a/9781430265023/Examples/chapter5/chapter5.html b/9781430265023/Examples/chapter5/chapter5.html new file mode 100644 index 0000000..279779c --- /dev/null +++ b/9781430265023/Examples/chapter5/chapter5.html @@ -0,0 +1,265 @@ + + + + + Flexbox layout + + + + + + +
+ + + + + + +
+
+

Free Advice

+

All our impartial advice is offered completely free of charge

+ +
+
+

Discounted Removals

+

Once you’ve found your dream home we can help get you moved in

+ +
+
+

Buying Incentives

+

Many of our homes offer additional benefits such as rebates

+ +
+
+

Locations nationwide

+

We have agents and properties across all 50 States

+ +
+
+

Highest Quality Homes

+

Every single home we offer is guaranteed for quality

+ +
+
+

No obligation

+

You can withdraw from the process at any time without penalty

+ +
+
+ + + +
+
+

Looking for a beautiful new home that won’t break the bank?

+

Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum.

+

Curabitur blandit tempus porttitor. Aenean eu leo quam. +

+
+
+

Quality without compromise

+

We have homes that suit every budget without compromising on quality

+
+ +
+
+
+

Trade-up facilities

+

If you have a home to sell, we can help market it, and arrange bridging finance

+
+ +
+
+
+

Wonderful locations

+

Don’t settle for a nice home in a bad location. All our locations are carefully chosen

+
+ +
+
+
+

Value-added service

+

We offer a range of packages that can add value to your home-buying experience,

+
+ +
+
+ +
+ + diff --git a/9781430265023/Examples/chapter5/images/badge-locations.png b/9781430265023/Examples/chapter5/images/badge-locations.png new file mode 100644 index 0000000..b51e5e4 Binary files /dev/null and b/9781430265023/Examples/chapter5/images/badge-locations.png differ diff --git a/9781430265023/Examples/chapter5/images/badge-quality.png b/9781430265023/Examples/chapter5/images/badge-quality.png new file mode 100644 index 0000000..2b0a1ea Binary files /dev/null and b/9781430265023/Examples/chapter5/images/badge-quality.png differ diff --git a/9781430265023/Examples/chapter5/images/badge-tradeup.png b/9781430265023/Examples/chapter5/images/badge-tradeup.png new file mode 100644 index 0000000..e392a38 Binary files /dev/null and b/9781430265023/Examples/chapter5/images/badge-tradeup.png differ diff --git a/9781430265023/Examples/chapter5/images/badge-valueadd.png b/9781430265023/Examples/chapter5/images/badge-valueadd.png new file mode 100644 index 0000000..01e2943 Binary files /dev/null and b/9781430265023/Examples/chapter5/images/badge-valueadd.png differ diff --git a/9781430265023/Examples/chapter5/images/bigicon-freeadvice.png b/9781430265023/Examples/chapter5/images/bigicon-freeadvice.png new file mode 100644 index 0000000..ecc996d Binary files /dev/null and b/9781430265023/Examples/chapter5/images/bigicon-freeadvice.png differ diff --git a/9781430265023/Examples/chapter5/images/bigicon-incentives.png b/9781430265023/Examples/chapter5/images/bigicon-incentives.png new file mode 100644 index 0000000..22dbd8e Binary files /dev/null and b/9781430265023/Examples/chapter5/images/bigicon-incentives.png differ diff --git a/9781430265023/Examples/chapter5/images/bigicon-locations.png b/9781430265023/Examples/chapter5/images/bigicon-locations.png new file mode 100644 index 0000000..a5eae3c Binary files /dev/null and b/9781430265023/Examples/chapter5/images/bigicon-locations.png differ diff --git a/9781430265023/Examples/chapter5/images/bigicon-noobligation.png b/9781430265023/Examples/chapter5/images/bigicon-noobligation.png new file mode 100644 index 0000000..1cf0106 Binary files /dev/null and b/9781430265023/Examples/chapter5/images/bigicon-noobligation.png differ diff --git a/9781430265023/Examples/chapter5/images/bigicon-quality.png b/9781430265023/Examples/chapter5/images/bigicon-quality.png new file mode 100644 index 0000000..0a13e4e Binary files /dev/null and b/9781430265023/Examples/chapter5/images/bigicon-quality.png differ diff --git a/9781430265023/Examples/chapter5/images/bigicon-removals.png b/9781430265023/Examples/chapter5/images/bigicon-removals.png new file mode 100644 index 0000000..bbb751e Binary files /dev/null and b/9781430265023/Examples/chapter5/images/bigicon-removals.png differ diff --git a/9781430265023/Examples/chapter7/.DS_Store b/9781430265023/Examples/chapter7/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/9781430265023/Examples/chapter7/.DS_Store differ diff --git a/9781430265023/Examples/chapter7/chapter7ex1.html b/9781430265023/Examples/chapter7/chapter7ex1.html new file mode 100644 index 0000000..ae82ae0 --- /dev/null +++ b/9781430265023/Examples/chapter7/chapter7ex1.html @@ -0,0 +1,68 @@ + + + + + CSS Regions Layout + + + + +
+

Lorem Condimentum Fringilla

+

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

+

Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Curabitur blandit tempus porttitor.

+

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

+

Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna.

+

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue.

+
+
+
+
+ + \ No newline at end of file diff --git a/9781430265023/Examples/chapter7/chapter7ex2.html b/9781430265023/Examples/chapter7/chapter7ex2.html new file mode 100644 index 0000000..05d8481 --- /dev/null +++ b/9781430265023/Examples/chapter7/chapter7ex2.html @@ -0,0 +1,35 @@ + + + + + CSS Regions Layout + + + +
+

Article 1

+

+
+
+

Article 2

+

+
+
+

Article 3

+

+
+
+ + + + \ No newline at end of file diff --git a/9781430265023/Examples/chapter7/chapter7ex3.html b/9781430265023/Examples/chapter7/chapter7ex3.html new file mode 100644 index 0000000..c1ba46f --- /dev/null +++ b/9781430265023/Examples/chapter7/chapter7ex3.html @@ -0,0 +1,41 @@ + + + + + CSS Regions Layout + + + +
+

This is the first heading

+

This is the second heading

+
+
+
+ + + + + + diff --git a/9781430265023/Examples/chapter7/chapter7ex4.html b/9781430265023/Examples/chapter7/chapter7ex4.html new file mode 100644 index 0000000..ec1d59e --- /dev/null +++ b/9781430265023/Examples/chapter7/chapter7ex4.html @@ -0,0 +1,81 @@ + + + + + CSS Regions and CSS a Shapes Layout + + + +
+

the development of
The Gibson Les Paul

+
+
+
+
+

The Gibson Les Paul was the result of a design collaboration between Gibson Guitar Corporation and the late jazz guitarist and electronics inventor Les Paul. In 1950, with the introduction of the radically innovative Fender Telecaster to the musical market, solid-body electric guitars became a public craze (hollow-body electric guitars have more acoustic resonance but are, therefore, more prone to amplifier feedback and have less natural note duration "sustain".) In reaction, Gibson Guitar president Ted McCarty brought guitarist Les Paul into the company as a consultant. Les Paul was a respected innovator who had been experimenting with guitar design for years to benefit his own music. In fact, he had hand-built a solid-body prototype called "The Log", a design widely considered the first solid-body Spanish guitar ever built, as opposed to the "Hawaiian", or lap-steel guitar. This guitar is known as "The Log" because the solid core is a pine block whose width and depth are a little more than the width of the fretboard; conventional hollow guitar sides were added for shape (Image 2), a design similar to the popular Gibson ES-335 semi-hollowbody guitar introduced in 1958. Although numerous other prototypes and limited-production solid-body models by other makers have since surfaced, it is known that in 1945–1946, Les Paul had approached Gibson with "The Log" prototype, but his solid body design was rejected.[8][9]

+

In 1951, this initial rejection became a design collaboration between the Gibson Guitar Corporation and Les Paul. It was agreed that the new Les Paul guitar was to be an expensive, well-made instrument in Gibson's tradition.[10] Although recollections differ regarding who contributed what to the Les Paul design, it was far from a market replica of Fender models. Founded in 1902, Gibson began offering electric hollow-body guitars in the 1930s, such as the ES-150; at minimum, these hollow-body electric models provided a set of basic design cues for the new Gibson solid-body, including a more traditionally curved body shape than offered by competitor Fender, and a glued-in ("set-in") neck, in contrast to Fender's bolt-on neck.

+

The significance of Les Paul's contributions to his Gibson guitar design remains controversial. The book "50 Years of the Gibson Les Paul" limits Paul's contributions to two: advice on the trapeze tailpiece, and a preference for color (stating that Paul preferred gold as "it looks expensive", and a second choice of black because "it makes your fingers appear to move faster on the box", and "looks classy―like a tuxedo").[11]

+

Additionally, Gibson's president Ted McCarty states that the Gibson Guitar Corporation merely approached Les Paul for the right to imprint the musician's name on the headstock to increase model sales, and that in 1951, Gibson showed Paul a nearly finished instrument. McCarty also claims that design discussions with Les Paul were limited to the tailpiece and the fitting of a maple cap over the mahogany body for increased density and sustain, which Les Paul had requested reversed.

+
+ + \ No newline at end of file diff --git a/9781430265023/Examples/chapter7/guitar.jpg b/9781430265023/Examples/chapter7/guitar.jpg new file mode 100644 index 0000000..cf643f0 Binary files /dev/null and b/9781430265023/Examples/chapter7/guitar.jpg differ diff --git a/9781430265023/Examples/chapter9/.DS_Store b/9781430265023/Examples/chapter9/.DS_Store new file mode 100644 index 0000000..299f692 Binary files /dev/null and b/9781430265023/Examples/chapter9/.DS_Store differ diff --git a/9781430265023/Examples/chapter9/Chapter 5 revisited/.DS_Store b/9781430265023/Examples/chapter9/Chapter 5 revisited/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/9781430265023/Examples/chapter9/Chapter 5 revisited/.DS_Store differ diff --git a/9781430265023/Examples/chapter9/Chapter 5 revisited/CNAME b/9781430265023/Examples/chapter9/Chapter 5 revisited/CNAME new file mode 100644 index 0000000..64aa0f1 --- /dev/null +++ b/9781430265023/Examples/chapter9/Chapter 5 revisited/CNAME @@ -0,0 +1 @@ +flexboxgrid.com diff --git a/9781430265023/Examples/chapter9/Chapter 5 revisited/Gruntfile.js b/9781430265023/Examples/chapter9/Chapter 5 revisited/Gruntfile.js new file mode 100644 index 0000000..d9773b2 --- /dev/null +++ b/9781430265023/Examples/chapter9/Chapter 5 revisited/Gruntfile.js @@ -0,0 +1,108 @@ +/*global module:false*/ + +module.exports = function(grunt) { + + grunt.initConfig({ + myth: { + compile: { + expand: true, + cwd: 'css', + src: ['*.css', '!*.min.css'], + dest: 'css', + ext: '.css' + }, + release: { + files: { + 'dist/flexboxgrid.css': 'src/css/flexboxgrid.css' + } + } + }, + cssmin: { + concat: { + files: { + 'css/index.css': ['vendor/css/normalize.css', 'src/css/style.css', 'dist/flexboxgrid.css'] + } + }, + minify: { + expand: true, + cwd: 'css', + src: ['*.css', '!*.min.css'], + dest: 'css', + ext: '.min.css' + }, + release: { + expand: true, + cwd: 'dist', + src: ['*.css', '!*.min.css'], + dest: 'dist', + ext: '.min.css' + } + }, + uglify: { + release: { + files: { + 'js/index.js': 'src/js/index.js' + } + } + }, + processhtml: { + dist: { + options: { + process: true + }, + files: { + 'index.html': ['src/index.html'] + } + } + }, + htmlmin: { + dist: { + options: { + removeComments: true, + collapseWhitespace: true + }, + files: { + 'index.html': ['index.html'] + } + } + }, + watch: { + css: { + files: 'src/**/*', + tasks: ['default'], + }, + livereload: { + options: { + livereload: true, + }, + files: [ + 'index.html', + 'css/*.css', + 'js/*.js', + 'img/*' + ] + } + } + }); + + // These plugins provide necessary tasks. + grunt.loadNpmTasks('grunt-myth'); + grunt.loadNpmTasks('grunt-contrib-cssmin'); + grunt.loadNpmTasks('grunt-contrib-uglify'); + grunt.loadNpmTasks('grunt-contrib-watch'); + grunt.loadNpmTasks('grunt-processhtml'); + grunt.loadNpmTasks('grunt-contrib-htmlmin'); + + // Default task. + grunt.registerTask('default', [ + 'myth', + 'cssmin:concat', + 'cssmin:minify', + 'cssmin:release', + 'uglify', + 'processhtml', + 'htmlmin' + ]); + grunt.registerTask('reload', ['watch']); + +}; diff --git a/9781430265023/Examples/chapter9/Chapter 5 revisited/LICENSE b/9781430265023/Examples/chapter9/Chapter 5 revisited/LICENSE new file mode 100644 index 0000000..b873e99 --- /dev/null +++ b/9781430265023/Examples/chapter9/Chapter 5 revisited/LICENSE @@ -0,0 +1,13 @@ +Copyright 2013 Kristofer Joseph + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. diff --git a/9781430265023/Examples/chapter9/Chapter 5 revisited/README.md b/9781430265023/Examples/chapter9/Chapter 5 revisited/README.md new file mode 100644 index 0000000..2ef7245 --- /dev/null +++ b/9781430265023/Examples/chapter9/Chapter 5 revisited/README.md @@ -0,0 +1,37 @@ +Flexbox Grid +=========== + +[flexboxgrid.com](http://flexboxgrid.com) + +Grid based on the `flex` display property. + +Install +--------- +### npm +`npm i flexboxgrid --save` + +### bower +`bower install flexboxgrid` + +### cdn +``` + +``` + +### css +* [Development](https://raw.githubusercontent.com/kristoferjoseph/flexboxgrid/master/dist/flexboxgrid.css) +* [Production](https://raw.githubusercontent.com/kristoferjoseph/flexboxgrid/master/dist/flexboxgrid.min.css) + +Add the `flexbox.css` __development__ or `flexbox.min.css` __production__ to your html page. + +``` + +``` +Inspiration +----------- +- [topcoat-grid](https://github.com/topcoat/grid) +- [flexbox-grid by @zeMicro](https://github.com/zeMirco/flexbox-grid) +- [ptb2.me/flexgrid](http://ptb2.me/flexgrid/) +- [codepen.io/marcolago/pen/lqGFb](http://codepen.io/marcolago/pen/lqGFb) +- [philipwalton.github.io/solved-by-flexbox/demos/grids](http://philipwalton.github.io/solved-by-flexbox/demos/grids/) +- [davidwalsh.name/stylus-grid](http://davidwalsh.name/stylus-grid) diff --git a/9781430265023/Examples/chapter9/Chapter 5 revisited/bower.json b/9781430265023/Examples/chapter9/Chapter 5 revisited/bower.json new file mode 100644 index 0000000..3041a1f --- /dev/null +++ b/9781430265023/Examples/chapter9/Chapter 5 revisited/bower.json @@ -0,0 +1,24 @@ +{ + "name": "flexboxgrid", + "version": "6.2.0", + "homepage": "https://github.com/kristoferjoseph/flexboxgrid", + "authors": [ + "@dam" + ], + "description": "Grid based on the flex display property.", + "main": "dist/flexboxgrid.css", + "keywords": [ + "browser", + "flexbox", + "grid", + "css" + ], + "license": "Apache 2", + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests" + ] +} diff --git a/9781430265023/Examples/chapter9/Chapter 5 revisited/chapter9.html b/9781430265023/Examples/chapter9/Chapter 5 revisited/chapter9.html new file mode 100644 index 0000000..b3c3805 --- /dev/null +++ b/9781430265023/Examples/chapter9/Chapter 5 revisited/chapter9.html @@ -0,0 +1,240 @@ + + + + + Flexbox layout + + + + + + + +
+ + + + + + +
+
+

Looking for a beautiful new home that won’t break the bank?

+

Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum.

+

Curabitur blandit tempus porttitor. Aenean eu leo quam. +

+
+
+
+

Quality without compromise

+

We have homes that suit every budget without compromising on quality

+
+
+
+
+
+

Trade-up facilities

+

If you have a home to sell, we can help market it, and arrange bridging finance

+
+
+
+
+
+

Wonderful locations

+

Don’t settle for a nice home in a bad location. All our locations are carefully chosen

+
+
+
+
+
+

Value-added service

+

We offer a range of packages that can add value to your home-buying experience,

+
+
+
+
+
+
+ + diff --git a/9781430265023/Examples/chapter9/Chapter 5 revisited/css/flexboxgrid.css b/9781430265023/Examples/chapter9/Chapter 5 revisited/css/flexboxgrid.css new file mode 100644 index 0000000..0fb2ad9 --- /dev/null +++ b/9781430265023/Examples/chapter9/Chapter 5 revisited/css/flexboxgrid.css @@ -0,0 +1,996 @@ +/* Uncomment and set these variables to customize the grid. */ + +.container-fluid { + margin-right: auto; + margin-left: auto; + padding-right: 2rem; + padding-left: 2rem; +} + +.row { + box-sizing: border-box; + display: -webkit-flex; + display: -ms-flexbox; + display: -webkit-box; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + -webkit-box-flex: 0; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -1rem; + margin-left: -1rem; +} + +.row.reverse { + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + flex-direction: row-reverse; +} + +.col.reverse { + -webkit-flex-direction: column-reverse; + -ms-flex-direction: column-reverse; + -webkit-box-orient: vertical; + -webkit-box-direction: reverse; + flex-direction: column-reverse; +} + +.col-xs, +.col-xs-1, +.col-xs-2, +.col-xs-3, +.col-xs-4, +.col-xs-5, +.col-xs-6, +.col-xs-7, +.col-xs-8, +.col-xs-9, +.col-xs-10, +.col-xs-11, +.col-xs-12 { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + -webkit-box-flex: 0; + flex: 0 0 auto; + padding-right: 1rem; + padding-left: 1rem; +} + +.col-xs { + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + -webkit-box-flex: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + -webkit-flex-basis: 0; + flex-basis: 0; + max-width: 100%; +} + +.col-xs-1 { + -ms-flex-preferred-size: 8.333%; + -webkit-flex-basis: 8.333%; + flex-basis: 8.333%; + max-width: 8.333%; +} + +.col-xs-2 { + -ms-flex-preferred-size: 16.667%; + -webkit-flex-basis: 16.667%; + flex-basis: 16.667%; + max-width: 16.667%; +} + +.col-xs-3 { + -ms-flex-preferred-size: 25%; + -webkit-flex-basis: 25%; + flex-basis: 25%; + max-width: 25%; +} + +.col-xs-4 { + -ms-flex-preferred-size: 33.333%; + -webkit-flex-basis: 33.333%; + flex-basis: 33.333%; + max-width: 33.333%; +} + +.col-xs-5 { + -ms-flex-preferred-size: 41.667%; + -webkit-flex-basis: 41.667%; + flex-basis: 41.667%; + max-width: 41.667%; +} + +.col-xs-6 { + -ms-flex-preferred-size: 50%; + -webkit-flex-basis: 50%; + flex-basis: 50%; + max-width: 50%; +} + +.col-xs-7 { + -ms-flex-preferred-size: 58.333%; + -webkit-flex-basis: 58.333%; + flex-basis: 58.333%; + max-width: 58.333%; +} + +.col-xs-8 { + -ms-flex-preferred-size: 66.667%; + -webkit-flex-basis: 66.667%; + flex-basis: 66.667%; + max-width: 66.667%; +} + +.col-xs-9 { + -ms-flex-preferred-size: 75%; + -webkit-flex-basis: 75%; + flex-basis: 75%; + max-width: 75%; +} + +.col-xs-10 { + -ms-flex-preferred-size: 83.333%; + -webkit-flex-basis: 83.333%; + flex-basis: 83.333%; + max-width: 83.333%; +} + +.col-xs-11 { + -ms-flex-preferred-size: 91.667%; + -webkit-flex-basis: 91.667%; + flex-basis: 91.667%; + max-width: 91.667%; +} + +.col-xs-12 { + -ms-flex-preferred-size: 100%; + -webkit-flex-basis: 100%; + flex-basis: 100%; + max-width: 100%; +} + +.col-xs-offset-1 { + margin-left: 8.333%; +} + +.col-xs-offset-2 { + margin-left: 16.667%; +} + +.col-xs-offset-3 { + margin-left: 25%; +} + +.col-xs-offset-4 { + margin-left: 33.333%; +} + +.col-xs-offset-5 { + margin-left: 41.667%; +} + +.col-xs-offset-6 { + margin-left: 50%; +} + +.col-xs-offset-7 { + margin-left: 58.333%; +} + +.col-xs-offset-8 { + margin-left: 66.667%; +} + +.col-xs-offset-9 { + margin-left: 75%; +} + +.col-xs-offset-10 { + margin-left: 83.333%; +} + +.col-xs-offset-11 { + margin-left: 91.667%; +} + +.start-xs { + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + -webkit-box-pack: start; + justify-content: flex-start; + text-align: start; +} + +.center-xs { + -webkit-justify-content: center; + -ms-flex-pack: center; + -webkit-box-pack: center; + justify-content: center; + text-align: center; +} + +.end-xs { + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + -webkit-box-pack: end; + justify-content: flex-end; + text-align: end; +} + +.top-xs { + -webkit-align-items: flex-start; + -ms-flex-align: start; + -webkit-box-align: start; + align-items: flex-start; +} + +.middle-xs { + -webkit-align-items: center; + -ms-flex-align: center; + -webkit-box-align: center; + align-items: center; +} + +.bottom-xs { + -webkit-align-items: flex-end; + -ms-flex-align: end; + -webkit-box-align: end; + align-items: flex-end; +} + +.around-xs { + -webkit-justify-content: space-around; + -ms-flex-pack: distribute; + justify-content: space-around; +} + +.between-xs { + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + -webkit-box-pack: justify; + justify-content: space-between; +} + +.first-xs { + -webkit-order: -1; + -ms-flex-order: -1; + -webkit-box-ordinal-group: 0; + order: -1; +} + +.last-xs { + -webkit-order: 1; + -ms-flex-order: 1; + -webkit-box-ordinal-group: 2; + order: 1; +} + +@media only screen and (min-width: 48em) { + .container { + width: 46rem; + } + + .col-sm, + .col-sm-1, + .col-sm-2, + .col-sm-3, + .col-sm-4, + .col-sm-5, + .col-sm-6, + .col-sm-7, + .col-sm-8, + .col-sm-9, + .col-sm-10, + .col-sm-11, + .col-sm-12 { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + -webkit-box-flex: 0; + flex: 0 0 auto; + padding-right: 1rem; + padding-left: 1rem; + } + + .col-sm { + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + -webkit-box-flex: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + -webkit-flex-basis: 0; + flex-basis: 0; + max-width: 100%; + } + + .col-sm-1 { + -ms-flex-preferred-size: 8.333%; + -webkit-flex-basis: 8.333%; + flex-basis: 8.333%; + max-width: 8.333%; + } + + .col-sm-2 { + -ms-flex-preferred-size: 16.667%; + -webkit-flex-basis: 16.667%; + flex-basis: 16.667%; + max-width: 16.667%; + } + + .col-sm-3 { + -ms-flex-preferred-size: 25%; + -webkit-flex-basis: 25%; + flex-basis: 25%; + max-width: 25%; + } + + .col-sm-4 { + -ms-flex-preferred-size: 33.333%; + -webkit-flex-basis: 33.333%; + flex-basis: 33.333%; + max-width: 33.333%; + } + + .col-sm-5 { + -ms-flex-preferred-size: 41.667%; + -webkit-flex-basis: 41.667%; + flex-basis: 41.667%; + max-width: 41.667%; + } + + .col-sm-6 { + -ms-flex-preferred-size: 50%; + -webkit-flex-basis: 50%; + flex-basis: 50%; + max-width: 50%; + } + + .col-sm-7 { + -ms-flex-preferred-size: 58.333%; + -webkit-flex-basis: 58.333%; + flex-basis: 58.333%; + max-width: 58.333%; + } + + .col-sm-8 { + -ms-flex-preferred-size: 66.667%; + -webkit-flex-basis: 66.667%; + flex-basis: 66.667%; + max-width: 66.667%; + } + + .col-sm-9 { + -ms-flex-preferred-size: 75%; + -webkit-flex-basis: 75%; + flex-basis: 75%; + max-width: 75%; + } + + .col-sm-10 { + -ms-flex-preferred-size: 83.333%; + -webkit-flex-basis: 83.333%; + flex-basis: 83.333%; + max-width: 83.333%; + } + + .col-sm-11 { + -ms-flex-preferred-size: 91.667%; + -webkit-flex-basis: 91.667%; + flex-basis: 91.667%; + max-width: 91.667%; + } + + .col-sm-12 { + -ms-flex-preferred-size: 100%; + -webkit-flex-basis: 100%; + flex-basis: 100%; + max-width: 100%; + } + + .col-sm-offset-1 { + margin-left: 8.333%; + } + + .col-sm-offset-2 { + margin-left: 16.667%; + } + + .col-sm-offset-3 { + margin-left: 25%; + } + + .col-sm-offset-4 { + margin-left: 33.333%; + } + + .col-sm-offset-5 { + margin-left: 41.667%; + } + + .col-sm-offset-6 { + margin-left: 50%; + } + + .col-sm-offset-7 { + margin-left: 58.333%; + } + + .col-sm-offset-8 { + margin-left: 66.667%; + } + + .col-sm-offset-9 { + margin-left: 75%; + } + + .col-sm-offset-10 { + margin-left: 83.333%; + } + + .col-sm-offset-11 { + margin-left: 91.667%; + } + + .start-sm { + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + -webkit-box-pack: start; + justify-content: flex-start; + text-align: start; + } + + .center-sm { + -webkit-justify-content: center; + -ms-flex-pack: center; + -webkit-box-pack: center; + justify-content: center; + text-align: center; + } + + .end-sm { + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + -webkit-box-pack: end; + justify-content: flex-end; + text-align: end; + } + + .top-sm { + -webkit-align-items: flex-start; + -ms-flex-align: start; + -webkit-box-align: start; + align-items: flex-start; + } + + .middle-sm { + -webkit-align-items: center; + -ms-flex-align: center; + -webkit-box-align: center; + align-items: center; + } + + .bottom-sm { + -webkit-align-items: flex-end; + -ms-flex-align: end; + -webkit-box-align: end; + align-items: flex-end; + } + + .around-sm { + -webkit-justify-content: space-around; + -ms-flex-pack: distribute; + justify-content: space-around; + } + + .between-sm { + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + -webkit-box-pack: justify; + justify-content: space-between; + } + + .first-sm { + -webkit-order: -1; + -ms-flex-order: -1; + -webkit-box-ordinal-group: 0; + order: -1; + } + + .last-sm { + -webkit-order: 1; + -ms-flex-order: 1; + -webkit-box-ordinal-group: 2; + order: 1; + } +} + +@media only screen and (min-width: 62em) { + .container { + width: 61rem; + } + + .col-md, + .col-md-1, + .col-md-2, + .col-md-3, + .col-md-4, + .col-md-5, + .col-md-6, + .col-md-7, + .col-md-8, + .col-md-9, + .col-md-10, + .col-md-11, + .col-md-12 { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + -webkit-box-flex: 0; + flex: 0 0 auto; + padding-right: 1rem; + padding-left: 1rem; + } + + .col-md { + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + -webkit-box-flex: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + -webkit-flex-basis: 0; + flex-basis: 0; + max-width: 100%; + } + + .col-md-1 { + -ms-flex-preferred-size: 8.333%; + -webkit-flex-basis: 8.333%; + flex-basis: 8.333%; + max-width: 8.333%; + } + + .col-md-2 { + -ms-flex-preferred-size: 16.667%; + -webkit-flex-basis: 16.667%; + flex-basis: 16.667%; + max-width: 16.667%; + } + + .col-md-3 { + -ms-flex-preferred-size: 25%; + -webkit-flex-basis: 25%; + flex-basis: 25%; + max-width: 25%; + } + + .col-md-4 { + -ms-flex-preferred-size: 33.333%; + -webkit-flex-basis: 33.333%; + flex-basis: 33.333%; + max-width: 33.333%; + } + + .col-md-5 { + -ms-flex-preferred-size: 41.667%; + -webkit-flex-basis: 41.667%; + flex-basis: 41.667%; + max-width: 41.667%; + } + + .col-md-6 { + -ms-flex-preferred-size: 50%; + -webkit-flex-basis: 50%; + flex-basis: 50%; + max-width: 50%; + } + + .col-md-7 { + -ms-flex-preferred-size: 58.333%; + -webkit-flex-basis: 58.333%; + flex-basis: 58.333%; + max-width: 58.333%; + } + + .col-md-8 { + -ms-flex-preferred-size: 66.667%; + -webkit-flex-basis: 66.667%; + flex-basis: 66.667%; + max-width: 66.667%; + } + + .col-md-9 { + -ms-flex-preferred-size: 75%; + -webkit-flex-basis: 75%; + flex-basis: 75%; + max-width: 75%; + } + + .col-md-10 { + -ms-flex-preferred-size: 83.333%; + -webkit-flex-basis: 83.333%; + flex-basis: 83.333%; + max-width: 83.333%; + } + + .col-md-11 { + -ms-flex-preferred-size: 91.667%; + -webkit-flex-basis: 91.667%; + flex-basis: 91.667%; + max-width: 91.667%; + } + + .col-md-12 { + -ms-flex-preferred-size: 100%; + -webkit-flex-basis: 100%; + flex-basis: 100%; + max-width: 100%; + } + + .col-md-offset-1 { + margin-left: 8.333%; + } + + .col-md-offset-2 { + margin-left: 16.667%; + } + + .col-md-offset-3 { + margin-left: 25%; + } + + .col-md-offset-4 { + margin-left: 33.333%; + } + + .col-md-offset-5 { + margin-left: 41.667%; + } + + .col-md-offset-6 { + margin-left: 50%; + } + + .col-md-offset-7 { + margin-left: 58.333%; + } + + .col-md-offset-8 { + margin-left: 66.667%; + } + + .col-md-offset-9 { + margin-left: 75%; + } + + .col-md-offset-10 { + margin-left: 83.333%; + } + + .col-md-offset-11 { + margin-left: 91.667%; + } + + .start-md { + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + -webkit-box-pack: start; + justify-content: flex-start; + text-align: start; + } + + .center-md { + -webkit-justify-content: center; + -ms-flex-pack: center; + -webkit-box-pack: center; + justify-content: center; + text-align: center; + } + + .end-md { + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + -webkit-box-pack: end; + justify-content: flex-end; + text-align: end; + } + + .top-md { + -webkit-align-items: flex-start; + -ms-flex-align: start; + -webkit-box-align: start; + align-items: flex-start; + } + + .middle-md { + -webkit-align-items: center; + -ms-flex-align: center; + -webkit-box-align: center; + align-items: center; + } + + .bottom-md { + -webkit-align-items: flex-end; + -ms-flex-align: end; + -webkit-box-align: end; + align-items: flex-end; + } + + .around-md { + -webkit-justify-content: space-around; + -ms-flex-pack: distribute; + justify-content: space-around; + } + + .between-md { + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + -webkit-box-pack: justify; + justify-content: space-between; + } + + .first-md { + -webkit-order: -1; + -ms-flex-order: -1; + -webkit-box-ordinal-group: 0; + order: -1; + } + + .last-md { + -webkit-order: 1; + -ms-flex-order: 1; + -webkit-box-ordinal-group: 2; + order: 1; + } +} + +@media only screen and (min-width: 75em) { + .container { + width: 71rem; + } + + .col-lg, + .col-lg-1, + .col-lg-2, + .col-lg-3, + .col-lg-4, + .col-lg-5, + .col-lg-6, + .col-lg-7, + .col-lg-8, + .col-lg-9, + .col-lg-10, + .col-lg-11, + .col-lg-12 { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + -webkit-box-flex: 0; + flex: 0 0 auto; + padding-right: 1rem; + padding-left: 1rem; + } + + .col-lg { + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + -webkit-box-flex: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + -webkit-flex-basis: 0; + flex-basis: 0; + max-width: 100%; + } + + .col-lg-1 { + -ms-flex-preferred-size: 8.333%; + -webkit-flex-basis: 8.333%; + flex-basis: 8.333%; + max-width: 8.333%; + } + + .col-lg-2 { + -ms-flex-preferred-size: 16.667%; + -webkit-flex-basis: 16.667%; + flex-basis: 16.667%; + max-width: 16.667%; + } + + .col-lg-3 { + -ms-flex-preferred-size: 25%; + -webkit-flex-basis: 25%; + flex-basis: 25%; + max-width: 25%; + } + + .col-lg-4 { + -ms-flex-preferred-size: 33.333%; + -webkit-flex-basis: 33.333%; + flex-basis: 33.333%; + max-width: 33.333%; + } + + .col-lg-5 { + -ms-flex-preferred-size: 41.667%; + -webkit-flex-basis: 41.667%; + flex-basis: 41.667%; + max-width: 41.667%; + } + + .col-lg-6 { + -ms-flex-preferred-size: 50%; + -webkit-flex-basis: 50%; + flex-basis: 50%; + max-width: 50%; + } + + .col-lg-7 { + -ms-flex-preferred-size: 58.333%; + -webkit-flex-basis: 58.333%; + flex-basis: 58.333%; + max-width: 58.333%; + } + + .col-lg-8 { + -ms-flex-preferred-size: 66.667%; + -webkit-flex-basis: 66.667%; + flex-basis: 66.667%; + max-width: 66.667%; + } + + .col-lg-9 { + -ms-flex-preferred-size: 75%; + -webkit-flex-basis: 75%; + flex-basis: 75%; + max-width: 75%; + } + + .col-lg-10 { + -ms-flex-preferred-size: 83.333%; + -webkit-flex-basis: 83.333%; + flex-basis: 83.333%; + max-width: 83.333%; + } + + .col-lg-11 { + -ms-flex-preferred-size: 91.667%; + -webkit-flex-basis: 91.667%; + flex-basis: 91.667%; + max-width: 91.667%; + } + + .col-lg-12 { + -ms-flex-preferred-size: 100%; + -webkit-flex-basis: 100%; + flex-basis: 100%; + max-width: 100%; + } + + .col-lg-offset-1 { + margin-left: 8.333%; + } + + .col-lg-offset-2 { + margin-left: 16.667%; + } + + .col-lg-offset-3 { + margin-left: 25%; + } + + .col-lg-offset-4 { + margin-left: 33.333%; + } + + .col-lg-offset-5 { + margin-left: 41.667%; + } + + .col-lg-offset-6 { + margin-left: 50%; + } + + .col-lg-offset-7 { + margin-left: 58.333%; + } + + .col-lg-offset-8 { + margin-left: 66.667%; + } + + .col-lg-offset-9 { + margin-left: 75%; + } + + .col-lg-offset-10 { + margin-left: 83.333%; + } + + .col-lg-offset-11 { + margin-left: 91.667%; + } + + .start-lg { + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + -webkit-box-pack: start; + justify-content: flex-start; + text-align: start; + } + + .center-lg { + -webkit-justify-content: center; + -ms-flex-pack: center; + -webkit-box-pack: center; + justify-content: center; + text-align: center; + } + + .end-lg { + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + -webkit-box-pack: end; + justify-content: flex-end; + text-align: end; + } + + .top-lg { + -webkit-align-items: flex-start; + -ms-flex-align: start; + -webkit-box-align: start; + align-items: flex-start; + } + + .middle-lg { + -webkit-align-items: center; + -ms-flex-align: center; + -webkit-box-align: center; + align-items: center; + } + + .bottom-lg { + -webkit-align-items: flex-end; + -ms-flex-align: end; + -webkit-box-align: end; + align-items: flex-end; + } + + .around-lg { + -webkit-justify-content: space-around; + -ms-flex-pack: distribute; + justify-content: space-around; + } + + .between-lg { + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + -webkit-box-pack: justify; + justify-content: space-between; + } + + .first-lg { + -webkit-order: -1; + -ms-flex-order: -1; + -webkit-box-ordinal-group: 0; + order: -1; + } + + .last-lg { + -webkit-order: 1; + -ms-flex-order: 1; + -webkit-box-ordinal-group: 2; + order: 1; + } +} \ No newline at end of file diff --git a/9781430265023/Examples/chapter9/Chapter 5 revisited/css/flexboxgrid.min.css b/9781430265023/Examples/chapter9/Chapter 5 revisited/css/flexboxgrid.min.css new file mode 100644 index 0000000..cb5c523 --- /dev/null +++ b/9781430265023/Examples/chapter9/Chapter 5 revisited/css/flexboxgrid.min.css @@ -0,0 +1 @@ +.container-fluid{margin-right:auto;margin-left:auto;padding-right:2rem;padding-left:2rem}.row{box-sizing:border-box;display:-webkit-flex;display:-ms-flexbox;display:-webkit-box;display:flex;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;-webkit-box-flex:0;flex:0 1 auto;-webkit-flex-direction:row;-ms-flex-direction:row;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-1rem;margin-left:-1rem}.row.reverse{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;flex-direction:row-reverse}.col.reverse{-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;-webkit-box-orient:vertical;-webkit-box-direction:reverse;flex-direction:column-reverse}.col-xs,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{box-sizing:border-box;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;-webkit-box-flex:0;flex:0 0 auto;padding-right:1rem;padding-left:1rem}.col-xs{-webkit-flex-grow:1;-ms-flex-positive:1;-webkit-box-flex:1;flex-grow:1;-ms-flex-preferred-size:0;-webkit-flex-basis:0;flex-basis:0;max-width:100%}.col-xs-1{-ms-flex-preferred-size:8.333%;-webkit-flex-basis:8.333%;flex-basis:8.333%;max-width:8.333%}.col-xs-2{-ms-flex-preferred-size:16.667%;-webkit-flex-basis:16.667%;flex-basis:16.667%;max-width:16.667%}.col-xs-3{-ms-flex-preferred-size:25%;-webkit-flex-basis:25%;flex-basis:25%;max-width:25%}.col-xs-4{-ms-flex-preferred-size:33.333%;-webkit-flex-basis:33.333%;flex-basis:33.333%;max-width:33.333%}.col-xs-5{-ms-flex-preferred-size:41.667%;-webkit-flex-basis:41.667%;flex-basis:41.667%;max-width:41.667%}.col-xs-6{-ms-flex-preferred-size:50%;-webkit-flex-basis:50%;flex-basis:50%;max-width:50%}.col-xs-7{-ms-flex-preferred-size:58.333%;-webkit-flex-basis:58.333%;flex-basis:58.333%;max-width:58.333%}.col-xs-8{-ms-flex-preferred-size:66.667%;-webkit-flex-basis:66.667%;flex-basis:66.667%;max-width:66.667%}.col-xs-9{-ms-flex-preferred-size:75%;-webkit-flex-basis:75%;flex-basis:75%;max-width:75%}.col-xs-10{-ms-flex-preferred-size:83.333%;-webkit-flex-basis:83.333%;flex-basis:83.333%;max-width:83.333%}.col-xs-11{-ms-flex-preferred-size:91.667%;-webkit-flex-basis:91.667%;flex-basis:91.667%;max-width:91.667%}.col-xs-12{-ms-flex-preferred-size:100%;-webkit-flex-basis:100%;flex-basis:100%;max-width:100%}.col-xs-offset-1{margin-left:8.333%}.col-xs-offset-2{margin-left:16.667%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-4{margin-left:33.333%}.col-xs-offset-5{margin-left:41.667%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-7{margin-left:58.333%}.col-xs-offset-8{margin-left:66.667%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-10{margin-left:83.333%}.col-xs-offset-11{margin-left:91.667%}.start-xs{-webkit-justify-content:flex-start;-ms-flex-pack:start;-webkit-box-pack:start;justify-content:flex-start;text-align:start}.center-xs{-webkit-justify-content:center;-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center;text-align:center}.end-xs{-webkit-justify-content:flex-end;-ms-flex-pack:end;-webkit-box-pack:end;justify-content:flex-end;text-align:end}.top-xs{-webkit-align-items:flex-start;-ms-flex-align:start;-webkit-box-align:start;align-items:flex-start}.middle-xs{-webkit-align-items:center;-ms-flex-align:center;-webkit-box-align:center;align-items:center}.bottom-xs{-webkit-align-items:flex-end;-ms-flex-align:end;-webkit-box-align:end;align-items:flex-end}.around-xs{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.between-xs{-webkit-justify-content:space-between;-ms-flex-pack:justify;-webkit-box-pack:justify;justify-content:space-between}.first-xs{-webkit-order:-1;-ms-flex-order:-1;-webkit-box-ordinal-group:0;order:-1}.last-xs{-webkit-order:1;-ms-flex-order:1;-webkit-box-ordinal-group:2;order:1}@media only screen and (min-width:48em){.container{width:46rem}.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9{box-sizing:border-box;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;-webkit-box-flex:0;flex:0 0 auto;padding-right:1rem;padding-left:1rem}.col-sm{-webkit-flex-grow:1;-ms-flex-positive:1;-webkit-box-flex:1;flex-grow:1;-ms-flex-preferred-size:0;-webkit-flex-basis:0;flex-basis:0;max-width:100%}.col-sm-1{-ms-flex-preferred-size:8.333%;-webkit-flex-basis:8.333%;flex-basis:8.333%;max-width:8.333%}.col-sm-2{-ms-flex-preferred-size:16.667%;-webkit-flex-basis:16.667%;flex-basis:16.667%;max-width:16.667%}.col-sm-3{-ms-flex-preferred-size:25%;-webkit-flex-basis:25%;flex-basis:25%;max-width:25%}.col-sm-4{-ms-flex-preferred-size:33.333%;-webkit-flex-basis:33.333%;flex-basis:33.333%;max-width:33.333%}.col-sm-5{-ms-flex-preferred-size:41.667%;-webkit-flex-basis:41.667%;flex-basis:41.667%;max-width:41.667%}.col-sm-6{-ms-flex-preferred-size:50%;-webkit-flex-basis:50%;flex-basis:50%;max-width:50%}.col-sm-7{-ms-flex-preferred-size:58.333%;-webkit-flex-basis:58.333%;flex-basis:58.333%;max-width:58.333%}.col-sm-8{-ms-flex-preferred-size:66.667%;-webkit-flex-basis:66.667%;flex-basis:66.667%;max-width:66.667%}.col-sm-9{-ms-flex-preferred-size:75%;-webkit-flex-basis:75%;flex-basis:75%;max-width:75%}.col-sm-10{-ms-flex-preferred-size:83.333%;-webkit-flex-basis:83.333%;flex-basis:83.333%;max-width:83.333%}.col-sm-11{-ms-flex-preferred-size:91.667%;-webkit-flex-basis:91.667%;flex-basis:91.667%;max-width:91.667%}.col-sm-12{-ms-flex-preferred-size:100%;-webkit-flex-basis:100%;flex-basis:100%;max-width:100%}.col-sm-offset-1{margin-left:8.333%}.col-sm-offset-2{margin-left:16.667%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-4{margin-left:33.333%}.col-sm-offset-5{margin-left:41.667%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-7{margin-left:58.333%}.col-sm-offset-8{margin-left:66.667%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-10{margin-left:83.333%}.col-sm-offset-11{margin-left:91.667%}.start-sm{-webkit-justify-content:flex-start;-ms-flex-pack:start;-webkit-box-pack:start;justify-content:flex-start;text-align:start}.center-sm{-webkit-justify-content:center;-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center;text-align:center}.end-sm{-webkit-justify-content:flex-end;-ms-flex-pack:end;-webkit-box-pack:end;justify-content:flex-end;text-align:end}.top-sm{-webkit-align-items:flex-start;-ms-flex-align:start;-webkit-box-align:start;align-items:flex-start}.middle-sm{-webkit-align-items:center;-ms-flex-align:center;-webkit-box-align:center;align-items:center}.bottom-sm{-webkit-align-items:flex-end;-ms-flex-align:end;-webkit-box-align:end;align-items:flex-end}.around-sm{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.between-sm{-webkit-justify-content:space-between;-ms-flex-pack:justify;-webkit-box-pack:justify;justify-content:space-between}.first-sm{-webkit-order:-1;-ms-flex-order:-1;-webkit-box-ordinal-group:0;order:-1}.last-sm{-webkit-order:1;-ms-flex-order:1;-webkit-box-ordinal-group:2;order:1}}@media only screen and (min-width:62em){.container{width:61rem}.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{box-sizing:border-box;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;-webkit-box-flex:0;flex:0 0 auto;padding-right:1rem;padding-left:1rem}.col-md{-webkit-flex-grow:1;-ms-flex-positive:1;-webkit-box-flex:1;flex-grow:1;-ms-flex-preferred-size:0;-webkit-flex-basis:0;flex-basis:0;max-width:100%}.col-md-1{-ms-flex-preferred-size:8.333%;-webkit-flex-basis:8.333%;flex-basis:8.333%;max-width:8.333%}.col-md-2{-ms-flex-preferred-size:16.667%;-webkit-flex-basis:16.667%;flex-basis:16.667%;max-width:16.667%}.col-md-3{-ms-flex-preferred-size:25%;-webkit-flex-basis:25%;flex-basis:25%;max-width:25%}.col-md-4{-ms-flex-preferred-size:33.333%;-webkit-flex-basis:33.333%;flex-basis:33.333%;max-width:33.333%}.col-md-5{-ms-flex-preferred-size:41.667%;-webkit-flex-basis:41.667%;flex-basis:41.667%;max-width:41.667%}.col-md-6{-ms-flex-preferred-size:50%;-webkit-flex-basis:50%;flex-basis:50%;max-width:50%}.col-md-7{-ms-flex-preferred-size:58.333%;-webkit-flex-basis:58.333%;flex-basis:58.333%;max-width:58.333%}.col-md-8{-ms-flex-preferred-size:66.667%;-webkit-flex-basis:66.667%;flex-basis:66.667%;max-width:66.667%}.col-md-9{-ms-flex-preferred-size:75%;-webkit-flex-basis:75%;flex-basis:75%;max-width:75%}.col-md-10{-ms-flex-preferred-size:83.333%;-webkit-flex-basis:83.333%;flex-basis:83.333%;max-width:83.333%}.col-md-11{-ms-flex-preferred-size:91.667%;-webkit-flex-basis:91.667%;flex-basis:91.667%;max-width:91.667%}.col-md-12{-ms-flex-preferred-size:100%;-webkit-flex-basis:100%;flex-basis:100%;max-width:100%}.col-md-offset-1{margin-left:8.333%}.col-md-offset-2{margin-left:16.667%}.col-md-offset-3{margin-left:25%}.col-md-offset-4{margin-left:33.333%}.col-md-offset-5{margin-left:41.667%}.col-md-offset-6{margin-left:50%}.col-md-offset-7{margin-left:58.333%}.col-md-offset-8{margin-left:66.667%}.col-md-offset-9{margin-left:75%}.col-md-offset-10{margin-left:83.333%}.col-md-offset-11{margin-left:91.667%}.start-md{-webkit-justify-content:flex-start;-ms-flex-pack:start;-webkit-box-pack:start;justify-content:flex-start;text-align:start}.center-md{-webkit-justify-content:center;-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center;text-align:center}.end-md{-webkit-justify-content:flex-end;-ms-flex-pack:end;-webkit-box-pack:end;justify-content:flex-end;text-align:end}.top-md{-webkit-align-items:flex-start;-ms-flex-align:start;-webkit-box-align:start;align-items:flex-start}.middle-md{-webkit-align-items:center;-ms-flex-align:center;-webkit-box-align:center;align-items:center}.bottom-md{-webkit-align-items:flex-end;-ms-flex-align:end;-webkit-box-align:end;align-items:flex-end}.around-md{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.between-md{-webkit-justify-content:space-between;-ms-flex-pack:justify;-webkit-box-pack:justify;justify-content:space-between}.first-md{-webkit-order:-1;-ms-flex-order:-1;-webkit-box-ordinal-group:0;order:-1}.last-md{-webkit-order:1;-ms-flex-order:1;-webkit-box-ordinal-group:2;order:1}}@media only screen and (min-width:75em){.container{width:71rem}.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{box-sizing:border-box;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;-webkit-box-flex:0;flex:0 0 auto;padding-right:1rem;padding-left:1rem}.col-lg{-webkit-flex-grow:1;-ms-flex-positive:1;-webkit-box-flex:1;flex-grow:1;-ms-flex-preferred-size:0;-webkit-flex-basis:0;flex-basis:0;max-width:100%}.col-lg-1{-ms-flex-preferred-size:8.333%;-webkit-flex-basis:8.333%;flex-basis:8.333%;max-width:8.333%}.col-lg-2{-ms-flex-preferred-size:16.667%;-webkit-flex-basis:16.667%;flex-basis:16.667%;max-width:16.667%}.col-lg-3{-ms-flex-preferred-size:25%;-webkit-flex-basis:25%;flex-basis:25%;max-width:25%}.col-lg-4{-ms-flex-preferred-size:33.333%;-webkit-flex-basis:33.333%;flex-basis:33.333%;max-width:33.333%}.col-lg-5{-ms-flex-preferred-size:41.667%;-webkit-flex-basis:41.667%;flex-basis:41.667%;max-width:41.667%}.col-lg-6{-ms-flex-preferred-size:50%;-webkit-flex-basis:50%;flex-basis:50%;max-width:50%}.col-lg-7{-ms-flex-preferred-size:58.333%;-webkit-flex-basis:58.333%;flex-basis:58.333%;max-width:58.333%}.col-lg-8{-ms-flex-preferred-size:66.667%;-webkit-flex-basis:66.667%;flex-basis:66.667%;max-width:66.667%}.col-lg-9{-ms-flex-preferred-size:75%;-webkit-flex-basis:75%;flex-basis:75%;max-width:75%}.col-lg-10{-ms-flex-preferred-size:83.333%;-webkit-flex-basis:83.333%;flex-basis:83.333%;max-width:83.333%}.col-lg-11{-ms-flex-preferred-size:91.667%;-webkit-flex-basis:91.667%;flex-basis:91.667%;max-width:91.667%}.col-lg-12{-ms-flex-preferred-size:100%;-webkit-flex-basis:100%;flex-basis:100%;max-width:100%}.col-lg-offset-1{margin-left:8.333%}.col-lg-offset-2{margin-left:16.667%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-4{margin-left:33.333%}.col-lg-offset-5{margin-left:41.667%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-7{margin-left:58.333%}.col-lg-offset-8{margin-left:66.667%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-10{margin-left:83.333%}.col-lg-offset-11{margin-left:91.667%}.start-lg{-webkit-justify-content:flex-start;-ms-flex-pack:start;-webkit-box-pack:start;justify-content:flex-start;text-align:start}.center-lg{-webkit-justify-content:center;-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center;text-align:center}.end-lg{-webkit-justify-content:flex-end;-ms-flex-pack:end;-webkit-box-pack:end;justify-content:flex-end;text-align:end}.top-lg{-webkit-align-items:flex-start;-ms-flex-align:start;-webkit-box-align:start;align-items:flex-start}.middle-lg{-webkit-align-items:center;-ms-flex-align:center;-webkit-box-align:center;align-items:center}.bottom-lg{-webkit-align-items:flex-end;-ms-flex-align:end;-webkit-box-align:end;align-items:flex-end}.around-lg{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.between-lg{-webkit-justify-content:space-between;-ms-flex-pack:justify;-webkit-box-pack:justify;justify-content:space-between}.first-lg{-webkit-order:-1;-ms-flex-order:-1;-webkit-box-ordinal-group:0;order:-1}.last-lg{-webkit-order:1;-ms-flex-order:1;-webkit-box-ordinal-group:2;order:1}} \ No newline at end of file diff --git a/9781430265023/Examples/chapter9/Chapter 5 revisited/css/index.css b/9781430265023/Examples/chapter9/Chapter 5 revisited/css/index.css new file mode 100644 index 0000000..2817dab --- /dev/null +++ b/9781430265023/Examples/chapter9/Chapter 5 revisited/css/index.css @@ -0,0 +1 @@ +/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:0 0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}body{box-sizing:border-box;padding:0;margin:0;font-size:18px;font-family:HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-weight:400;background:#EEE;line-height:1.4rem}h1,h2,h3,h4,h5,h6{font-family:Gibson,HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;color:#001A33}h2{font-size:2rem;margin:1rem 0}:focus{outline-color:transparent;outline-style:none}h2+p{margin:0 0 2rem}a{text-decoration:none;color:#007FFF;padding:0 0 .2rem;font-weight:700}a:hover{color:#007FFF}pre{overflow-x:auto;padding:1.25em;border:1px solid #e6e6e6;border-left-width:5px;margin:1.6em 0;font-size:.875em;background:#fcfcfc;white-space:pre;word-wrap:normal}code{color:#007FFF}.layout{display:flex;min-height:100vh;flex-direction:column}.page-nav{box-sizing:border-box;position:fixed;padding:.5rem;width:100%;background:0 0}.page{z-index:0;background:#EEE}.wrap{box-sizing:border-box;max-width:1200px;margin:0 auto}.page-section{padding-top:3rem;margin-bottom:3rem}.page-features{width:100%;background:#001a33;overflow:scroll}.menu-button{position:fixed;top:.75rem;right:.75rem;z-index:1;box-sizing:border-box;padding:.45rem;height:3rem;width:3rem;background:#FFF;border:1px solid transparent;user-select:none}.menu-button:hover{border:1px solid #007FFF;border-radius:2px}.menu-button:active{background:#EEE;border:1px solid transparent}.open{transform:translate3d(-15rem,0,0)}.menu-button-icon{width:2rem;height:2rem}.hero{box-sizing:border-box;padding:2rem;background:#FFF;border:1px solid #FFF;border-radius:2px}.hero-headline{font-size:3rem;white-space:nowrap;margin-bottom:0}.hero-copy{font-size:1rem;margin-bottom:0;padding:0 2rem;text-align:center}.slide-menu{display:block;position:fixed;overflow:auto;top:0;right:0;bottom:0;height:100%;width:250px}.menu{box-sizing:border-box;padding-bottom:5rem;background:#001a33}.menu-header{box-sizing:border-box;padding:3rem 3rem 0;color:#eee}.menu-list{margin:0;padding:0;list-style:none}.menu-list-item{height:3rem;line-height:3rem;font-size:1rem;color:#007FFF;background:0 0;transition:all .2s ease-in}.menu-link{box-sizing:border-box;padding-left:3rem;display:block;color:#007FFF;transition:color .2s ease-in}.menu-link:hover{color:#3298ff;border-bottom:0}.link-top{align-self:flex-end}.button{position:relative;display:inline-block;box-sizing:border-box;min-width:11rem;padding:0 4rem;margin:1rem;height:3rem;line-height:3rem;border:1px solid #007FFF;border-radius:2px;color:#007FFF;font-size:1.25rem;transition:background-color,.15s}.button:hover{background:#39F;border-color:#39F;color:#FFF;text-shadow:0 1px #007FFF}.button:active{background:#007FFF;color:#FFF;border-top:2px solid #06C}.box,.box-first,.box-large,.box-nested,.box-row{position:relative;box-sizing:border-box;min-height:1rem;margin-bottom:0;background:#007FFF;border:1px solid #FFF;border-radius:2px;overflow:hidden;text-align:center;color:#fff}.box-row{margin-bottom:1rem}.box-first{background:#06C;border-color:#007FFF}.box-nested{background:#036;border-color:#007FFF}.box-large{height:8rem}.box-container{box-sizing:border-box;padding:.5rem}.page-footer{box-sizing:border-box;padding-bottom:3rem}.tag{color:#000;font-weight:400}.end{text-align:end}.invisible-xs{display:none;visibility:hidden}.visible-xs{display:block;visibility:visible}@media only screen and (min-width:48rem){body{font-size:16px}.slide-menu{width:25%}.open{transform:translate3d(0,0,0)}.hero-headline{font-size:6rem;margin-bottom:2rem}.hero-copy{font-size:1.25rem;margin-bottom:2rem}.box,.box-first,.box-large,.box-nested,.box-row{padding:1rem}.invisible-md{display:none;visibility:hidden}.visible-md{display:block;visibility:visible}}.container,.container-fluid{margin-right:auto;margin-left:auto}.container-fluid{padding-right:2rem;padding-left:2rem}.row{box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-.5rem;margin-left:-.5rem}.row.reverse{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.col.reverse{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.col-xs,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-offset-1,.col-xs-offset-10,.col-xs-offset-11,.col-xs-offset-12,.col-xs-offset-2,.col-xs-offset-3,.col-xs-offset-4,.col-xs-offset-5,.col-xs-offset-6,.col-xs-offset-7,.col-xs-offset-8,.col-xs-offset-9{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.col-xs{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-xs-1{-webkit-flex-basis:8.333%;-ms-flex-preferred-size:8.333%;flex-basis:8.333%;max-width:8.333%}.col-xs-2{-webkit-flex-basis:16.667%;-ms-flex-preferred-size:16.667%;flex-basis:16.667%;max-width:16.667%}.col-xs-3{-webkit-flex-basis:25%;-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-xs-4{-webkit-flex-basis:33.333%;-ms-flex-preferred-size:33.333%;flex-basis:33.333%;max-width:33.333%}.col-xs-5{-webkit-flex-basis:41.667%;-ms-flex-preferred-size:41.667%;flex-basis:41.667%;max-width:41.667%}.col-xs-6{-webkit-flex-basis:50%;-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-xs-7{-webkit-flex-basis:58.333%;-ms-flex-preferred-size:58.333%;flex-basis:58.333%;max-width:58.333%}.col-xs-8{-webkit-flex-basis:66.667%;-ms-flex-preferred-size:66.667%;flex-basis:66.667%;max-width:66.667%}.col-xs-9{-webkit-flex-basis:75%;-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-xs-10{-webkit-flex-basis:83.333%;-ms-flex-preferred-size:83.333%;flex-basis:83.333%;max-width:83.333%}.col-xs-11{-webkit-flex-basis:91.667%;-ms-flex-preferred-size:91.667%;flex-basis:91.667%;max-width:91.667%}.col-xs-12{-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-xs-offset-1{margin-left:8.333%}.col-xs-offset-2{margin-left:16.667%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-4{margin-left:33.333%}.col-xs-offset-5{margin-left:41.667%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-7{margin-left:58.333%}.col-xs-offset-8{margin-left:66.667%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-10{margin-left:83.333%}.col-xs-offset-11{margin-left:91.667%}.start-xs{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-xs{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-xs{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-xs{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.middle-xs{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.bottom-xs{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}.around-xs{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.between-xs{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.first-xs{-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}.last-xs{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}@media only screen and (min-width:48em){.container{width:49rem}.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-offset-1,.col-sm-offset-10,.col-sm-offset-11,.col-sm-offset-12,.col-sm-offset-2,.col-sm-offset-3,.col-sm-offset-4,.col-sm-offset-5,.col-sm-offset-6,.col-sm-offset-7,.col-sm-offset-8,.col-sm-offset-9{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.col-sm{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-sm-1{-webkit-flex-basis:8.333%;-ms-flex-preferred-size:8.333%;flex-basis:8.333%;max-width:8.333%}.col-sm-2{-webkit-flex-basis:16.667%;-ms-flex-preferred-size:16.667%;flex-basis:16.667%;max-width:16.667%}.col-sm-3{-webkit-flex-basis:25%;-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-sm-4{-webkit-flex-basis:33.333%;-ms-flex-preferred-size:33.333%;flex-basis:33.333%;max-width:33.333%}.col-sm-5{-webkit-flex-basis:41.667%;-ms-flex-preferred-size:41.667%;flex-basis:41.667%;max-width:41.667%}.col-sm-6{-webkit-flex-basis:50%;-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-sm-7{-webkit-flex-basis:58.333%;-ms-flex-preferred-size:58.333%;flex-basis:58.333%;max-width:58.333%}.col-sm-8{-webkit-flex-basis:66.667%;-ms-flex-preferred-size:66.667%;flex-basis:66.667%;max-width:66.667%}.col-sm-9{-webkit-flex-basis:75%;-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-sm-10{-webkit-flex-basis:83.333%;-ms-flex-preferred-size:83.333%;flex-basis:83.333%;max-width:83.333%}.col-sm-11{-webkit-flex-basis:91.667%;-ms-flex-preferred-size:91.667%;flex-basis:91.667%;max-width:91.667%}.col-sm-12{-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-sm-offset-1{margin-left:8.333%}.col-sm-offset-2{margin-left:16.667%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-4{margin-left:33.333%}.col-sm-offset-5{margin-left:41.667%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-7{margin-left:58.333%}.col-sm-offset-8{margin-left:66.667%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-10{margin-left:83.333%}.col-sm-offset-11{margin-left:91.667%}.start-sm{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-sm{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-sm{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-sm{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.middle-sm{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.bottom-sm{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}.around-sm{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.between-sm{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.first-sm{-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}.last-sm{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}}@media only screen and (min-width:64em){.container{width:65rem}.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-offset-1,.col-md-offset-10,.col-md-offset-11,.col-md-offset-12,.col-md-offset-2,.col-md-offset-3,.col-md-offset-4,.col-md-offset-5,.col-md-offset-6,.col-md-offset-7,.col-md-offset-8,.col-md-offset-9{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.col-md{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-md-1{-webkit-flex-basis:8.333%;-ms-flex-preferred-size:8.333%;flex-basis:8.333%;max-width:8.333%}.col-md-2{-webkit-flex-basis:16.667%;-ms-flex-preferred-size:16.667%;flex-basis:16.667%;max-width:16.667%}.col-md-3{-webkit-flex-basis:25%;-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-md-4{-webkit-flex-basis:33.333%;-ms-flex-preferred-size:33.333%;flex-basis:33.333%;max-width:33.333%}.col-md-5{-webkit-flex-basis:41.667%;-ms-flex-preferred-size:41.667%;flex-basis:41.667%;max-width:41.667%}.col-md-6{-webkit-flex-basis:50%;-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-md-7{-webkit-flex-basis:58.333%;-ms-flex-preferred-size:58.333%;flex-basis:58.333%;max-width:58.333%}.col-md-8{-webkit-flex-basis:66.667%;-ms-flex-preferred-size:66.667%;flex-basis:66.667%;max-width:66.667%}.col-md-9{-webkit-flex-basis:75%;-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-md-10{-webkit-flex-basis:83.333%;-ms-flex-preferred-size:83.333%;flex-basis:83.333%;max-width:83.333%}.col-md-11{-webkit-flex-basis:91.667%;-ms-flex-preferred-size:91.667%;flex-basis:91.667%;max-width:91.667%}.col-md-12{-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-md-offset-1{margin-left:8.333%}.col-md-offset-2{margin-left:16.667%}.col-md-offset-3{margin-left:25%}.col-md-offset-4{margin-left:33.333%}.col-md-offset-5{margin-left:41.667%}.col-md-offset-6{margin-left:50%}.col-md-offset-7{margin-left:58.333%}.col-md-offset-8{margin-left:66.667%}.col-md-offset-9{margin-left:75%}.col-md-offset-10{margin-left:83.333%}.col-md-offset-11{margin-left:91.667%}.start-md{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-md{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-md{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-md{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.middle-md{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.bottom-md{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}.around-md{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.between-md{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.first-md{-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}.last-md{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}}@media only screen and (min-width:75em){.container{width:76rem}.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-offset-1,.col-lg-offset-10,.col-lg-offset-11,.col-lg-offset-12,.col-lg-offset-2,.col-lg-offset-3,.col-lg-offset-4,.col-lg-offset-5,.col-lg-offset-6,.col-lg-offset-7,.col-lg-offset-8,.col-lg-offset-9{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.col-lg{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-lg-1{-webkit-flex-basis:8.333%;-ms-flex-preferred-size:8.333%;flex-basis:8.333%;max-width:8.333%}.col-lg-2{-webkit-flex-basis:16.667%;-ms-flex-preferred-size:16.667%;flex-basis:16.667%;max-width:16.667%}.col-lg-3{-webkit-flex-basis:25%;-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-lg-4{-webkit-flex-basis:33.333%;-ms-flex-preferred-size:33.333%;flex-basis:33.333%;max-width:33.333%}.col-lg-5{-webkit-flex-basis:41.667%;-ms-flex-preferred-size:41.667%;flex-basis:41.667%;max-width:41.667%}.col-lg-6{-webkit-flex-basis:50%;-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-lg-7{-webkit-flex-basis:58.333%;-ms-flex-preferred-size:58.333%;flex-basis:58.333%;max-width:58.333%}.col-lg-8{-webkit-flex-basis:66.667%;-ms-flex-preferred-size:66.667%;flex-basis:66.667%;max-width:66.667%}.col-lg-9{-webkit-flex-basis:75%;-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-lg-10{-webkit-flex-basis:83.333%;-ms-flex-preferred-size:83.333%;flex-basis:83.333%;max-width:83.333%}.col-lg-11{-webkit-flex-basis:91.667%;-ms-flex-preferred-size:91.667%;flex-basis:91.667%;max-width:91.667%}.col-lg-12{-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-lg-offset-1{margin-left:8.333%}.col-lg-offset-2{margin-left:16.667%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-4{margin-left:33.333%}.col-lg-offset-5{margin-left:41.667%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-7{margin-left:58.333%}.col-lg-offset-8{margin-left:66.667%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-10{margin-left:83.333%}.col-lg-offset-11{margin-left:91.667%}.start-lg{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-lg{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-lg{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-lg{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.middle-lg{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.bottom-lg{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}.around-lg{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.between-lg{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.first-lg{-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}.last-lg{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}} \ No newline at end of file diff --git a/9781430265023/Examples/chapter9/Chapter 5 revisited/css/index.min.css b/9781430265023/Examples/chapter9/Chapter 5 revisited/css/index.min.css new file mode 100644 index 0000000..af8c20d --- /dev/null +++ b/9781430265023/Examples/chapter9/Chapter 5 revisited/css/index.min.css @@ -0,0 +1 @@ +/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}a{background:0 0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}body{box-sizing:border-box;padding:0;margin:0;font-size:18px;font-family:HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-weight:400;background:#EEE;line-height:1.4rem}h1,h2,h3,h4,h5,h6{font-family:Gibson,HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;color:#001A33}h2{font-size:2rem;margin:1rem 0}:focus{outline-color:transparent;outline-style:none}h2+p{margin:0 0 2rem}a{text-decoration:none;color:#007FFF;padding:0 0 .2rem;font-weight:700}a:hover{color:#007FFF}pre{overflow-x:auto;padding:1.25em;border:1px solid #e6e6e6;border-left-width:5px;margin:1.6em 0;font-size:.875em;background:#fcfcfc;white-space:pre;word-wrap:normal}code{color:#007FFF}.layout{display:flex;min-height:100vh;flex-direction:column}.page-nav{box-sizing:border-box;position:fixed;padding:.5rem;width:100%;background:0 0}.page{z-index:0;background:#EEE}.wrap{box-sizing:border-box;max-width:1200px;margin:0 auto}.page-section{padding-top:3rem;margin-bottom:3rem}.page-features{width:100%;background:#001a33;overflow:scroll}.menu-button{position:fixed;top:.75rem;right:.75rem;z-index:1;box-sizing:border-box;padding:.45rem;height:3rem;width:3rem;background:#FFF;border:1px solid transparent;user-select:none}.menu-button:hover{border:1px solid #007FFF;border-radius:2px}.menu-button:active{background:#EEE;border:1px solid transparent}.open{transform:translate3d(-15rem,0,0)}.menu-button-icon{width:2rem;height:2rem}.hero{box-sizing:border-box;padding:2rem;background:#FFF;border:1px solid #FFF;border-radius:2px}.hero-headline{font-size:3rem;white-space:nowrap;margin-bottom:0}.hero-copy{font-size:1rem;margin-bottom:0;padding:0 2rem;text-align:center}.slide-menu{display:block;position:fixed;overflow:auto;top:0;right:0;bottom:0;height:100%;width:250px}.menu{box-sizing:border-box;padding-bottom:5rem;background:#001a33}.menu-header{box-sizing:border-box;padding:3rem 3rem 0;color:#eee}.menu-list{margin:0;padding:0;list-style:none}.menu-list-item{height:3rem;line-height:3rem;font-size:1rem;color:#007FFF;background:0 0;transition:all .2s ease-in}.menu-link{box-sizing:border-box;padding-left:3rem;display:block;color:#007FFF;transition:color .2s ease-in}.menu-link:hover{color:#3298ff;border-bottom:0}.link-top{align-self:flex-end}.button{position:relative;display:inline-block;box-sizing:border-box;min-width:11rem;padding:0 4rem;margin:1rem;height:3rem;line-height:3rem;border:1px solid #007FFF;border-radius:2px;color:#007FFF;font-size:1.25rem;transition:background-color,.15s}.button:hover{background:#39F;border-color:#39F;color:#FFF;text-shadow:0 1px #007FFF}.button:active{background:#007FFF;color:#FFF;border-top:2px solid #06C}.box,.box-first,.box-large,.box-nested,.box-row{position:relative;box-sizing:border-box;min-height:1rem;margin-bottom:0;background:#007FFF;border:1px solid #FFF;border-radius:2px;overflow:hidden;text-align:center;color:#fff}.box-row{margin-bottom:1rem}.box-first{background:#06C;border-color:#007FFF}.box-nested{background:#036;border-color:#007FFF}.box-large{height:8rem}.box-container{box-sizing:border-box;padding:.5rem}.page-footer{box-sizing:border-box;padding-bottom:3rem}.tag{color:#000;font-weight:400}.end{text-align:end}.invisible-xs{display:none;visibility:hidden}.visible-xs{display:block;visibility:visible}@media only screen and (min-width:48rem){body{font-size:16px}.slide-menu{width:25%}.open{transform:translate3d(0,0,0)}.hero-headline{font-size:6rem;margin-bottom:2rem}.hero-copy{font-size:1.25rem;margin-bottom:2rem}.box,.box-first,.box-large,.box-nested,.box-row{padding:1rem}.invisible-md{display:none;visibility:hidden}.visible-md{display:block;visibility:visible}}.container,.container-fluid{margin-right:auto;margin-left:auto}.container-fluid{padding-right:2rem;padding-left:2rem}.row{box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-.5rem;margin-left:-.5rem}.row.reverse{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.col.reverse{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.col-xs,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-offset-1,.col-xs-offset-10,.col-xs-offset-11,.col-xs-offset-12,.col-xs-offset-2,.col-xs-offset-3,.col-xs-offset-4,.col-xs-offset-5,.col-xs-offset-6,.col-xs-offset-7,.col-xs-offset-8,.col-xs-offset-9{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.col-xs{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-xs-1{-webkit-flex-basis:8.333%;-ms-flex-preferred-size:8.333%;flex-basis:8.333%;max-width:8.333%}.col-xs-2{-webkit-flex-basis:16.667%;-ms-flex-preferred-size:16.667%;flex-basis:16.667%;max-width:16.667%}.col-xs-3{-webkit-flex-basis:25%;-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-xs-4{-webkit-flex-basis:33.333%;-ms-flex-preferred-size:33.333%;flex-basis:33.333%;max-width:33.333%}.col-xs-5{-webkit-flex-basis:41.667%;-ms-flex-preferred-size:41.667%;flex-basis:41.667%;max-width:41.667%}.col-xs-6{-webkit-flex-basis:50%;-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-xs-7{-webkit-flex-basis:58.333%;-ms-flex-preferred-size:58.333%;flex-basis:58.333%;max-width:58.333%}.col-xs-8{-webkit-flex-basis:66.667%;-ms-flex-preferred-size:66.667%;flex-basis:66.667%;max-width:66.667%}.col-xs-9{-webkit-flex-basis:75%;-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-xs-10{-webkit-flex-basis:83.333%;-ms-flex-preferred-size:83.333%;flex-basis:83.333%;max-width:83.333%}.col-xs-11{-webkit-flex-basis:91.667%;-ms-flex-preferred-size:91.667%;flex-basis:91.667%;max-width:91.667%}.col-xs-12{-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-xs-offset-1{margin-left:8.333%}.col-xs-offset-2{margin-left:16.667%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-4{margin-left:33.333%}.col-xs-offset-5{margin-left:41.667%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-7{margin-left:58.333%}.col-xs-offset-8{margin-left:66.667%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-10{margin-left:83.333%}.col-xs-offset-11{margin-left:91.667%}.start-xs{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-xs{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-xs{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-xs{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.middle-xs{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.bottom-xs{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}.around-xs{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.between-xs{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.first-xs{-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}.last-xs{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}@media only screen and (min-width:48em){.container{width:49rem}.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-offset-1,.col-sm-offset-10,.col-sm-offset-11,.col-sm-offset-12,.col-sm-offset-2,.col-sm-offset-3,.col-sm-offset-4,.col-sm-offset-5,.col-sm-offset-6,.col-sm-offset-7,.col-sm-offset-8,.col-sm-offset-9{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.col-sm{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-sm-1{-webkit-flex-basis:8.333%;-ms-flex-preferred-size:8.333%;flex-basis:8.333%;max-width:8.333%}.col-sm-2{-webkit-flex-basis:16.667%;-ms-flex-preferred-size:16.667%;flex-basis:16.667%;max-width:16.667%}.col-sm-3{-webkit-flex-basis:25%;-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-sm-4{-webkit-flex-basis:33.333%;-ms-flex-preferred-size:33.333%;flex-basis:33.333%;max-width:33.333%}.col-sm-5{-webkit-flex-basis:41.667%;-ms-flex-preferred-size:41.667%;flex-basis:41.667%;max-width:41.667%}.col-sm-6{-webkit-flex-basis:50%;-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-sm-7{-webkit-flex-basis:58.333%;-ms-flex-preferred-size:58.333%;flex-basis:58.333%;max-width:58.333%}.col-sm-8{-webkit-flex-basis:66.667%;-ms-flex-preferred-size:66.667%;flex-basis:66.667%;max-width:66.667%}.col-sm-9{-webkit-flex-basis:75%;-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-sm-10{-webkit-flex-basis:83.333%;-ms-flex-preferred-size:83.333%;flex-basis:83.333%;max-width:83.333%}.col-sm-11{-webkit-flex-basis:91.667%;-ms-flex-preferred-size:91.667%;flex-basis:91.667%;max-width:91.667%}.col-sm-12{-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-sm-offset-1{margin-left:8.333%}.col-sm-offset-2{margin-left:16.667%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-4{margin-left:33.333%}.col-sm-offset-5{margin-left:41.667%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-7{margin-left:58.333%}.col-sm-offset-8{margin-left:66.667%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-10{margin-left:83.333%}.col-sm-offset-11{margin-left:91.667%}.start-sm{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-sm{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-sm{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-sm{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.middle-sm{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.bottom-sm{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}.around-sm{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.between-sm{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.first-sm{-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}.last-sm{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}}@media only screen and (min-width:64em){.container{width:65rem}.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-offset-1,.col-md-offset-10,.col-md-offset-11,.col-md-offset-12,.col-md-offset-2,.col-md-offset-3,.col-md-offset-4,.col-md-offset-5,.col-md-offset-6,.col-md-offset-7,.col-md-offset-8,.col-md-offset-9{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.col-md{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-md-1{-webkit-flex-basis:8.333%;-ms-flex-preferred-size:8.333%;flex-basis:8.333%;max-width:8.333%}.col-md-2{-webkit-flex-basis:16.667%;-ms-flex-preferred-size:16.667%;flex-basis:16.667%;max-width:16.667%}.col-md-3{-webkit-flex-basis:25%;-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-md-4{-webkit-flex-basis:33.333%;-ms-flex-preferred-size:33.333%;flex-basis:33.333%;max-width:33.333%}.col-md-5{-webkit-flex-basis:41.667%;-ms-flex-preferred-size:41.667%;flex-basis:41.667%;max-width:41.667%}.col-md-6{-webkit-flex-basis:50%;-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-md-7{-webkit-flex-basis:58.333%;-ms-flex-preferred-size:58.333%;flex-basis:58.333%;max-width:58.333%}.col-md-8{-webkit-flex-basis:66.667%;-ms-flex-preferred-size:66.667%;flex-basis:66.667%;max-width:66.667%}.col-md-9{-webkit-flex-basis:75%;-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-md-10{-webkit-flex-basis:83.333%;-ms-flex-preferred-size:83.333%;flex-basis:83.333%;max-width:83.333%}.col-md-11{-webkit-flex-basis:91.667%;-ms-flex-preferred-size:91.667%;flex-basis:91.667%;max-width:91.667%}.col-md-12{-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-md-offset-1{margin-left:8.333%}.col-md-offset-2{margin-left:16.667%}.col-md-offset-3{margin-left:25%}.col-md-offset-4{margin-left:33.333%}.col-md-offset-5{margin-left:41.667%}.col-md-offset-6{margin-left:50%}.col-md-offset-7{margin-left:58.333%}.col-md-offset-8{margin-left:66.667%}.col-md-offset-9{margin-left:75%}.col-md-offset-10{margin-left:83.333%}.col-md-offset-11{margin-left:91.667%}.start-md{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-md{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-md{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-md{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.middle-md{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.bottom-md{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}.around-md{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.between-md{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.first-md{-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}.last-md{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}}@media only screen and (min-width:75em){.container{width:76rem}.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-offset-1,.col-lg-offset-10,.col-lg-offset-11,.col-lg-offset-12,.col-lg-offset-2,.col-lg-offset-3,.col-lg-offset-4,.col-lg-offset-5,.col-lg-offset-6,.col-lg-offset-7,.col-lg-offset-8,.col-lg-offset-9{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.col-lg{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-lg-1{-webkit-flex-basis:8.333%;-ms-flex-preferred-size:8.333%;flex-basis:8.333%;max-width:8.333%}.col-lg-2{-webkit-flex-basis:16.667%;-ms-flex-preferred-size:16.667%;flex-basis:16.667%;max-width:16.667%}.col-lg-3{-webkit-flex-basis:25%;-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-lg-4{-webkit-flex-basis:33.333%;-ms-flex-preferred-size:33.333%;flex-basis:33.333%;max-width:33.333%}.col-lg-5{-webkit-flex-basis:41.667%;-ms-flex-preferred-size:41.667%;flex-basis:41.667%;max-width:41.667%}.col-lg-6{-webkit-flex-basis:50%;-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-lg-7{-webkit-flex-basis:58.333%;-ms-flex-preferred-size:58.333%;flex-basis:58.333%;max-width:58.333%}.col-lg-8{-webkit-flex-basis:66.667%;-ms-flex-preferred-size:66.667%;flex-basis:66.667%;max-width:66.667%}.col-lg-9{-webkit-flex-basis:75%;-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-lg-10{-webkit-flex-basis:83.333%;-ms-flex-preferred-size:83.333%;flex-basis:83.333%;max-width:83.333%}.col-lg-11{-webkit-flex-basis:91.667%;-ms-flex-preferred-size:91.667%;flex-basis:91.667%;max-width:91.667%}.col-lg-12{-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-lg-offset-1{margin-left:8.333%}.col-lg-offset-2{margin-left:16.667%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-4{margin-left:33.333%}.col-lg-offset-5{margin-left:41.667%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-7{margin-left:58.333%}.col-lg-offset-8{margin-left:66.667%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-10{margin-left:83.333%}.col-lg-offset-11{margin-left:91.667%}.start-lg{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-lg{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-lg{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-lg{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.middle-lg{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.bottom-lg{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}.around-lg{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.between-lg{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.first-lg{-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}.last-lg{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}} \ No newline at end of file diff --git a/9781430265023/Examples/chapter9/Chapter 5 revisited/design/flexboxgrid-template.sketch b/9781430265023/Examples/chapter9/Chapter 5 revisited/design/flexboxgrid-template.sketch new file mode 100644 index 0000000..cc144e8 Binary files /dev/null and b/9781430265023/Examples/chapter9/Chapter 5 revisited/design/flexboxgrid-template.sketch differ diff --git a/9781430265023/Examples/chapter9/Chapter 5 revisited/dist/flexboxgrid.css b/9781430265023/Examples/chapter9/Chapter 5 revisited/dist/flexboxgrid.css new file mode 100644 index 0000000..56d22e8 --- /dev/null +++ b/9781430265023/Examples/chapter9/Chapter 5 revisited/dist/flexboxgrid.css @@ -0,0 +1,1046 @@ +.container-fluid, +.container { + margin-right: auto; + margin-left: auto; +} + +.container-fluid { + padding-right: 2rem; + padding-left: 2rem; +} + +.row { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 0; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +.row.reverse { + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; +} + +.col.reverse { + -webkit-box-orient: vertical; + -webkit-box-direction: reverse; + -webkit-flex-direction: column-reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; +} + +.col-xs, +.col-xs-1, +.col-xs-2, +.col-xs-3, +.col-xs-4, +.col-xs-5, +.col-xs-6, +.col-xs-7, +.col-xs-8, +.col-xs-9, +.col-xs-10, +.col-xs-11, +.col-xs-12, +.col-xs-offset-1, +.col-xs-offset-2, +.col-xs-offset-3, +.col-xs-offset-4, +.col-xs-offset-5, +.col-xs-offset-6, +.col-xs-offset-7, +.col-xs-offset-8, +.col-xs-offset-9, +.col-xs-offset-10, +.col-xs-offset-11, +.col-xs-offset-12 { + box-sizing: border-box; + -webkit-box-flex: 0; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} + +.col-xs { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -webkit-flex-basis: 0; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100%; +} + +.col-xs-1 { + -webkit-flex-basis: 8.333%; + -ms-flex-preferred-size: 8.333%; + flex-basis: 8.333%; + max-width: 8.333%; +} + +.col-xs-2 { + -webkit-flex-basis: 16.667%; + -ms-flex-preferred-size: 16.667%; + flex-basis: 16.667%; + max-width: 16.667%; +} + +.col-xs-3 { + -webkit-flex-basis: 25%; + -ms-flex-preferred-size: 25%; + flex-basis: 25%; + max-width: 25%; +} + +.col-xs-4 { + -webkit-flex-basis: 33.333%; + -ms-flex-preferred-size: 33.333%; + flex-basis: 33.333%; + max-width: 33.333%; +} + +.col-xs-5 { + -webkit-flex-basis: 41.667%; + -ms-flex-preferred-size: 41.667%; + flex-basis: 41.667%; + max-width: 41.667%; +} + +.col-xs-6 { + -webkit-flex-basis: 50%; + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + max-width: 50%; +} + +.col-xs-7 { + -webkit-flex-basis: 58.333%; + -ms-flex-preferred-size: 58.333%; + flex-basis: 58.333%; + max-width: 58.333%; +} + +.col-xs-8 { + -webkit-flex-basis: 66.667%; + -ms-flex-preferred-size: 66.667%; + flex-basis: 66.667%; + max-width: 66.667%; +} + +.col-xs-9 { + -webkit-flex-basis: 75%; + -ms-flex-preferred-size: 75%; + flex-basis: 75%; + max-width: 75%; +} + +.col-xs-10 { + -webkit-flex-basis: 83.333%; + -ms-flex-preferred-size: 83.333%; + flex-basis: 83.333%; + max-width: 83.333%; +} + +.col-xs-11 { + -webkit-flex-basis: 91.667%; + -ms-flex-preferred-size: 91.667%; + flex-basis: 91.667%; + max-width: 91.667%; +} + +.col-xs-12 { + -webkit-flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; +} + +.col-xs-offset-1 { + margin-left: 8.333%; +} + +.col-xs-offset-2 { + margin-left: 16.667%; +} + +.col-xs-offset-3 { + margin-left: 25%; +} + +.col-xs-offset-4 { + margin-left: 33.333%; +} + +.col-xs-offset-5 { + margin-left: 41.667%; +} + +.col-xs-offset-6 { + margin-left: 50%; +} + +.col-xs-offset-7 { + margin-left: 58.333%; +} + +.col-xs-offset-8 { + margin-left: 66.667%; +} + +.col-xs-offset-9 { + margin-left: 75%; +} + +.col-xs-offset-10 { + margin-left: 83.333%; +} + +.col-xs-offset-11 { + margin-left: 91.667%; +} + +.start-xs { + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + text-align: start; +} + +.center-xs { + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + text-align: center; +} + +.end-xs { + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; + text-align: end; +} + +.top-xs { + -webkit-box-align: start; + -webkit-align-items: flex-start; + -ms-flex-align: start; + align-items: flex-start; +} + +.middle-xs { + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; +} + +.bottom-xs { + -webkit-box-align: end; + -webkit-align-items: flex-end; + -ms-flex-align: end; + align-items: flex-end; +} + +.around-xs { + -webkit-justify-content: space-around; + -ms-flex-pack: distribute; + justify-content: space-around; +} + +.between-xs { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.first-xs { + -webkit-box-ordinal-group: 0; + -webkit-order: -1; + -ms-flex-order: -1; + order: -1; +} + +.last-xs { + -webkit-box-ordinal-group: 2; + -webkit-order: 1; + -ms-flex-order: 1; + order: 1; +} + +@media only screen and (min-width: 48em) { + .container { + width: 49rem; + } + + .col-sm, + .col-sm-1, + .col-sm-2, + .col-sm-3, + .col-sm-4, + .col-sm-5, + .col-sm-6, + .col-sm-7, + .col-sm-8, + .col-sm-9, + .col-sm-10, + .col-sm-11, + .col-sm-12, + .col-sm-offset-1, + .col-sm-offset-2, + .col-sm-offset-3, + .col-sm-offset-4, + .col-sm-offset-5, + .col-sm-offset-6, + .col-sm-offset-7, + .col-sm-offset-8, + .col-sm-offset-9, + .col-sm-offset-10, + .col-sm-offset-11, + .col-sm-offset-12 { + box-sizing: border-box; + -webkit-box-flex: 0; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + } + + .col-sm { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -webkit-flex-basis: 0; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100%; + } + + .col-sm-1 { + -webkit-flex-basis: 8.333%; + -ms-flex-preferred-size: 8.333%; + flex-basis: 8.333%; + max-width: 8.333%; + } + + .col-sm-2 { + -webkit-flex-basis: 16.667%; + -ms-flex-preferred-size: 16.667%; + flex-basis: 16.667%; + max-width: 16.667%; + } + + .col-sm-3 { + -webkit-flex-basis: 25%; + -ms-flex-preferred-size: 25%; + flex-basis: 25%; + max-width: 25%; + } + + .col-sm-4 { + -webkit-flex-basis: 33.333%; + -ms-flex-preferred-size: 33.333%; + flex-basis: 33.333%; + max-width: 33.333%; + } + + .col-sm-5 { + -webkit-flex-basis: 41.667%; + -ms-flex-preferred-size: 41.667%; + flex-basis: 41.667%; + max-width: 41.667%; + } + + .col-sm-6 { + -webkit-flex-basis: 50%; + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + max-width: 50%; + } + + .col-sm-7 { + -webkit-flex-basis: 58.333%; + -ms-flex-preferred-size: 58.333%; + flex-basis: 58.333%; + max-width: 58.333%; + } + + .col-sm-8 { + -webkit-flex-basis: 66.667%; + -ms-flex-preferred-size: 66.667%; + flex-basis: 66.667%; + max-width: 66.667%; + } + + .col-sm-9 { + -webkit-flex-basis: 75%; + -ms-flex-preferred-size: 75%; + flex-basis: 75%; + max-width: 75%; + } + + .col-sm-10 { + -webkit-flex-basis: 83.333%; + -ms-flex-preferred-size: 83.333%; + flex-basis: 83.333%; + max-width: 83.333%; + } + + .col-sm-11 { + -webkit-flex-basis: 91.667%; + -ms-flex-preferred-size: 91.667%; + flex-basis: 91.667%; + max-width: 91.667%; + } + + .col-sm-12 { + -webkit-flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; + } + + .col-sm-offset-1 { + margin-left: 8.333%; + } + + .col-sm-offset-2 { + margin-left: 16.667%; + } + + .col-sm-offset-3 { + margin-left: 25%; + } + + .col-sm-offset-4 { + margin-left: 33.333%; + } + + .col-sm-offset-5 { + margin-left: 41.667%; + } + + .col-sm-offset-6 { + margin-left: 50%; + } + + .col-sm-offset-7 { + margin-left: 58.333%; + } + + .col-sm-offset-8 { + margin-left: 66.667%; + } + + .col-sm-offset-9 { + margin-left: 75%; + } + + .col-sm-offset-10 { + margin-left: 83.333%; + } + + .col-sm-offset-11 { + margin-left: 91.667%; + } + + .start-sm { + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + text-align: start; + } + + .center-sm { + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + text-align: center; + } + + .end-sm { + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; + text-align: end; + } + + .top-sm { + -webkit-box-align: start; + -webkit-align-items: flex-start; + -ms-flex-align: start; + align-items: flex-start; + } + + .middle-sm { + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + } + + .bottom-sm { + -webkit-box-align: end; + -webkit-align-items: flex-end; + -ms-flex-align: end; + align-items: flex-end; + } + + .around-sm { + -webkit-justify-content: space-around; + -ms-flex-pack: distribute; + justify-content: space-around; + } + + .between-sm { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + } + + .first-sm { + -webkit-box-ordinal-group: 0; + -webkit-order: -1; + -ms-flex-order: -1; + order: -1; + } + + .last-sm { + -webkit-box-ordinal-group: 2; + -webkit-order: 1; + -ms-flex-order: 1; + order: 1; + } +} + +@media only screen and (min-width: 64em) { + .container { + width: 65rem; + } + + .col-md, + .col-md-1, + .col-md-2, + .col-md-3, + .col-md-4, + .col-md-5, + .col-md-6, + .col-md-7, + .col-md-8, + .col-md-9, + .col-md-10, + .col-md-11, + .col-md-12, + .col-md-offset-1, + .col-md-offset-2, + .col-md-offset-3, + .col-md-offset-4, + .col-md-offset-5, + .col-md-offset-6, + .col-md-offset-7, + .col-md-offset-8, + .col-md-offset-9, + .col-md-offset-10, + .col-md-offset-11, + .col-md-offset-12 { + box-sizing: border-box; + -webkit-box-flex: 0; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + } + + .col-md { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -webkit-flex-basis: 0; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100%; + } + + .col-md-1 { + -webkit-flex-basis: 8.333%; + -ms-flex-preferred-size: 8.333%; + flex-basis: 8.333%; + max-width: 8.333%; + } + + .col-md-2 { + -webkit-flex-basis: 16.667%; + -ms-flex-preferred-size: 16.667%; + flex-basis: 16.667%; + max-width: 16.667%; + } + + .col-md-3 { + -webkit-flex-basis: 25%; + -ms-flex-preferred-size: 25%; + flex-basis: 25%; + max-width: 25%; + } + + .col-md-4 { + -webkit-flex-basis: 33.333%; + -ms-flex-preferred-size: 33.333%; + flex-basis: 33.333%; + max-width: 33.333%; + } + + .col-md-5 { + -webkit-flex-basis: 41.667%; + -ms-flex-preferred-size: 41.667%; + flex-basis: 41.667%; + max-width: 41.667%; + } + + .col-md-6 { + -webkit-flex-basis: 50%; + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + max-width: 50%; + } + + .col-md-7 { + -webkit-flex-basis: 58.333%; + -ms-flex-preferred-size: 58.333%; + flex-basis: 58.333%; + max-width: 58.333%; + } + + .col-md-8 { + -webkit-flex-basis: 66.667%; + -ms-flex-preferred-size: 66.667%; + flex-basis: 66.667%; + max-width: 66.667%; + } + + .col-md-9 { + -webkit-flex-basis: 75%; + -ms-flex-preferred-size: 75%; + flex-basis: 75%; + max-width: 75%; + } + + .col-md-10 { + -webkit-flex-basis: 83.333%; + -ms-flex-preferred-size: 83.333%; + flex-basis: 83.333%; + max-width: 83.333%; + } + + .col-md-11 { + -webkit-flex-basis: 91.667%; + -ms-flex-preferred-size: 91.667%; + flex-basis: 91.667%; + max-width: 91.667%; + } + + .col-md-12 { + -webkit-flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; + } + + .col-md-offset-1 { + margin-left: 8.333%; + } + + .col-md-offset-2 { + margin-left: 16.667%; + } + + .col-md-offset-3 { + margin-left: 25%; + } + + .col-md-offset-4 { + margin-left: 33.333%; + } + + .col-md-offset-5 { + margin-left: 41.667%; + } + + .col-md-offset-6 { + margin-left: 50%; + } + + .col-md-offset-7 { + margin-left: 58.333%; + } + + .col-md-offset-8 { + margin-left: 66.667%; + } + + .col-md-offset-9 { + margin-left: 75%; + } + + .col-md-offset-10 { + margin-left: 83.333%; + } + + .col-md-offset-11 { + margin-left: 91.667%; + } + + .start-md { + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + text-align: start; + } + + .center-md { + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + text-align: center; + } + + .end-md { + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; + text-align: end; + } + + .top-md { + -webkit-box-align: start; + -webkit-align-items: flex-start; + -ms-flex-align: start; + align-items: flex-start; + } + + .middle-md { + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + } + + .bottom-md { + -webkit-box-align: end; + -webkit-align-items: flex-end; + -ms-flex-align: end; + align-items: flex-end; + } + + .around-md { + -webkit-justify-content: space-around; + -ms-flex-pack: distribute; + justify-content: space-around; + } + + .between-md { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + } + + .first-md { + -webkit-box-ordinal-group: 0; + -webkit-order: -1; + -ms-flex-order: -1; + order: -1; + } + + .last-md { + -webkit-box-ordinal-group: 2; + -webkit-order: 1; + -ms-flex-order: 1; + order: 1; + } +} + +@media only screen and (min-width: 75em) { + .container { + width: 76rem; + } + + .col-lg, + .col-lg-1, + .col-lg-2, + .col-lg-3, + .col-lg-4, + .col-lg-5, + .col-lg-6, + .col-lg-7, + .col-lg-8, + .col-lg-9, + .col-lg-10, + .col-lg-11, + .col-lg-12, + .col-lg-offset-1, + .col-lg-offset-2, + .col-lg-offset-3, + .col-lg-offset-4, + .col-lg-offset-5, + .col-lg-offset-6, + .col-lg-offset-7, + .col-lg-offset-8, + .col-lg-offset-9, + .col-lg-offset-10, + .col-lg-offset-11, + .col-lg-offset-12 { + box-sizing: border-box; + -webkit-box-flex: 0; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; + } + + .col-lg { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -webkit-flex-basis: 0; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100%; + } + + .col-lg-1 { + -webkit-flex-basis: 8.333%; + -ms-flex-preferred-size: 8.333%; + flex-basis: 8.333%; + max-width: 8.333%; + } + + .col-lg-2 { + -webkit-flex-basis: 16.667%; + -ms-flex-preferred-size: 16.667%; + flex-basis: 16.667%; + max-width: 16.667%; + } + + .col-lg-3 { + -webkit-flex-basis: 25%; + -ms-flex-preferred-size: 25%; + flex-basis: 25%; + max-width: 25%; + } + + .col-lg-4 { + -webkit-flex-basis: 33.333%; + -ms-flex-preferred-size: 33.333%; + flex-basis: 33.333%; + max-width: 33.333%; + } + + .col-lg-5 { + -webkit-flex-basis: 41.667%; + -ms-flex-preferred-size: 41.667%; + flex-basis: 41.667%; + max-width: 41.667%; + } + + .col-lg-6 { + -webkit-flex-basis: 50%; + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + max-width: 50%; + } + + .col-lg-7 { + -webkit-flex-basis: 58.333%; + -ms-flex-preferred-size: 58.333%; + flex-basis: 58.333%; + max-width: 58.333%; + } + + .col-lg-8 { + -webkit-flex-basis: 66.667%; + -ms-flex-preferred-size: 66.667%; + flex-basis: 66.667%; + max-width: 66.667%; + } + + .col-lg-9 { + -webkit-flex-basis: 75%; + -ms-flex-preferred-size: 75%; + flex-basis: 75%; + max-width: 75%; + } + + .col-lg-10 { + -webkit-flex-basis: 83.333%; + -ms-flex-preferred-size: 83.333%; + flex-basis: 83.333%; + max-width: 83.333%; + } + + .col-lg-11 { + -webkit-flex-basis: 91.667%; + -ms-flex-preferred-size: 91.667%; + flex-basis: 91.667%; + max-width: 91.667%; + } + + .col-lg-12 { + -webkit-flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + max-width: 100%; + } + + .col-lg-offset-1 { + margin-left: 8.333%; + } + + .col-lg-offset-2 { + margin-left: 16.667%; + } + + .col-lg-offset-3 { + margin-left: 25%; + } + + .col-lg-offset-4 { + margin-left: 33.333%; + } + + .col-lg-offset-5 { + margin-left: 41.667%; + } + + .col-lg-offset-6 { + margin-left: 50%; + } + + .col-lg-offset-7 { + margin-left: 58.333%; + } + + .col-lg-offset-8 { + margin-left: 66.667%; + } + + .col-lg-offset-9 { + margin-left: 75%; + } + + .col-lg-offset-10 { + margin-left: 83.333%; + } + + .col-lg-offset-11 { + margin-left: 91.667%; + } + + .start-lg { + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + text-align: start; + } + + .center-lg { + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + text-align: center; + } + + .end-lg { + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; + text-align: end; + } + + .top-lg { + -webkit-box-align: start; + -webkit-align-items: flex-start; + -ms-flex-align: start; + align-items: flex-start; + } + + .middle-lg { + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + } + + .bottom-lg { + -webkit-box-align: end; + -webkit-align-items: flex-end; + -ms-flex-align: end; + align-items: flex-end; + } + + .around-lg { + -webkit-justify-content: space-around; + -ms-flex-pack: distribute; + justify-content: space-around; + } + + .between-lg { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + } + + .first-lg { + -webkit-box-ordinal-group: 0; + -webkit-order: -1; + -ms-flex-order: -1; + order: -1; + } + + .last-lg { + -webkit-box-ordinal-group: 2; + -webkit-order: 1; + -ms-flex-order: 1; + order: 1; + } +} \ No newline at end of file diff --git a/9781430265023/Examples/chapter9/Chapter 5 revisited/dist/flexboxgrid.min.css b/9781430265023/Examples/chapter9/Chapter 5 revisited/dist/flexboxgrid.min.css new file mode 100644 index 0000000..88b63f5 --- /dev/null +++ b/9781430265023/Examples/chapter9/Chapter 5 revisited/dist/flexboxgrid.min.css @@ -0,0 +1 @@ +.container,.container-fluid{margin-right:auto;margin-left:auto}.container-fluid{padding-right:2rem;padding-left:2rem}.row{box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-.5rem;margin-left:-.5rem}.row.reverse{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.col.reverse{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.col-xs,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-offset-1,.col-xs-offset-10,.col-xs-offset-11,.col-xs-offset-12,.col-xs-offset-2,.col-xs-offset-3,.col-xs-offset-4,.col-xs-offset-5,.col-xs-offset-6,.col-xs-offset-7,.col-xs-offset-8,.col-xs-offset-9{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.col-xs{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-xs-1{-webkit-flex-basis:8.333%;-ms-flex-preferred-size:8.333%;flex-basis:8.333%;max-width:8.333%}.col-xs-2{-webkit-flex-basis:16.667%;-ms-flex-preferred-size:16.667%;flex-basis:16.667%;max-width:16.667%}.col-xs-3{-webkit-flex-basis:25%;-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-xs-4{-webkit-flex-basis:33.333%;-ms-flex-preferred-size:33.333%;flex-basis:33.333%;max-width:33.333%}.col-xs-5{-webkit-flex-basis:41.667%;-ms-flex-preferred-size:41.667%;flex-basis:41.667%;max-width:41.667%}.col-xs-6{-webkit-flex-basis:50%;-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-xs-7{-webkit-flex-basis:58.333%;-ms-flex-preferred-size:58.333%;flex-basis:58.333%;max-width:58.333%}.col-xs-8{-webkit-flex-basis:66.667%;-ms-flex-preferred-size:66.667%;flex-basis:66.667%;max-width:66.667%}.col-xs-9{-webkit-flex-basis:75%;-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-xs-10{-webkit-flex-basis:83.333%;-ms-flex-preferred-size:83.333%;flex-basis:83.333%;max-width:83.333%}.col-xs-11{-webkit-flex-basis:91.667%;-ms-flex-preferred-size:91.667%;flex-basis:91.667%;max-width:91.667%}.col-xs-12{-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-xs-offset-1{margin-left:8.333%}.col-xs-offset-2{margin-left:16.667%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-4{margin-left:33.333%}.col-xs-offset-5{margin-left:41.667%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-7{margin-left:58.333%}.col-xs-offset-8{margin-left:66.667%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-10{margin-left:83.333%}.col-xs-offset-11{margin-left:91.667%}.start-xs{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-xs{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-xs{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-xs{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.middle-xs{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.bottom-xs{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}.around-xs{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.between-xs{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.first-xs{-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}.last-xs{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}@media only screen and (min-width:48em){.container{width:49rem}.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-offset-1,.col-sm-offset-10,.col-sm-offset-11,.col-sm-offset-12,.col-sm-offset-2,.col-sm-offset-3,.col-sm-offset-4,.col-sm-offset-5,.col-sm-offset-6,.col-sm-offset-7,.col-sm-offset-8,.col-sm-offset-9{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.col-sm{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-sm-1{-webkit-flex-basis:8.333%;-ms-flex-preferred-size:8.333%;flex-basis:8.333%;max-width:8.333%}.col-sm-2{-webkit-flex-basis:16.667%;-ms-flex-preferred-size:16.667%;flex-basis:16.667%;max-width:16.667%}.col-sm-3{-webkit-flex-basis:25%;-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-sm-4{-webkit-flex-basis:33.333%;-ms-flex-preferred-size:33.333%;flex-basis:33.333%;max-width:33.333%}.col-sm-5{-webkit-flex-basis:41.667%;-ms-flex-preferred-size:41.667%;flex-basis:41.667%;max-width:41.667%}.col-sm-6{-webkit-flex-basis:50%;-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-sm-7{-webkit-flex-basis:58.333%;-ms-flex-preferred-size:58.333%;flex-basis:58.333%;max-width:58.333%}.col-sm-8{-webkit-flex-basis:66.667%;-ms-flex-preferred-size:66.667%;flex-basis:66.667%;max-width:66.667%}.col-sm-9{-webkit-flex-basis:75%;-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-sm-10{-webkit-flex-basis:83.333%;-ms-flex-preferred-size:83.333%;flex-basis:83.333%;max-width:83.333%}.col-sm-11{-webkit-flex-basis:91.667%;-ms-flex-preferred-size:91.667%;flex-basis:91.667%;max-width:91.667%}.col-sm-12{-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-sm-offset-1{margin-left:8.333%}.col-sm-offset-2{margin-left:16.667%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-4{margin-left:33.333%}.col-sm-offset-5{margin-left:41.667%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-7{margin-left:58.333%}.col-sm-offset-8{margin-left:66.667%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-10{margin-left:83.333%}.col-sm-offset-11{margin-left:91.667%}.start-sm{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-sm{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-sm{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-sm{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.middle-sm{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.bottom-sm{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}.around-sm{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.between-sm{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.first-sm{-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}.last-sm{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}}@media only screen and (min-width:64em){.container{width:65rem}.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-offset-1,.col-md-offset-10,.col-md-offset-11,.col-md-offset-12,.col-md-offset-2,.col-md-offset-3,.col-md-offset-4,.col-md-offset-5,.col-md-offset-6,.col-md-offset-7,.col-md-offset-8,.col-md-offset-9{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.col-md{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-md-1{-webkit-flex-basis:8.333%;-ms-flex-preferred-size:8.333%;flex-basis:8.333%;max-width:8.333%}.col-md-2{-webkit-flex-basis:16.667%;-ms-flex-preferred-size:16.667%;flex-basis:16.667%;max-width:16.667%}.col-md-3{-webkit-flex-basis:25%;-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-md-4{-webkit-flex-basis:33.333%;-ms-flex-preferred-size:33.333%;flex-basis:33.333%;max-width:33.333%}.col-md-5{-webkit-flex-basis:41.667%;-ms-flex-preferred-size:41.667%;flex-basis:41.667%;max-width:41.667%}.col-md-6{-webkit-flex-basis:50%;-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-md-7{-webkit-flex-basis:58.333%;-ms-flex-preferred-size:58.333%;flex-basis:58.333%;max-width:58.333%}.col-md-8{-webkit-flex-basis:66.667%;-ms-flex-preferred-size:66.667%;flex-basis:66.667%;max-width:66.667%}.col-md-9{-webkit-flex-basis:75%;-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-md-10{-webkit-flex-basis:83.333%;-ms-flex-preferred-size:83.333%;flex-basis:83.333%;max-width:83.333%}.col-md-11{-webkit-flex-basis:91.667%;-ms-flex-preferred-size:91.667%;flex-basis:91.667%;max-width:91.667%}.col-md-12{-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-md-offset-1{margin-left:8.333%}.col-md-offset-2{margin-left:16.667%}.col-md-offset-3{margin-left:25%}.col-md-offset-4{margin-left:33.333%}.col-md-offset-5{margin-left:41.667%}.col-md-offset-6{margin-left:50%}.col-md-offset-7{margin-left:58.333%}.col-md-offset-8{margin-left:66.667%}.col-md-offset-9{margin-left:75%}.col-md-offset-10{margin-left:83.333%}.col-md-offset-11{margin-left:91.667%}.start-md{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-md{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-md{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-md{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.middle-md{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.bottom-md{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}.around-md{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.between-md{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.first-md{-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}.last-md{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}}@media only screen and (min-width:75em){.container{width:76rem}.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-offset-1,.col-lg-offset-10,.col-lg-offset-11,.col-lg-offset-12,.col-lg-offset-2,.col-lg-offset-3,.col-lg-offset-4,.col-lg-offset-5,.col-lg-offset-6,.col-lg-offset-7,.col-lg-offset-8,.col-lg-offset-9{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:.5rem;padding-left:.5rem}.col-lg{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-lg-1{-webkit-flex-basis:8.333%;-ms-flex-preferred-size:8.333%;flex-basis:8.333%;max-width:8.333%}.col-lg-2{-webkit-flex-basis:16.667%;-ms-flex-preferred-size:16.667%;flex-basis:16.667%;max-width:16.667%}.col-lg-3{-webkit-flex-basis:25%;-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.col-lg-4{-webkit-flex-basis:33.333%;-ms-flex-preferred-size:33.333%;flex-basis:33.333%;max-width:33.333%}.col-lg-5{-webkit-flex-basis:41.667%;-ms-flex-preferred-size:41.667%;flex-basis:41.667%;max-width:41.667%}.col-lg-6{-webkit-flex-basis:50%;-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-lg-7{-webkit-flex-basis:58.333%;-ms-flex-preferred-size:58.333%;flex-basis:58.333%;max-width:58.333%}.col-lg-8{-webkit-flex-basis:66.667%;-ms-flex-preferred-size:66.667%;flex-basis:66.667%;max-width:66.667%}.col-lg-9{-webkit-flex-basis:75%;-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.col-lg-10{-webkit-flex-basis:83.333%;-ms-flex-preferred-size:83.333%;flex-basis:83.333%;max-width:83.333%}.col-lg-11{-webkit-flex-basis:91.667%;-ms-flex-preferred-size:91.667%;flex-basis:91.667%;max-width:91.667%}.col-lg-12{-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-lg-offset-1{margin-left:8.333%}.col-lg-offset-2{margin-left:16.667%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-4{margin-left:33.333%}.col-lg-offset-5{margin-left:41.667%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-7{margin-left:58.333%}.col-lg-offset-8{margin-left:66.667%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-10{margin-left:83.333%}.col-lg-offset-11{margin-left:91.667%}.start-lg{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-lg{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-lg{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-lg{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.middle-lg{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.bottom-lg{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}.around-lg{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.between-lg{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.first-lg{-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}.last-lg{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}} \ No newline at end of file diff --git a/9781430265023/Examples/chapter9/Chapter 5 revisited/images/badge-locations.png b/9781430265023/Examples/chapter9/Chapter 5 revisited/images/badge-locations.png new file mode 100644 index 0000000..b51e5e4 Binary files /dev/null and b/9781430265023/Examples/chapter9/Chapter 5 revisited/images/badge-locations.png differ diff --git a/9781430265023/Examples/chapter9/Chapter 5 revisited/images/badge-quality.png b/9781430265023/Examples/chapter9/Chapter 5 revisited/images/badge-quality.png new file mode 100644 index 0000000..2b0a1ea Binary files /dev/null and b/9781430265023/Examples/chapter9/Chapter 5 revisited/images/badge-quality.png differ diff --git a/9781430265023/Examples/chapter9/Chapter 5 revisited/images/badge-tradeup.png b/9781430265023/Examples/chapter9/Chapter 5 revisited/images/badge-tradeup.png new file mode 100644 index 0000000..e392a38 Binary files /dev/null and b/9781430265023/Examples/chapter9/Chapter 5 revisited/images/badge-tradeup.png differ diff --git a/9781430265023/Examples/chapter9/Chapter 5 revisited/images/badge-valueadd.png b/9781430265023/Examples/chapter9/Chapter 5 revisited/images/badge-valueadd.png new file mode 100644 index 0000000..01e2943 Binary files /dev/null and b/9781430265023/Examples/chapter9/Chapter 5 revisited/images/badge-valueadd.png differ diff --git a/9781430265023/Examples/chapter9/Chapter 5 revisited/images/bigicon-freeadvice.png b/9781430265023/Examples/chapter9/Chapter 5 revisited/images/bigicon-freeadvice.png new file mode 100644 index 0000000..ecc996d Binary files /dev/null and b/9781430265023/Examples/chapter9/Chapter 5 revisited/images/bigicon-freeadvice.png differ diff --git a/9781430265023/Examples/chapter9/Chapter 5 revisited/images/bigicon-incentives.png b/9781430265023/Examples/chapter9/Chapter 5 revisited/images/bigicon-incentives.png new file mode 100644 index 0000000..22dbd8e Binary files /dev/null and b/9781430265023/Examples/chapter9/Chapter 5 revisited/images/bigicon-incentives.png differ diff --git a/9781430265023/Examples/chapter9/Chapter 5 revisited/images/bigicon-locations.png b/9781430265023/Examples/chapter9/Chapter 5 revisited/images/bigicon-locations.png new file mode 100644 index 0000000..a5eae3c Binary files /dev/null and b/9781430265023/Examples/chapter9/Chapter 5 revisited/images/bigicon-locations.png differ diff --git a/9781430265023/Examples/chapter9/Chapter 5 revisited/images/bigicon-noobligation.png b/9781430265023/Examples/chapter9/Chapter 5 revisited/images/bigicon-noobligation.png new file mode 100644 index 0000000..1cf0106 Binary files /dev/null and b/9781430265023/Examples/chapter9/Chapter 5 revisited/images/bigicon-noobligation.png differ diff --git a/9781430265023/Examples/chapter9/Chapter 5 revisited/images/bigicon-quality.png b/9781430265023/Examples/chapter9/Chapter 5 revisited/images/bigicon-quality.png new file mode 100644 index 0000000..0a13e4e Binary files /dev/null and b/9781430265023/Examples/chapter9/Chapter 5 revisited/images/bigicon-quality.png differ diff --git a/9781430265023/Examples/chapter9/Chapter 5 revisited/images/bigicon-removals.png b/9781430265023/Examples/chapter9/Chapter 5 revisited/images/bigicon-removals.png new file mode 100644 index 0000000..bbb751e Binary files /dev/null and b/9781430265023/Examples/chapter9/Chapter 5 revisited/images/bigicon-removals.png differ diff --git a/9781430265023/Examples/chapter9/Chapter 5 revisited/img/menu.svg b/9781430265023/Examples/chapter9/Chapter 5 revisited/img/menu.svg new file mode 100644 index 0000000..51bbc36 --- /dev/null +++ b/9781430265023/Examples/chapter9/Chapter 5 revisited/img/menu.svg @@ -0,0 +1,11 @@ + + + Slice 1 + Created with Sketch (http://www.bohemiancoding.com/sketch) + + + + + + + \ No newline at end of file diff --git a/9781430265023/Examples/chapter9/Chapter 5 revisited/index.html b/9781430265023/Examples/chapter9/Chapter 5 revisited/index.html new file mode 100644 index 0000000..33a7e36 --- /dev/null +++ b/9781430265023/Examples/chapter9/Chapter 5 revisited/index.html @@ -0,0 +1,202 @@ +Flexbox Grid

Flexbox Grid

A grid system based on the flex display property.

Responsive

Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md & lg viewport widths.

<div class="row">
+    <div class="col-xs-12
+                col-sm-8
+                col-md-6
+                col-lg-4">
+        <div class="box">Responsive</div>
+    </div>
+</div>

Fluid

Percent based widths allow fluid resizing of columns and rows.

.col-xs-6 {
+  flex-basis: 50%;
+}

Simple Syntax

All you need to remember is row, column, content.

<div class="row">
+    <div class="col-xs-12">
+        <div class="box">12</div>
+    </div>
+</div>

Offsets

Offset a column

<div class="row">
+    <div class="col-xs-offset-3 col-xs-9">
+        <div class="box">offset</div>
+    </div>
+</div>

Auto Width

Add any number of auto sizing columns to a row. Let the grid figure it out.

<div class="row">
+    <div class="col-xs">
+        <div class="box">auto</div>
+    </div>
+</div>

Nested Grids

Nest grids inside grids inside grids.

<div class="row">
+    <div class="col-xs">
+        <div class="box">auto</div>
+            <div class="row">
+                <div class="col-xs">
+                    <div class="box">auto</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

Alignment

Add classes to align elements to the start or end of a row as well as the top, bottom, or center of a column

.start-

<div class="row start-xs">
+    <div class="col-xs-6">
+        <div class="box">
+            start
+        </div>
+    </div>
+</div>
+

.center-

<div class="row center-xs">
+    <div class="col-xs-6">
+        <div class="box">
+            start
+        </div>
+    </div>
+</div>
+

.end-

<div class="row end-xs">
+    <div class="col-xs-6">
+        <div class="box">
+            end
+        </div>
+    </div>
+</div>
+

Here is an example of using the modifiers in conjunction to acheive different alignment at different viewport sizes.

Example
<div class="row center-xs end-sm start-lg">
+    <div class="col-xs-6">
+        <div class="box">
+            All together now
+        </div>
+    </div>
+</div>
+

.top-

<div class="row top-xs">
+    <div class="col-xs-6">
+        <div class="box">
+            top
+        </div>
+    </div>
+</div>
+

.middle-

<div class="row middle-xs">
+    <div class="col-xs-6">
+        <div class="box">
+            center
+        </div>
+    </div>
+</div>
+

.bottom-

<div class="row bottom-xs">
+    <div class="col-xs-6">
+        <div class="box">
+            bottom
+        </div>
+    </div>
+</div>
+

Distribution

Add classes to distribute the contents of a row or column.

.around-

<div class="row around-xs">
+    <div class="col-xs-2">
+        <div class="box">
+            around
+        </div>
+    </div>
+    <div class="col-xs-2">
+        <div class="box">
+            around
+        </div>
+    </div>
+    <div class="col-xs-2">
+        <div class="box">
+            around
+        </div>
+    </div>
+</div>
+

.between-

<div class="row between-xs">
+    <div class="col-xs-2">
+        <div class="box">
+            between
+        </div>
+    </div>
+    <div class="col-xs-2">
+        <div class="box">
+            between
+        </div>
+    </div>
+    <div class="col-xs-2">
+        <div class="box">
+            between
+        </div>
+    </div>
+</div>
+

Reordering

Add classes to reorder columns.

.first-

1
2
3
4
5
6
<div class="row">
+    <div class="col-xs-2">
+        <div class="box">
+            1
+        </div>
+    </div>
+    <div class="col-xs-2">
+        <div class="box">
+            2
+        </div>
+    </div>
+    <div class="col-xs-2 first-xs">
+        <div class="box">
+            3
+        </div>
+    </div>
+</div>
+

.last-

1
2
3
4
5
6
<div class="row">
+    <div class="col-xs-2 last-xs">
+        <div class="box">
+            1
+        </div>
+    </div>
+    <div class="col-xs-2">
+        <div class="box">
+            2
+        </div>
+    </div>
+    <div class="col-xs-2">
+        <div class="box">
+            3
+        </div>
+    </div>
+</div>
+

Reversing

.reverse

1
2
3
4
5
6
<div class="row reverse">
+    <div class="col-xs-2">
+        <div class="box">
+            1
+        </div>
+    </div>
+    <div class="col-xs-2">
+        <div class="box">
+            2
+        </div>
+    </div>
+    <div class="col-xs-2">
+        <div class="box">
+            3
+        </div>
+    </div>
+</div>
+
\ No newline at end of file diff --git a/9781430265023/Examples/chapter9/Chapter 5 revisited/js/index.js b/9781430265023/Examples/chapter9/Chapter 5 revisited/js/index.js new file mode 100644 index 0000000..1296467 --- /dev/null +++ b/9781430265023/Examples/chapter9/Chapter 5 revisited/js/index.js @@ -0,0 +1 @@ +!function(a,b,c,d,e,f,g){a.GoogleAnalyticsObject=e,a[e]=a[e]||function(){(a[e].q=a[e].q||[]).push(arguments)},a[e].l=1*new Date,f=b.createElement(c),g=b.getElementsByTagName(c)[0],f.async=1,f.src=d,g.parentNode.insertBefore(f,g)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-46683011-1","flexboxgrid.com"),ga("send","pageview"); \ No newline at end of file diff --git a/9781430265023/Examples/chapter9/Chapter 5 revisited/package.json b/9781430265023/Examples/chapter9/Chapter 5 revisited/package.json new file mode 100644 index 0000000..b34058c --- /dev/null +++ b/9781430265023/Examples/chapter9/Chapter 5 revisited/package.json @@ -0,0 +1,36 @@ +{ + "name": "flexboxgrid", + "version": "6.3.0", + "description": "Grid based off of CSS3 flexbox specification", + "style": "dist/flexboxgrid.css", + "main": "dist/flexboxgrid.css", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git://github.com/kristoferjoseph/flexboxgrid.git" + }, + "keywords": [ + "browser", + "flexbox", + "grid", + "css" + ], + "author": "@dam", + "license": "Apache 2", + "bugs": { + "url": "https://github.com/kristoferjoseph/flexboxgrid/issues" + }, + "homepage": "https://github.com/kristoferjoseph/flexboxgrid", + "devDependencies": { + "grunt": "^0.4.5", + "grunt-autoprefixer": "^0.7.2", + "grunt-contrib-cssmin": "^0.7.0", + "grunt-contrib-htmlmin": "^0.1.3", + "grunt-contrib-uglify": "^0.2.7", + "grunt-contrib-watch": "^0.5.3", + "grunt-myth": "^1.0.1", + "grunt-processhtml": "^0.2.9" + } +} diff --git a/9781430265023/Examples/chapter9/Chapter 5 revisited/src/css/flexboxgrid.css b/9781430265023/Examples/chapter9/Chapter 5 revisited/src/css/flexboxgrid.css new file mode 100644 index 0000000..ebaa9bb --- /dev/null +++ b/9781430265023/Examples/chapter9/Chapter 5 revisited/src/css/flexboxgrid.css @@ -0,0 +1,804 @@ +:root { + --gutter-width: 1rem; + --outer-margin: 2rem; + --gutter-compensation: calc((var(--gutter-width) * 0.5) * -1); + --half-gutter-width: calc((var(--gutter-width) * 0.5)); + --xs-min: 30; + --sm-min: 48; + --md-min: 64; + --lg-min: 75; + --screen-xs-min: var(--xs-min)em; + --screen-sm-min: var(--sm-min)em; + --screen-md-min: var(--md-min)em; + --screen-lg-min: var(--lg-min)em; + --container-sm: calc(var(--sm-min) + var(--gutter-width)); + --container-md: calc(var(--md-min) + var(--gutter-width)); + --container-lg: calc(var(--lg-min) + var(--gutter-width)); +} + +@custom-media --sm-viewport only screen and (min-width: 48em); +@custom-media --md-viewport only screen and (min-width: 64em); +@custom-media --lg-viewport only screen and (min-width: 75em); + +.container-fluid, .container { + margin-right: auto; + margin-left: auto; +} + +.container-fluid { + padding-right: var(--outer-margin, 2rem); + padding-left: var(--outer-margin, 2rem); +} + +.row { + box-sizing: border-box; + display: flex; + flex: 0 1 auto; + flex-direction: row; + flex-wrap: wrap; + margin-right: var(--gutter-compensation, -0.5rem); + margin-left: var(--gutter-compensation, -0.5rem); +} + +.row.reverse { + flex-direction: row-reverse; +} + +.col.reverse { + flex-direction: column-reverse; +} + +.col-xs, +.col-xs-1, +.col-xs-2, +.col-xs-3, +.col-xs-4, +.col-xs-5, +.col-xs-6, +.col-xs-7, +.col-xs-8, +.col-xs-9, +.col-xs-10, +.col-xs-11, +.col-xs-12, +.col-xs-offset-1, +.col-xs-offset-2, +.col-xs-offset-3, +.col-xs-offset-4, +.col-xs-offset-5, +.col-xs-offset-6, +.col-xs-offset-7, +.col-xs-offset-8, +.col-xs-offset-9, +.col-xs-offset-10, +.col-xs-offset-11, +.col-xs-offset-12 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: var(--half-gutter-width, 0.5rem); + padding-left: var(--half-gutter-width, 0.5rem); +} + +.col-xs { + flex-grow: 1; + flex-basis: 0; + max-width: 100%; +} + +.col-xs-1 { + flex-basis: 8.333%; + max-width: 8.333%; +} + +.col-xs-2 { + flex-basis: 16.667%; + max-width: 16.667%; +} + +.col-xs-3 { + flex-basis: 25%; + max-width: 25%; +} + +.col-xs-4 { + flex-basis: 33.333%; + max-width: 33.333%; +} + +.col-xs-5 { + flex-basis: 41.667%; + max-width: 41.667%; +} + +.col-xs-6 { + flex-basis: 50%; + max-width: 50%; +} + +.col-xs-7 { + flex-basis: 58.333%; + max-width: 58.333%; +} + +.col-xs-8 { + flex-basis: 66.667%; + max-width: 66.667%; +} + +.col-xs-9 { + flex-basis: 75%; + max-width: 75%; +} + +.col-xs-10 { + flex-basis: 83.333%; + max-width: 83.333%; +} + +.col-xs-11 { + flex-basis: 91.667%; + max-width: 91.667%; +} + +.col-xs-12 { + flex-basis: 100%; + max-width: 100%; +} + +.col-xs-offset-1 { + margin-left: 8.333%; +} + +.col-xs-offset-2 { + margin-left: 16.667%; +} + +.col-xs-offset-3 { + margin-left: 25%; +} + +.col-xs-offset-4 { + margin-left: 33.333%; +} + +.col-xs-offset-5 { + margin-left: 41.667%; +} + +.col-xs-offset-6 { + margin-left: 50%; +} + +.col-xs-offset-7 { + margin-left: 58.333%; +} + +.col-xs-offset-8 { + margin-left: 66.667%; +} + +.col-xs-offset-9 { + margin-left: 75%; +} + +.col-xs-offset-10 { + margin-left: 83.333%; +} + +.col-xs-offset-11 { + margin-left: 91.667%; +} + +.start-xs { + justify-content: flex-start; + text-align: start; +} + +.center-xs { + justify-content: center; + text-align: center; +} + +.end-xs { + justify-content: flex-end; + text-align: end; +} + +.top-xs { + align-items: flex-start; +} + +.middle-xs { + align-items: center; +} + +.bottom-xs { + align-items: flex-end; +} + +.around-xs { + justify-content: space-around; +} + +.between-xs { + justify-content: space-between; +} + +.first-xs { + order: -1; +} + +.last-xs { + order: 1; +} + +@media (--sm-viewport) { + .container { + width: var(--container-sm, 46rem); + } + + .col-sm, + .col-sm-1, + .col-sm-2, + .col-sm-3, + .col-sm-4, + .col-sm-5, + .col-sm-6, + .col-sm-7, + .col-sm-8, + .col-sm-9, + .col-sm-10, + .col-sm-11, + .col-sm-12, + .col-sm-offset-1, + .col-sm-offset-2, + .col-sm-offset-3, + .col-sm-offset-4, + .col-sm-offset-5, + .col-sm-offset-6, + .col-sm-offset-7, + .col-sm-offset-8, + .col-sm-offset-9, + .col-sm-offset-10, + .col-sm-offset-11, + .col-sm-offset-12 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: var(--half-gutter-width, 0.5rem); + padding-left: var(--half-gutter-width, 0.5rem); + } + + .col-sm { + flex-grow: 1; + flex-basis: 0; + max-width: 100%; + } + + .col-sm-1 { + flex-basis: 8.333%; + max-width: 8.333%; + } + + .col-sm-2 { + flex-basis: 16.667%; + max-width: 16.667%; + } + + .col-sm-3 { + flex-basis: 25%; + max-width: 25%; + } + + .col-sm-4 { + flex-basis: 33.333%; + max-width: 33.333%; + } + + .col-sm-5 { + flex-basis: 41.667%; + max-width: 41.667%; + } + + .col-sm-6 { + flex-basis: 50%; + max-width: 50%; + } + + .col-sm-7 { + flex-basis: 58.333%; + max-width: 58.333%; + } + + .col-sm-8 { + flex-basis: 66.667%; + max-width: 66.667%; + } + + .col-sm-9 { + flex-basis: 75%; + max-width: 75%; + } + + .col-sm-10 { + flex-basis: 83.333%; + max-width: 83.333%; + } + + .col-sm-11 { + flex-basis: 91.667%; + max-width: 91.667%; + } + + .col-sm-12 { + flex-basis: 100%; + max-width: 100%; + } + + .col-sm-offset-1 { + margin-left: 8.333%; + } + + .col-sm-offset-2 { + margin-left: 16.667%; + } + + .col-sm-offset-3 { + margin-left: 25%; + } + + .col-sm-offset-4 { + margin-left: 33.333%; + } + + .col-sm-offset-5 { + margin-left: 41.667%; + } + + .col-sm-offset-6 { + margin-left: 50%; + } + + .col-sm-offset-7 { + margin-left: 58.333%; + } + + .col-sm-offset-8 { + margin-left: 66.667%; + } + + .col-sm-offset-9 { + margin-left: 75%; + } + + .col-sm-offset-10 { + margin-left: 83.333%; + } + + .col-sm-offset-11 { + margin-left: 91.667%; + } + + .start-sm { + justify-content: flex-start; + text-align: start; + } + + .center-sm { + justify-content: center; + text-align: center; + } + + .end-sm { + justify-content: flex-end; + text-align: end; + } + + .top-sm { + align-items: flex-start; + } + + .middle-sm { + align-items: center; + } + + .bottom-sm { + align-items: flex-end; + } + + .around-sm { + justify-content: space-around; + } + + .between-sm { + justify-content: space-between; + } + + .first-sm { + order: -1; + } + + .last-sm { + order: 1; + } +} + +@media (--md-viewport) { + .container { + width: var(--container-md, 61rem); + } + + .col-md, + .col-md-1, + .col-md-2, + .col-md-3, + .col-md-4, + .col-md-5, + .col-md-6, + .col-md-7, + .col-md-8, + .col-md-9, + .col-md-10, + .col-md-11, + .col-md-12, + .col-md-offset-1, + .col-md-offset-2, + .col-md-offset-3, + .col-md-offset-4, + .col-md-offset-5, + .col-md-offset-6, + .col-md-offset-7, + .col-md-offset-8, + .col-md-offset-9, + .col-md-offset-10, + .col-md-offset-11, + .col-md-offset-12 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: var(--half-gutter-width, 0.5rem); + padding-left: var(--half-gutter-width, 0.5rem); + } + + .col-md { + flex-grow: 1; + flex-basis: 0; + max-width: 100%; + } + + .col-md-1 { + flex-basis: 8.333%; + max-width: 8.333%; + } + + .col-md-2 { + flex-basis: 16.667%; + max-width: 16.667%; + } + + .col-md-3 { + flex-basis: 25%; + max-width: 25%; + } + + .col-md-4 { + flex-basis: 33.333%; + max-width: 33.333%; + } + + .col-md-5 { + flex-basis: 41.667%; + max-width: 41.667%; + } + + .col-md-6 { + flex-basis: 50%; + max-width: 50%; + } + + .col-md-7 { + flex-basis: 58.333%; + max-width: 58.333%; + } + + .col-md-8 { + flex-basis: 66.667%; + max-width: 66.667%; + } + + .col-md-9 { + flex-basis: 75%; + max-width: 75%; + } + + .col-md-10 { + flex-basis: 83.333%; + max-width: 83.333%; + } + + .col-md-11 { + flex-basis: 91.667%; + max-width: 91.667%; + } + + .col-md-12 { + flex-basis: 100%; + max-width: 100%; + } + + .col-md-offset-1 { + margin-left: 8.333%; + } + + .col-md-offset-2 { + margin-left: 16.667%; + } + + .col-md-offset-3 { + margin-left: 25%; + } + + .col-md-offset-4 { + margin-left: 33.333%; + } + + .col-md-offset-5 { + margin-left: 41.667%; + } + + .col-md-offset-6 { + margin-left: 50%; + } + + .col-md-offset-7 { + margin-left: 58.333%; + } + + .col-md-offset-8 { + margin-left: 66.667%; + } + + .col-md-offset-9 { + margin-left: 75%; + } + + .col-md-offset-10 { + margin-left: 83.333%; + } + + .col-md-offset-11 { + margin-left: 91.667%; + } + + .start-md { + justify-content: flex-start; + text-align: start; + } + + .center-md { + justify-content: center; + text-align: center; + } + + .end-md { + justify-content: flex-end; + text-align: end; + } + + .top-md { + align-items: flex-start; + } + + .middle-md { + align-items: center; + } + + .bottom-md { + align-items: flex-end; + } + + .around-md { + justify-content: space-around; + } + + .between-md { + justify-content: space-between; + } + + .first-md { + order: -1; + } + + .last-md { + order: 1; + } +} + +@media (--lg-viewport) { + .container { + width: var(--container-lg, 71rem); + } + + .col-lg, + .col-lg-1, + .col-lg-2, + .col-lg-3, + .col-lg-4, + .col-lg-5, + .col-lg-6, + .col-lg-7, + .col-lg-8, + .col-lg-9, + .col-lg-10, + .col-lg-11, + .col-lg-12, + .col-lg-offset-1, + .col-lg-offset-2, + .col-lg-offset-3, + .col-lg-offset-4, + .col-lg-offset-5, + .col-lg-offset-6, + .col-lg-offset-7, + .col-lg-offset-8, + .col-lg-offset-9, + .col-lg-offset-10, + .col-lg-offset-11, + .col-lg-offset-12 { + box-sizing: border-box; + flex: 0 0 auto; + padding-right: var(--half-gutter-width, 0.5rem); + padding-left: var(--half-gutter-width, 0.5rem); + } + + .col-lg { + flex-grow: 1; + flex-basis: 0; + max-width: 100%; + } + + .col-lg-1 { + flex-basis: 8.333%; + max-width: 8.333%; + } + + .col-lg-2 { + flex-basis: 16.667%; + max-width: 16.667%; + } + + .col-lg-3 { + flex-basis: 25%; + max-width: 25%; + } + + .col-lg-4 { + flex-basis: 33.333%; + max-width: 33.333%; + } + + .col-lg-5 { + flex-basis: 41.667%; + max-width: 41.667%; + } + + .col-lg-6 { + flex-basis: 50%; + max-width: 50%; + } + + .col-lg-7 { + flex-basis: 58.333%; + max-width: 58.333%; + } + + .col-lg-8 { + flex-basis: 66.667%; + max-width: 66.667%; + } + + .col-lg-9 { + flex-basis: 75%; + max-width: 75%; + } + + .col-lg-10 { + flex-basis: 83.333%; + max-width: 83.333%; + } + + .col-lg-11 { + flex-basis: 91.667%; + max-width: 91.667%; + } + + .col-lg-12 { + flex-basis: 100%; + max-width: 100%; + } + + .col-lg-offset-1 { + margin-left: 8.333%; + } + + .col-lg-offset-2 { + margin-left: 16.667%; + } + + .col-lg-offset-3 { + margin-left: 25%; + } + + .col-lg-offset-4 { + margin-left: 33.333%; + } + + .col-lg-offset-5 { + margin-left: 41.667%; + } + + .col-lg-offset-6 { + margin-left: 50%; + } + + .col-lg-offset-7 { + margin-left: 58.333%; + } + + .col-lg-offset-8 { + margin-left: 66.667%; + } + + .col-lg-offset-9 { + margin-left: 75%; + } + + .col-lg-offset-10 { + margin-left: 83.333%; + } + + .col-lg-offset-11 { + margin-left: 91.667%; + } + + .start-lg { + justify-content: flex-start; + text-align: start; + } + + .center-lg { + justify-content: center; + text-align: center; + } + + .end-lg { + justify-content: flex-end; + text-align: end; + } + + .top-lg { + align-items: flex-start; + } + + .middle-lg { + align-items: center; + } + + .bottom-lg { + align-items: flex-end; + } + + .around-lg { + justify-content: space-around; + } + + .between-lg { + justify-content: space-between; + } + + .first-lg { + order: -1; + } + + .last-lg { + order: 1; + } +} + diff --git a/9781430265023/Examples/chapter9/Chapter 5 revisited/src/css/style.css b/9781430265023/Examples/chapter9/Chapter 5 revisited/src/css/style.css new file mode 100644 index 0000000..f255c61 --- /dev/null +++ b/9781430265023/Examples/chapter9/Chapter 5 revisited/src/css/style.css @@ -0,0 +1,290 @@ +body { + box-sizing: border-box; + padding: 0; + margin: 0; + font-size: 18px; + font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-weight: normal; + background: #EEE; + line-height: 1.4rem; +} +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: "Gibson", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + color: #001A33; +} +h2 { + font-size: 2rem; + margin: 1rem 0; +} +:focus { + outline-color: transparent; + outline-style: none; +} +h2 + p { + margin: 0 0 2rem 0; +} +a { + text-decoration: none; + color: #007FFF; + padding: 0 0 0.2rem 0; + font-weight: bold; +} +a:hover { + color: #007FFF; +} +pre { + overflow-x: auto; + padding: 1.25em; + border: 1px solid #e6e6e6; + border-left-width: 5px; + margin: 1.6em 0; + font-size: 0.875em; + background: #fcfcfc; + white-space: pre; + word-wrap: normal; +} +code { + color: #007FFF; +} +.layout { + display: flex; + min-height: 100vh; + flex-direction: column; +} +.page-nav { + box-sizing: border-box; + position: fixed; + padding: 0.5rem; + width: 100%; + background: transparent; +} +.page { + z-index: 0; + background: #EEE; +} +.wrap { + box-sizing: border-box; + max-width: 1200px; + margin: 0 auto; +} +.page-section { + padding-top: 3rem; + margin-bottom: 3rem; +} +.page-features { + width: 100%; + background: hsl(209, 100%, 10%); + overflow: scroll; +} +.menu-button { + position: fixed; + top: 0.75rem; + right: 0.75rem; + z-index: 1; + box-sizing: border-box; + padding: 0.45rem; + height: 3rem; + width: 3rem; + background: #FFF; + border: 1px solid transparent; + user-select: none; +} +.menu-button:hover { + border: 1px solid #007FFF; + border-radius: 2px; +} +.menu-button:active { + background: #EEE; + border: 1px solid transparent; +} +.open { + transform: translate3d(-15rem, 0, 0); +} +.menu-button-icon { + width: 2rem; + height: 2rem; +} +.hero { + box-sizing: border-box; + padding: 2rem; + background: #FFF; + border: 1px solid #FFF; + border-radius: 2px; +} +.hero-headline { + font-size: 3rem; + white-space: nowrap; + margin-bottom: 0; +} +.hero-copy { + font-size: 1rem; + margin-bottom: 0; + padding: 0 2rem; + text-align: center; +} +.slide-menu { + display: block; + position: fixed; + overflow: auto; + top: 0; + right: 0; + bottom: 0; + height: 100%; + width: 250px; +} +.menu { + box-sizing: border-box; + padding-bottom: 5rem; + background: hsl(209, 100%, 10%); +} +.menu-header { + box-sizing: border-box; + padding: 3rem 3rem 0 3rem; + color: #eee; +} +.menu-list { + margin: 0; + padding: 0; + list-style: none; +} +.menu-list-item { + height: 3rem; + line-height: 3rem; + font-size: 1rem; + color: #007FFF; + background: transparent; + transition: all .2s ease-in; +} +.menu-link { + box-sizing: border-box; + padding-left: 3rem; + display: block; + color: #007FFF; + transition: color 0.2s ease-in; +} +.menu-link:hover { + color: hsl(210, 100%, 60%); + border-bottom: none; +} +.link-top { + align-self: flex-end; +} +.button { + position: relative; + display: inline-block; + box-sizing: border-box; + min-width: 11rem; + padding: 0 4rem; + margin: 1rem; + height: 3rem; + line-height: 3rem; + border: 1px solid #007FFF; + border-radius: 2px; + color: #007FFF; + font-size: 1.25rem; + transition: background-color, 0.15s; +} +.button:hover { + background: #3399FF; + border-color: #3399FF; + color: #FFF; + text-shadow: 0 1px #007FFF; +} +.button:active { + background: #007FFF; + color: #FFF; + border-top: 2px solid #0066CC; +} +.box-row, +.box-first, +.box-nested, +.box-large, +.box { + box-sizing: border-box; + position: relative; + box-sizing: border-box; + min-height: 1rem; + margin-bottom: 0; + background: #007FFF; + border: 1px solid #FFF; + border-radius: 2px; + overflow: hidden; + text-align: center; + color: white; +} +.box-row { + margin-bottom: 1rem; +} +.box-first { + background: #0066CC; + border-color: #007FFF; +} +.box-nested { + background: #003366; + border-color: #007FFF; +} +.box-large { + height: 8rem; +} +.box-container { + box-sizing: border-box; + padding: 0.5rem; +} +.page-footer { + box-sizing: border-box; + padding-bottom: 3rem; +} +.tag { + color: #000; + font-weight: normal; +} +.end { + text-align: end; +} +.invisible-xs { + display: none; + visibility: hidden; +} +.visible-xs { + display: block; + visibility: visible; +} +@media only screen and (min-width: 48rem) { + body { + font-size: 16px; + } + .slide-menu { + width: 25%; + } + .open { + transform: translate3d(0, 0, 0); + } + .hero-headline { + font-size: 6rem; + margin-bottom: 2rem; + } + .hero-copy { + font-size: 1.25rem; + margin-bottom: 2rem; + } + .box-row, + .box-first, + .box-nested, + .box-large, + .box { + padding: 1rem; + } + .invisible-md { + display: none; + visibility: hidden; + } + .visible-md { + display: block; + visibility: visible; + } +} diff --git a/9781430265023/Examples/chapter9/Chapter 5 revisited/src/index.html b/9781430265023/Examples/chapter9/Chapter 5 revisited/src/index.html new file mode 100644 index 0000000..8f122e8 --- /dev/null +++ b/9781430265023/Examples/chapter9/Chapter 5 revisited/src/index.html @@ -0,0 +1,775 @@ + + + + + + + + Flexbox Grid + + + + + + + + + +
+
+
+

Flexbox Grid

+
+
+

A grid system based on the flex display + property.

+
+
+ + Github + +
+
+ + +
+ +
+

Responsive

+ +

Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, + sm, md & lg viewport widths.

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
<div class="row">
+    <div class="col-xs-12
+                col-sm-8
+                col-md-6
+                col-lg-4">
+        <div class="box">Responsive</div>
+    </div>
+</div>
+
+ + +
+
+

Fluid

+ +

Percent based widths allow fluid resizing of columns and rows.

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
.col-xs-6 {
+  flex-basis: 50%;
+}
+ +
+ + +
+

Simple Syntax

+ +

All you need to remember is row, column, content.

+
<div class="row">
+    <div class="col-xs-12">
+        <div class="box">12</div>
+    </div>
+</div>
+ +
+ + +
+

Offsets

+ +

Offset a column

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
<div class="row">
+    <div class="col-xs-offset-3 col-xs-9">
+        <div class="box">offset</div>
+    </div>
+</div>
+ +
+ + +
+

Auto Width

+ +

Add any number of auto sizing columns to a row. Let the grid figure it out.

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
<div class="row">
+    <div class="col-xs">
+        <div class="box">auto</div>
+    </div>
+</div>
+ +
+ + +
+

Nested Grids

+ +

Nest grids inside grids inside grids.

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
<div class="row">
+    <div class="col-xs">
+        <div class="box">auto</div>
+            <div class="row">
+                <div class="col-xs">
+                    <div class="box">auto</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+ +
+ + +
+

Alignment

+ +

Add classes to align elements to the start or end of a row as well as the top, + bottom, or center of a column

+

.start-

+ +
+
+
+
+
+
+
+
+
+
+
+
<div class="row start-xs">
+    <div class="col-xs-6">
+        <div class="box">
+            start
+        </div>
+    </div>
+</div>
+
+ + +

.center-

+ +
+
+
+
+
+
+
+
+
+
+
+
<div class="row center-xs">
+    <div class="col-xs-6">
+        <div class="box">
+            start
+        </div>
+    </div>
+</div>
+
+ +

.end-

+ +
+
+
+
+
+
+
+
+
+
+
+
<div class="row end-xs">
+    <div class="col-xs-6">
+        <div class="box">
+            end
+        </div>
+    </div>
+</div>
+
+ +

Here is an example of using the modifiers in conjunction to acheive different alignment at different viewport sizes.

+
+
+
+
+
+
+
+
+
+
+
Example +
<div class="row center-xs end-sm start-lg">
+    <div class="col-xs-6">
+        <div class="box">
+            All together now
+        </div>
+    </div>
+</div>
+
+ +

.top-

+ +
+
+
+
+
+
+
+
+
<div class="row top-xs">
+    <div class="col-xs-6">
+        <div class="box">
+            top
+        </div>
+    </div>
+</div>
+
+ +

.middle-

+ +
+
+
+
+
+
+
+
+
<div class="row middle-xs">
+    <div class="col-xs-6">
+        <div class="box">
+            center
+        </div>
+    </div>
+</div>
+
+ +

.bottom-

+ +
+
+
+
+
+
+
+
+
<div class="row bottom-xs">
+    <div class="col-xs-6">
+        <div class="box">
+            bottom
+        </div>
+    </div>
+</div>
+
+ +
+ + +
+

Distribution

+ +

Add classes to distribute the contents of a row or column.

+

.around-

+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
<div class="row around-xs">
+    <div class="col-xs-2">
+        <div class="box">
+            around
+        </div>
+    </div>
+    <div class="col-xs-2">
+        <div class="box">
+            around
+        </div>
+    </div>
+    <div class="col-xs-2">
+        <div class="box">
+            around
+        </div>
+    </div>
+</div>
+
+ +

.between-

+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
<div class="row between-xs">
+    <div class="col-xs-2">
+        <div class="box">
+            between
+        </div>
+    </div>
+    <div class="col-xs-2">
+        <div class="box">
+            between
+        </div>
+    </div>
+    <div class="col-xs-2">
+        <div class="box">
+            between
+        </div>
+    </div>
+</div>
+
+ +
+ + +
+

Reordering

+ +

Add classes to reorder columns.

+

.first-

+ +
+
+
+
+
+
1
+
+
+
2
+
+
+
3
+
+
+
4
+
+
+
5
+
+
+
6
+
+
+
+
+
+
<div class="row">
+    <div class="col-xs-2">
+        <div class="box">
+            1
+        </div>
+    </div>
+    <div class="col-xs-2">
+        <div class="box">
+            2
+        </div>
+    </div>
+    <div class="col-xs-2 first-xs">
+        <div class="box">
+            3
+        </div>
+    </div>
+</div>
+
+ +

.last-

+ +
+
+
+
+
+
1
+
+
+
2
+
+
+
3
+
+
+
4
+
+
+
5
+
+
+
6
+
+
+
+
+
+
<div class="row">
+    <div class="col-xs-2 last-xs">
+        <div class="box">
+            1
+        </div>
+    </div>
+    <div class="col-xs-2">
+        <div class="box">
+            2
+        </div>
+    </div>
+    <div class="col-xs-2">
+        <div class="box">
+            3
+        </div>
+    </div>
+</div>
+
+ +
+ + +
+

Reversing

+ +

.reverse

+ +
+
+
+
+
+
1
+
+
+
2
+
+
+
3
+
+
+
4
+
+
+
5
+
+
+
6
+
+
+
+
+
+
<div class="row reverse">
+    <div class="col-xs-2">
+        <div class="box">
+            1
+        </div>
+    </div>
+    <div class="col-xs-2">
+        <div class="box">
+            2
+        </div>
+    </div>
+    <div class="col-xs-2">
+        <div class="box">
+            3
+        </div>
+    </div>
+</div>
+
+ +
+ +
+
+ + + + + + diff --git a/9781430265023/Examples/chapter9/Chapter 5 revisited/src/js/index.js b/9781430265023/Examples/chapter9/Chapter 5 revisited/src/js/index.js new file mode 100644 index 0000000..68d69f8 --- /dev/null +++ b/9781430265023/Examples/chapter9/Chapter 5 revisited/src/js/index.js @@ -0,0 +1,13 @@ +(function(i, s, o, g, r, a, m) { + i['GoogleAnalyticsObject'] = r; + i[r] = i[r] || function() { + (i[r].q = i[r].q || []).push(arguments) + }, i[r].l = 1 * new Date(); + a = s.createElement(o), + m = s.getElementsByTagName(o)[0]; + a.async = 1; + a.src = g; + m.parentNode.insertBefore(a, m) +})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); +ga('create', 'UA-46683011-1', 'flexboxgrid.com'); +ga('send', 'pageview'); diff --git a/9781430265023/Examples/chapter9/Chapter 5 revisited/vendor/css/normalize.css b/9781430265023/Examples/chapter9/Chapter 5 revisited/vendor/css/normalize.css new file mode 100644 index 0000000..c9646a0 --- /dev/null +++ b/9781430265023/Examples/chapter9/Chapter 5 revisited/vendor/css/normalize.css @@ -0,0 +1,407 @@ +/*! normalize.css v2.1.3 | MIT License | git.io/normalize */ + +/* ========================================================================== + HTML5 display definitions + ========================================================================== */ + +/** + * Correct `block` display not defined in IE 8/9. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +summary { + display: block; +} + +/** + * Correct `inline-block` display not defined in IE 8/9. + */ + +audio, +canvas, +video { + display: inline-block; +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Address `[hidden]` styling not present in IE 8/9. + * Hide the `template` element in IE, Safari, and Firefox < 22. + */ + +[hidden], +template { + display: none; +} + +/* ========================================================================== + Base + ========================================================================== */ + +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/** + * Remove default margin. + */ + +body { + margin: 0; +} + +/* ========================================================================== + Links + ========================================================================== */ + +/** + * Remove the gray background color from active links in IE 10. + */ + +a { + background: transparent; +} + +/** + * Address `outline` inconsistency between Chrome and other browsers. + */ + +a:focus { + outline: thin dotted; +} + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* ========================================================================== + Typography + ========================================================================== */ + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari 5, and Chrome. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/** + * Address styling not present in IE 8/9, Safari 5, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/** + * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +/** + * Address styling not present in Safari 5 and Chrome. + */ + +dfn { + font-style: italic; +} + +/** + * Address differences between Firefox and other browsers. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +/** + * Address styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/** + * Correct font family set oddly in Safari 5 and Chrome. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, serif; + font-size: 1em; +} + +/** + * Improve readability of pre-formatted text in all browsers. + */ + +pre { + white-space: pre-wrap; +} + +/** + * Set consistent quote types. + */ + +q { + quotes: "\201C" "\201D" "\2018" "\2019"; +} + +/** + * Address inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* ========================================================================== + Embedded content + ========================================================================== */ + +/** + * Remove border when inside `a` element in IE 8/9. + */ + +img { + border: 0; +} + +/** + * Correct overflow displayed oddly in IE 9. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* ========================================================================== + Figures + ========================================================================== */ + +/** + * Address margin not present in IE 8/9 and Safari 5. + */ + +figure { + margin: 0; +} + +/* ========================================================================== + Forms + ========================================================================== */ + +/** + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct `color` not being inherited in IE 8/9. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * 1. Correct font family not being inherited in all browsers. + * 2. Correct font size not being inherited in all browsers. + * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. + */ + +button, +input, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 2 */ + margin: 0; /* 3 */ +} + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +button, +input { + line-height: normal; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. + * Correct `select` style inheritance in Firefox 4+ and Opera. + */ + +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/** + * Remove inner padding and search cancel button in Safari 5 and Chrome + * on OS X. + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Remove inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * 1. Remove default vertical scrollbar in IE 8/9. + * 2. Improve readability and alignment in all browsers. + */ + +textarea { + overflow: auto; /* 1 */ + vertical-align: top; /* 2 */ +} + +/* ========================================================================== + Tables + ========================================================================== */ + +/** + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} + diff --git a/9781430265023/Examples/chapter9/Chapter 5 revisited/vendor/js/modernizr.flexbox.js b/9781430265023/Examples/chapter9/Chapter 5 revisited/vendor/js/modernizr.flexbox.js new file mode 100644 index 0000000..7cabad3 --- /dev/null +++ b/9781430265023/Examples/chapter9/Chapter 5 revisited/vendor/js/modernizr.flexbox.js @@ -0,0 +1,4 @@ +/* Modernizr 2.7.1 (Custom Build) | MIT & BSD + * Build: http://modernizr.com/download/#-flexbox-flexboxlegacy-shiv-cssclasses-testprop-testallprops-domprefixes-load + */ +;window.Modernizr=function(a,b,c){function x(a){j.cssText=a}function y(a,b){return x(prefixes.join(a+";")+(b||""))}function z(a,b){return typeof a===b}function A(a,b){return!!~(""+a).indexOf(b)}function B(a,b){for(var d in a){var e=a[d];if(!A(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function C(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:z(f,"function")?f.bind(d||b):f}return!1}function D(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+n.join(d+" ")+d).split(" ");return z(b,"string")||z(b,"undefined")?B(e,b):(e=(a+" "+o.join(d+" ")+d).split(" "),C(e,b,c))}var d="2.7.1",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m="Webkit Moz O ms",n=m.split(" "),o=m.toLowerCase().split(" "),p={},q={},r={},s=[],t=s.slice,u,v={}.hasOwnProperty,w;!z(v,"undefined")&&!z(v.call,"undefined")?w=function(a,b){return v.call(a,b)}:w=function(a,b){return b in a&&z(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=t.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(t.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(t.call(arguments)))};return e}),p.flexbox=function(){return D("flexWrap")},p.flexboxlegacy=function(){return D("boxDirection")};for(var E in p)w(p,E)&&(u=E.toLowerCase(),e[u]=p[E](),s.push((e[u]?"":"no-")+u));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)w(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},x(""),i=k=null,function(a,b){function l(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function m(){var a=s.elements;return typeof a=="string"?a.split(" "):a}function n(a){var b=j[a[h]];return b||(b={},i++,a[h]=i,j[i]=b),b}function o(a,c,d){c||(c=b);if(k)return c.createElement(a);d||(d=n(c));var g;return d.cache[a]?g=d.cache[a].cloneNode():f.test(a)?g=(d.cache[a]=d.createElem(a)).cloneNode():g=d.createElem(a),g.canHaveChildren&&!e.test(a)&&!g.tagUrn?d.frag.appendChild(g):g}function p(a,c){a||(a=b);if(k)return a.createDocumentFragment();c=c||n(a);var d=c.frag.cloneNode(),e=0,f=m(),g=f.length;for(;e",g="hidden"in a,k=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){g=!0,k=!0}})();var s={elements:d.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:c,shivCSS:d.shivCSS!==!1,supportsUnknownElements:k,shivMethods:d.shivMethods!==!1,type:"default",shivDocument:r,createElement:o,createDocumentFragment:p};a.html5=s,r(b)}(this,b),e._version=d,e._domPrefixes=o,e._cssomPrefixes=n,e.testProp=function(a){return B([a])},e.testAllProps=D,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+s.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f + + + + Multicol Polyfill Example + + + + +
+

Things that I like

+
    +
  • Coffee
  • +
  • Tea
  • +
  • The Java Jive
  • +
  • Lazy Sunday mornings
  • +
  • A good book
  • +
  • Nights at the movies
  • +
  • The smell of baking bread
  • +
  • Smiling
  • +
  • Old-fashioned jazz and blues
  • +
  • A freshly-made bed
  • +
  • Hugs
  • +
+
+ + + + \ No newline at end of file diff --git a/9781430265023/Examples/chapter9/Polyfill Example/polyfill-start.html b/9781430265023/Examples/chapter9/Polyfill Example/polyfill-start.html new file mode 100644 index 0000000..a9b7eae --- /dev/null +++ b/9781430265023/Examples/chapter9/Polyfill Example/polyfill-start.html @@ -0,0 +1,56 @@ + + + + + Multicol Polyfill Example + + + +
+

Things that I like

+
    +
  • Coffee
  • +
  • Tea
  • +
  • The Java Jive
  • +
  • Lazy Sunday mornings
  • +
  • A good book
  • +
  • Nights at the movies
  • +
  • The smell of baking bread
  • +
  • Smiling
  • +
  • Old-fashioned jazz and blues
  • +
  • A freshly-made bed
  • +
  • Hugs
  • +
+
+ + \ No newline at end of file diff --git a/9781430265023/Examples/chapter9/Polyfill Example/polyfill/.DS_Store b/9781430265023/Examples/chapter9/Polyfill Example/polyfill/.DS_Store new file mode 100644 index 0000000..ce3278d Binary files /dev/null and b/9781430265023/Examples/chapter9/Polyfill Example/polyfill/.DS_Store differ diff --git a/9781430265023/Examples/chapter9/Polyfill Example/polyfill/README.md b/9781430265023/Examples/chapter9/Polyfill Example/polyfill/README.md new file mode 100644 index 0000000..fae507c --- /dev/null +++ b/9781430265023/Examples/chapter9/Polyfill Example/polyfill/README.md @@ -0,0 +1,19 @@ +## What is it? + +This imitates the CSS3 multicolumn effect for list items for IE8-9. Use it with Modernizr. + +## How does it work? +- Gets all children of an element +- Distributes them on new floating "column" elements +- Hides the original +- Responsive behaviour: On resize, checks if column number changes + +## Usage Example +``` + if (!Modernizr.csscolumns) { + $('.mycolumn-element').multicolumn(); + } +``` + +### License +This script is open-sourced software licensed under the [MIT license](http://opensource.org/licenses/MIT) diff --git a/9781430265023/Examples/chapter9/Polyfill Example/polyfill/angular/multiColumnPolyfill.js b/9781430265023/Examples/chapter9/Polyfill Example/polyfill/angular/multiColumnPolyfill.js new file mode 100644 index 0000000..f9d6484 --- /dev/null +++ b/9781430265023/Examples/chapter9/Polyfill Example/polyfill/angular/multiColumnPolyfill.js @@ -0,0 +1,23 @@ +"use strict"; +/* +* Css column fallback +* Requires multicolumn.js +* @usage +* or +*/ +app.directive('multiColumnPolyfill', [ function () { + return { + restrict: 'AC', + link: function (scope, element, attrs) { + if (!Modernizr.csscolumns) { + var update = function () { + element.multicolumn(); + } + update(); + scope.$watch(attrs.columnRefresh, function (val) { + update(); + }); + } + } + }; +}]); \ No newline at end of file diff --git a/9781430265023/Examples/chapter9/Polyfill Example/polyfill/bower.json b/9781430265023/Examples/chapter9/Polyfill Example/polyfill/bower.json new file mode 100644 index 0000000..23b82f5 --- /dev/null +++ b/9781430265023/Examples/chapter9/Polyfill Example/polyfill/bower.json @@ -0,0 +1,14 @@ +{ + "name": "multicolumn-polyfill", + "version": "1.0.1", + "main": "multicolumn.js", + "description": "Imitates the CSS3 multicolumn effect for list items for IE", + "license": "MIT License", + "ignore": [ + ".jshintrc", + "**/*.txt" + ], + "dependencies": { + "jquery": ">=1.9.0" + } +} diff --git a/9781430265023/Examples/chapter9/Polyfill Example/polyfill/multicolumn.js b/9781430265023/Examples/chapter9/Polyfill Example/polyfill/multicolumn.js new file mode 100644 index 0000000..58ee034 --- /dev/null +++ b/9781430265023/Examples/chapter9/Polyfill Example/polyfill/multicolumn.js @@ -0,0 +1,182 @@ +/** + * CSS3 multicolumn polyfill for list elements for IE + * Distributes items evenly to floating elements (regardless of heights) + * + * usage example: + * if (!Modernizr.csscolumns) { + * $('.mycolumn-element').multicolumn(); + * } + * + * v0.1 + * July 2013 + * Tobias Schmidt + */ +;(function ( $, window, document, undefined ) { + var pluginName = 'multicolumn', + defaults = { + columnGap : 15, //is converted into percent in relative mode + columnCount: 'auto', + wrapperClass : 'column-wrapper', + hiddenClass : 'mc-hidden', + mode: 'relative', + childSelector: false + }; + function Plugin( element, options ) { + this.jse = element; + this.element = $(element); + this.options = $.extend( {}, defaults, options ); + this._defaults = defaults; + this._name = pluginName; + this.init(); + } + Plugin.prototype = { + + init : function() { + this.doColumns(); + this.setResizeHandler(); + }, + + doColumns : function($el) { + var self = this; + var $vel = typeof $el == 'undefined' ? this.element : $el; + + $vel.each(function() { + var $el = $(this); + + // get column Count + var columnCount; + if(self.options.columnCount === 'auto') { + columnCount = $el.css('column-count') ? $el.css('column-count') : $el[0].currentStyle.getAttribute('column-count'); //IE + } else { + columnCount = self.options.columnCount; + } + + // check columns + if(!columnCount || columnCount < 2) { + self.destroy($el); + return; + } + + var gapWidth = self.options.columnGap, + tagName = $el.prop('tagName'), + classes = $el.attr('class'), + listMarginLeft = $el.css('margin-left'), + listMarginRight = $el.css('margin-right'), + listMarginBottom = $el.css('margin-bottom'), + listMarginTop = $el.css('margin-top'), + listPaddingRight = $el.css('padding-right'), + listPaddingLeft = $el.css('padding-left'), + listPaddingBottom = $el.css('padding-bottom'), + listPaddingTop = $el.css('padding-top'), + $children = $el.children(self.options.childSelector); + + // calculate vars + var perColumnItemCount = Math.ceil( $children.length / columnCount ), + containerWidth = $el.parent().outerWidth() - (parseInt(listPaddingLeft, 10) + parseInt(listPaddingRight,10)), + columnWidth = (containerWidth - (gapWidth * (columnCount - 1))) / columnCount; + + if(self.options.mode == 'relative') { + columnWidth = (columnWidth / containerWidth * 100) + '%'; + gapWidth = (gapWidth / containerWidth * 100) + '%'; + } else { + containerWidth = Math.floor(containerWidth); + columnWidth = Math.floor(columnWidth); + } + + + // define wrapper element + var $wrapper = $('
') + .css({ + 'margin-left': listMarginLeft, + 'margin-right': listMarginRight, + 'margin-top': listMarginTop, + 'margin-bottom': listMarginBottom, + 'padding-right' : listPaddingRight, + 'padding-left' : listPaddingLeft, + 'padding-top' : listPaddingTop, + 'padding-bottom' : listPaddingBottom + }); + + // get wrapper element + var $lists = $wrapper.clone(); + + // fill each column with list elements + for (var i = 0; i < columnCount; i++) { + var columnMargin = i > 0 ? gapWidth : 0; + var $listItems = $children.clone(true); + var fromCount = parseInt((perColumnItemCount * i), 10); + var toCount = parseInt((fromCount + perColumnItemCount), 10); + $listItems = $listItems.slice(fromCount, toCount); + + var $list = $('<' + tagName + '/>') + .css({ + 'display': 'block', + 'float': 'left', + 'width': columnWidth, + 'margin-right': 0, + 'margin-left': columnMargin, + 'padding' : 0 + }) + .attr('class', classes); + + //wrap $lists with wrapper and uls + $lists.append($list.append($listItems)); + }; + + //insert new element, remove old + $el.after($lists).hide().addClass(self.options.hiddenClass); + + /* FIX if there are memory leaks: cleanup the + * cleanup element && eventhandlers + * Note: I this case you cannot get the element back + $el.remove(); + */ + }); + }, + + setResizeHandler : function() { + var self = this; + $(window).on('orientationchange pageshow resize', self.waitForFinalEvent(function(e) { + var _self = self; + self.element.each(function() { + var $el = $(this); + _self.destroy($el, _self.bind(_self.doColumns, [$el], _self)); + }); + })).trigger('resize'); + }, + + waitForFinalEvent : function (func, timeout) { + var timeoutID , timeout = timeout || 400; + return function () { + var scope = this , args = arguments; + clearTimeout(timeoutID); + timeoutID = setTimeout( function () { + func.apply( scope , Array.prototype.slice.call( args ) ); + } , timeout ); + } + }, + + destroy : function ($el, callback) { + $el.show().removeClass(this.options.hiddenClass); + $el.next('.' + this.options.wrapperClass).remove(); + + if (typeof callback == 'function') { + callback.call(); + } + }, + + bind : function(fn, args, scope) { + return function () { + fn.apply(scope, args); + }; + } + + }; + + $.fn[pluginName] = function ( options ) { + return this.each(function () { + $.data(this, "plugin_" + pluginName, new Plugin( this, options )); + }); + }; + +})( jQuery, window, document ); diff --git a/9781430265023/Examples/chapter9/flexboxgrid-6.3.0-2.zip b/9781430265023/Examples/chapter9/flexboxgrid-6.3.0-2.zip new file mode 100644 index 0000000..66cadf3 Binary files /dev/null and b/9781430265023/Examples/chapter9/flexboxgrid-6.3.0-2.zip differ diff --git a/9781430265023/__MACOSX/._Examples b/9781430265023/__MACOSX/._Examples new file mode 100644 index 0000000..6382649 Binary files /dev/null and b/9781430265023/__MACOSX/._Examples differ diff --git a/9781430265023/__MACOSX/Examples/._.DS_Store b/9781430265023/__MACOSX/Examples/._.DS_Store new file mode 100644 index 0000000..09fa6bd Binary files /dev/null and b/9781430265023/__MACOSX/Examples/._.DS_Store differ diff --git a/9781430265023/__MACOSX/Examples/._chapter10 b/9781430265023/__MACOSX/Examples/._chapter10 new file mode 100644 index 0000000..fe16dd0 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/._chapter10 differ diff --git a/9781430265023/__MACOSX/Examples/._chapter3 b/9781430265023/__MACOSX/Examples/._chapter3 new file mode 100644 index 0000000..9baa3b9 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/._chapter3 differ diff --git a/9781430265023/__MACOSX/Examples/._chapter4 b/9781430265023/__MACOSX/Examples/._chapter4 new file mode 100644 index 0000000..838dcd1 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/._chapter4 differ diff --git a/9781430265023/__MACOSX/Examples/._chapter5 b/9781430265023/__MACOSX/Examples/._chapter5 new file mode 100644 index 0000000..a685f51 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/._chapter5 differ diff --git a/9781430265023/__MACOSX/Examples/._chapter6 b/9781430265023/__MACOSX/Examples/._chapter6 new file mode 100644 index 0000000..3e06750 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/._chapter6 differ diff --git a/9781430265023/__MACOSX/Examples/._chapter7 b/9781430265023/__MACOSX/Examples/._chapter7 new file mode 100644 index 0000000..ec534d5 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/._chapter7 differ diff --git a/9781430265023/__MACOSX/Examples/._chapter9 b/9781430265023/__MACOSX/Examples/._chapter9 new file mode 100644 index 0000000..12b96eb Binary files /dev/null and b/9781430265023/__MACOSX/Examples/._chapter9 differ diff --git a/9781430265023/__MACOSX/Examples/chapter3/._3.1.html b/9781430265023/__MACOSX/Examples/chapter3/._3.1.html new file mode 100644 index 0000000..8815bed Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter3/._3.1.html differ diff --git a/9781430265023/__MACOSX/Examples/chapter3/._3.2.html b/9781430265023/__MACOSX/Examples/chapter3/._3.2.html new file mode 100644 index 0000000..c3c14ba Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter3/._3.2.html differ diff --git a/9781430265023/__MACOSX/Examples/chapter3/._3.3.html b/9781430265023/__MACOSX/Examples/chapter3/._3.3.html new file mode 100644 index 0000000..5bcc8df Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter3/._3.3.html differ diff --git a/9781430265023/__MACOSX/Examples/chapter3/._3.4.html b/9781430265023/__MACOSX/Examples/chapter3/._3.4.html new file mode 100644 index 0000000..2962840 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter3/._3.4.html differ diff --git a/9781430265023/__MACOSX/Examples/chapter3/._3.5.html b/9781430265023/__MACOSX/Examples/chapter3/._3.5.html new file mode 100644 index 0000000..48e1d6a Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter3/._3.5.html differ diff --git a/9781430265023/__MACOSX/Examples/chapter3/._3.6.html b/9781430265023/__MACOSX/Examples/chapter3/._3.6.html new file mode 100644 index 0000000..23a341a Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter3/._3.6.html differ diff --git a/9781430265023/__MACOSX/Examples/chapter3/._3.7.html b/9781430265023/__MACOSX/Examples/chapter3/._3.7.html new file mode 100644 index 0000000..da2c912 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter3/._3.7.html differ diff --git a/9781430265023/__MACOSX/Examples/chapter3/._3.8.html b/9781430265023/__MACOSX/Examples/chapter3/._3.8.html new file mode 100644 index 0000000..7a809ec Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter3/._3.8.html differ diff --git a/9781430265023/__MACOSX/Examples/chapter4/._.DS_Store b/9781430265023/__MACOSX/Examples/chapter4/._.DS_Store new file mode 100644 index 0000000..09fa6bd Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter4/._.DS_Store differ diff --git a/9781430265023/__MACOSX/Examples/chapter4/._4.1.html b/9781430265023/__MACOSX/Examples/chapter4/._4.1.html new file mode 100644 index 0000000..0f23737 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter4/._4.1.html differ diff --git a/9781430265023/__MACOSX/Examples/chapter4/._4.xx.html b/9781430265023/__MACOSX/Examples/chapter4/._4.xx.html new file mode 100644 index 0000000..660d41b Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter4/._4.xx.html differ diff --git a/9781430265023/__MACOSX/Examples/chapter4/._images b/9781430265023/__MACOSX/Examples/chapter4/._images new file mode 100644 index 0000000..b766473 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter4/._images differ diff --git a/9781430265023/__MACOSX/Examples/chapter4/images/._article.jpg b/9781430265023/__MACOSX/Examples/chapter4/images/._article.jpg new file mode 100644 index 0000000..6e3a226 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter4/images/._article.jpg differ diff --git a/9781430265023/__MACOSX/Examples/chapter4/images/._callout1.jpg b/9781430265023/__MACOSX/Examples/chapter4/images/._callout1.jpg new file mode 100644 index 0000000..f1e2759 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter4/images/._callout1.jpg differ diff --git a/9781430265023/__MACOSX/Examples/chapter4/images/._callout2.jpg b/9781430265023/__MACOSX/Examples/chapter4/images/._callout2.jpg new file mode 100644 index 0000000..9202f87 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter4/images/._callout2.jpg differ diff --git a/9781430265023/__MACOSX/Examples/chapter4/images/._callout3.jpg b/9781430265023/__MACOSX/Examples/chapter4/images/._callout3.jpg new file mode 100644 index 0000000..10f3aea Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter4/images/._callout3.jpg differ diff --git a/9781430265023/__MACOSX/Examples/chapter4/images/._featured1.jpg b/9781430265023/__MACOSX/Examples/chapter4/images/._featured1.jpg new file mode 100644 index 0000000..a6d8a52 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter4/images/._featured1.jpg differ diff --git a/9781430265023/__MACOSX/Examples/chapter4/images/._featured2.jpg b/9781430265023/__MACOSX/Examples/chapter4/images/._featured2.jpg new file mode 100644 index 0000000..1056a18 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter4/images/._featured2.jpg differ diff --git a/9781430265023/__MACOSX/Examples/chapter4/images/._featured3.jpg b/9781430265023/__MACOSX/Examples/chapter4/images/._featured3.jpg new file mode 100644 index 0000000..1791dd4 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter4/images/._featured3.jpg differ diff --git a/9781430265023/__MACOSX/Examples/chapter4/images/._featured4.jpg b/9781430265023/__MACOSX/Examples/chapter4/images/._featured4.jpg new file mode 100644 index 0000000..dbdfa6f Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter4/images/._featured4.jpg differ diff --git a/9781430265023/__MACOSX/Examples/chapter4/images/._featured5.jpg b/9781430265023/__MACOSX/Examples/chapter4/images/._featured5.jpg new file mode 100644 index 0000000..86541eb Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter4/images/._featured5.jpg differ diff --git a/9781430265023/__MACOSX/Examples/chapter4/images/._featured6.jpg b/9781430265023/__MACOSX/Examples/chapter4/images/._featured6.jpg new file mode 100644 index 0000000..4eee82b Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter4/images/._featured6.jpg differ diff --git a/9781430265023/__MACOSX/Examples/chapter4/images/._featured7.jpg b/9781430265023/__MACOSX/Examples/chapter4/images/._featured7.jpg new file mode 100644 index 0000000..18a2f4b Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter4/images/._featured7.jpg differ diff --git a/9781430265023/__MACOSX/Examples/chapter4/images/._featured8.jpg b/9781430265023/__MACOSX/Examples/chapter4/images/._featured8.jpg new file mode 100644 index 0000000..a5e62b6 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter4/images/._featured8.jpg differ diff --git a/9781430265023/__MACOSX/Examples/chapter4/images/._featured9.jpg b/9781430265023/__MACOSX/Examples/chapter4/images/._featured9.jpg new file mode 100644 index 0000000..74c0b15 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter4/images/._featured9.jpg differ diff --git a/9781430265023/__MACOSX/Examples/chapter4/images/._mobydick.jpg b/9781430265023/__MACOSX/Examples/chapter4/images/._mobydick.jpg new file mode 100644 index 0000000..90ad043 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter4/images/._mobydick.jpg differ diff --git a/9781430265023/__MACOSX/Examples/chapter4/images/._promoted1.jpg b/9781430265023/__MACOSX/Examples/chapter4/images/._promoted1.jpg new file mode 100644 index 0000000..21fdb6c Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter4/images/._promoted1.jpg differ diff --git a/9781430265023/__MACOSX/Examples/chapter4/images/._promoted2.jpg b/9781430265023/__MACOSX/Examples/chapter4/images/._promoted2.jpg new file mode 100644 index 0000000..12ed8ba Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter4/images/._promoted2.jpg differ diff --git a/9781430265023/__MACOSX/Examples/chapter4/images/._rightarrow.png b/9781430265023/__MACOSX/Examples/chapter4/images/._rightarrow.png new file mode 100644 index 0000000..c1f495a Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter4/images/._rightarrow.png differ diff --git a/9781430265023/__MACOSX/Examples/chapter5/._.DS_Store b/9781430265023/__MACOSX/Examples/chapter5/._.DS_Store new file mode 100644 index 0000000..09fa6bd Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter5/._.DS_Store differ diff --git a/9781430265023/__MACOSX/Examples/chapter5/._chapter5.html b/9781430265023/__MACOSX/Examples/chapter5/._chapter5.html new file mode 100644 index 0000000..bcd394a Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter5/._chapter5.html differ diff --git a/9781430265023/__MACOSX/Examples/chapter5/._images b/9781430265023/__MACOSX/Examples/chapter5/._images new file mode 100644 index 0000000..bc2f82e Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter5/._images differ diff --git a/9781430265023/__MACOSX/Examples/chapter5/images/._badge-locations.png b/9781430265023/__MACOSX/Examples/chapter5/images/._badge-locations.png new file mode 100644 index 0000000..ccded07 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter5/images/._badge-locations.png differ diff --git a/9781430265023/__MACOSX/Examples/chapter5/images/._badge-quality.png b/9781430265023/__MACOSX/Examples/chapter5/images/._badge-quality.png new file mode 100644 index 0000000..a29d636 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter5/images/._badge-quality.png differ diff --git a/9781430265023/__MACOSX/Examples/chapter5/images/._badge-tradeup.png b/9781430265023/__MACOSX/Examples/chapter5/images/._badge-tradeup.png new file mode 100644 index 0000000..42a510b Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter5/images/._badge-tradeup.png differ diff --git a/9781430265023/__MACOSX/Examples/chapter5/images/._badge-valueadd.png b/9781430265023/__MACOSX/Examples/chapter5/images/._badge-valueadd.png new file mode 100644 index 0000000..373e078 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter5/images/._badge-valueadd.png differ diff --git a/9781430265023/__MACOSX/Examples/chapter5/images/._bigicon-freeadvice.png b/9781430265023/__MACOSX/Examples/chapter5/images/._bigicon-freeadvice.png new file mode 100644 index 0000000..b9b5e1e Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter5/images/._bigicon-freeadvice.png differ diff --git a/9781430265023/__MACOSX/Examples/chapter5/images/._bigicon-incentives.png b/9781430265023/__MACOSX/Examples/chapter5/images/._bigicon-incentives.png new file mode 100644 index 0000000..a0585ac Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter5/images/._bigicon-incentives.png differ diff --git a/9781430265023/__MACOSX/Examples/chapter5/images/._bigicon-locations.png b/9781430265023/__MACOSX/Examples/chapter5/images/._bigicon-locations.png new file mode 100644 index 0000000..51df1a9 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter5/images/._bigicon-locations.png differ diff --git a/9781430265023/__MACOSX/Examples/chapter5/images/._bigicon-noobligation.png b/9781430265023/__MACOSX/Examples/chapter5/images/._bigicon-noobligation.png new file mode 100644 index 0000000..ad5ae50 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter5/images/._bigicon-noobligation.png differ diff --git a/9781430265023/__MACOSX/Examples/chapter5/images/._bigicon-quality.png b/9781430265023/__MACOSX/Examples/chapter5/images/._bigicon-quality.png new file mode 100644 index 0000000..c48d14f Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter5/images/._bigicon-quality.png differ diff --git a/9781430265023/__MACOSX/Examples/chapter5/images/._bigicon-removals.png b/9781430265023/__MACOSX/Examples/chapter5/images/._bigicon-removals.png new file mode 100644 index 0000000..3550626 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter5/images/._bigicon-removals.png differ diff --git a/9781430265023/__MACOSX/Examples/chapter7/._.DS_Store b/9781430265023/__MACOSX/Examples/chapter7/._.DS_Store new file mode 100644 index 0000000..09fa6bd Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter7/._.DS_Store differ diff --git a/9781430265023/__MACOSX/Examples/chapter7/._chapter7ex1.html b/9781430265023/__MACOSX/Examples/chapter7/._chapter7ex1.html new file mode 100644 index 0000000..5c2df08 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter7/._chapter7ex1.html differ diff --git a/9781430265023/__MACOSX/Examples/chapter7/._chapter7ex2.html b/9781430265023/__MACOSX/Examples/chapter7/._chapter7ex2.html new file mode 100644 index 0000000..9133e0a Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter7/._chapter7ex2.html differ diff --git a/9781430265023/__MACOSX/Examples/chapter7/._chapter7ex3.html b/9781430265023/__MACOSX/Examples/chapter7/._chapter7ex3.html new file mode 100644 index 0000000..3875316 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter7/._chapter7ex3.html differ diff --git a/9781430265023/__MACOSX/Examples/chapter7/._chapter7ex4.html b/9781430265023/__MACOSX/Examples/chapter7/._chapter7ex4.html new file mode 100644 index 0000000..6b0ec23 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter7/._chapter7ex4.html differ diff --git a/9781430265023/__MACOSX/Examples/chapter7/._guitar.jpg b/9781430265023/__MACOSX/Examples/chapter7/._guitar.jpg new file mode 100644 index 0000000..4fcc191 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter7/._guitar.jpg differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/._.DS_Store b/9781430265023/__MACOSX/Examples/chapter9/._.DS_Store new file mode 100644 index 0000000..09fa6bd Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/._.DS_Store differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/._Chapter 5 revisited b/9781430265023/__MACOSX/Examples/chapter9/._Chapter 5 revisited new file mode 100644 index 0000000..e33275d Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/._Chapter 5 revisited differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/._Polyfill Example b/9781430265023/__MACOSX/Examples/chapter9/._Polyfill Example new file mode 100644 index 0000000..8bff885 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/._Polyfill Example differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/._flexboxgrid-6.3.0-2.zip b/9781430265023/__MACOSX/Examples/chapter9/._flexboxgrid-6.3.0-2.zip new file mode 100644 index 0000000..d672c0e Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/._flexboxgrid-6.3.0-2.zip differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._.DS_Store b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._.DS_Store new file mode 100644 index 0000000..09fa6bd Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._.DS_Store differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._CNAME b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._CNAME new file mode 100644 index 0000000..70052c9 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._CNAME differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._Gruntfile.js b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._Gruntfile.js new file mode 100644 index 0000000..6fe3d48 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._Gruntfile.js differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._LICENSE b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._LICENSE new file mode 100644 index 0000000..1921b22 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._LICENSE differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._README.md b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._README.md new file mode 100644 index 0000000..a834a71 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._README.md differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._bower.json b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._bower.json new file mode 100644 index 0000000..f2f96e9 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._bower.json differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._chapter9.html b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._chapter9.html new file mode 100644 index 0000000..d5be1a5 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._chapter9.html differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._css b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._css new file mode 100644 index 0000000..73ccec1 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._css differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._design b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._design new file mode 100644 index 0000000..239d7ba Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._design differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._dist b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._dist new file mode 100644 index 0000000..f2d865b Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._dist differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._images b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._images new file mode 100644 index 0000000..88b241a Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._images differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._img b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._img new file mode 100644 index 0000000..03f4696 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._img differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._index.html b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._index.html new file mode 100644 index 0000000..4dc9c2b Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._index.html differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._js b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._js new file mode 100644 index 0000000..d540d0c Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._js differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._package.json b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._package.json new file mode 100644 index 0000000..31d427c Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._package.json differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._src b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._src new file mode 100644 index 0000000..366aaa6 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._src differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._vendor b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._vendor new file mode 100644 index 0000000..c04bda1 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/._vendor differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/css/._flexboxgrid.css b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/css/._flexboxgrid.css new file mode 100644 index 0000000..4926eaf Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/css/._flexboxgrid.css differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/css/._flexboxgrid.min.css b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/css/._flexboxgrid.min.css new file mode 100644 index 0000000..df0a8cd Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/css/._flexboxgrid.min.css differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/css/._index.css b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/css/._index.css new file mode 100644 index 0000000..49e6c54 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/css/._index.css differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/css/._index.min.css b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/css/._index.min.css new file mode 100644 index 0000000..98f84bb Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/css/._index.min.css differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/design/._flexboxgrid-template.sketch b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/design/._flexboxgrid-template.sketch new file mode 100644 index 0000000..5fb659f Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/design/._flexboxgrid-template.sketch differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/dist/._flexboxgrid.css b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/dist/._flexboxgrid.css new file mode 100644 index 0000000..51a2fad Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/dist/._flexboxgrid.css differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/dist/._flexboxgrid.min.css b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/dist/._flexboxgrid.min.css new file mode 100644 index 0000000..5aa195f Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/dist/._flexboxgrid.min.css differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/images/._badge-locations.png b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/images/._badge-locations.png new file mode 100644 index 0000000..564a5f4 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/images/._badge-locations.png differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/images/._badge-quality.png b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/images/._badge-quality.png new file mode 100644 index 0000000..8202774 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/images/._badge-quality.png differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/images/._badge-tradeup.png b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/images/._badge-tradeup.png new file mode 100644 index 0000000..3049383 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/images/._badge-tradeup.png differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/images/._badge-valueadd.png b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/images/._badge-valueadd.png new file mode 100644 index 0000000..585c614 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/images/._badge-valueadd.png differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/images/._bigicon-freeadvice.png b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/images/._bigicon-freeadvice.png new file mode 100644 index 0000000..9b53cce Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/images/._bigicon-freeadvice.png differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/images/._bigicon-incentives.png b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/images/._bigicon-incentives.png new file mode 100644 index 0000000..c993501 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/images/._bigicon-incentives.png differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/images/._bigicon-locations.png b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/images/._bigicon-locations.png new file mode 100644 index 0000000..6608baa Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/images/._bigicon-locations.png differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/images/._bigicon-noobligation.png b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/images/._bigicon-noobligation.png new file mode 100644 index 0000000..110103c Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/images/._bigicon-noobligation.png differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/images/._bigicon-quality.png b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/images/._bigicon-quality.png new file mode 100644 index 0000000..df66039 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/images/._bigicon-quality.png differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/images/._bigicon-removals.png b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/images/._bigicon-removals.png new file mode 100644 index 0000000..1e397ce Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/images/._bigicon-removals.png differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/img/._menu.svg b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/img/._menu.svg new file mode 100644 index 0000000..c3240ca Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/img/._menu.svg differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/js/._index.js b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/js/._index.js new file mode 100644 index 0000000..8e0d247 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/js/._index.js differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/src/._css b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/src/._css new file mode 100644 index 0000000..6b676a5 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/src/._css differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/src/._index.html b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/src/._index.html new file mode 100644 index 0000000..8ed9620 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/src/._index.html differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/src/._js b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/src/._js new file mode 100644 index 0000000..e62161f Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/src/._js differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/src/css/._flexboxgrid.css b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/src/css/._flexboxgrid.css new file mode 100644 index 0000000..a35f1b1 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/src/css/._flexboxgrid.css differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/src/css/._style.css b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/src/css/._style.css new file mode 100644 index 0000000..caf4c57 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/src/css/._style.css differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/src/js/._index.js b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/src/js/._index.js new file mode 100644 index 0000000..2d92076 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/src/js/._index.js differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/vendor/._css b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/vendor/._css new file mode 100644 index 0000000..5457f62 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/vendor/._css differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/vendor/._js b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/vendor/._js new file mode 100644 index 0000000..6c61ef1 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/vendor/._js differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/vendor/css/._normalize.css b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/vendor/css/._normalize.css new file mode 100644 index 0000000..e9eb91c Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/vendor/css/._normalize.css differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/vendor/js/._modernizr.flexbox.js b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/vendor/js/._modernizr.flexbox.js new file mode 100644 index 0000000..f690662 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Chapter 5 revisited/vendor/js/._modernizr.flexbox.js differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Polyfill Example/._.DS_Store b/9781430265023/__MACOSX/Examples/chapter9/Polyfill Example/._.DS_Store new file mode 100644 index 0000000..09fa6bd Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Polyfill Example/._.DS_Store differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Polyfill Example/._polyfill b/9781430265023/__MACOSX/Examples/chapter9/Polyfill Example/._polyfill new file mode 100644 index 0000000..0eae483 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Polyfill Example/._polyfill differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Polyfill Example/._polyfill-end.html b/9781430265023/__MACOSX/Examples/chapter9/Polyfill Example/._polyfill-end.html new file mode 100644 index 0000000..6be2f74 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Polyfill Example/._polyfill-end.html differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Polyfill Example/._polyfill-start.html b/9781430265023/__MACOSX/Examples/chapter9/Polyfill Example/._polyfill-start.html new file mode 100644 index 0000000..7cd3425 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Polyfill Example/._polyfill-start.html differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Polyfill Example/polyfill/._.DS_Store b/9781430265023/__MACOSX/Examples/chapter9/Polyfill Example/polyfill/._.DS_Store new file mode 100644 index 0000000..09fa6bd Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Polyfill Example/polyfill/._.DS_Store differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Polyfill Example/polyfill/._README.md b/9781430265023/__MACOSX/Examples/chapter9/Polyfill Example/polyfill/._README.md new file mode 100644 index 0000000..d68386c Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Polyfill Example/polyfill/._README.md differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Polyfill Example/polyfill/._angular b/9781430265023/__MACOSX/Examples/chapter9/Polyfill Example/polyfill/._angular new file mode 100644 index 0000000..844e2b7 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Polyfill Example/polyfill/._angular differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Polyfill Example/polyfill/._bower.json b/9781430265023/__MACOSX/Examples/chapter9/Polyfill Example/polyfill/._bower.json new file mode 100644 index 0000000..39bed89 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Polyfill Example/polyfill/._bower.json differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Polyfill Example/polyfill/._multicolumn.js b/9781430265023/__MACOSX/Examples/chapter9/Polyfill Example/polyfill/._multicolumn.js new file mode 100644 index 0000000..9687c65 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Polyfill Example/polyfill/._multicolumn.js differ diff --git a/9781430265023/__MACOSX/Examples/chapter9/Polyfill Example/polyfill/angular/._multiColumnPolyfill.js b/9781430265023/__MACOSX/Examples/chapter9/Polyfill Example/polyfill/angular/._multiColumnPolyfill.js new file mode 100644 index 0000000..83b2989 Binary files /dev/null and b/9781430265023/__MACOSX/Examples/chapter9/Polyfill Example/polyfill/angular/._multiColumnPolyfill.js differ diff --git a/LICENSE.txt b/LICENSE.txt new file mode 100644 index 0000000..384ff7a --- /dev/null +++ b/LICENSE.txt @@ -0,0 +1,27 @@ +Freeware License, some rights reserved + +Copyright (c) 2016 Sam Hampton-Smith + +Permission is hereby granted, free of charge, to anyone obtaining a copy +of this software and associated documentation files (the "Software"), +to work with the Software within the limits of freeware distribution and fair use. +This includes the rights to use, copy, and modify the Software for personal use. +Users are also allowed and encouraged to submit corrections and modifications +to the Software for the benefit of other users. + +It is not allowed to reuse, modify, or redistribute the Software for +commercial use in any way, or for a users educational materials such as books +or blog articles without prior permission from the copyright holder. + +The above copyright notice and this permission notice need to be included +in all copies or substantial portions of the software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS OR APRESS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. + + diff --git a/README.md b/README.md new file mode 100644 index 0000000..590f435 --- /dev/null +++ b/README.md @@ -0,0 +1,15 @@ +#Apress Source Code + +This repository accompanies [*Pro CSS3 Layout Techniques*](http://www.apress.com/9781430265023) by Sam Hampton-Smith (Apress, 2016). + +![Cover image](9781430265023.jpg) + +Download the files as a zip using the green button, or clone the repository to your machine using Git. + +##Releases + +Release v1.0 corresponds to the code in the published book, without corrections or updates. + +##Contributions + +See the file Contributing.md for more information on how you can contribute to this repository. diff --git a/contributing.md b/contributing.md new file mode 100644 index 0000000..f6005ad --- /dev/null +++ b/contributing.md @@ -0,0 +1,14 @@ +# Contributing to Apress Source Code + +Copyright for Apress source code belongs to the author(s). However, under fair use you are encouraged to fork and contribute minor corrections and updates for the benefit of the author(s) and other readers. + +## How to Contribute + +1. Make sure you have a GitHub account. +2. Fork the repository for the relevant book. +3. Create a new branch on which to make your change, e.g. +`git checkout -b my_code_contribution` +4. Commit your change. Include a commit message describing the correction. Please note that if your commit message is not clear, the correction will not be accepted. +5. Submit a pull request. + +Thank you for your contribution! \ No newline at end of file