Category: web development

Ionic vs Bootstrap

I come from the before times. The times where PHP was it, many were switching from tables to css, Bush was president and you had to get help from some weird phpBB forum post where the signatures took up half the screen—and you LIKED IT!

Land Before Time
I need a more ominous before picture...

If that's how I think of the times before Bootstrap, how will I think of Bootstrap 5 years from now?

Why write this?

I am writing this as a tool to help me learn more about Ionic and Bootstrap to decide which, if either, library to use for my new hybrid web app. My app has to look good and function well on desktop, tablet and mobile.

I haven't used Ionic at all, yet, but I have used Bootstrap for over a dozen projects. I love bootstrap, but there are some things that definitely bug me and I'd love to learn about some alternatives.


Pain points of Bootstrap

Grid system

Columns. Rows. Grids.

It's only getting more complex with .col-md-12, .col-xs-12 and such. These things aren't hard to learn, but I had just gotten the hang of doing the whole .container .row .span dance. Oh, don't forget .row-fluid was awesome, too.

<div class="container">
    <div class="row">
        <div class="span12">

Requires jQuery

Unforunately Bootstrap requires jQuery, but there is an awesome repo that has a version of Bootstrap without the jQuery requirement!

Everything looks the same

This is a criticism a lot of people have that I don't entirely share, however I thought I'd mention it anyway. Many sites are using basic bootstrap stuff without tweaking it much—doesn't really bother me, I think it's an important tool for developers who aren't designers.

Things Bootstrap does right

Great documentation

Boy did they nail it. I feel like Bootstrap had the best documentation of any library a couple years ago, and it still may hold that title. It's a snap to find what you are looking for, the explanations are easy to understand and there are examples for nearly everything.

Super easy to use, proven

Bootstrap is getting more and more mature, people know how to use it and appreciate it. There are lots of tried-and-true plugins, examples, tutorials, videos, etc. for Bootstrap.

Tons of nice features

Typeahead, image sliders, on and on. So many useful little features, so easy to use and expand. It's nice to be able to rely on a library most of the time!

Ionic framework

Ionic's iconic infamous items (pros)

Grid system, 'yall

Shit is written with FLEXBOX! I have been waiting for some kind of support for this forever, a good friend of mine Levi Thomason tried to explain it to my glazed over eyes but I think I caught the jist. Flexbox solves a ton of problems that are normally solved with floats, tricks, and wizardry:

  1. Vertical align
  2. Things fill in remaining space easily
  3. Elements stay where they should (footer stuck to bottom of screen)
  4. etc. etc.

AngularJS instead of jQuery

Ionic is built on top of AngularJS for all of the interactions, that is awesome. AngularJS makes writing front end stuff so much less painful and so much easier to test. Way back when I couldn't imagine writing tests for jQuery stuff, how would I emulate so many DOM elements?

AngularJS helps you write unit-testable code by abstracting away the DOM, instead you play around in a $scope where all data is stored.

Ionic's inconceivable integrations (cons)

Kind of confusing docs/dist

Maybe it's because I am so used to how Bootstrap has everything laid out, but it just feels a little wonky and lacking sometimes. For example, how the hell do I use that awesome list of animations? How do I use gestures? I had to look at the source code to figure out what I was doing wrong.

Purely mobile

Ionic is built only for mobile, which is a big problem for me because I want to design a hybrid mobile/desktop app.

However, I feel like I just need to "do it" and try. Every other UI framework I've used on mobile has performed terribly, but Ionic has been doing pretty good so far.


I'm not a huge fan of the colors/styles available now, but I am sure that will get better as the project matures. Do we really need like 10 colors for buttons?


Ionic seems to only support mobile, although it says it is a Hybrid framework. I feel like Bootstrap is much better at doing desktop. This comparison seems more apples to orange than I first suspected, these frameworks are solving totally different things.

I am going to give Ionic a shot for my next app even though it only seems to support mobile, I have already started and it's not going terribly, here's what I have so far for my workout tracking app:

Personal Record workout app
Workout entry screen. This took a few hours and looks terrible but,
I'm happy with the performance so far!

All jokes aside

I am a shoot from the hip kind of guy, I like to do things fast—if I messed up on any details about Bootstrap or Ionic, please correct me!

Is something easier than I am making it seem? Am I doing something wrong? Let me know! I plan to update this as I learn more.

— 22 April 2014
…discuss this

Starting a blog with Pelican

Deciding what static site generator to use was tricky. The first option was Jekyll which is ruby and I'm looking for something python. Next I looked at Hyde but that had the extra requirement of Django. I feel like all I need something super simple that has the bare minimum to poop out content from markdown.

Then I finally found Pelican and it seems to satisfy all of my needs: python, ultra simple integration with heroku via this buildout!


Getting started

> pelican-quickstart

That will take you through a wizard to create a project structure like:

├── content
│   └── (pages)
├── output
├── Makefile
├──       # Main settings file
└──       # Settings to use when ready to publish

Testing locally

> make regenerate

Any time you make a change to a piece of content the site is rebuilt.


Theme folder structure

This is what I ended up with for a rough rough draft, from examples in pelican-themes repo

├── static/
│   └── css/
│   └── fonts/
│   └── images/
└── templates/
    └── includes/
    │   └── _article.html
    └── article.html
    └── base.html
    └── index.html
    └── page.html

Adding tags

Added this to the bottom of my _article.html

{% if article.tags %}
    <div class="tags">
        <i class="fa fa-tags"></i>
        {% for tag in article.tags %}
            <a href="{{ SITEURL }}/{{ tag.url }}">{{ tag }}</a>{% if not loop.last %}, {% endif %}
        {% endfor %}
{% endif %}

Adding page links

Added this to my menu, the "blog" is just a link back to index, so I added that manually

<div class="menu">
        <li><a href="{{ SITEURL }}/index.html">blog</a></li>
        {% for page in pages %}
            <li><a href="{{ SITEURL }}/{{ page.url }}">{{ page.title|lower }}</a></li>
        {% endfor %}


Easy with buildout

> git push heroku master

Compressing CSS/JS

Used the assets plugin from pelican-plugins which requires the webassets python module.

{% assets filters="cssmin", output="css/packed.min.css", "css/bootstrap.min.css", "css/pygment-solarized.css", "css/main.css" %}
    <link rel="stylesheet" href="{{ SITEURL }}/{{ ASSET_URL }}">
{% endassets %}


Created an environment variable PELICAN_SITE_URL for my virtualenv and on heroku, that way I can set it locally and test with make regenerate easily.

Adding disqus

Signed up on disqus and got the embed code, then added the disqus_identifier, disqus_title and disqus_url extra configuration variables.

To the bottom of article.html I added:

<div class="disqus">
    <div id="disqus_thread"></div>
    <script type="text/javascript">
        var disqus_shortname = 'ericcarmichaelsnerdery';
        var disqus_identifier = '{{ article.url }}';
        var disqus_title = '{{ article.title }}';
        var disqus_url = '{{ SITEURL }}/{{ article.url }}';

        (function() {
            var dsq = document.createElement('script');
            dsq.type = 'text/javascript';
            dsq.async = true;
            dsq.src = '//' + disqus_shortname + '';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    <noscript>Please enable JavaScript to view the <a href="">comments powered by Disqus.</a></noscript>
    <a href="" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>

Pretty dissappointed in disqus, can't style it very easily and I feel it clashes with the style of the blog quite a bit.


Man. What a joy! Everything made sense, except for a couple hiccups with webassets that ended up being my fault, typical!

I'd recommend Pelican to anyone looking to start a simple blog, it was a joy to work with thanks to all of the hard work that went into pelican-quickstart and the custom heroku buildout!

— 12 April 2014
…discuss this