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.
- 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.
- 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.
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:
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
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.
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 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 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.
- Jquery likes to be in controll and doesn’t work well with out frameworks.
- 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
One thought on “Frameworks and Grids”
[…] 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. […]