{"id":221,"date":"2015-03-18T15:12:51","date_gmt":"2015-03-18T15:12:51","guid":{"rendered":"https:\/\/pixelgrade.com\/demos\/patch\/?page_id=221"},"modified":"2019-11-27T12:46:23","modified_gmt":"2019-11-27T12:46:23","slug":"about","status":"publish","type":"page","link":"https:\/\/demos.pixelgrade.com\/patch\/about\/","title":{"rendered":"About"},"content":{"rendered":"\n<p>We have envisioned <a href=\"#\">PATCH<\/a> as a fresh approach to blog\/magazine themes, focused around <strong>an algorithmic layout concept<\/strong>, meaning taking a large diversity of user content (posts) and cleverly generating a visual style that is in tune with the user&#8217;s intent and the whole website.<\/p>\n\n\n\n<p>To keep things manageable, the design is focused on <strong>generating a specific layout for each post,<\/strong> based on: the featured image proportions (or it&#8217;s absence), post title and excerpt length.<\/p>\n\n\n\n<p><strong>The challenge<\/strong> was to offer the same visual weight for each post as we cannot programmatically determine the importance of each post content.<\/p>\n\n\n\n<p>We have created a system where each masonry block is aimed at filling almost the same amount of macro space, no matter if the post has a long title or a portrait image (eg. small titles have a bigger font size than the long ones).<\/p>\n\n\n\n<p>Below are some of the cases we have considered:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/i0.wp.com\/demos.pixelgrade.com\/wp-content\/uploads\/sites\/4\/2015\/03\/patch-grid.jpg?ssl=1\" class=\"img-link\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"980\" height=\"758\" data-attachment-id=\"224\" data-permalink=\"https:\/\/demos.pixelgrade.com\/patch\/about\/attachment\/patch-grid\/\" data-orig-file=\"https:\/\/i0.wp.com\/demos.pixelgrade.com\/patch\/wp-content\/uploads\/sites\/4\/2015\/03\/patch-grid.jpg?fit=2860%2C2213&amp;ssl=1\" data-orig-size=\"2860,2213\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"patch-grid\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/demos.pixelgrade.com\/patch\/wp-content\/uploads\/sites\/4\/2015\/03\/patch-grid.jpg?fit=980%2C758&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/demos.pixelgrade.com\/wp-content\/uploads\/sites\/4\/2015\/03\/patch-grid-1024x792.jpg?resize=980%2C758&#038;ssl=1\" alt=\"patch-grid\" class=\"wp-image-224\" srcset=\"https:\/\/i0.wp.com\/demos.pixelgrade.com\/patch\/wp-content\/uploads\/sites\/4\/2015\/03\/patch-grid.jpg?resize=1024%2C792&amp;ssl=1 1024w, https:\/\/i0.wp.com\/demos.pixelgrade.com\/patch\/wp-content\/uploads\/sites\/4\/2015\/03\/patch-grid.jpg?resize=300%2C232&amp;ssl=1 300w, https:\/\/i0.wp.com\/demos.pixelgrade.com\/patch\/wp-content\/uploads\/sites\/4\/2015\/03\/patch-grid.jpg?resize=768%2C594&amp;ssl=1 768w, https:\/\/i0.wp.com\/demos.pixelgrade.com\/patch\/wp-content\/uploads\/sites\/4\/2015\/03\/patch-grid.jpg?resize=624%2C483&amp;ssl=1 624w, https:\/\/i0.wp.com\/demos.pixelgrade.com\/patch\/wp-content\/uploads\/sites\/4\/2015\/03\/patch-grid.jpg?w=1960&amp;ssl=1 1960w\" sizes=\"auto, (max-width: 980px) 100vw, 980px\" \/><\/a><\/figure><\/div>\n\n\n\n<p>Maintaining the structure but still creating a <strong>dynamic layout<\/strong>, all the posts are placed on a <strong>grid<\/strong> layout with a three column gutter. Each post can overlap the middle gutter column (eg. portrait, wide) or stay away from it (eg. square). This overlapping is aimed at allowing for &#8220;good&#8221; visual accidents to happen from time to time.<\/p>\n\n\n\n<p>Even if there isn\u2019t a similar theme out there (that we know of at least) &#8211; we think that this approach to layout (and web design in general) is where the web is heading, more dynamic and more adaptable to the user&#8217;s needs.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We have envisioned PATCH as a fresh approach to blog\/magazine themes, focused around an algorithmic layout concept, meaning taking a large diversity of user content (posts) and cleverly generating a visual style that is in [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":{"jetpack_post_was_ever_published":false,"footnotes":""},"class_list":["post-221","page","type-page","status-publish","hentry","entry-card--text"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>About - Patch<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"About - Patch\" \/>\n<meta property=\"og:description\" content=\"We have envisioned PATCH as a fresh approach to blog\/magazine themes, focused around an algorithmic layout concept, meaning taking a large diversity of user content (posts) and cleverly generating a visual style that is in [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/demos.pixelgrade.com\/patch\/about\/\" \/>\n<meta property=\"og:site_name\" content=\"Patch\" \/>\n<meta property=\"article:modified_time\" content=\"2019-11-27T12:46:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.demos.pixelgrade.com\/wp-content\/uploads\/sites\/4\/2015\/03\/patch-grid-1024x792.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/demos.pixelgrade.com\/patch\/#organization\",\"name\":\"Patch\",\"url\":\"https:\/\/demos.pixelgrade.com\/patch\/\",\"sameAs\":[],\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/demos.pixelgrade.com\/patch\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/i0.wp.com\/demos.pixelgrade.com\/patch\/wp-content\/uploads\/sites\/4\/2019\/05\/logo-patch.png?fit=713%2C150&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/demos.pixelgrade.com\/patch\/wp-content\/uploads\/sites\/4\/2019\/05\/logo-patch.png?fit=713%2C150&ssl=1\",\"width\":713,\"height\":150,\"caption\":\"Patch\"},\"image\":{\"@id\":\"https:\/\/demos.pixelgrade.com\/patch\/#\/schema\/logo\/image\/\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/demos.pixelgrade.com\/patch\/#website\",\"url\":\"https:\/\/demos.pixelgrade.com\/patch\/\",\"name\":\"Patch\",\"description\":\"A biker&#039;s manifesto\",\"publisher\":{\"@id\":\"https:\/\/demos.pixelgrade.com\/patch\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/demos.pixelgrade.com\/patch\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/demos.pixelgrade.com\/patch\/about\/#primaryimage\",\"url\":\"https:\/\/i0.wp.com\/demos.pixelgrade.com\/patch\/wp-content\/uploads\/sites\/4\/2015\/03\/patch-grid.jpg?fit=2860%2C2213&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/demos.pixelgrade.com\/patch\/wp-content\/uploads\/sites\/4\/2015\/03\/patch-grid.jpg?fit=2860%2C2213&ssl=1\",\"width\":2860,\"height\":2213},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/demos.pixelgrade.com\/patch\/about\/\",\"url\":\"https:\/\/demos.pixelgrade.com\/patch\/about\/\",\"name\":\"About - Patch\",\"isPartOf\":{\"@id\":\"https:\/\/demos.pixelgrade.com\/patch\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/demos.pixelgrade.com\/patch\/about\/#primaryimage\"},\"datePublished\":\"2015-03-18T15:12:51+00:00\",\"dateModified\":\"2019-11-27T12:46:23+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/demos.pixelgrade.com\/patch\/about\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/demos.pixelgrade.com\/patch\/about\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/demos.pixelgrade.com\/patch\/about\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/demos.pixelgrade.com\/patch\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"About\"}]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"About - Patch","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"About - Patch","og_description":"We have envisioned PATCH as a fresh approach to blog\/magazine themes, focused around an algorithmic layout concept, meaning taking a large diversity of user content (posts) and cleverly generating a visual style that is in [&hellip;]","og_url":"https:\/\/demos.pixelgrade.com\/patch\/about\/","og_site_name":"Patch","article_modified_time":"2019-11-27T12:46:23+00:00","og_image":[{"url":"https:\/\/cdn.demos.pixelgrade.com\/wp-content\/uploads\/sites\/4\/2015\/03\/patch-grid-1024x792.jpg"}],"twitter_card":"summary","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Organization","@id":"https:\/\/demos.pixelgrade.com\/patch\/#organization","name":"Patch","url":"https:\/\/demos.pixelgrade.com\/patch\/","sameAs":[],"logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/demos.pixelgrade.com\/patch\/#\/schema\/logo\/image\/","url":"https:\/\/i0.wp.com\/demos.pixelgrade.com\/patch\/wp-content\/uploads\/sites\/4\/2019\/05\/logo-patch.png?fit=713%2C150&ssl=1","contentUrl":"https:\/\/i0.wp.com\/demos.pixelgrade.com\/patch\/wp-content\/uploads\/sites\/4\/2019\/05\/logo-patch.png?fit=713%2C150&ssl=1","width":713,"height":150,"caption":"Patch"},"image":{"@id":"https:\/\/demos.pixelgrade.com\/patch\/#\/schema\/logo\/image\/"}},{"@type":"WebSite","@id":"https:\/\/demos.pixelgrade.com\/patch\/#website","url":"https:\/\/demos.pixelgrade.com\/patch\/","name":"Patch","description":"A biker&#039;s manifesto","publisher":{"@id":"https:\/\/demos.pixelgrade.com\/patch\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/demos.pixelgrade.com\/patch\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/demos.pixelgrade.com\/patch\/about\/#primaryimage","url":"https:\/\/i0.wp.com\/demos.pixelgrade.com\/patch\/wp-content\/uploads\/sites\/4\/2015\/03\/patch-grid.jpg?fit=2860%2C2213&ssl=1","contentUrl":"https:\/\/i0.wp.com\/demos.pixelgrade.com\/patch\/wp-content\/uploads\/sites\/4\/2015\/03\/patch-grid.jpg?fit=2860%2C2213&ssl=1","width":2860,"height":2213},{"@type":"WebPage","@id":"https:\/\/demos.pixelgrade.com\/patch\/about\/","url":"https:\/\/demos.pixelgrade.com\/patch\/about\/","name":"About - Patch","isPartOf":{"@id":"https:\/\/demos.pixelgrade.com\/patch\/#website"},"primaryImageOfPage":{"@id":"https:\/\/demos.pixelgrade.com\/patch\/about\/#primaryimage"},"datePublished":"2015-03-18T15:12:51+00:00","dateModified":"2019-11-27T12:46:23+00:00","breadcrumb":{"@id":"https:\/\/demos.pixelgrade.com\/patch\/about\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/demos.pixelgrade.com\/patch\/about\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/demos.pixelgrade.com\/patch\/about\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/demos.pixelgrade.com\/patch\/"},{"@type":"ListItem","position":2,"name":"About"}]}]}},"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/PaP9Gp-3z","jetpack-related-posts":[],"jetpack_likes_enabled":false,"_links":{"self":[{"href":"https:\/\/demos.pixelgrade.com\/patch\/wp-json\/wp\/v2\/pages\/221","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demos.pixelgrade.com\/patch\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demos.pixelgrade.com\/patch\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demos.pixelgrade.com\/patch\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/demos.pixelgrade.com\/patch\/wp-json\/wp\/v2\/comments?post=221"}],"version-history":[{"count":0,"href":"https:\/\/demos.pixelgrade.com\/patch\/wp-json\/wp\/v2\/pages\/221\/revisions"}],"wp:attachment":[{"href":"https:\/\/demos.pixelgrade.com\/patch\/wp-json\/wp\/v2\/media?parent=221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}