{"id":17,"date":"2020-06-22T20:09:51","date_gmt":"2020-06-22T20:09:51","guid":{"rendered":"http:\/\/localhost:8888\/LD_style_guide\/?page_id=17"},"modified":"2020-12-31T21:54:45","modified_gmt":"2020-12-31T21:54:45","slug":"grid","status":"publish","type":"page","link":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/grid\/","title":{"rendered":"Grid \/ Breakpoints"},"content":{"rendered":"\n<h4>Breakpoints<\/h4>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"table table-bordered\"><thead class=\"thead-light\"><tr><th class=\"has-text-align-center\" data-align=\"center\"><\/th><th class=\"has-text-align-center\" data-align=\"center\">Mobile<\/th><th class=\"has-text-align-center\" data-align=\"center\">Tablet<\/th><th class=\"has-text-align-center\" data-align=\"center\">Desktop<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">Screen Width<\/td><td class=\"has-text-align-center\" data-align=\"center\">\u2264 767px<\/td><td class=\"has-text-align-center\" data-align=\"center\">\u2265 768px and \u2264 990px<\/td><td class=\"has-text-align-center\" data-align=\"center\">\u2265 991px<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h4>Grid<\/h4>\n\n\n\n<p>On desktop, there is a 970px wide safe-zone.  With the exception of the navigation, all important content is within the 970px wide container.<\/p>\n\n\n\n<p class=\"mt-5\"><strong>Desktop <\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"1280\" height=\"1760\" src=\"http:\/\/localhost:8888\/LD_style_guide\/wp-content\/uploads\/Laptop.png\" alt=\"laptop-1\" class=\"wp-image-733 img-fluid\" srcset=\"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-content\/uploads\/Laptop.png 1280w, https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-content\/uploads\/Laptop-218x300.png 218w, https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-content\/uploads\/Laptop-745x1024.png 745w, https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-content\/uploads\/Laptop-768x1056.png 768w, https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-content\/uploads\/Laptop-1117x1536.png 1117w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p class=\"mt-5\">On Questionnaire pages, the 970px safe-zone is separated into two columns. The left column is 570px wide. The right column is 345px wide. There is a 55px space between the two.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"1280\" height=\"1084\" src=\"http:\/\/localhost:8888\/LD_style_guide\/wp-content\/uploads\/Laptop-\u2013-Questionnaire.png\" alt=\"laptop 570px\" class=\"wp-image-732 img-fluid\" srcset=\"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-content\/uploads\/Laptop-\u2013-Questionnaire.png 1280w, https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-content\/uploads\/Laptop-\u2013-Questionnaire-300x254.png 300w, https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-content\/uploads\/Laptop-\u2013-Questionnaire-1024x867.png 1024w, https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-content\/uploads\/Laptop-\u2013-Questionnaire-768x650.png 768w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" \/><figcaption>Questionnaire Separations<\/figcaption><\/figure>\n\n\n\n<p class=\"mt-5\"><strong>Tablet<\/strong><\/p>\n\n\n\n<p>The 970px container collapses on tablet size.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"768\" height=\"1024\" src=\"http:\/\/localhost:8888\/LD_style_guide\/wp-content\/uploads\/Tablet.png\" alt=\"Tablet\" class=\"wp-image-735 img-fluid\" srcset=\"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-content\/uploads\/Tablet.png 768w, https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-content\/uploads\/Tablet-225x300.png 225w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/figure>\n\n\n\n<p class=\"mt-5\"><strong>Mobile<\/strong><\/p>\n\n\n\n<p>The 970px container collapses on mobile size.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"375\" height=\"667\" src=\"http:\/\/localhost:8888\/LD_style_guide\/wp-content\/uploads\/Mobile.png\" alt=\"Mobile\" class=\"wp-image-734 img-fluid\" srcset=\"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-content\/uploads\/Mobile.png 375w, https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-content\/uploads\/Mobile-169x300.png 169w\" sizes=\"(max-width: 375px) 100vw, 375px\" \/><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Breakpoints Mobile Tablet Desktop Screen Width \u2264 767px \u2265 768px and \u2264 990px \u2265 991px Grid On desktop, there is a 970px wide safe-zone. With [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false},"_links":{"self":[{"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/pages\/17"}],"collection":[{"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/comments?post=17"}],"version-history":[{"count":38,"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/pages\/17\/revisions"}],"predecessor-version":[{"id":752,"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/pages\/17\/revisions\/752"}],"wp:attachment":[{"href":"https:\/\/darcypaterson.ca\/lawdepot_style_guide\/wp-json\/wp\/v2\/media?parent=17"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}