Skip to content


Switch branches/tags
This branch is 4 commits ahead, 85 commits behind StartBootstrap:master.

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time
  - A SAM Implementation of the Clean Blog

Clean Blog is a responsive blog theme for Bootstrap created by Start Bootstrap. This theme features a blog homepage, about page, contact page, and an example post page along with a working node.js contact form.

Getting Started

To begin using this template, choose one of the following options to get started:

  • Clone the repo: git clone
  • Fork the repo

The original code can be found on Start Bootstrap

Bugs and Issues

Have a bug or an issue with this template? Open a new issue here on GitHub or leave a comment on the template overview page at Start Bootstrap.


Start Bootstrap was created by and is maintained by David Miller, Owner of Blackrock Digital.

Start Bootstrap is based on the Bootstrap framework created by Mark Otto and Jacob Thorton.

This version of the project was created by and is maintained by Jean-Jacques Dubray, Founder of

SAM Pattern

This sample was modified to illustrate the SAM pattern. The updated sample features a back-end which provides the "model" initial value.

The back-end is a node.js application, located in the ./app/ directory. The blog metadata can be specified in the ./app/data.js file.

The SAM pattern is implemented as a single page application. The structure of the pattern is implemented in the ./sam/ directory:

  • actions.js
  • model.js
  • state.js
  • view.js

This implement is generic and can be reused across project. The pattern is initialized in index.html

// wire the elements of the pattern as a reactive look action->model->state->view
state.init(view,theme, display, components) ;
model.init(state, components, options) ;
actions.init(model.present, options) ;
components.actions.forEach(function(action) {
    actions[] = function(data, present) {
        return action.implementation(data, present, model) ;
}) ;


// wire SAM actions to the global variable a 
a = actions ;

// render initial state
state.representation(model) ;

The display function is in charge of rendering the State representation into the Single Page structure (header, page, footer).

var display = function(representation) {
    preparePage(model) ;
    if (representation.header) { document.getElementById('header-representation').innerHTML = representation.header ; }
    if ( { document.getElementById('page-representation').innerHTML = ; }
    if (representation.footer) { document.getElementById('footer-representation').innerHTML = representation.footer ; }
    initElements() ;
    checkBackButton(model) ;

A simple page transformation lifecycle is implemented:

  • preparePage (for rendering)
  • render state representation
  • initEments of the page (e.g. datePicker)
  • checkBackButton

The sample is written in ES6 and transpiled at load time with Google Traceur.

To install and run the back-end (assuming you have already installed node.js):

$  cd app/
$  npm install
$  node server-model.js

Open a browser at: http://localhost:5625/html/

The implemenation is designed to work with an atom 2.0 feed and currently configured to fetch the GitHub feed (./config/default.json)

Copyright and License

Copyright 2013-2016 Blackrock Digital LLC. Code released under the MIT license. Copyright 2016 Jean-Jacques Dubray Code released under the MIT license.


A clean Bootstrap blog theme created by Start Bootstrap







No packages published


  • JavaScript 64.7%
  • HTML 21.7%
  • CSS 12.7%
  • PHP 0.9%