{"id":976,"date":"2019-01-28T12:40:15","date_gmt":"2019-01-28T16:40:15","guid":{"rendered":"http:\/\/www.jfciii.com\/blog\/?p=976"},"modified":"2019-04-28T15:13:14","modified_gmt":"2019-04-28T19:13:14","slug":"playing-around-with-flexbox-by-starting-with-articles-and-codepens-from-others","status":"publish","type":"post","link":"http:\/\/www.jfciii.com\/blog\/2019\/01\/28\/playing-around-with-flexbox-by-starting-with-articles-and-codepens-from-others\/","title":{"rendered":"Playing Around with Flexbox by Starting with Articles and CodePen&#8217;s from Others"},"content":{"rendered":"<p>About a week ago on January 13, 2019, I saw a tweet from <a href=\"http:\/\/www.heydonworks.com\/\">Heydon Pickering<\/a>\u00a0 ( <a href=\"https:\/\/twitter.com\/heydonworks\">@heydonworks<\/a> ) talking about how he was using Flexbox to switch directly between multiple and single column layouts but didn\u2019t have time to read it at the time because I was at work.<\/p>\n<blockquote class=\"twitter-tweet\" data-lang=\"en\">\n<p dir=\"ltr\" lang=\"en\">?? The Flexbox Holy Albatross<\/p>\n<p>I found a way to make Flexbox switch directly between multiple and single column layouts. No media queries; no JS ???<a href=\"https:\/\/t.co\/085xVal8Rp\">https:\/\/t.co\/085xVal8Rp<\/a><\/p>\n<p>\u2014 @heydon@mastodon.social (@heydonworks) <a href=\"https:\/\/twitter.com\/heydonworks\/status\/1084392089926991872?ref_src=twsrc%5Etfw\">January 13, 2019<\/a><\/p><\/blockquote>\n<p><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<p>Later that day I saw <a href=\"https:\/\/snook.ca\/\">Jonathan Snook<\/a> ( <a href=\"https:\/\/twitter.com\/snookca\/\">@snookca<\/a> ) had tweeted about some tweaks he had made to Heydon\u2019s CodePen example.<\/p>\n<blockquote class=\"twitter-tweet\" data-lang=\"en\">\n<p dir=\"ltr\" lang=\"en\">After reading <a href=\"https:\/\/twitter.com\/heydonworks?ref_src=twsrc%5Etfw\">@heydonworks<\/a>&#8216;s post on switching from a multiple column flexbox layout to a single column layout without an intermediate step, I spent some time trying to understand why it worked. I wrote up my notes: <a href=\"https:\/\/t.co\/SBQb4D1ppU\">https:\/\/t.co\/SBQb4D1ppU<\/a><\/p>\n<p>\u2014 Snook (@snookca) <a href=\"https:\/\/twitter.com\/snookca\/status\/1084650287300792321?ref_src=twsrc%5Etfw\">January 14, 2019<\/a><\/p><\/blockquote>\n<p><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<p>Here is Heydon&#8217;s &#8220;<a href=\"http:\/\/www.heydonworks.com\/article\/the-flexbox-holy-albatross\">The Flexbox Holy Albatross<\/a>&#8221; article which he didn&#8217;t want to use media queries or JavaScript, along with Jonathan&#8217;s article about Heydon&#8217;s &#8220;<a href=\"https:\/\/snook.ca\/archives\/html_and_css\/understanding-the-flexbox-albatross\">Understanding the Albatross<\/a>&#8221; article. <strong>NOTE<\/strong>: I used media queries to change font sizes in my example.<\/p>\n<h2>Started to Play with Heydon&#8217;s Code<\/h2>\n<p>After reading through both articles, I started playing around with <a href=\"https:\/\/codepen.io\/heydon\/pen\/ebQyYV\">Heydon\u2019s CodePen<\/a> to see what would happen with only two blocks for my <a href=\"http:\/\/jfciii.com\/atehere\/index.php?slct=dca\">jfciii Ate Here<\/a> restaurant list. After playing around for a bit, I grabbed the HTML and CSS I had messed with and copied it into Textmate to make one page using my template for <a href=\"http:\/\/jfciii.com\/atehere\/index.php?slct=dca\">jfciii Ate Here<\/a>. At that point, I gathered a few restaurants from my list of place to eat in Washington, DC and replaced the blocks with real content to see what doing so would be like on the page.<\/p>\n<p>Part of my picking certain restaurants was to gather ones with different lengths to content for the same row for a wide width screen (think desktop\/laptop). At first, I started with two per restaurants to see what that looked like for desktop\/laptop and different width between there and a narrow width for a phone.<\/p>\n<p>To me, it seemed that having two items to a line\/row seemed like it could be confusing when reading the content, But then I remembered that most of the time people would most likely checking for restaurants on their phones while they were out wandering a city or sitting with friends instead of a desktop or laptop.<\/p>\n<h2>Pushed My Code Example<\/h2>\n<p>After pushing the updates a few different times to my website, I asked a coworker what they thought about the two columns, and they thought maybe adding a bit of space between the two columns would make it easier to read.<\/p>\n<p>I then spent some time working on my CSS to add a few REMs worth to the right of them which seemed to work. But then I had the problem of forgetting I had to only added it to the first item in the list for a widescreen device. I ended up using <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:nth-child\">:nth-child(odd)<\/a>, so the extra padding was on the first item in the row. Next, I had to remove the extra padding when in a narrower view such as on my phone.<\/p>\n<p>Then I decided to attempt to use three restaurants to a row for a few rows and then two for one, and one with only one restaurant to see how they all looked before updating my PHP code to generate a given amount to my application page.<\/p>\n<p>When I did that, I then had to add a max-width to the restaurant content container, so it didn\u2019t span the width of a row, so the reading experience was better for people because of the long line length.<\/p>\n<p>So here is <a href=\"http:\/\/jfciii.com\/css-grid.html\">my experiment with a bit of flexbox for jfciii Ate Here<\/a> and the <a href=\"http:\/\/jfciii.com\/atehere\/index.php?slct=dca\">current look of one restaurant at a time for the wider width<\/a>.<\/p>\n<h2>Thanks, Guys<\/h2>\n<p>Thanks, again Heydon and Jonathan for your articles and examples to get me to play around with flexbox.<\/p>\n<h2>Further Reading and Video Watching<\/h2>\n<p>Now it&#8217;s off to spend time finishing up reading <a href=\"https:\/\/rachelandrew.co.uk\/\">Rachel Andrew<\/a>\u2019s ( <a href=\"https:\/\/twitter.com\/rachelandrew\">@rachelandrew<\/a> ) book from <a href=\"https:\/\/abookapart.com\/\">A Book Apart<\/a> &#8220;<a href=\"https:\/\/abookapart.com\/products\/the-new-css-layout\">The New CSS Layout<\/a>&#8220;. Then start reading Rachel and <a href=\"http:\/\/jensimmons.com\/\">Jen Simmons<\/a> ( <a href=\"https:\/\/twitter.com\/jensimmons\">@jensimmons<\/a> ) other work and watching both of their amazing videos to understand CSS Grid better. See below for more of their work.<\/p>\n<h3>Rachel Andrew<\/h3>\n<ul>\n<li><a href=\"https:\/\/abookapart.com\/products\/the-new-css-layout\">The New CSS Layout (Book)<\/a><\/li>\n<li><a href=\"https:\/\/www.youtube.com\/channel\/UCJ0_R6U3ZClQDGpVJNjuPAQ\/featured\"><span class=\"screen-reader-text\">Rachel Andrew&#8217;s <\/span>CSS Grid videos on YouTube<\/a><\/li>\n<li><a href=\"https:\/\/rachelandrew.co.uk\/archives\/\"><span class=\"screen-reader-text\">Rachel&#8217;s<\/span> Writing<\/a><\/li>\n<\/ul>\n<h3>Jen Simmons<\/h3>\n<ul>\n<li><a href=\"https:\/\/www.youtube.com\/layoutland\"><span class=\"screen-reader-text\">Jen Simmons <\/span>CSS Grid Vvdeos at Layout Land on YouTube<\/a><\/li>\n<li><a href=\"https:\/\/labs.jensimmons.com\/\">CSS Grid Experimental Labs examples<\/a><\/li>\n<li><a href=\"http:\/\/jensimmons.com\/writing\"><span class=\"screen-reader-text\">Jen&#8217;s <\/span>Writing<\/a><\/li>\n<\/ul>\n<h2>Conclusion<\/h2>\n<p>Please leave a comment of which number of restaurants per row for wider screens you think works for ease of reading and compare against my current version of jfciii Ate Here.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>About a week ago on January 13, 2019, I saw a tweet from Heydon Pickering\u00a0 ( @heydonworks ) talking about how he was using Flexbox to switch directly between multiple and single column layouts but didn\u2019t have time to read &hellip; <a href=\"http:\/\/www.jfciii.com\/blog\/2019\/01\/28\/playing-around-with-flexbox-by-starting-with-articles-and-codepens-from-others\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[259,213,21,26,261,173,87,214],"tags":[],"class_list":["post-976","post","type-post","status-publish","format-standard","hentry","category-259","category-ate-here","category-css","category-development","category-flexbox","category-food","category-html","category-restaurants"],"_links":{"self":[{"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/posts\/976","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/comments?post=976"}],"version-history":[{"count":22,"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/posts\/976\/revisions"}],"predecessor-version":[{"id":998,"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/posts\/976\/revisions\/998"}],"wp:attachment":[{"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/media?parent=976"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/categories?post=976"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/tags?post=976"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}