Tag Archives: design

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!

1.susy

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.

susy-grid

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

5.Foundation

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.

gradiator - CSS3 Gradient Generator

CSS3 gradient Generator for Ubuntu/Linux

If you’re one of the web designers who uses Linux based operating system such as Ubuntu (Latest stable version  : 11.10) or Linux Mint (vs 12)or Fedora etc as the primary OS then here is a good news for you – A cool CSS3 gradient generator – called as Gradiator, is now available (only) for Linux based operating systems. Using Gradiator, you can easily apply ‘one of the coolest’ feature of CSS3, I mean gradient property, without much hassle, mostly in a couple of clicks.

Although there are already a lot of cool web apps (e.g ultimate CSS3 gradient generator) are available for this task but a cool desktop application is something different – and it will also work offline. So it’s a must have application for Linux users who design cool websites/or web apps.

gradiator - CSS3 Gradient Generator

So, you are ready to save a lot of time and effort during the designs, as you just need to select the desire gradient using the above controls and finally click on Get code button to get the CSS code, in fact the code will be automatically copied to clipboard so just paste it in your style sheets. If you want to exclude or include a specific vendor (browsers) then go to settings and change that too – but by default you will get prefixes for all popular web browsers –  so you don’t need to change that.

gradiator-settings

How to install Gradiator in Ubuntu/Linux

For Ubuntu or Linux Mint

If you’re using Ubuntu then the best way to install is to use PPA. You just need to execute some simple commands and you’re done!

sudo add-apt-repository ppa:cooperjona/gradiator
sudo apt-get update
sudo apt-get install gradiator

Other Linux distro

Download the archive file and install it manually (installing tar.gz package).

Thanks to George Czabania & Jono Cooper