{"id":382,"date":"2011-05-26T15:58:04","date_gmt":"2011-05-26T15:58:04","guid":{"rendered":"http:\/\/wp4design.com\/?p=382"},"modified":"2012-02-26T15:44:36","modified_gmt":"2012-02-26T14:44:36","slug":"using-the-basics-grid","status":"publish","type":"post","link":"http:\/\/4design.xyz\/wordpress-basics\/using-the-basics-grid","title":{"rendered":"Using the Basics grid"},"content":{"rendered":"<p>\u2665\u00a0Basics comes with a 940 pixels grid system which gather the best of three worlds: Blueprint CSS, 960.gs and The Simpler Grid. If you want to use it, just activate <em>grid.css<\/em> by removing the comments around the <em>@import<\/em> rules\u00a0<code>\/* @import \"css\/grid.css\"; *\/<\/code> located within <em>style.css<\/em>. \u00a0A 940 pixels width is good for me; If you prefer a 960 pixel one, you could determine the\u00a0width of the body tag at 960 pixels, like I did for this website.<!--more--><\/p>\n<p>In <em>author.css<\/em> you got the followings :<\/p>\n<pre>body {\n    width: 960px;\n    margin: 1.539em auto;\n}\n#page {\n    width: 940px;\n    margin: 0 auto;\n    padding: 1em 0;\n    \/* Play with comments to toggle the 940 pixels grid *\/\n    \/* background: url(grid.png) repeat-x; *\/\n}<\/pre>\n<p>Those rules allows you to have a 10 pixels margin on the both sides of your page. If you want a\u00a0width\u00a0equal\u00a0to\u00a0the\u00a0gutter (20px here), put a 980px width to the <em>body<\/em> instead of 960px, and the cat&#8217;s in the bag \ud83d\ude42<\/p>\n<p>Note: if you planned to use my <em>grid.css<\/em> file, don&#8217;t forget that unlike Blueprint, I used a system based of <em>margin-left<\/em> (instead of <em>margin-right<\/em>) to get gutters.<\/p>\n<p>If you got some &#8220;literacy&#8221; in French language, I invite you to read my post about the cold fusion with Blueprint, 960 Grid System and The Simpler Grid, available at\u00a0<a href=\"http:\/\/css.4design.tl\/frameworks-css-fusion-blueprint-960-gs-the-simpler-grid\">http:\/\/css.4design.tl\/frameworks-css-fusion-blueprint-960-gs-the-simpler-grid<\/a>. If not, go directly to the\u00a0<a href=\"http:\/\/translate.google.fr\/translate?js=n&amp;prev=_t&amp;hl=en&amp;ie=UTF-8&amp;layout=2&amp;eotf=1&amp;sl=fr&amp;tl=en&amp;u=http%3A%2F%2Fcss4design.com%2Fframeworks-css-fusion-blueprint-960-gs-the-simpler-grid&amp;act=url\">Google translated page<\/a>.\u00a0On a misunderstanding,\u00a0it may work \ud83d\ude09<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u2665\u00a0Basics comes with a 940 pixels grid system which gather the best of three worlds: Blueprint CSS, 960.gs and The Simpler Grid. If you want to use it, just activate grid.css by removing the comments around the @import rules\u00a0\/* @import &#8220;css\/grid.css&#8221;; *\/ located within style.css. \u00a0A 940 pixels width is good for &hellip; <a href=\"http:\/\/4design.xyz\/wordpress-basics\/using-the-basics-grid\" rel=\"nofollow\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6],"tags":[13,24,36,64,140],"_links":{"self":[{"href":"http:\/\/4design.xyz\/wordpress-basics\/wp-json\/wp\/v2\/posts\/382"}],"collection":[{"href":"http:\/\/4design.xyz\/wordpress-basics\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/4design.xyz\/wordpress-basics\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/4design.xyz\/wordpress-basics\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"http:\/\/4design.xyz\/wordpress-basics\/wp-json\/wp\/v2\/comments?post=382"}],"version-history":[{"count":0,"href":"http:\/\/4design.xyz\/wordpress-basics\/wp-json\/wp\/v2\/posts\/382\/revisions"}],"wp:attachment":[{"href":"http:\/\/4design.xyz\/wordpress-basics\/wp-json\/wp\/v2\/media?parent=382"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/4design.xyz\/wordpress-basics\/wp-json\/wp\/v2\/categories?post=382"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/4design.xyz\/wordpress-basics\/wp-json\/wp\/v2\/tags?post=382"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}