{"id":625,"date":"2021-02-13T19:48:07","date_gmt":"2021-02-14T00:48:07","guid":{"rendered":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-21\/?p=625"},"modified":"2021-09-14T09:23:31","modified_gmt":"2021-09-14T13:23:31","slug":"one-line-layouts","status":"publish","type":"post","link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/topics\/css\/one-line-layouts\/","title":{"rendered":"One-Line Layouts"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\"><strong>10 modern layouts in 1 line of CSS<\/strong><\/h2>\n\n\n\n<p>by Una Kravets<\/p>\n\n\n\n<p>In this article and related resources Una shows how to create modern layouts with just a small amount of CSS. The layouts mostly use CSS Grid and Flexbox.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Article<\/strong> (written and video): <a href=\"https:\/\/web.dev\/one-line-layouts\/\">https:\/\/web.dev\/one-line-layouts\/<\/a>&nbsp;<\/li><li><strong>Editable Demo Examples on Glitch<\/strong>: <a href=\"https:\/\/1linelayouts.glitch.me\/\">https:\/\/1linelayouts.glitch.me\/<\/a>&nbsp;<\/li><li><strong>GitHub Repository<\/strong>: <a href=\"https:\/\/github.com\/una\/1linelayouts\">https:\/\/github.com\/una\/1linelayouts<\/a>&nbsp;<\/li><li><strong>YouTube Video page <\/strong>[21m 38s]: <a href=\"https:\/\/youtu.be\/qm0IfG1GyZU\">https:\/\/youtu.be\/qm0IfG1GyZU<\/a>&nbsp;<\/li><\/ul>\n\n\n\n<p>And here are the layouts on Codepen:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><a href=\"https:\/\/codepen.io\/una\/pen\/YzyYbBx\">01. Centered AF<\/a><\/li><li><a href=\"https:\/\/codepen.io\/una\/pen\/WNQdBza\">02. Deconstructed Pancake<\/a><\/li><li><a href=\"https:\/\/codepen.io\/una\/pen\/gOaNeWL\">03. Sidebar Says<\/a><\/li><li><a href=\"https:\/\/codepen.io\/una\/pen\/bGVXPWB\">04: Pancake Stack (Header, Main, Footer)<\/a><\/li><li><a href=\"https:\/\/codepen.io\/una\/pen\/mdVbdBy\">05: Holy Grail<\/a><\/li><li><a href=\"https:\/\/codepen.io\/una\/pen\/eYJOYjj\">06: 12-Span Grid<\/a><\/li><li><a href=\"https:\/\/codepen.io\/una\/pen\/oNbvNQv\">07: RAM (Repeat, Auto, Minmax)<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/codepen.io\/una\/pen\/ExPYomq\" target=\"_blank\">08: Line It Up!<\/a><\/li><li><a href=\"https:\/\/codepen.io\/una\/pen\/QWyLxaL\">09: Clamping my Style<\/a><\/li><li><a href=\"https:\/\/codepen.io\/una\/pen\/xxZKzaX\">10: Respect the Aspect<\/a> <\/li><\/ol>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>10 modern layouts in 1 line of CSS by Una Kravets In this article and related resources Una shows how to create modern layouts with just a small amount of CSS. The layouts mostly use CSS Grid and Flexbox. Article (written and video): https:\/\/web.dev\/one-line-layouts\/&nbsp; Editable Demo Examples on Glitch: https:\/\/1linelayouts.glitch.me\/&nbsp; GitHub Repository: https:\/\/github.com\/una\/1linelayouts&nbsp; YouTube Video&hellip; <a class=\"more-link\" href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/topics\/css\/one-line-layouts\/\">Continue reading <span class=\"screen-reader-text\">One-Line Layouts<\/span><\/a><\/p>\n","protected":false},"author":16,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","portfolio_post_id":0,"portfolio_citation":"","portfolio_annotation":"","openlab_post_visibility":"","footnotes":""},"categories":[19,25],"tags":[34,133,117,30,32],"coauthors":[87],"class_list":["post-625","post","type-post","status-publish","format-standard","hentry","category-css","category-layout","tag-css","tag-flexbox","tag-grid","tag-resource","tag-video","entry"],"featured_image_urls_v2":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":"","post-thumbnail":"","gform-image-choice-sm":"","gform-image-choice-md":"","gform-image-choice-lg":""},"post_excerpt_stackable_v2":"<p>10 modern layouts in 1 line of CSS by Una Kravets In this article and related resources Una shows how to create modern layouts with just a small amount of CSS. The layouts mostly use CSS Grid and Flexbox. Article (written and video): https:\/\/web.dev\/one-line-layouts\/&nbsp;Editable Demo Examples on Glitch: https:\/\/1linelayouts.glitch.me\/&nbsp;GitHub Repository: https:\/\/github.com\/una\/1linelayouts&nbsp;YouTube Video page [21m 38s]: https:\/\/youtu.be\/qm0IfG1GyZU&nbsp; And here are the layouts on Codepen: 01. Centered AF02. Deconstructed Pancake03. Sidebar Says04: Pancake Stack (Header, Main, Footer)05: Holy Grail06: 12-Span Grid07: RAM (Repeat, Auto, Minmax)08: Line It Up!09: Clamping my Style10: Respect the Aspect<\/p>\n","category_list_v2":"<a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/category\/topics\/css\/\" rel=\"category tag\">CSS<\/a>, <a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/category\/topics\/design\/layout\/\" rel=\"category tag\">Layout<\/a>","author_info_v2":{"name":"Christopher Stein","url":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/author\/cstein\/"},"comments_num_v2":"1 comment","uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"post-thumbnail":false,"gform-image-choice-sm":false,"gform-image-choice-md":false,"gform-image-choice-lg":false},"uagb_author_info":{"display_name":"Christopher Stein","author_link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/author\/cstein\/"},"uagb_comment_info":1,"uagb_excerpt":"10 modern layouts in 1 line of CSS by Una Kravets In this article and related resources Una shows how to create modern layouts with just a small amount of CSS. The layouts mostly use CSS Grid and Flexbox. Article (written and video): https:\/\/web.dev\/one-line-layouts\/&nbsp; Editable Demo Examples on Glitch: https:\/\/1linelayouts.glitch.me\/&nbsp; GitHub Repository: https:\/\/github.com\/una\/1linelayouts&nbsp; YouTube Video&hellip;&hellip;","_links":{"self":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/posts\/625","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/comments?post=625"}],"version-history":[{"count":3,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/posts\/625\/revisions"}],"predecessor-version":[{"id":1737,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/posts\/625\/revisions\/1737"}],"wp:attachment":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/media?parent=625"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/categories?post=625"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/tags?post=625"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/coauthors?post=625"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}