Bootstrap in OctoML

OctoML comes bundled with a language for the Bootstrap framework. I've created a set of shorthands for all of the different elements. To add it, call the parser with bootstrap.js. This will also include the library functions.

var lang = new octoml('bootstrap.js');

Getting Started

To create a boilerplate page, use the <bootstrap> tag:

<boostrap>
   <h1>Hello World</h1>
</bootstrap>

Creates:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
</head>
<body>
   <h1>Hello World</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Inside, there are a whole set of tags you can use, these are organised like the Bootstrap documentation into CSS, Components and Javascript.

Options

You can set various options in the <bootstrap> including:

  • Metadata: title description keywords
  • Stylesheets: css less sass.

Attributes can be a comma separated list of filenames. Less and Sass files are compiled

  • HTML Attributes: lang (default: en) icon (image), no-zoom (if present, user zoom is disabled)
  • Versions: jquery (jQuery version, default: 1.11.3) and version (Bootstrap version, default: 3.3.5)
  • Add-ons: analytics (put UA number), shiv (if present, IE shiv added), happy (browse happy message)
  • Theme: theme - from Bootswatch, eg theme="cerulean"
<bootstrap title="Bootstrap Boilerplate"
         description="a generic boilerplate"
         keywords="octoml,bootstrap"
         lang="en:gb"
         icon="icon.png"
         no-zoom
         analytics="123456-78"
         shiv
         happy
         theme="darkly">
   <h1>Hello World
</bootstrap>

Creates:

<!doctype html>
<html lang="en:gb">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Bootstrap Boilerplate</title>
  <meta name="description" content="a generic boilerplate"><meta name="keywords" content="octoml,bootstrap">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=1.0, target-densitydpi=device-dpi, user-scalable=no">
  <link rel="icon" href="icon.png">
  <!--[if lt IE 9]>
   <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
   <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/darkly/bootstrap.min.css">
</head>
<body>
  <!--[if lt IE 8]>
   <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]-->
  <h1>Hello World</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='https://www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-123456-78','auto');ga('send','pageview');
</script>
</body>
</html>