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:

Grids:

Bootstrap 

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 

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.

Susy

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

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.

 

Frameworks

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

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.

Conclusion

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.

Advertisement