Blog

Making a Bootstrap template editable with Simpla

Bootstrap templates are a great way to quickly start prototyping a new website. Unfortunately, all the content in these templates is hard-coded in HTML, which makes it really difficult to update and maintain.

So today we're going to make the content in a Bootstrap template editable with Simpla.

If you just want to see the end result, grab the converted template.

Why Simpla?

Simpla lets you create editable content straight in HTML, with a collection of new HTML elements. This means we can turn a static template into a fully content-managed site very quickly, without needing to use a traditional CMS (Content Management System).

Once we’re done, our teammates and clients will be able to edit the content of our site directly inline, while our code stays safe and untouched.

Get setup

The first thing we will do is download a bootstrap template for our project. This simple business template from Start Bootstrap is a good starting point.

The next thing we need to do is to sign up for Simpla and create a project. Then, include the library and initialise Simpla with your project ID in the <head> of the index.html file in the template.

<script src="https://app.simpla.io"></script>

<!-- TODO: Enter project key -->  
<script>Simpla('PROJECT-KEY');</script>  

Replace static content with Simpla elements

Let’s open up the index file to get a feel for our bootstrap template in the browser.

Our template

Now we're going to use Simpla's new HTML elements to replace the hard-coded content in our Bootstrap template.

Text

We’re going to create editable rich-text in our template with the <simpla-text> element. It can be used as a standalone element or inside any other textual HTML element (eg: inside headings, paragraphs, etc).

Converting text elements to simpla-text

Because <simpla-text> will inherit its style from its parent element, it's perfectly fine to just embed <simpla-text> within the current structure of the HTML. This means that any bootstrap or custom styling already applied to the the parent elements will be inherited by <simpla-text> and there will be no change in appearance.

Let’s start by converting the heading "Business Name or Tagline”.

<!-- Before -->  
<h1>Business Name or Tagline</h1>

<!--After -->  
<h1><simpla-text sid="my-title"></simpla-text></h1>  

We have removed the actual text content within the original element. This is because when using Simpla, we don't store content in the HTML. Instead, we give the element a unique ID, in the sid (Simpla ID) attribute, which Simpla will use to find and load the content. You can choose any name for the sid (more on this in Structuring Data below).

Uploading and saving text

The next step is to upload and save content into Simpla. To do this we append #edit to the URL, which will prompt Simpla to ask for login credentials before entering edit mode.

In edit mode you'll see placeholder text appear where you've inserted the <simpla-text> element. Click on it and type a new heading.

Now hit the save button in the top right corner and remove#edit from the URL. Our content is now stored remotely and loaded in by Simpla.

Edit mode

Images

We’re going to use the <simpla-img> element to create editable images, it replaces the static <img> element.

Converting image elements to simpla-img

In order to convert images you'll need to replace your <img> tags with <simpla-img> (Note: <simpla-img> requires a closing tag </simpla-img>)

<!-- Before -->  
<img src="http://placehold.it/900x350" class="img img-reponsive">

<!-- After -->  
<simpla-img sid="my-image" class="img img-responsive"></simpla-img>  

Because we aren't wrapping the <simpla-img> like we did with <simpla-text>, it is important to remember to re-apply any css classes that you need.

Uploading and saving images

Enter edit mode again (by appending #edit to the URL), this time you'll see a placeholder image for <simpla-img>. Click on the placeholder to upload an image from your computer.

Once the upload is done, <simpla-img> lets you set other properties such as the image title, zoom and positioning of the image. Once you're done just hit save and refresh the page. Your images are now stored remotely and loaded in by Simpla.

simpla-img placeholder

Structuring data

We've talked briefly about how Simpla elements use an sid property to identify which content should be inserted into the element. Using unique sid values is fine when you only have a small number of elements. But as your project grows creating unique names for every element quickly becomes difficult to reason about and maintain.

Namespacing with simpla-block

Simpla has an element called <simpla-block> which allows us to easily structure our data in HTML. With simpla-block we can create namespaces for other Simpla elements, so that the elements inside are scoped to that block only.

Let's take a look at our three text columns. Each of them has a heading, some text, and a button. Without <simpla-block> we would have to come up with a unique sid for every heading and text element. However, if we use <simpla-block> to create a namespace, we can do something like this.

<div class="row">  
  <simpla-block sid="first-col" class="col-md-4">
    <h2><simpla-text sid="title"></simpla-text></h2>
    <p><simpla-text sid="text"></simpla-text></p>
    <a class="btn btn-default" href="#">More Info</a>
  </simpla-block>

  <simpla-block sid="second-col" class="col-md-4">         
    <h2><simpla-text sid="title"></simpla-text></h2>
    <p><simpla-text sid="text"></simpla-text></p>
    <a class="btn btn-default" href="#">More Info</a>
  </simpla-block>

  <simpla-block sid="third-col" class="col-md-4">
    <h2><simpla-text sid="title"></simpla-text></h2>
    <p><simpla-text sid="text"></simpla-text></p>
    <a class="btn btn-default" href="#">More Info</a>
  </simpla-block>
</div>  

Go back into #edit mode and try inserting unique content into your headings and paragraphs. Now when you press save and refresh, Simpla fetches the correct content based on the sid of <simpla-block>. Not only is this a much more convenient way to keep our content unique, it greatly simplifies the underlying HTML structure.

You can read more about data structuring with Simpla in the Structuring Data section of the docs.

Adding new content

Adding new content with Simpla is easy at this point.

For text just use <simpla-text> wrapped with the native HTML element you want mimic. This way we ensure that our <simpla-text> will include bootstrap specific styles on the native elements. If you're creating a block of several paragraphs, just use <simpla-text> on its own, and it will create paragraphs inside itself for new lines.

For images use <simpla-img>, but remember not to wrap the native tag. This means you must also carry over any old classes and styles from the old <img> to <simpla-img>.

Also remember that for each new section of content, it's a good idea to namespace with a <simpla-block> so that you don't have to worry about naming issues for the sid of your elements.

That's it

Now that we've converted our bootstrap template with Simpla elements, managing content is a much easier process. Both developers and non-technical clients use the #edit interface to update their content.

Download finished template