{"id":4846,"date":"2022-05-10T03:35:20","date_gmt":"2022-05-10T03:35:20","guid":{"rendered":"https:\/\/www.leadshook.com\/help\/?p=4846"},"modified":"2024-02-14T11:39:56","modified_gmt":"2024-02-14T11:39:56","slug":"v1-and-v2-grid-design-differences","status":"publish","type":"post","link":"https:\/\/www.leadshook.com\/help\/v1-and-v2-grid-design-differences\/","title":{"rendered":"Version 1 and version 2 grid design differences"},"content":{"rendered":"\n<p>You might notice design differences between version 1 and version 2 of LeadsHook. The main reason for this is that version 1 uses bootstrap while version 2 uses pure CSS. One major difference between the two is the use of the grid system.  <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Bootstrap Grid System<\/h2>\n\n\n\n<p>Bootstrap includes a responsive, mobile-first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.<\/p>\n\n\n\n<p>Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here&#8217;s how the Bootstrap grid system works:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Rows must be placed within a .container for proper alignment and padding.<\/li><li>Use rows to create horizontal groups of columns.<\/li><li>Content should be placed within columns, and only columns may be immediate children of rows.<\/li><li>Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Fewer mixins can also be used for more semantic layouts.<\/li><li>Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via a negative margin on .rows.<\/li><li>Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.<\/li><\/ul>\n\n\n\n<p>Please refer here for more detail on Bootstrap Grid System: <a href=\"https:\/\/bootstrapdocs.com\/v3.0.3\/docs\/css\/#grid\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/bootstrapdocs.com\/v3.0.3\/docs\/css\/#grid<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Pure CSS Grid System<\/h2>\n\n\n\n<p><strong>Grid classes vs. unit classes<\/strong><br>Pure Grids consist of two types of classes: the grid class (pure-g) and unit classes (pure-u or pure-u-)<\/p>\n\n\n\n<p><strong>The widths of the units are fractions<\/strong><br>Units have various class names that represent their widths. For example, pure-u-1-2 has a width of 50%, whereas pure-u-1-5 would have a width of 20%.<\/p>\n\n\n\n<p><strong>All child elements of a grid must be units<\/strong><br>Child elements contained within an element with a pure-g classname must be a grid unit with a pure-u or pure-u- classname.<\/p>\n\n\n\n<p><strong>Content goes inside grid units<\/strong><br>All content that is visible to people needs to be contained inside a grid unit. This ensures that the content will be rendered properly.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><code>&lt;div class=\"pure-g\"&gt;\n    &lt;div class=\"pure-u-1-3\"&gt;&lt;p&gt;Thirds&lt;\/p&gt;&lt;\/div&gt;\n    &lt;div class=\"pure-u-1-3\"&gt;&lt;p&gt;Thirds&lt;\/p&gt;&lt;\/div&gt;\n    &lt;div class=\"pure-u-1-3\"&gt;&lt;p&gt;Thirds&lt;\/p&gt;&lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/code><\/pre>\n\n\n\n<p>Please refer here for more detail on Pure CSS Grid System: <a href=\"https:\/\/purecss.io\/grids\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/purecss.io\/grids\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>You might notice design differences between version 1 and version 2 of LeadsHook. The main reason for this is that version 1 uses bootstrap while version 2 uses pure CSS. One major difference between the two is the use of the grid system. Bootstrap Grid System Bootstrap includes a responsive, mobile-first fluid grid system that [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[273],"tags":[275,512,352,869,870],"class_list":["post-4846","post","type-post","status-publish","format-standard","hentry","category-appearance","tag-appearance","tag-css","tag-design","tag-grid","tag-version-2"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Version 1 and version 2 grid design differences - LeadsHook Knowledge Base<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.leadshook.com\/help\/v1-and-v2-grid-design-differences\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Version 1 and version 2 grid design differences - LeadsHook Knowledge Base\" \/>\n<meta property=\"og:description\" content=\"You might notice design differences between version 1 and version 2 of LeadsHook. The main reason for this is that version 1 uses bootstrap while version 2 uses pure CSS. One major difference between the two is the use of the grid system. Bootstrap Grid System Bootstrap includes a responsive, mobile-first fluid grid system that [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.leadshook.com\/help\/v1-and-v2-grid-design-differences\/\" \/>\n<meta property=\"og:site_name\" content=\"LeadsHook Knowledge Base\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/leadshook\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-10T03:35:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-14T11:39:56+00:00\" \/>\n<meta name=\"author\" content=\"Nik T\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@leadshook\" \/>\n<meta name=\"twitter:site\" content=\"@leadshook\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nik T\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/v1-and-v2-grid-design-differences\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/v1-and-v2-grid-design-differences\\\/\"},\"author\":{\"name\":\"Nik T\",\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/#\\\/schema\\\/person\\\/4bfe37d814563cc729828b7055313f4d\"},\"headline\":\"Version 1 and version 2 grid design differences\",\"datePublished\":\"2022-05-10T03:35:20+00:00\",\"dateModified\":\"2024-02-14T11:39:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/v1-and-v2-grid-design-differences\\\/\"},\"wordCount\":374,\"publisher\":{\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/#organization\"},\"keywords\":[\"appearance\",\"CSS\",\"design\",\"grid\",\"version 2\"],\"articleSection\":[\"Appearance\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/v1-and-v2-grid-design-differences\\\/\",\"url\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/v1-and-v2-grid-design-differences\\\/\",\"name\":\"Version 1 and version 2 grid design differences - LeadsHook Knowledge Base\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/#website\"},\"datePublished\":\"2022-05-10T03:35:20+00:00\",\"dateModified\":\"2024-02-14T11:39:56+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/v1-and-v2-grid-design-differences\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.leadshook.com\\\/help\\\/v1-and-v2-grid-design-differences\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/v1-and-v2-grid-design-differences\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Version 1 and version 2 grid design differences\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/#website\",\"url\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/\",\"name\":\"LeadsHook Knowledge Base\",\"description\":\"LeadsHook Training &amp; Technical Help\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/#organization\",\"name\":\"LeadsHook\",\"url\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/wp-content\\\/uploads\\\/2018\\\/12\\\/leadshook-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/wp-content\\\/uploads\\\/2018\\\/12\\\/leadshook-logo.png\",\"width\":350,\"height\":83,\"caption\":\"LeadsHook\"},\"image\":{\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/leadshook\\\/\",\"https:\\\/\\\/x.com\\\/leadshook\",\"https:\\\/\\\/www.linkedin.com\\\/showcase\\\/leadshook\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/#\\\/schema\\\/person\\\/4bfe37d814563cc729828b7055313f4d\",\"name\":\"Nik T\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/48d53e68db0b1db1cd5c54a750130fb2ee0c663306ff1bd434373f1a368ef7a0?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/48d53e68db0b1db1cd5c54a750130fb2ee0c663306ff1bd434373f1a368ef7a0?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/48d53e68db0b1db1cd5c54a750130fb2ee0c663306ff1bd434373f1a368ef7a0?s=96&d=mm&r=g\",\"caption\":\"Nik T\"},\"sameAs\":[\"http:\\\/\\\/www.LeadsHook.com\"],\"url\":\"https:\\\/\\\/www.leadshook.com\\\/help\\\/author\\\/nik\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Version 1 and version 2 grid design differences - LeadsHook Knowledge Base","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.leadshook.com\/help\/v1-and-v2-grid-design-differences\/","og_locale":"en_US","og_type":"article","og_title":"Version 1 and version 2 grid design differences - LeadsHook Knowledge Base","og_description":"You might notice design differences between version 1 and version 2 of LeadsHook. The main reason for this is that version 1 uses bootstrap while version 2 uses pure CSS. One major difference between the two is the use of the grid system. Bootstrap Grid System Bootstrap includes a responsive, mobile-first fluid grid system that [&hellip;]","og_url":"https:\/\/www.leadshook.com\/help\/v1-and-v2-grid-design-differences\/","og_site_name":"LeadsHook Knowledge Base","article_publisher":"https:\/\/www.facebook.com\/leadshook\/","article_published_time":"2022-05-10T03:35:20+00:00","article_modified_time":"2024-02-14T11:39:56+00:00","author":"Nik T","twitter_card":"summary_large_image","twitter_creator":"@leadshook","twitter_site":"@leadshook","twitter_misc":{"Written by":"Nik T","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.leadshook.com\/help\/v1-and-v2-grid-design-differences\/#article","isPartOf":{"@id":"https:\/\/www.leadshook.com\/help\/v1-and-v2-grid-design-differences\/"},"author":{"name":"Nik T","@id":"https:\/\/www.leadshook.com\/help\/#\/schema\/person\/4bfe37d814563cc729828b7055313f4d"},"headline":"Version 1 and version 2 grid design differences","datePublished":"2022-05-10T03:35:20+00:00","dateModified":"2024-02-14T11:39:56+00:00","mainEntityOfPage":{"@id":"https:\/\/www.leadshook.com\/help\/v1-and-v2-grid-design-differences\/"},"wordCount":374,"publisher":{"@id":"https:\/\/www.leadshook.com\/help\/#organization"},"keywords":["appearance","CSS","design","grid","version 2"],"articleSection":["Appearance"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.leadshook.com\/help\/v1-and-v2-grid-design-differences\/","url":"https:\/\/www.leadshook.com\/help\/v1-and-v2-grid-design-differences\/","name":"Version 1 and version 2 grid design differences - LeadsHook Knowledge Base","isPartOf":{"@id":"https:\/\/www.leadshook.com\/help\/#website"},"datePublished":"2022-05-10T03:35:20+00:00","dateModified":"2024-02-14T11:39:56+00:00","breadcrumb":{"@id":"https:\/\/www.leadshook.com\/help\/v1-and-v2-grid-design-differences\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.leadshook.com\/help\/v1-and-v2-grid-design-differences\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.leadshook.com\/help\/v1-and-v2-grid-design-differences\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.leadshook.com\/help\/"},{"@type":"ListItem","position":2,"name":"Version 1 and version 2 grid design differences"}]},{"@type":"WebSite","@id":"https:\/\/www.leadshook.com\/help\/#website","url":"https:\/\/www.leadshook.com\/help\/","name":"LeadsHook Knowledge Base","description":"LeadsHook Training &amp; Technical Help","publisher":{"@id":"https:\/\/www.leadshook.com\/help\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.leadshook.com\/help\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.leadshook.com\/help\/#organization","name":"LeadsHook","url":"https:\/\/www.leadshook.com\/help\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.leadshook.com\/help\/#\/schema\/logo\/image\/","url":"https:\/\/www.leadshook.com\/help\/wp-content\/uploads\/2018\/12\/leadshook-logo.png","contentUrl":"https:\/\/www.leadshook.com\/help\/wp-content\/uploads\/2018\/12\/leadshook-logo.png","width":350,"height":83,"caption":"LeadsHook"},"image":{"@id":"https:\/\/www.leadshook.com\/help\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/leadshook\/","https:\/\/x.com\/leadshook","https:\/\/www.linkedin.com\/showcase\/leadshook\/"]},{"@type":"Person","@id":"https:\/\/www.leadshook.com\/help\/#\/schema\/person\/4bfe37d814563cc729828b7055313f4d","name":"Nik T","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/48d53e68db0b1db1cd5c54a750130fb2ee0c663306ff1bd434373f1a368ef7a0?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/48d53e68db0b1db1cd5c54a750130fb2ee0c663306ff1bd434373f1a368ef7a0?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/48d53e68db0b1db1cd5c54a750130fb2ee0c663306ff1bd434373f1a368ef7a0?s=96&d=mm&r=g","caption":"Nik T"},"sameAs":["http:\/\/www.LeadsHook.com"],"url":"https:\/\/www.leadshook.com\/help\/author\/nik\/"}]}},"_links":{"self":[{"href":"https:\/\/www.leadshook.com\/help\/wp-json\/wp\/v2\/posts\/4846","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.leadshook.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.leadshook.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.leadshook.com\/help\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.leadshook.com\/help\/wp-json\/wp\/v2\/comments?post=4846"}],"version-history":[{"count":4,"href":"https:\/\/www.leadshook.com\/help\/wp-json\/wp\/v2\/posts\/4846\/revisions"}],"predecessor-version":[{"id":4851,"href":"https:\/\/www.leadshook.com\/help\/wp-json\/wp\/v2\/posts\/4846\/revisions\/4851"}],"wp:attachment":[{"href":"https:\/\/www.leadshook.com\/help\/wp-json\/wp\/v2\/media?parent=4846"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.leadshook.com\/help\/wp-json\/wp\/v2\/categories?post=4846"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.leadshook.com\/help\/wp-json\/wp\/v2\/tags?post=4846"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}