{"id":1088,"date":"2013-06-03T23:23:23","date_gmt":"2013-06-03T22:23:23","guid":{"rendered":"http:\/\/www.nathankowald.com\/blog\/?p=1088"},"modified":"2016-11-13T16:49:27","modified_gmt":"2016-11-13T16:49:27","slug":"bookmarklet-show-twitter-bootstap-columns","status":"publish","type":"post","link":"https:\/\/www.nathankowald.com\/blog\/2013\/06\/bookmarklet-show-twitter-bootstap-columns\/","title":{"rendered":"Bookmarklet: show Twitter Bootstrap columns"},"content":{"rendered":"

We use Twitter Bootstrap<\/a>\u00a0in a few websites at work.<\/p>\n

Today, while writing documentation I wanted a visual way to show Twitter Bootstrap’s 12-column grid system. In a 12-column grid, each row must contain one or more columns, these must add up to 12.<\/p>\n

For a simple two column layout, create a\u00a0.row<\/strong>\u00a0and add the appropriate number of\u00a0.span*<\/strong>\u00a0columns.
\nFor a 12-column grid, each .span*<\/strong>\u00a0spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).<\/p>\n

\r\n<div class=\"row\">\r\n    <div class=\"span4\">...<\/div>\r\n    <div class=\"span8\">...<\/div>\r\n<\/div><\/pre>\n
The following image shows a 12-column grid system.<\/p>\n
\"12-columns\"<\/a><\/p>\n
I created this bookmarklet to detect all span*<\/strong> classes (span4, span8 etc.) on a page.
\nThe bookmarklet detects these span*<\/strong> bootstrap columns, applies a background colour to them, then inserts the size of the column into the element.
\nIt allows you to see how a 12 or 24-column layout works, and also helps you detect incorrect styling \u2013 this helped me detect a few mistakes in the following screenshot.<\/p>\n
\"24-column<\/a>
\nWe use a custom 24-column layout on this website<\/em><\/p>\n
Add the bookmarklet by visiting this jsFiddle page. Drag the green link to your bookmarks bar:
\nhttp:\/\/jsfiddle.net\/F9Whr\/<\/a><\/p>\n
Here’s the JavaScript:<\/p>\n
\r\njavascript:var colors = {\r\n1:'#F7977A',\r\n2:'#FDC68A',\r\n3:'#FFF79A',\r\n4:'#A2D39C',\r\n5:'#7BCDC8',\r\n6:'#7EA7D8',\r\n7:'#8882BE',\r\n8:'#B4A798',\r\n9:'#F6989D',\r\n10:'#C7B299',\r\n11:'#736357',\r\n12:'#A67C52',\r\n13:'#754C24',\r\n14:'#59955C',\r\n15:'#75B4FF',\r\n16:'#2F74D0',\r\n17:'#8CD1E6',\r\n18:'#C79BF2',\r\n19:'#FFA4FF',\r\n20:'#336666',\r\n21:'#333366',\r\n22:'#336666',\r\n23:'#528413',\r\n24:'#999999'\r\n};\r\nvar items = document.querySelectorAll(\"[class^='span']\");\r\nfor (var i = items.length; i--;) {\r\n    var match = items[i].className.match(\/.*(span\\d+)+\/g);\r\n    if (!match) continue;\r\n    var num = match[0].replace('span', '');\r\n    items[i].style.backgroundColor = (colors[num]) ? colors[num] : 'red';\r\n    items[i].innerHTML = '\u00a0span' + num + '<\/span>' + items[i].innerHTML;\r\n}\r\nvoid(0);<\/pre>\n
I’ve committed this to my bookmarklets repository<\/a> on GitHub if you want to add to it or improve the code in any way.<\/p>\n","protected":false},"excerpt":{"rendered":"
We use Twitter Bootstrap\u00a0in a few websites at work. Today, while writing documentation I wanted a visual way to show Twitter Bootstrap’s 12-column grid system. In a 12-column grid, each row must contain one or more columns, these must add up to 12. For a simple two column layout, create a\u00a0.row\u00a0and add the appropriate number […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[21,7],"tags":[],"class_list":["post-1088","post","type-post","status-publish","format-standard","hentry","category-bookmarklets","category-web-development"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t