Tag Archives: framework

Skeleton – A lightweight CSS framework for your next side project

Skeleton is a lightweight CSS framework that provides a nice boilerplate to kickstart the development process. I like the minimal design approach. Plus, I can easily add more CSS on the top if required. The grid and some basic styles are more than enough to get started.

Simple Responsive grid

Simple, easy and human friendly grid-naming conventions. Just add a div element with class ‘row’ (with child columns) inside a container and you’re good to go (12 column grid – kind of similar to bootstrap and foundation).

Basic styles for Standard elements

Skeleton comes with basic styles for standard HTML elements such as Headings (h1/h2/h3 etc), basic form elements (input, buttons etc), tables and some utility classes (for left/right alignment, clearing floats etc). Here is how a simple ‘sign in’ form with Skeleton.

Lightweight, fast and easy to override

The Skeleton along with Normalize CSS is less than 10KB when minified. So, it’s a great choice for smaller web projects, side projects, mobile websites, landing pages for your mobile apps etc.

You can download the latest version from the official website : http://getskeleton.com (Current version : 2.0.4). Sass and LESS versions are also available to help you add Skeleton in your preferred development setup.

Also check out my last weekend project – Mobile Number Tracker (India) – I created using Skeleton.


Spark – A micro web framework in Java

Spark is a micro web framework in Java, inspired from Sinatra (a popular lightweight web framework in Ruby). Using spark, you can quickly build web applications in Java, with minimal effort (without going through the boring xml configurations steps). If you learning java, then you can learn a lot by reading the source (since, it’s a free and open source framework).



  • its simplicity
  • fast development
  • high productivity (get more done, in fewer lines of code)

Getting started with Spark

1. First setup spark

Download Spark (If you’re using Apache Maven, then it would be much easier for you)

2. Write some code

Code in image ? Ha Ha .. just to remind you that it’s not a good habit to copy/paste code! Type it.

3. Launch

Now, you can see your little app in action :


Recommended Link(s)
Read official – getting started guide for Spark


Getting Started with Play Framework : Ubuntu/Linux Mint

What is Play Framework ?

Play Framework is a simple and powerful web development framework for Java/Scala. It’s very inspired from Ruby On Rails framework, so it’s like Rails, but for Java/Scala (initially it supported only Java, but now it also supports Scala (a programming language, very similar to Java, with some functional features, designed to be as a better Java)). Unlike other complicated java web development frameworks, Play is very simple and highly productive.


Play is a lightweight, fast and highly scalable web development framework, with web friendly architecture and features (stateless, low resource consumption, reactive model based on Iteratee IO etc). So if you’re a Java/Scala developer, who want to develop cool web applications – then Play is a great choice for you.

Installing Play Framework

You must have Java installed (JDK 6 or later), read this tutorial on installing JDK in Ubuntu / Linux Mint if you haven’t already done that. When you’re done setting up java development kit, open a terminal and type javac to make sure everything is setup properly.

Download Play Framework

Download the latest version of Play (currently, it’s v2.1.0) and extract it to your Home Directory (it can be anywhere, but you should have write permission).

Set Path Variable for Play

Add the play to your path variable. Suppose, you have extracted the play framework to ~/packages/play-2.1.0 directory. Then open a terminal and type :

export PATH=$PATH:~/packages/play-2.1.0/

Now, if you type play at the terminal, you should have play command available.


Creating your first app

Now, you have successfully installed the play framework – Let’s create a simple application “TestApp” (it will simply say : “Hello Play”, not any useful, but you get an overview).

play new TestApp

Now, it will prompt for few questions (Application Name, Java/Scala etc), then move into the application directory and start the application.

cd TestApp

Now, you will have the play prompt, So you can run the application –

[TestApp]$ run

Open your browser and type the address http://localhost:9000, the default page should appear.


Now, open the file App/Controllers/Application.java in your favorite text editor (Emacs, Vi, gedit etc) or IDE (geany, Eclipse etc) and replace the existing return line (in index method) with this :

return ok("Hello Play");

Now, visit the address http://localhost:9000 (or refresh if it’s slready loaded) and you should see the “Hello Play” greetings. Yeah! our first useless app is running :)


Recommended Resources For Further learning!


Qt 5 is released!


Qt Framework v 5 is released! Qt is a popular cross-platform application development framework (free and open source, available under GNU LGPL). If you have used KDE desktop environment then you’ve already used a lot of applications built upon it (as KDE desktop heavily relies on Qt).

The new version of Qt (v 5.0) has lot of exciting features (it’s a major released, after a long time – the v 4.0 was released, around 7 years ago).

What’s new in Qt 5.0 ?

  • amazing graphics capabilities and performance
  • Qt quick
  • Modularized Qt Libraries
  • Improved multimedia stuffs
  • Qt platform abstraction
  • JSON support
  • Webkit and HTML 5
  • Read more on Qt 5 features!

Download Qt 5

Use CSS Frameworks to speed up the Web design process!

You know CSS but can’t get the work done on time or maybe you don’t want to write the same code(basic grids, buttons, form styles etc) again and again. Then you should try a CSS framework/toolkit as it helps in getting things done, much quickly. With a CSS framework, you can create prototypes/MVP very fast as compare to scratch work.

When you get a solid foundation to begin, just with few lines of code, you can create nice looking UI for your website/apps/whatever. You can customize it further for a unique look/feel (recommended because default is not enough in most cases).

Here are some of the best free and open source CSS frameworks/toolkits/grids you must give it a try.

grid is enough for me!


susy is an amazing grid for those who want complete control over the grid generation, mostly popular among compass/sass programmers. Susy is responsive (yeah! if you use susy your website will look cool on every devices), but you can get fixed structure if you want.


Installing Susy

susy depends on ruby, so you must have ruby installed. Then you can install susy –

gem install susy

If you want to try susy in rails project, then simply add gem "susy" to the Gemfile and run bundle install.

Finally, add susy using the sass import.

@import "susy";

Update! If you prefer Bourbon over Compass, then you should check out Neat.

2. 960 grid system

Another lightweight grid, with 960px width (with 12/16 columns by default, but you can easily customize it according to your need), a very popular rapid prototyping tool for designers.

Download 960 grid system

3. 1Kb grid

It’s a very simple and super-light (that’s why it’s called 1 Kb) grid system for designers. You can easily customize the number of columns, gutter width, column width before download (default is 12 columns, 60px wide, 20px gutter width; which leads to the total width of 960px).

Download 1Kb grid

grid + some cool stuffs

4. Blueprint CSS

blueprint is another popular css framework with fixed grid system and nice styles for buttons, forms, tables, tabs, sprites and more. It’s easily customizable.

Download Blueprint

grid + lot of cool stuffs


Foundation is an advanced and feature rich front end framework. it’s responsive, it has flexible grid system, with lots of styles for various components (like tables, buttons, tabs), icons, templates and more. So, you can rapidly create nice mockups , probably in minutes. It uses SASS, so customization is very easy, specifically for ruby/sass.

Download Foundation

6.Twitter Bootstrap

Twitter Bootstrap is the most popular front-end framework , Most of the features look very similar to Foundation but it uses LESS, so more popular among javascript programmers. Although, sass version is also available, for Ruby/Rails developers (as a gem). Customization is very simple due to the various free tools and themes available (I’ll write a post about it), like bootswatch, where you can find a lot of free and open source bootstrap templates to begin with.

Download Twitter Bootstrap

Update! You should also check out some lightweight CSS frameworks such as PureCSS (recently launched) or Skeleton (mature and well tested, under 10KB). Both are responsive (mobile friendly) and provide a nice boilerplate to begin with.