{"id":3336,"date":"2024-04-02T18:30:15","date_gmt":"2024-04-02T22:30:15","guid":{"rendered":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/?p=3336"},"modified":"2024-04-27T16:10:59","modified_gmt":"2024-04-27T20:10:59","slug":"one-line-layouts","status":"publish","type":"post","link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/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 class=\"wp-block-paragraph\">by Una Kravets<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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\">\n<li><strong>Article<\/strong>\u00a0(written and video):\u00a0<a href=\"https:\/\/web.dev\/one-line-layouts\/\">https:\/\/web.dev\/one-line-layouts\/<\/a>\u00a0<\/li>\n\n\n\n<li><strong>Editable Demo Examples on Glitch<\/strong>:\u00a0<a href=\"https:\/\/1linelayouts.glitch.me\/\">https:\/\/1linelayouts.glitch.me\/<\/a>\u00a0<\/li>\n\n\n\n<li><strong>GitHub Repository<\/strong>:\u00a0<a href=\"https:\/\/github.com\/una\/1linelayouts\">https:\/\/github.com\/una\/1linelayouts<\/a>\u00a0<\/li>\n\n\n\n<li><strong>YouTube Video page\u00a0<\/strong>[21m 38s]:\u00a0<a href=\"https:\/\/youtu.be\/qm0IfG1GyZU\">https:\/\/youtu.be\/qm0IfG1GyZU<\/a>\u00a0<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">And here are the layouts on Codepen:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><a href=\"https:\/\/codepen.io\/una\/pen\/YzyYbBx\">01. Centered AF<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/codepen.io\/una\/pen\/WNQdBza\">02. Deconstructed Pancake<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/codepen.io\/una\/pen\/gOaNeWL\">03. Sidebar Says<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/codepen.io\/una\/pen\/bGVXPWB\">04: Pancake Stack (Header, Main, Footer)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/codepen.io\/una\/pen\/mdVbdBy\">05: Holy Grail<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/codepen.io\/una\/pen\/eYJOYjj\">06: 12-Span Grid<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/codepen.io\/una\/pen\/oNbvNQv\">07: RAM (Repeat, Auto, Minmax)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/codepen.io\/una\/pen\/ExPYomq\" target=\"_blank\" rel=\"noreferrer noopener\">08: Line It Up!<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/codepen.io\/una\/pen\/QWyLxaL\">09: Clamping my Style<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/codepen.io\/una\/pen\/xxZKzaX\">10: Respect the Aspect<\/a><\/li>\n<\/ol>\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&hellip;&nbsp;<a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/one-line-layouts\/\" rel=\"bookmark\">Read More &raquo;<span class=\"screen-reader-text\">One-Line Layouts<\/span><\/a><\/p>\n","protected":false},"author":16,"featured_media":3469,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","portfolio_post_id":0,"portfolio_citation":"","portfolio_annotation":"","neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","_themeisle_gutenberg_block_has_review":false,"openlab_post_visibility":"","footnotes":""},"categories":[32,43],"tags":[20,46,45,47],"class_list":["post-3336","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","category-resource","tag-css","tag-flex","tag-grid","tag-layout"],"_links":{"self":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-json\/wp\/v2\/posts\/3336","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-json\/wp\/v2\/comments?post=3336"}],"version-history":[{"count":1,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-json\/wp\/v2\/posts\/3336\/revisions"}],"predecessor-version":[{"id":3337,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-json\/wp\/v2\/posts\/3336\/revisions\/3337"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-json\/wp\/v2\/media\/3469"}],"wp:attachment":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-json\/wp\/v2\/media?parent=3336"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-json\/wp\/v2\/categories?post=3336"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-json\/wp\/v2\/tags?post=3336"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}