{"id":1399,"date":"2012-06-19T21:39:19","date_gmt":"2012-06-19T21:39:19","guid":{"rendered":"http:\/\/cssreset.com\/?p=1399"},"modified":"2012-06-19T21:39:19","modified_gmt":"2012-06-19T21:39:19","slug":"implementing-css-grids-into-your-drupal-website","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/implementing-css-grids-into-your-drupal-website\/","title":{"rendered":"Implementing CSS Grids into Your Drupal Website"},"content":{"rendered":"<p>Using some blocks of pre-written code when building a website is a great way to save some time and can allow you to focus on bigger tasks than laying out columns, etc. Today we look at some grids, which are CSS frameworks created with the intention of speeding up the process of coding the layout of a site.<!--more--><\/p>\n<p>It may appear at first that CSS Grids go against the mainstream standards of coding by naming all of your classes and IDs to be used in your document, but really it is simply taking another step of the process out of your work flow. Now all you need to do is call them out in the HTML. So this insightful video tutorial focuses on just that, how to successfully move these pre-designated classes and IDs into your HTML document.<\/p>\n<p>So this video is obviously targeting Drupal users, and we know that not all of you out there are. So do not fret, we plan on bringing you top quality tutorials covering a wide range of topics and knowledge levels in an attempt to serve the community as best we can. Alright, moving on&#8230;<\/p>\n<p>Mustardseed Media is devoted to helping people use and get more out of Drupal through their popular podcast. In this installment, Bob does a good job of running through a lot of information very quickly and covering everything from the basic options for CSS grid libraries that are currently available, to mastering the art of block layouts upon import.<\/p>\n<p>Bypassing a lot of the tedious ground work when setting up a website is probably something a lot of you have dreamed about. It should be noted here that grids are something that anyone can use, NOT JUST DRUPAL USERS. In fact, if you wanted to you could even build your own with a service like <a title=\"Create custom grid systems in valid css \/ xhtml\" href=\"http:\/\/www.gridsystemgenerator.com\/\" rel=\"nofollow\" target=\"_blank\">http:\/\/www.gridsystemgenerator.com\/<\/a><\/p>\n<p>You may also want to see more options available in the way of grids, and what other people are doing with them. <a title=\"15 Responsive CSS Frameworks Worth Considering\" href=\"http:\/\/speckyboy.com\/2011\/11\/17\/15-responsive-css-frameworks-worth-considering\/\" rel=\"nofollow\" target=\"_blank\">Here is a great article<\/a> on some of the most popular templates around. Some of our current favorites are <a title=\"&quot;Skeleton&quot; CSS Framework\" href=\"http:\/\/www.getskeleton.com\/\" rel=\"nofollow\" target=\"_blank\">Skeleton<\/a>, <a title=\"&quot;320 and Up&quot; CSS Framework\" href=\"http:\/\/stuffandnonsense.co.uk\/projects\/320andup\/\" rel=\"nofollow\" target=\"_blank\">320 and Up<\/a> and<\/p>\n<div class=\"wp-socializer wpsr-share-icons \" data-lg-action=\"show\" data-sm-action=\"show\" data-sm-width=\"768\" ><h3>Share and Enjoy !<\/h3><div class=\"wpsr-si-inner\"><div class=\"wpsr-counter wpsrc-sz-32px\" style=\"color:#000\"><span class=\"scount\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook,twitter,linkedin,pinterest,print,pdf\">0<\/span><\/span><small class=\"stext\">Shares<\/small><\/div><div class=\"socializer sr-popup sr-32px sr-circle sr-opacity sr-pad sr-count-1 sr-count-1\"><span class=\"sr-facebook\"><a rel=\"nofollow\" href=\"https:\/\/www.facebook.com\/share.php?u=\" target=\"_blank\"  title=\"Share this on Facebook\"  style=\"color: #ffffff\" ><i class=\"fab fa-facebook-f\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-twitter\"><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/intent\/tweet?text=%20-%20%20\" target=\"_blank\"  title=\"Tweet this !\"  style=\"color: #ffffff\" ><i class=\"fab fa-twitter\"><\/i><\/a><\/span>\n<span class=\"sr-linkedin\"><a rel=\"nofollow\" href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=\" target=\"_blank\"  title=\"Add this to LinkedIn\"  style=\"color: #ffffff\" ><i class=\"fab fa-linkedin-in\"><\/i><\/a><\/span>\n<span class=\"sr-pinterest\"><a rel=\"nofollow\" href=\"https:\/\/www.pinterest.com\/pin\/create\/button\/?url=&amp;media=&amp;description=\" target=\"_blank\"  title=\"Submit this to Pinterest\"  style=\"color: #ffffff\" data-pin-custom=\"true\"><i class=\"fab fa-pinterest\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"pinterest\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-print\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Print this article \"  style=\"color: #ffffff\" ><i class=\"fa fa-print\"><\/i><\/a><\/span>\n<span class=\"sr-pdf\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Convert to PDF\"  style=\"color: #ffffff\" ><i class=\"fa fa-file-pdf\"><\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Using some blocks of pre-written code when building a website is a great way to save some time and can allow you to focus on bigger tasks than laying out columns, etc. Today we look at some grids, which are [&#8230;]<\/p>\n<p><a class=\"more-link video\" href=\"https:\/\/cssdeck.com\/blog\/implementing-css-grids-into-your-drupal-website\/\" title=\"Click to watch 'Implementing CSS Grids into Your Drupal Website'\">Watch Video<\/a><\/p>\n","protected":false},"author":18,"featured_media":1400,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6,13],"tags":[79,92,93,96,94,73,95],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1399"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=1399"}],"version-history":[{"count":5,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1399\/revisions"}],"predecessor-version":[{"id":1429,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1399\/revisions\/1429"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/1400"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=1399"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=1399"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=1399"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}