Mozilla Brick and Zepto.js


Raymond Camden wrote up an instructive example that shows how to use Mozilla’s Brick UI Components with vanilla Javascript. I decided to take that and modify it to use Zepto.js instead. I have no idea whether this is a good idea or not, but it’s done now so there’s no point in crying about it. Here it is:

<!DOCTYPE html>
    <meta charset="utf-8">
    Adapted to use Zepto.js by MFK.
    <title>Brick Card Demo</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="css/brick-1.0beta8.css"/>
    <script src="js/brick-1.0beta8.js"></script>
    <script src="js/zepto.min.js"></script>
      html, body{
        height: 100%;

        <a href="" id="homeLink" title="Home">=</a>
      <header>Brick Card Demo</header>

      <x-deck id="mainDeck">

              <a href="1" class="deckLink">Page 1</a>
              <a href="2" class="deckLink">Page 2</a>
              <a href="3" class="deckLink">Page 3</a>

          <h1>Page 1</h1>

          <h1>Page 2</h1>

          <h1>Page 3</h1>


      Based on code
      copyright &copy;  2013 Raymond Camden

    $(function() {
      console.log('domCom loaded (zepto.js!)');

      var deck = $('#mainDeck')[0];

      $('#homeLink').click(function(e) {

      $('.deckLink').click(function(e) {
        var target = e.currentTarget.href.split("/").pop();


FPAleksandr is a theme for FlatPress that I am porting from Mat Wiseman’s insanely awesome Aleksandr, originally made for Textpattern.

It’s available in my Bitbucket, and there’s also a FlatPress forum discussion.

I tried to remain as faithful as possible to the original, but some things were just not going to translate directly—the footers, for instance. The best solution I was able to arrive at for the footers takes away some of the elegance of the original, but given the limits of the platform I don’t think it’s all that bad.

There are still some bugs to squash and lipstick to be applied, but it’s basically usable as-is.