{"id":108,"date":"2018-11-07T12:14:21","date_gmt":"2018-11-07T11:14:21","guid":{"rendered":"https:\/\/sketch2react.wordpress.com\/2018\/11\/07\/sketch2react-grids-to-get-you-started\/"},"modified":"2020-06-18T07:27:01","modified_gmt":"2020-06-18T07:27:01","slug":"sketch2react-grids-to-get-you-started","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/sketch2react-grids-to-get-you-started\/","title":{"rendered":"Sketch2React Grids to get you started"},"content":{"rendered":"<figure>\n<p><img decoding=\"async\" data-width=\"1600\" data-height=\"1200\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/0*OfYlppShN1KB7eUb.png\"><br \/>\n<\/figure>\n<p><em>Why create all of these free demo files and resources one may ask?<\/em> How do you grow a tree or a plant? <em>By nurturing it.<\/em> With things like water, the right amount of shadow or sunshine. By giving it love. By caring for it.<\/p>\n<p>So in the spirit of all these fine things we spend endless hours creating these. So we can grow Sketch2React to something that is meaningful to more than two people (Juan and Fredrik).<\/p>\n<p>That\u2019s why we today are giving you this fine as wine\u00a0<strong>.sketchfile<\/strong> with a couple of really handy grids.<\/p>\n<div class=\"nv-iframe-embed\"><iframe loading=\"lazy\" title=\"Sketch2React - Free Bootstrap Grids Trailer\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/Kgpt0SXsVeU?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n<h4>What you can do with\u00a0this<\/h4>\n<ul>\n<li>Learn how our framework works<\/li>\n<li>Kickstart your next Sketch2React project<\/li>\n<li>Learn the world famous Bootstrap grid in the meantime<\/li>\n<li>Use the grids in your own projects to create next level of website handoff<\/li>\n<li>Design and build awesome website directly inside of Sketch<\/li>\n<li>Mix and match any of these rows, columns and create new grids<\/li>\n<\/ul>\n<div class=\"nv-iframe-embed\"><iframe loading=\"lazy\" title=\"Sketch2React - How to use our Grids - Quick Look\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/o6W1tNFKbng?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n<h4>System requirements<\/h4>\n<ul>\n<li>Sketch 52<\/li>\n<li>OSX Mojave<\/li>\n<li>Our free <a href=\"https:\/\/sketch2react.io\/sketch2reactpreviewer\/\" target=\"_blank\" rel=\"noopener noreferrer\">Sketch2React Preview Web App<\/a>\n<\/li>\n<\/ul>\n<h4>What is Sketch2React anyway?<\/h4>\n<p>Good question. <strong>Sketch2React<\/strong> is a free tool and framework that lets you alter your Sketch design files with the super powers of Bootstrap and React.<\/p>\n<blockquote><p>That gives you high fidelity HTML5 code right from scratch ?<\/p><\/blockquote>\n<ul>\n<li>Design with code snippets that\u2019s easy to learn! It\u2019s more like <strong>Markdown<\/strong>\n<\/li>\n<li>Fully responsive<\/li>\n<li>No export required!<\/li>\n<li>Treat the layers view in Sketch as a very simple <strong>code editor<\/strong>\n<\/li>\n<li>Use the popular Bootstrap grid<\/li>\n<li>Build entire static websites directly from inside of Sketch ?<\/li>\n<\/ul>\n<h3><a href=\"https:\/\/sketch2react.io\/resources.php\" target=\"_blank\" rel=\"noopener noreferrer\">Download from\u00a0here<\/a><\/h3>\n<p><strong><em>(zero sign-up required)<\/em><\/strong><\/p>\n<h3>? ?\u00a0?<\/h3>\n<p><em>Sketch2React Alpha v.0.60\u200a\u2014\u200aDesigned and developed in Stockholm with ? by Team Sketch2React \u00a92018<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Why create all of these free demo files and resources one may ask? How do you grow a tree or a plant? By nurturing it. With things like water, the right amount of shadow or sunshine. By giving it love. By caring for it. So in the spirit of all these fine things we spend&hellip;&nbsp;<a href=\"https:\/\/sketch2react.io\/blog\/sketch2react-grids-to-get-you-started\/\" class=\"\" rel=\"bookmark\">Read More &raquo;<span class=\"screen-reader-text\">Sketch2React Grids to get you started<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bgseo_title":"","bgseo_description":"","bgseo_robots_index":"","bgseo_robots_follow":"","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":"","footnotes":""},"categories":[166],"tags":[58,59,93,18,31],"class_list":["post-108","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-bootstrap","tag-react","tag-resources","tag-sketch-app","tag-web-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Sketch2React Grids to get you started | Sketch2React Blog<\/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:\/\/sketch2react.io\/blog\/sketch2react-grids-to-get-you-started\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Sketch2React Grids to get you started - Sketch2React Blog\" \/>\n<meta property=\"og:description\" content=\"Why create all of these free demo files and resources one may ask? How do you grow a tree or a plant? By nurturing it. With things like water, the right amount of shadow or sunshine. By giving it love. By caring for it. So in the spirit of all these fine things we spend&hellip;&nbsp;Read More &raquo;Sketch2React Grids to get you started\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sketch2react.io\/blog\/sketch2react-grids-to-get-you-started\/\" \/>\n<meta property=\"og:site_name\" content=\"Sketch2React Blog\" \/>\n<meta property=\"article:published_time\" content=\"2018-11-07T11:14:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-06-18T07:27:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/0*OfYlppShN1KB7eUb.png\" \/>\n<meta name=\"author\" content=\"Juan Maguid\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Juan Maguid\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/sketch2react.io\/blog\/sketch2react-grids-to-get-you-started\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/sketch2react-grids-to-get-you-started\/\"},\"author\":{\"name\":\"Juan Maguid\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\"},\"headline\":\"Sketch2React Grids to get you started\",\"datePublished\":\"2018-11-07T11:14:21+00:00\",\"dateModified\":\"2020-06-18T07:27:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/sketch2react-grids-to-get-you-started\/\"},\"wordCount\":299,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/sketch2react-grids-to-get-you-started\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/1200\/0*OfYlppShN1KB7eUb.png\",\"keywords\":[\"Bootstrap\",\"React\",\"Resources\",\"Sketch App\",\"Web Development\"],\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/sketch2react.io\/blog\/sketch2react-grids-to-get-you-started\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sketch2react.io\/blog\/sketch2react-grids-to-get-you-started\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/sketch2react-grids-to-get-you-started\/\",\"name\":\"Sketch2React Grids to get you started - Sketch2React Blog\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/sketch2react-grids-to-get-you-started\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/sketch2react-grids-to-get-you-started\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/1200\/0*OfYlppShN1KB7eUb.png\",\"datePublished\":\"2018-11-07T11:14:21+00:00\",\"dateModified\":\"2020-06-18T07:27:01+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/sketch2react-grids-to-get-you-started\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sketch2react.io\/blog\/sketch2react-grids-to-get-you-started\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/sketch2react-grids-to-get-you-started\/#primaryimage\",\"url\":\"https:\/\/cdn-images-1.medium.com\/max\/1200\/0*OfYlppShN1KB7eUb.png\",\"contentUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/1200\/0*OfYlppShN1KB7eUb.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sketch2react.io\/blog\/sketch2react-grids-to-get-you-started\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sketch2react.io\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Sketch2React Grids to get you started\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\",\"url\":\"https:\/\/sketch2react.io\/blog\/\",\"name\":\"Sketch2React Blog\",\"description\":\"Articles, tutorials, tips &amp; tricks\",\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/sketch2react.io\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\",\"name\":\"Sketch2React Blog\",\"url\":\"https:\/\/sketch2react.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png\",\"contentUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png\",\"width\":512,\"height\":512,\"caption\":\"Sketch2React Blog\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\",\"name\":\"Juan Maguid\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g\",\"caption\":\"Juan Maguid\"},\"url\":\"https:\/\/sketch2react.io\/blog\/author\/sketch2react\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Sketch2React Grids to get you started | Sketch2React Blog","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:\/\/sketch2react.io\/blog\/sketch2react-grids-to-get-you-started\/","og_locale":"en_US","og_type":"article","og_title":"Sketch2React Grids to get you started - Sketch2React Blog","og_description":"Why create all of these free demo files and resources one may ask? How do you grow a tree or a plant? By nurturing it. With things like water, the right amount of shadow or sunshine. By giving it love. By caring for it. So in the spirit of all these fine things we spend&hellip;&nbsp;Read More &raquo;Sketch2React Grids to get you started","og_url":"https:\/\/sketch2react.io\/blog\/sketch2react-grids-to-get-you-started\/","og_site_name":"Sketch2React Blog","article_published_time":"2018-11-07T11:14:21+00:00","article_modified_time":"2020-06-18T07:27:01+00:00","og_image":[{"url":"https:\/\/cdn-images-1.medium.com\/max\/1200\/0*OfYlppShN1KB7eUb.png","type":"","width":"","height":""}],"author":"Juan Maguid","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Juan Maguid","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sketch2react.io\/blog\/sketch2react-grids-to-get-you-started\/#article","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/sketch2react-grids-to-get-you-started\/"},"author":{"name":"Juan Maguid","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e"},"headline":"Sketch2React Grids to get you started","datePublished":"2018-11-07T11:14:21+00:00","dateModified":"2020-06-18T07:27:01+00:00","mainEntityOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/sketch2react-grids-to-get-you-started\/"},"wordCount":299,"commentCount":0,"publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/sketch2react-grids-to-get-you-started\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn-images-1.medium.com\/max\/1200\/0*OfYlppShN1KB7eUb.png","keywords":["Bootstrap","React","Resources","Sketch App","Web Development"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/sketch2react.io\/blog\/sketch2react-grids-to-get-you-started\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sketch2react.io\/blog\/sketch2react-grids-to-get-you-started\/","url":"https:\/\/sketch2react.io\/blog\/sketch2react-grids-to-get-you-started\/","name":"Sketch2React Grids to get you started - Sketch2React Blog","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/sketch2react-grids-to-get-you-started\/#primaryimage"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/sketch2react-grids-to-get-you-started\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn-images-1.medium.com\/max\/1200\/0*OfYlppShN1KB7eUb.png","datePublished":"2018-11-07T11:14:21+00:00","dateModified":"2020-06-18T07:27:01+00:00","breadcrumb":{"@id":"https:\/\/sketch2react.io\/blog\/sketch2react-grids-to-get-you-started\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sketch2react.io\/blog\/sketch2react-grids-to-get-you-started\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/sketch2react-grids-to-get-you-started\/#primaryimage","url":"https:\/\/cdn-images-1.medium.com\/max\/1200\/0*OfYlppShN1KB7eUb.png","contentUrl":"https:\/\/cdn-images-1.medium.com\/max\/1200\/0*OfYlppShN1KB7eUb.png"},{"@type":"BreadcrumbList","@id":"https:\/\/sketch2react.io\/blog\/sketch2react-grids-to-get-you-started\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sketch2react.io\/blog\/"},{"@type":"ListItem","position":2,"name":"Sketch2React Grids to get you started"}]},{"@type":"WebSite","@id":"https:\/\/sketch2react.io\/blog\/#website","url":"https:\/\/sketch2react.io\/blog\/","name":"Sketch2React Blog","description":"Articles, tutorials, tips &amp; tricks","publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sketch2react.io\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/sketch2react.io\/blog\/#organization","name":"Sketch2React Blog","url":"https:\/\/sketch2react.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png","contentUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png","width":512,"height":512,"caption":"Sketch2React Blog"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e","name":"Juan Maguid","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g","caption":"Juan Maguid"},"url":"https:\/\/sketch2react.io\/blog\/author\/sketch2react\/"}]}},"_links":{"self":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/108","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/comments?post=108"}],"version-history":[{"count":1,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/108\/revisions"}],"predecessor-version":[{"id":342,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/108\/revisions\/342"}],"wp:attachment":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media?parent=108"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/categories?post=108"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/tags?post=108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}