Include helpers - mateusmedeiros/sinatra-bootstrap GitHub Wiki

Table of Contents

Piece of history

There was mainly one helper: bootstrap_assets, which called another two undocumented helpers, bootstrap_css and bootstrap_js.

I wanted to put bootstrap.js at the end of the body tag, so at first I did some hacky stuff on bootstrap_js and added an option exclude_html5 and a separate helper only for the html5shiv, which had to be on head. Like that I could call bootstrap_html5 on head and bootstrap_js :exclude_html5 on the body. This was even before I swapped version 2 for version 3.

When I made the change from bootstrap 2 to bootstrap 3, it was all so different, I had to completely rework everything. At first I was going to make just one helper which would receive a hash and etc, and so you could make bootstrap css: true, html5: true etc, but the first problem was that bootstrap didn't have only html5shiv to be added, but also respond.js. Those two, or one, or the other, had all to go in the same fugly conditional IE comment. The second problem was that you could end up calling the helper 3, 4 times in your template, and then it would go through a reasonable-sized piece of code n-times for "nothing".

I did get something working in the end, but it was overly complicated for just some simple include helpers, so I scrapped that idea and made simpler separated helpers.

Helpers

bootstrap_css

 <%= bootstrap_css %>

Will create the tags:

<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<link rel='stylesheet' type='text/css'  href='http://something:someport/css/bootstrap.min.css'>

If you want to skip the meta tag, just call it as bootstrap_css false, and if you want to pass any extra attribute, pass them in a string on the second parameter: bootstrap_css true, "some-attr='foo' another='bar'".

bootstrap_js_default

 <%= bootstrap_js_default %>

will then generate the tags:

<script type='text/javascript'  src='http://something:someport/js/jquery.min.js'></script>
<script type='text/javascript'  src='http://something:someport/js/bootstrap.min.js'></script>

I made those so you can put it at the end of the body tag while still using respond.js and html5shiv.js on the head. Again, you can pass extra attributes through a string if you want: bootstrap_js_default "other-attr='foobar'". Note that the attributes will be set in both tags. Extra attributes on only one tag is in my TO-DO but not exactly a priority right now.

bootstrap_js_legacy

<%= bootstrap_js_legacy %>

will result in:

<! --[if lt IE 9]>
<script type='text/javascript'  src='http://something:someport/js/html5.js'></script>
<script type='text/javascript'  src='http://something:someport/js/respond.min.js'></script> 
<![endif]-->

You can also use a string to pass attributes. bootstrap_js_legacy "same-attribute='baz'".

bootstrap_js

Will just call both legacy and default, as you can see from the source code:

def bootstrap_js(attrb = '')
  "#{bootstrap_js_legacy(attrb)} \n#{bootstrap_js_default(attrb)}"
end

Again, you can pass attributes, but note they will go to all tags of both default and legacy js.

bootstrap

Last but not least, if you want just one helper to include everything, you can use bootstrap.

def bootstrap(attrb = '')
  "#{bootstrap_css(attrb)} \n#{bootstrap_js_legacy(attrb)} \n#{bootstrap_js_default(attrb)}"
end

Calling it like this:

<%= bootstrap %>

will result in:

<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<link rel='stylesheet' type='text/css'  href='http://something:someport/css/bootstrap.min.css'>
<! --[if lt IE 9]>
<script type='text/javascript'  src='http://something:someport/js/html5.js'></script>
<script type='text/javascript'  src='http://something:someport/js/respond.min.js'></script> 
<![endif]-->
<script type='text/javascript'  src='http://something:someport/js/jquery.min.js'></script>
<script type='text/javascript'  src='http://something:someport/js/bootstrap.min.js'></script>

Notes

Unlike the content helpers, include helpers are to be used based on their return value, which means <%= %> instead of <% %>. In the future I'll try to make them in a way that they will use sinatra-outputbuffer to append the content to the buffer directly but at the same time return the content as string so that you can use the return versions on template engines other than haml and erb.

⚠️ **GitHub.com Fallback** ⚠️