Frameworks and Grids

I want my application to be responsive and to adapt to what ever mobile device it is running on. From small mobile devices to phablets to tablets. To do this I need some kind of responsive feature. I took a look at grid systems:




Bootstrap is the most popular html/css front end framework, it comes with a grid system , UI elements and icons (font awesome). There are a few problems with using bootstrap for my mobile application.

  1. Bootstrap is mainly for creating webpages – Using their UI elements could result in my aplication looking too much like a mobile website and not a native android application.
  2. This framework might be too heavy for my needs. I only needs a responsive grid that supports mobile to tablet (12″ max). Bootstrap comes with a lot of unneeded bulk ( UI elements , desktop media queries, etc)



Skeleton is design with mobile in mind and is ultra light weight with only 400 lines of CSS. Unlike Bootstrap, Skeleton isn’t a UI framework its a grid system.  I like the sound of this grid system and currently I am leaning more towards this grid over bootstrap.


logo (1)

Susy is an add on for Compass . Compass is Sass framework and Sass is a pre-processing language for CSS, you write Sass code and it gets compiled into CSS. The advantage of Sass is that its easier to read, supports variables and functions.



More about Sass and Compass here:

Sass for Noobs

What is Compass?

Back to Susy

Susy uses the power of Sass to create your own grid. Because this grid is custom built , your grid is only as big as it needs to be making it and economical choice. Susy binds the grid system to your own CSS classes, no need to have html elements with heaps of classes tagged on with messy names.

Boot strap Markup

Messy Button

Susy Markup


Make my own grid

I could create my own grid or break points using media queries. This method takes slightly longer but could ensure the lightest solution to the mixed screen size problem.




JavaScript front end frameworks have become hugely popular with every large company which deals with the web creating one. There are so many out there: Angular (Google) React (Facebook) , Ember , Knockout, jquery UI.

Most of these frameworks are built on some variation of MVC pattern (Model , View Controller). Using a JavaScript framework gives my application some good advantages:

Speed – Most of these frameworks try to improve the speed of the application and give structure to your JavaScript. Structure is important with programming without it your application / program can become unmanageable and can collapse under its own weight.

I haven’t used any JavaScript frameworks during my time of study at NMIT, so this is all new grounds for me. Skills with JavaScript frameworks are in high demand and learning one would be beneficial for my career….But which one?

I looked into a few of the different Frameworks out there.



Angular is developed by Google and is based on the Model View Whatever structure – the whatever being a wild card , you can use a Model View Controller setup or a Model View Model setup.

Angular is great for Hybrid mobile applications and is very fast. The main problem is it has a steeper learning curve.

Ionic Framework


Ionic is a framework designed for hybrid mobile applications. It uses angular and its own UI elements to create mobile application. The only problem with Ionic currently is their lack of tablet support.

Jquery Mobile


Jquery Mobile comes with an inbuilt grid system. From what I researched Jquery can be very good for creating hybrid mobile applications but has a few problems.

  1. Jquery likes to be in controll and doesn’t work well with out frameworks.
  2. Jquery can become slow and heavy.


My choices are not set in stone but currently I am leaning towards Susy for my grid system. Susy seems like a good choice with its lightweight and its incorporation of Sass

For my framework choice I feel like the speed that angular offers and the skill set I would learn from this JavaScript framework would makes this a good choice.


One thought on “Frameworks and Grids

  1. […] Susy is very different from most grid systems out there. Most common grid systems consist of a CSS library which contain classes that you add to your HTML mark up. Susy is more of a Sass tool kit which uses sass mixins and maps to allow the developer to create their own grid. I talked more about Susy and sass in a  prior blog post – found here. […]

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s