Created
October 3, 2017 15:34
-
-
Save pertrai1/de4bea4dd78d2c0cdd23ead02eadea5e to your computer and use it in GitHub Desktop.
FE Masters Float Example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Border box declaration | |
| https://www.paulirish.com/2012/box-sizing-border-box-ftw/ */ | |
| html { | |
| box-sizing: border-box; | |
| } | |
| /* inherit border-box on all elements in the universe and before and after | |
| */ | |
| *, | |
| *:before, | |
| *:after { | |
| box-sizing: inherit; | |
| } | |
| body { | |
| font-family: Arial, Geneva, sans-serif; | |
| } | |
| a { | |
| color: #2772B0; | |
| } | |
| .wrapper { | |
| width: 97%; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| float: none; | |
| background-color: #fff; | |
| } | |
| div img { | |
| width: 100%; | |
| max-width: 225px; | |
| } | |
| /* grid system -- mobile first! */ | |
| [class*="col-"] { | |
| clear: both; | |
| content: ""; | |
| display: table; | |
| } | |
| .columns > article { | |
| float: left; | |
| margin: 2.5%; | |
| padding: 1%; | |
| } | |
| .col-4 > article { | |
| background: blue; | |
| } | |
| .col-2 > article { | |
| background: green; | |
| } | |
| .col-wide > article { | |
| background: yellow; | |
| } | |
| .col-full { | |
| background: red; | |
| margin: 0 auto; | |
| width: 95%; | |
| } | |
| /* Mobile Landscape Screen Sizes */ | |
| @media only screen and (min-width: 480px) { | |
| .col-4 > article { | |
| width: 45%; | |
| } | |
| .col-2 > article { | |
| width: 95%; | |
| } | |
| } | |
| /* Desktop screen Sizes */ | |
| @media only screen and (min-width: 768px) { | |
| .col-4 > article { | |
| width: 20%; | |
| } | |
| .col-2 > article { | |
| width: 45%; | |
| } | |
| .col-wide > article { | |
| width: 45%; | |
| } | |
| .col-wide > article:nth-child(2) { | |
| width: 70%; | |
| } | |
| .col-wide > article:nth-child(1) { | |
| width: 20%; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Document</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="css/normalize.css"> | |
| <link rel="stylesheet" href="css/floats.css"> | |
| </head> | |
| <body> | |
| <div class="wrapper"> | |
| <!-- row 1, 4 individual boxes --> | |
| <div class="columns col-4"> | |
| <article> | |
| <h3>Boston Cream Pie</h3> | |
| <img src="img/boston-cream.jpg" alt="Boston creme pie."> | |
| <p>Boston's famous dessert, a combination of yellow cake, vanilla pudding, and chocolate frosting.</p> | |
| <p><a href="http://www.foodnetwork.com/recipes/boston-cream-pie-recipe0-1908702">Read more >></a></p> | |
| </article> | |
| <article> | |
| <h3>Coconut Cream Pie</h3> | |
| <img src="img/coconut-cream.jpg" alt="Coconut cream pie."> | |
| <p>Coconut cream pie will take you to an island escape. Especially delicious in winter.</p> | |
| <p><a href="https://www.favfamilyrecipes.com/coconut-cream-pie-2/">Read more >></a></p> | |
| </article> | |
| <article> | |
| <h3>Key Lime Pie</h3> | |
| <img src="img/keylime-pie.jpg" alt="Key lime pie."> | |
| <p>Key lime pie is based on the tiny key limes from Florida. These limes are less sour than conventional limes. </p> | |
| <p><a href="https://www.epicurious.com/recipes/food/views/key-lime-pie-108125" target="_blank">Read more >></a></p> | |
| </article> | |
| <article> | |
| <h3>Pumpkin Pie</h3> | |
| <img src="img/pumpkin-pie.jpg" alt="Pumpkin pie."> | |
| <p>A staple of every Thanksgiving dinner table, pumpkin pie is delicious any time of year.</p> | |
| <p><a href="http://www.kingarthurflour.com/recipes/pumpkin-pie-recipe" target="_blank">Read more >></a></p> | |
| </article> | |
| </div> | |
| <!-- row 2, 2 boxes spanning 2 rows --> | |
| <div class="columns col-2"> | |
| <article> | |
| <h3>Key Lime Pie</h3> | |
| <img src="img/keylime-pie.jpg" alt="Key lime pie."> | |
| <p>Key lime pie is based on the tiny key limes from Florida. These limes are less sour than conventional limes. </p> | |
| <p><a href="https://www.epicurious.com/recipes/food/views/key-lime-pie-108125" target="_blank">Read more >></a></p> | |
| </article> | |
| <article> | |
| <h3>Pumpkin Pie</h3> | |
| <img src="img/pumpkin-pie.jpg" alt="Pumpkin pie."> | |
| <p>A staple of every Thanksgiving dinner table, pumpkin pie is delicious any time of year.</p> | |
| <p><a href="http://www.kingarthurflour.com/recipes/pumpkin-pie-recipe" target="_blank">Read more >></a></p> | |
| </article> | |
| </div> | |
| <!-- row 4: narrow left column, wide right/content column --> | |
| <div class="columns col-wide"> | |
| <article> | |
| <h3>Boston Cream Pie</h3> | |
| <img src="img/boston-cream.jpg" alt="Boston creme pie."> | |
| <p>Boston's famous dessert, a combination of yellow cake, vanilla pudding, and chocolate frosting.</p> | |
| <p><a href="http://www.foodnetwork.com/recipes/boston-cream-pie-recipe0-1908702">Read more >></a></p> | |
| </article> | |
| <article> | |
| <h3>Coconut Cream Pie</h3> | |
| <img src="img/coconut-cream.jpg" alt="Coconut cream pie."> | |
| <p>Coconut cream pie will take you to an island escape. Especially delicious in winter.</p> | |
| <p><a href="https://www.favfamilyrecipes.com/coconut-cream-pie-2/">Read more >></a></p> | |
| </article> | |
| </div> | |
| <!-- row 4: one column --> | |
| <div class="columns col-full"> | |
| <article> | |
| <h3>Boston Cream Pie</h3> | |
| <img src="img/boston-cream.jpg" alt="Boston creme pie."> | |
| <p>Boston's famous dessert, a combination of yellow cake, vanilla pudding, and chocolate frosting.</p> | |
| <p><a href="http://www.foodnetwork.com/recipes/boston-cream-pie-recipe0-1908702">Read more >></a></p> | |
| </article> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment