{"id":191,"date":"2013-10-15T09:48:44","date_gmt":"2013-10-15T09:48:44","guid":{"rendered":"http:\/\/www.blogs.hss.ed.ac.uk\/webteam\/?p=191"},"modified":"2013-10-15T10:19:18","modified_gmt":"2013-10-15T10:19:18","slug":"twitter-bootstrap","status":"publish","type":"post","link":"http:\/\/www.blogs.hss.ed.ac.uk\/digital-innovation\/2013\/10\/15\/twitter-bootstrap\/","title":{"rendered":"Twitter Bootstrap"},"content":{"rendered":"<p><a href=\"https:\/\/drupal.org\/project\/bootstrap\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-192 alignleft\" title=\"Twitter Bootstrap\" alt=\"Twitter Bootstrap\" src=\"http:\/\/www.blogs.hss.ed.ac.uk\/webteam\/files\/bootstrap1.png\" width=\"150\" height=\"112\" \/><\/a>Here in the College web team we have been experimenting recently with building websites using the <a href=\"http:\/\/getbootstrap.com\/\">Twitter Bootstrap<\/a> toolkit.<\/p>\n<p>Bootstrap offers a very lightweight set of tools (it&#8217;s perhaps overkill to call it a &#8216;framework&#8217;) to set up a functional website in a very short space of time, that does everything that you might expect a modern website to do. With it, a website can be created very quickly that offers &#8216;out-of-the-box&#8217; modern browser-based client-side technologies such as JavaScript jQuery interface components (e.g. navigation toolbars, tabbed or drop-down menus), and conforms to modern web development guidelines and standards such as the use of valid HTML (and HTML 5), CSS, accessibility, SEO and cross-browser support.<\/p>\n<p>In particular, Bootstrap v3.0 offers the ability to easily build a <a href=\"http:\/\/en.wikipedia.org\/wiki\/Responsive_web_design\">Responsive Web Design<\/a> (RWD) website so that the same codebase can be used for multiple browser\/hardware client platforms of all sizes, including tablets and smartphones, without too much effort.<\/p>\n<p>We&#8217;ve also been experimenting with using <a href=\"http:\/\/bootswatch.com\/\">Bootswatch<\/a> to theme (fonts, layout, formatting and colours) the default interface template offered by Bootstrap, and using the Drupal v7 <a href=\"https:\/\/drupal.org\/project\/bootstrap\">Bootstrap module<\/a> to integrate the functionality of Bootstrap into a Drupal v7 theme. The combination of the server-side PHP\/MySQL Drupal Content Management System and the client-side jQuery\/CSS Bootstrap toolkit is a very powerful one that allows a relatively sophisticated website to be built very quickly.<\/p>\n<p>Bootstrap fits in very well with a <a href=\"http:\/\/en.wikipedia.org\/wiki\/Rapid_application_development\">Rapid Application Development<\/a> (RAD) methodology or even an <a href=\"http:\/\/en.wikipedia.org\/wiki\/Agile_software_development\">Agile<\/a> development methodology. It&#8217;s perfect for building functional web prototypes or basic small-scale operational websites, but perhaps its limitations should be recognised &#8211; like a lot of WordPress-based websites there is a danger that without some customisation, the website interface can be too much like any other Bootstrap-based website and becomes a boring &#8216;vanilla&#8217; website. It&#8217;s also not really an option if a website is designed to conform to a demanding specification, such as an interface that will feature some groundbreaking functionality or attractive and unique design that perhaps will be used for branding and marketing an organisation or idea.<\/p>\n<p>What is does do though is allow a web developer more time to concentrate on the advanced requirements of developing a website on the server-side without having to worry too much about building a &#8216;quality&#8217; website on the client-side from scratch for every single project, to gather valuable user feedback at an early stage of development, and it offers a scalable platform for future development and customisation.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here in the College web team we have been experimenting recently with building websites using the Twitter Bootstrap toolkit. Bootstrap offers a very lightweight set of tools (it&#8217;s perhaps overkill to call it a &#8216;framework&#8217;) to set up a functional &hellip; <a href=\"http:\/\/www.blogs.hss.ed.ac.uk\/digital-innovation\/2013\/10\/15\/twitter-bootstrap\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":43,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"ngg_post_thumbnail":0,"footnotes":""},"categories":[17,28,10],"tags":[],"class_list":["post-191","post","type-post","status-publish","format-standard","hentry","category-drupal","category-frameworks","category-software"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Twitter Bootstrap - Digital Innovation Team<\/title>\n<meta name=\"description\" content=\"A summary of the webteam&#039;s use of Drupal 7, Bootstrap and Bootswatch.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/www.blogs.hss.ed.ac.uk\/digital-innovation\/2013\/10\/15\/twitter-bootstrap\/\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Eddie Boyle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated 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\":\"http:\\\/\\\/www.blogs.hss.ed.ac.uk\\\/digital-innovation\\\/2013\\\/10\\\/15\\\/twitter-bootstrap\\\/#article\",\"isPartOf\":{\"@id\":\"http:\\\/\\\/www.blogs.hss.ed.ac.uk\\\/digital-innovation\\\/2013\\\/10\\\/15\\\/twitter-bootstrap\\\/\"},\"author\":{\"name\":\"Eddie Boyle\",\"@id\":\"https:\\\/\\\/www.blogs.hss.ed.ac.uk\\\/digital-innovation\\\/#\\\/schema\\\/person\\\/56ccd83109d9aed13f97c83e19bf60c8\"},\"headline\":\"Twitter Bootstrap\",\"datePublished\":\"2013-10-15T09:48:44+00:00\",\"dateModified\":\"2013-10-15T10:19:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\\\/\\\/www.blogs.hss.ed.ac.uk\\\/digital-innovation\\\/2013\\\/10\\\/15\\\/twitter-bootstrap\\\/\"},\"wordCount\":412,\"commentCount\":1,\"image\":{\"@id\":\"http:\\\/\\\/www.blogs.hss.ed.ac.uk\\\/digital-innovation\\\/2013\\\/10\\\/15\\\/twitter-bootstrap\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/www.blogs.hss.ed.ac.uk\\\/webteam\\\/files\\\/bootstrap1.png\",\"articleSection\":[\"Drupal\",\"Frameworks\",\"Software\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"http:\\\/\\\/www.blogs.hss.ed.ac.uk\\\/digital-innovation\\\/2013\\\/10\\\/15\\\/twitter-bootstrap\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"http:\\\/\\\/www.blogs.hss.ed.ac.uk\\\/digital-innovation\\\/2013\\\/10\\\/15\\\/twitter-bootstrap\\\/\",\"url\":\"http:\\\/\\\/www.blogs.hss.ed.ac.uk\\\/digital-innovation\\\/2013\\\/10\\\/15\\\/twitter-bootstrap\\\/\",\"name\":\"Twitter Bootstrap - Digital Innovation Team\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.blogs.hss.ed.ac.uk\\\/digital-innovation\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\\\/\\\/www.blogs.hss.ed.ac.uk\\\/digital-innovation\\\/2013\\\/10\\\/15\\\/twitter-bootstrap\\\/#primaryimage\"},\"image\":{\"@id\":\"http:\\\/\\\/www.blogs.hss.ed.ac.uk\\\/digital-innovation\\\/2013\\\/10\\\/15\\\/twitter-bootstrap\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/www.blogs.hss.ed.ac.uk\\\/webteam\\\/files\\\/bootstrap1.png\",\"datePublished\":\"2013-10-15T09:48:44+00:00\",\"dateModified\":\"2013-10-15T10:19:18+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.blogs.hss.ed.ac.uk\\\/digital-innovation\\\/#\\\/schema\\\/person\\\/56ccd83109d9aed13f97c83e19bf60c8\"},\"description\":\"A summary of the webteam's use of Drupal 7, Bootstrap and Bootswatch.\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\\\/\\\/www.blogs.hss.ed.ac.uk\\\/digital-innovation\\\/2013\\\/10\\\/15\\\/twitter-bootstrap\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"http:\\\/\\\/www.blogs.hss.ed.ac.uk\\\/digital-innovation\\\/2013\\\/10\\\/15\\\/twitter-bootstrap\\\/#primaryimage\",\"url\":\"http:\\\/\\\/www.blogs.hss.ed.ac.uk\\\/webteam\\\/files\\\/bootstrap1.png\",\"contentUrl\":\"http:\\\/\\\/www.blogs.hss.ed.ac.uk\\\/webteam\\\/files\\\/bootstrap1.png\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.blogs.hss.ed.ac.uk\\\/digital-innovation\\\/#website\",\"url\":\"https:\\\/\\\/www.blogs.hss.ed.ac.uk\\\/digital-innovation\\\/\",\"name\":\"Digital Innovation Team\",\"description\":\"\u00a0CAHSS\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.blogs.hss.ed.ac.uk\\\/digital-innovation\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.blogs.hss.ed.ac.uk\\\/digital-innovation\\\/#\\\/schema\\\/person\\\/56ccd83109d9aed13f97c83e19bf60c8\",\"name\":\"Eddie Boyle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/08a2667b70b55f14959fa74b7393b0acfec7b6edde9622e4d6c08bb240a2d377?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/08a2667b70b55f14959fa74b7393b0acfec7b6edde9622e4d6c08bb240a2d377?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/08a2667b70b55f14959fa74b7393b0acfec7b6edde9622e4d6c08bb240a2d377?s=96&d=mm&r=g\",\"caption\":\"Eddie Boyle\"},\"url\":\"http:\\\/\\\/www.blogs.hss.ed.ac.uk\\\/digital-innovation\\\/author\\\/edwardboyle\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Twitter Bootstrap - Digital Innovation Team","description":"A summary of the webteam's use of Drupal 7, Bootstrap and Bootswatch.","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":"http:\/\/www.blogs.hss.ed.ac.uk\/digital-innovation\/2013\/10\/15\/twitter-bootstrap\/","twitter_misc":{"Written by":"Eddie Boyle","Estimated reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/www.blogs.hss.ed.ac.uk\/digital-innovation\/2013\/10\/15\/twitter-bootstrap\/#article","isPartOf":{"@id":"http:\/\/www.blogs.hss.ed.ac.uk\/digital-innovation\/2013\/10\/15\/twitter-bootstrap\/"},"author":{"name":"Eddie Boyle","@id":"https:\/\/www.blogs.hss.ed.ac.uk\/digital-innovation\/#\/schema\/person\/56ccd83109d9aed13f97c83e19bf60c8"},"headline":"Twitter Bootstrap","datePublished":"2013-10-15T09:48:44+00:00","dateModified":"2013-10-15T10:19:18+00:00","mainEntityOfPage":{"@id":"http:\/\/www.blogs.hss.ed.ac.uk\/digital-innovation\/2013\/10\/15\/twitter-bootstrap\/"},"wordCount":412,"commentCount":1,"image":{"@id":"http:\/\/www.blogs.hss.ed.ac.uk\/digital-innovation\/2013\/10\/15\/twitter-bootstrap\/#primaryimage"},"thumbnailUrl":"http:\/\/www.blogs.hss.ed.ac.uk\/webteam\/files\/bootstrap1.png","articleSection":["Drupal","Frameworks","Software"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["http:\/\/www.blogs.hss.ed.ac.uk\/digital-innovation\/2013\/10\/15\/twitter-bootstrap\/#respond"]}]},{"@type":"WebPage","@id":"http:\/\/www.blogs.hss.ed.ac.uk\/digital-innovation\/2013\/10\/15\/twitter-bootstrap\/","url":"http:\/\/www.blogs.hss.ed.ac.uk\/digital-innovation\/2013\/10\/15\/twitter-bootstrap\/","name":"Twitter Bootstrap - Digital Innovation Team","isPartOf":{"@id":"https:\/\/www.blogs.hss.ed.ac.uk\/digital-innovation\/#website"},"primaryImageOfPage":{"@id":"http:\/\/www.blogs.hss.ed.ac.uk\/digital-innovation\/2013\/10\/15\/twitter-bootstrap\/#primaryimage"},"image":{"@id":"http:\/\/www.blogs.hss.ed.ac.uk\/digital-innovation\/2013\/10\/15\/twitter-bootstrap\/#primaryimage"},"thumbnailUrl":"http:\/\/www.blogs.hss.ed.ac.uk\/webteam\/files\/bootstrap1.png","datePublished":"2013-10-15T09:48:44+00:00","dateModified":"2013-10-15T10:19:18+00:00","author":{"@id":"https:\/\/www.blogs.hss.ed.ac.uk\/digital-innovation\/#\/schema\/person\/56ccd83109d9aed13f97c83e19bf60c8"},"description":"A summary of the webteam's use of Drupal 7, Bootstrap and Bootswatch.","inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["http:\/\/www.blogs.hss.ed.ac.uk\/digital-innovation\/2013\/10\/15\/twitter-bootstrap\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"http:\/\/www.blogs.hss.ed.ac.uk\/digital-innovation\/2013\/10\/15\/twitter-bootstrap\/#primaryimage","url":"http:\/\/www.blogs.hss.ed.ac.uk\/webteam\/files\/bootstrap1.png","contentUrl":"http:\/\/www.blogs.hss.ed.ac.uk\/webteam\/files\/bootstrap1.png"},{"@type":"WebSite","@id":"https:\/\/www.blogs.hss.ed.ac.uk\/digital-innovation\/#website","url":"https:\/\/www.blogs.hss.ed.ac.uk\/digital-innovation\/","name":"Digital Innovation Team","description":"\u00a0CAHSS","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.blogs.hss.ed.ac.uk\/digital-innovation\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.blogs.hss.ed.ac.uk\/digital-innovation\/#\/schema\/person\/56ccd83109d9aed13f97c83e19bf60c8","name":"Eddie Boyle","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/secure.gravatar.com\/avatar\/08a2667b70b55f14959fa74b7393b0acfec7b6edde9622e4d6c08bb240a2d377?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/08a2667b70b55f14959fa74b7393b0acfec7b6edde9622e4d6c08bb240a2d377?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/08a2667b70b55f14959fa74b7393b0acfec7b6edde9622e4d6c08bb240a2d377?s=96&d=mm&r=g","caption":"Eddie Boyle"},"url":"http:\/\/www.blogs.hss.ed.ac.uk\/digital-innovation\/author\/edwardboyle\/"}]}},"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/www.blogs.hss.ed.ac.uk\/digital-innovation\/wp-json\/wp\/v2\/posts\/191","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.blogs.hss.ed.ac.uk\/digital-innovation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.blogs.hss.ed.ac.uk\/digital-innovation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.blogs.hss.ed.ac.uk\/digital-innovation\/wp-json\/wp\/v2\/users\/43"}],"replies":[{"embeddable":true,"href":"http:\/\/www.blogs.hss.ed.ac.uk\/digital-innovation\/wp-json\/wp\/v2\/comments?post=191"}],"version-history":[{"count":2,"href":"http:\/\/www.blogs.hss.ed.ac.uk\/digital-innovation\/wp-json\/wp\/v2\/posts\/191\/revisions"}],"predecessor-version":[{"id":208,"href":"http:\/\/www.blogs.hss.ed.ac.uk\/digital-innovation\/wp-json\/wp\/v2\/posts\/191\/revisions\/208"}],"wp:attachment":[{"href":"http:\/\/www.blogs.hss.ed.ac.uk\/digital-innovation\/wp-json\/wp\/v2\/media?parent=191"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.blogs.hss.ed.ac.uk\/digital-innovation\/wp-json\/wp\/v2\/categories?post=191"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.blogs.hss.ed.ac.uk\/digital-innovation\/wp-json\/wp\/v2\/tags?post=191"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}