Ionic Framework features you may have missed

Ionic Framework is one of the best framework for developing hybrid mobile apps with HTML5. Based on AngularJS the set of available features is tremendous. This post presents, with examples, some of the best hidden features provided.

Scroll

Scroll documentation

Infinite Scroll

The ionInfiniteScroll directive allows you to call a function whenever the user gets to the bottom of the page or near the bottom of the page.

[codepen_embed height=”268″ theme_id=”5820″ slug_hash=”jukJh” default_tab=”result” user=”shprink”]See the Pen Infinite Scroll: 1.0.0-beta.14 by Julien Renaux (@shprink) on CodePen.[/codepen_embed]

List

List documentation

Collection repeat

The collection-repeat directive is a directive that allows you to render lists with thousands of items in them, and experience little to no performance penalty.

[codepen_embed height=”268″ theme_id=”5820″ slug_hash=”HoIDJ” default_tab=”result” user=”shprink”]See the Pen collection-repeat: 1.0.0-beta.14 by Julien Renaux (@shprink) on CodePen.[/codepen_embed]

Gesture

$ionicGesture documentation

Events

The gesture service has only two methods, on adds an event listener for an DOM element and off removes it. While AngularJS ngTouch provides only three touch events (ngClick, ngSwipeLeft and ngSwipeRight) $ionicGesture provides dozens (hold, tap, doubletap, drag, dragstart etc.).

[codepen_embed height=”268″ theme_id=”5820″ slug_hash=”txliu” default_tab=”result” user=”shprink”]See the Pen Ionic $ionicGesture example: 1.0.0-beta.14 by Julien Renaux (@shprink) on CodePen.[/codepen_embed]

Dom manipulation

DomUtil documentation

If you are accustomed to AngularJS I am sure that you experienced some difficulties when manipulating the DOM. JQlite helps but is itself very limited. Ionic provides some methods to help you deal with it.

ionic.DomUtil.ready

Call a function when the DOM is ready, or if it is already ready call the function immediately.

[codepen_embed height=”268″ theme_id=”5820″ slug_hash=”BxufK” default_tab=”result” user=”shprink”]See the Pen ionic.DomUtil.ready Example by Julien Renaux (@shprink) on CodePen.[/codepen_embed]

ionic.DomUtil.getParentWithClass

Returns the closest parent of element matching the className, or null.

[codepen_embed height=”268″ theme_id=”5820″ slug_hash=”lDrpb” default_tab=”result” user=”shprink”]See the Pen ionic.DomUtil.getParentWithClass Example: 1.0.0-beta.14 by Julien Renaux (@shprink) on CodePen.[/codepen_embed]

Utilities

ionic.throttle

Only call a function once in the given interval. In this example the function should be called half as many as we tried.

[codepen_embed height=”268″ theme_id=”5820″ slug_hash=”iefAE” default_tab=”result” user=”shprink”]See the Pen Ionic Throttle example: 1.0.0-beta.14 by Julien Renaux (@shprink) on CodePen.[/codepen_embed]

ionic.debounce

Only call a function once in the given interval, the timer is reset on every call. In this example the function should never be called.

[codepen_embed height=”268″ theme_id=”5820″ slug_hash=”yzrsD” default_tab=”result” user=”shprink”]See the Pen Ionic Debounce example: 1.0.0-beta.14 by Julien Renaux (@shprink) on CodePen.[/codepen_embed]

ionic.Utils.arrayMove

Really useful function that manipulates array items position.

[codepen_embed height=”268″ theme_id=”5820″ slug_hash=”HghBw” default_tab=”result” user=”shprink”]See the Pen Ionic arrayMove example: 1.0.0-beta.14 by Julien Renaux (@shprink) on CodePen.[/codepen_embed]

Tabs

Starting from ionic beta.14 we can select the position of the tabs through configuration.

Tabs top

.config(function($ionicConfigProvider){
    $ionicConfigProvider.tabs.position('top');
})

[codepen_embed height=”268″ theme_id=”5820″ slug_hash=”qlECF” default_tab=”result” user=”shprink”]See the Pen Tabs Top: 1.0.0-beta.14 by Julien Renaux (@shprink) on CodePen.[/codepen_embed]

Tabs bottom

.config(function($ionicConfigProvider){
    $ionicConfigProvider.tabs.position('bottom');
})

[codepen_embed height=”268″ theme_id=”5820″ slug_hash=”emXyjV” default_tab=”result” user=”shprink”]See the Pen Tabs bottom: 1.0.0-beta.14 by Julien Renaux (@shprink) on CodePen.[/codepen_embed]

Delegation

Delegation allow you to have several instances of the same component within the same view. You have this capability on ion-side-menus, ion-tabs,ion-scroll ion-content, ion-list and ion-slide-box using the delegate-handle directive attribute.

[codepen_embed height=”268″ theme_id=”5820″ slug_hash=”CsBhf” default_tab=”result” user=”shprink”]See the Pen Ionic Side Menu delegation: 1.0.0-beta.14 by Julien Renaux (@shprink) on CodePen.[/codepen_embed]

What’s new in Twitter Bootstrap 3?

We have been waiting for it for a long time, it is now a reality: Bootstrap 3 (BS3) RC1 was released July 27th.

Update:
August 13th: Bootstrap 3 RC2 released.
August 19th: Bootstrap 3 released.

BS3 is “mobile first” (which was also if I recall correctly the Foundation 4 motto at the time of the release: March 2013… What can be more trending than this?!). While Bootstrap 2 (BS2), has optional mobile friendly styles, Bootstrap 3, is mobile friendly from the start (More explanation in the Scaffolding section).

Apart from the design that is more or less trivial to talk about (It is different, and largely inspired from the FLAT trend: FlatUI), I would say that BS3 is better (New components and improved old ones) and cleaner (The markup semantic has been reviewed and improved : deletion of .button-inverse or .label-inverse for example.) than BS2.

if you want to learn more about BS2 instead you can read two of my previous post: Introduction to Twitter’s Bootstrap PPT and 3 awesome CSS Frameworks

In this post I will go through the most important changes that BS3 introduces divided in three sections : Scaffolding, CSS and Components

With over ~1,600 commits, ~72,000 additions/deletions, and ~300 files changed, everything has changed. We’ve added features, removed features, and cleaned up a lot more. The v3 pull request on GitHub has all the details you’ll need for a complete list of changes and some helpful migration tips.

@mdo and @fat

Note that the project moved away from Twitter’s organization, and is now under it’s own twbt as announced in December.

Scaffolding

Bootstrap is built on responsive 12-column grids.

A lot of things happened in the “old” scaffolding section with BS3. As it is “mobile first” instead of adding on optional mobile styles (like it used to in BS2), they’re baked right into the core.

Grid System

Modified

The grid system has changed a lot. With BS2 you could create a basic grid system that starts out stacked on mobile before becoming horizontal on desktop and tablet devices. With BS3 you have more freedom on how you want your grid to act on diverse screens.

New CSS classes appeared to help us: col-lg-* for large screens (Desktop),col-md-* for normal screens (Desktop), col-sm-* for small screens (Tablet) and col-xs-* for Mobile screens.

Note: The grid is fluid by default now, therefore .container-fluid and .row-fluid were removed.

  • BS2 BS3
    .span* .col-xs*
    .col-sm-*
    .col-md-*
    .col-lg-*
    .container-fluid
    .row-fluid

    Class changes between BS2 and BS3

Example 1: Grid stacked on Mobile and Tablet but horizontal on Desktop(normal and large)

	<div class="row">
		<div class="col-md-6 col-lg-6">6</div>
		<div class="col-md-6 col-lg-6">6</div>
	</div>

Example 2: Grid stacked on Tablet but horizontal on Mobile and Desktop(normal and large)

	<div class="row">
		<div class="col-xs-6 col-md-6 col-lg-6">6</div>
		<div class="col-xs-6 col-md-6 col-lg-6">6</div>
	</div>

Example 3: Grid horizontal on Mobile, Tablet and Desktop

	<div class="row">
		<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">6</div>
		<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">6</div>
	</div>

Responsive design

Modified

Responsive images

Images in BS2 were automatically made responsive-friendly (if using bootstrap-responsive.css) which created some conflicts with services such as Google Maps. Images in BS3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.

Responsive utilities

For faster mobile-friendly development, BS2 and BS3 provide utility classes for showing and hiding content by device. Beside you can see the changes made between the two versions.

  • BS2 BS3
    .visible-phone .visible-xs
    .visible-tablet .visible-sm
    .visible-desktop .visible-md
    .visible-lg
    .hidden-phone .hidden-xs
    .hidden-tablet .hidden-sm
    .hidden-desktop .hidden-md
    .hidden-lg

    Class changes between BS2 and BS3

CSS

Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes.

Note: BS3 drops support for IE7 and Firefox 3.6 by removing hacks specific to those platforms (such as *zoom: 1, or -moz-box-shadow).

Typography

Modified

The heading, list and text classes were cleaned up to have more consistent names (for example .muted changed to .text-muted to match the other contextual text colors: .text-info, .text-success etc.).

  • BS2 BS3
    ul.unstyled .list-unstyled
    ul.inline .list-inline
    .muted .text-muted
    .h1, .h2, .h3 etc.

    Class changes between BS2 and BS3

Table

Modified

In order to avoid conflicts with third party code, BS3 do not style tables by default. For basic table style you will need to add the base class .table to any <table>.

BS3 introduces a new contextual table class: .active which highlight the row the same way you could do it by being hover it with your mouse (if using the .table-hover class).

  • BS2 BS3
    .active

    Class changes between BS2 and BS3

Forms

Modified

BS3 does not use .input-prepend and .input-append but .input-group instead. The classes have changed for the elements within, and require a bit more markup to use buttons.

Horizontal forms are now mobile-first, meaning that for screens <768px, elements are stacked. Above that, elements are floated and appear side-by-side.

Note: All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default.

Height sizing

Using the old classes .input-small and .input-large you now can change the height of any form controls (that match button sizes).

  • BS2 BS3
    .radio.inline .radio-inline
    .form-group
    .inline-help
    .help-inline
    .uneditable-input
    .form-search
    .input-block-level
    .controls-row
    .input-prepend
    .input-append

    Class changes between BS2 and BS3

Buttons

Modified

Buttons style have been simplified: no more outer box-shadow by default, no more gradient or text shadow.

Note: Default button now requires .btn-default class.

  • BS2 BS3
    .btn-mini .btn-xs
    .btn-small .btn-sm
    .btn-large .btn-lg
    .btn-default
    .btn-inverse

    Class changes between BS2 and BS3

Images

Modified

BS3 consolidates image thumbnail styles in disfavor of .img-polaroid that disappears.

Note: Remember that images can be made responsive-friendly via the addition of the .img-responsive class.

  • BS2 BS3
    .img-polaroid
    .img-thumbnail
    (for regular inline(-block) images)

    Class changes between BS2 and BS3

Icons

Removed

Glyphicons as you know them in BS2 have changed. First of all Glyphicons are not included in the BS3 package. It has its own separate repository. Second of all Glyphicons (v1.7) is now using @font-face instead of old PNGs.

This changes keeps the primary project as lean as possible, makes it easier for folks to swap icon libraries (such as Font Awesome), and makes Glyphicons available to more people outside Bootstrap.

Components

Dozens of reusable components built to provide iconography, dropdowns, navigation, alerts, popovers, and much more.

Dropdown menus

Modified

bs3_dropdown

Dropdown menus introduces dropdown headers. It adds a header to any dropdown menu as you can see on the screenshot beside.

Note: Unfortunately BS3 does not support submenus as the code necessary to make them work is “just too much overhead”… I am really sad about that as WordPress themes like my own: ShprinkOne WordPress Theme require a 3 level menu that is now more difficult to produce.

  • BS2 BS3
    .dropdown-header

    Class changes between BS2 and BS3

Buttons

Modified

BS3 introduces the .btn-group-justified class that makes a group of buttons stretch at the same size to span the entire width of its parent.

  • BS2 BS3
    .btn-group-justified

    Class changes between BS2 and BS3

Alerts

Modified

<hr> elements within any .alert component will now be styled to match the border color of the alert. Immediate children links within default alerts, and within paragraph text, are now styled for improved readability. Links are automatically bolded and appear as a slightly darker color than the alert text.

Navs

Modified

The nav option: .nav-list has been removed and is now replaced by the new List group component (See the List group section below). BS3 also removes the ability to have tabs on the left, on the right, or at the bottom.

Note: You can still use the JavaScript plugin and custom CSS to make left/right tabs, but we will no longer include those in the core.

  • BS2 BS3
    .nav-list
    .tabs-left
    .tabs-right
    .tabs-below

    Class changes between BS2 and BS3

Navbar

Modified

Overhaul styles of default navbar and its sub-components. For example the height of the navbar increased from 44px to 62px for mobile devices, and 50px for desktops and there is no more box-shadow or gradients on the navbars.

  • BS2 BS3
    .navbar > .nav .navbar-nav
    .btn-navbar .navbar-toggle
    .brand .navbar-brand
    .navbar-search
    .divider-vertical
    .navbar-inner

    Class changes between BS2 and BS3

List group

New

BS3 introduces a new component: the list group. It creates simple and complex series of components. Perfect for more complex implementations like email inboxes, or simple ones like a list of options.

Basic list group

Basically what we had in BS2 with the .nav-list class.

Note: Add the badges component to any list group item and it will automatically be positioned on the right.

bs3_listgroup-badge

	<ul class="list-group">
		<li class="list-group-item">Cras justo odio</li>
		<li class="list-group-item">Dapibus ac facilisis in</li>
		<li class="list-group-item">Morbi leo risus</li>
	</ul>

Linked list group

Linkify list group items by using anchor tags instead of list items (that also means a parent <div> instead of an <ul>). No need for individual parents around each element.

bs3_listgroup-linked

	<div class="list-group">
		<a href="#" class="list-group-item active">Cras justo odio</a>
		<a href="#" class="list-group-item">Dapibus ac facilisis in	</a>
		<a href="#" class="list-group-item">Morbi leo risus	</a>
	</div>

Custom content

Allow you to add nearly any HTML within .list-group-item item.

bs3_listgroup-linked-custom

	<div class="list-group">
		<a href="#" class="list-group-item active">
			<h4 class="list-group-item-heading">List group item heading</h4>
			<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus.</p>
		</a>
		<a href="#" class="list-group-item">
			<h4 class="list-group-item-heading">List group item heading</h4>
			<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus.</p>
		</a>

	</div>

Badges

Modified

Badges are basically the same in BS2 and BS3. Though they adapt better to different components (such as List group: See the “Basic list group” example above) and have a special style when the parent has the .active states

Typographic components

Modified

BS3 has a lighter font-weight for headings (.page-header) than BS2. font-weight: 500; VS font-weight: bold;

Note: BS3 scale the font size in responsive views.

  • BS2 BS3
    .hero-unit .jumbotron

    Class changes between BS2 and BS3

Progress bars

Modified

BS3 new structure is now .progress on the outer <div> and .progress-bar on the inner <div> (See example below).

			<div class="progress">
				<div class="progress-bar"></div>
			</div>

Instead of placing modifier classes on the parent, they are placed directly on the bars (e.g., .progress-bar-info) in addition to the required .progress-bar class.

  • BS2 BS3
    .bar .progress-bar
    .progress-info .progress-bar-info
    .progress-success .progress-bar-success
    .progress-warning .progress-bar-warning
    .progress-danger .progress-bar-danger

    Class changes between BS2 and BS3

Panels

New

The need of creating boxes (with optional header and footer) is something BS2 missed. I am happy to say that BS3 rectified this mistake by creating a new component: the panel.

Panel with heading

Easily add a heading container to your panel with .panel-heading. You may also include any <h1><h6> with a .panel-title class to add a pre-styled heading.

bs3_panel

	<div class="panel">
		<div class="panel-heading">
			<h3 class="panel-title">Panel title</h3>
		</div>
		Panel content
	</div>

Panel with footer

Wrap buttons or secondary text in .panel-footer.

bs3_panel-footer

	<div class="panel">
		Panel content
		<div class="panel-footer">Panel footer</div>
	</div>

Contextual alternatives

Like other components, BS3 allow us to make a panel more meaningful to a particular context by adding any of the contextual state (success, warning, danger, and info) classes.

bs3_panel-success

	<div class="panel panel-success">
		<div class="panel-heading">
			<h3 class="panel-title">Panel title</h3>
		</div>
		Panel content
	</div>

If I missed anything please let me know by commenting or on Twitter, and I will update 🙂

Sources

Introduction to Twitter’s Bootstrap PPT

Today I presented an introduction to Twitter’s Bootstrap at eBay Shanghai. I was invited by a front end community of practice that wanted me to share my experience on this great Open Source project. Around fifty persons gathered to talk about the web best practices and new technologies.

Here is the structure of my presentation:

  • What is Bootstrap?
  • Bootstrap Features
  • Why using Bootstrap?
  • Built with Bootstrap

Let me know what you think about it and do not hesitate to share!

Sources

Create a JavaScript Framework using Mootools – Part 5: Compress your Framework

Compress your Framework

Now that you have your Framework create in yourlibrary.js, you might want to save some space using a compressor. I will present two famous one that I used before. First step is to create a compressor folder.

Framework tree so far:

YourFramework/
–|-mootools-core/
–|-mootools-more/
–|-yourLibrary/
–|-packager/
–|-compressor/
–|-yourlibrary.js

JsMin

git clone https://github.com/rgrove/jsmin-php

Go get the latest version of jsmin.php here: and copy it inside the compressor folder.

Open your build.php file and add the highlighted rows:

<?php
// include the packager library
require dirname(__FILE__) . '/packager/packager.php';

// include the compressor library
require dirname(__FILE__) . '/compressor/jsmin.php';

// List of Package needed
$packages = array('mootools-core', 'mootools-more', 'yourLibrary');

// Register all the packages needed to create your Framework
$pkg = new Packager($packages);

// List of Component needed for Core. These are just examples, you might need more
$core = array('Core/Core', 'Core/Array', 'Core/String');

// List of Component needed for More. These are just examples, you might need more
$more = array('More/Fx.Accordion', 'More/URI', 'More/Fx.Scroll');

// List of Component needed for More
$yourlibrary = array('yourLibrary/MyFirstClass', 'yourLibrary/MySecondClass');

// List of all Component needed
$components = array_merge($core, $more, $yourlibrary);

// Create the yourlibrary.js file
$pkg->write_from_components('yourlibrary.js', $components);

// create a compressed version of yourlibrary.js
file_put_contents('yourlibrary_compressed.js', JSMin::minify(file_get_contents('yourlibrary.js')));
?>

–Or–

YUI Compressor

Yahoo UI Compressor is an open source tool that supports the compression of both JavaScript and CSS files. In addition to removing comments and white-spaces, YUI Compressor obfuscates local variables using the smallest possible variable name. This obfuscation is safe, even when using constructs such as ‘eval’ or ‘with’ (although the compression is not optimal is those cases) Compared to jsmin, the average savings is around 20%.

Go get the latest version here: https://github.com/yui/yuicompressor/blob/master/build/ and copy it inside the compressor folder.

Usage: java -jar yuicompressor-x.y.z.jar [options] [inputfile]

YUI Compressor doc

We are now done with this tutorials in 5 parts. I hope it was helpful. Any questions, comments let me know.

Create a JavaScript Framework using Mootools – Part 4: Use Packager

Use Packager

“Packager is a PHP 5.2+ library to concatenate libraries split in multiple files in a single file. It automatically calculates dependancies. Packager requires a yml header syntax in every file, and a package.yml manifest file, as seen on the MooTools project.”

Clone Packager using git command line:

git clone https://github.com/kamicane/packager.git

Framework tree so far:

YourFramework/
–|-mootools-core/
–|-mootools-more/
–|-yourLibrary/
–|-packager/
—-|-packager (Command line file)
—-|-packager.php (Core Library)

Update your .yml file

Open your .yml file: YourFramework/yourLibrary/package.yml and insert the required properties:

name: yourLibrary
sources:
 - "Source/MyFirstClass.js"

Name is the “Package” name used by Packager to reference your files.
Sources is the list of Classes you want your Framework to reference.

Update MyFirstClass.js

You now know that in order for the packager to work you will need to add yml header syntax in every Classes you create. Open your file and add the header:

/*
---
name: MyFirstClass
description: The description is not required
requires: [Core/Element, More/URI, /MySecondClass]
provides: [MyFirstClass]
...
*/

var MyFirstClass = new Class({
	// Class constructor
	initialize : function()
	{

	}
});

Please note how to reference another class from another package. Core/Element will get the Element Class within the Core package. You can also reference your own package using yourLibrary/MySecondClass or /MySecondClass

Build your Framework

Everything is now setup for you to use packager. You have two choices, either use the command line or create a php file that will handle everything for you.

Using command line (Does not work on Windows)

  1. Register packages:
    $ packager/packager register mootools-core
    the packager Core has been registered
    
    $ packager/packager register mootools-more
    the packager More has been registered
    
    $ packager/packager register yourLibrary
    the packager yourLibrary has been registered
    
  2. Build yourlibrary.js:
    //  Includes all Classes from Core, More and yourLibrary
    $ packager/packager build Core/* More/* yourLibrary/* > yourlibrary.js
    
    // Includes only few Classes and their dependencies
    $ packager/packager build Core/Core More/Fx.Accordion yourLibrary/MyFirstClass > yourlibrary.js
    

You will find more information about how to use the command line in the packager repository.

Using php

Create a build.php file in the root of your framework and insert the following lines inside.

<?php
// include the packager library
require dirname(__FILE__) . '/packager/packager.php';

// List of Package needed
$packages = array('mootools-core', 'mootools-more', 'yourLibrary');

// Register all the packages needed to create your Framework
$pkg = new Packager($packages);

// List of Component needed for Core. These are just examples, you might need more
$core = array('Core/Core', 'Core/Array', 'Core/String');

// List of Component needed for More. These are just examples, you might need more
$more = array('More/Fx.Accordion', 'More/URI', 'More/Fx.Scroll');

// List of Component needed for More
$yourlibrary = array('yourLibrary/MyFirstClass', 'yourLibrary/MySecondClass');

// List of all Component needed
$components = array_merge($core, $more, $yourlibrary);

// Create the yourlibrary.js file
$pkg->write_from_components('yourlibrary.js', $components);
?>

Sources

Create a JavaScript Framework using Mootools – Part 3: Create your first Class

Create your first Class

Let’s create our first Class named MyFirstClass. For this example I will reuse a code from a previous post: Mootools Tutorial: Create a Class.

var MyFirstClass = new Class({
	// Class constructor
	initialize : function()
	{

	}
});

Framework tree so far:

YourFramework/
–|-mootools-core/
–|-mootools-more/
–|-yourLibrary/
—-|- Source/
——|- MyFirstClass.js
—-|- package.yml (explained step 4)

Create a JavaScript Framework using Mootools – Part 2: Create your Package

Create your Package

Now it is time for you to create your own package.

  1. Create your library folder (yourLibrary/)
  2. Create a “Source” folder inside
  3. Create an empty package.yml file (explained Part 4)

Framework tree so far:

YourFramework/
–|-mootools-core/
–|-mootools-more/
–|-yourLibrary/
—-|- Source/
—-|- package.yml (explained Part 4)

Create a JavaScript Framework using Mootools – Part 1: Clone Mootools Repositories

I always wanted to know how to create a JavaScript framework based on Mootools. I decided to create one during an internal contest in my company to show my peers how simple and how valuable it could be to our web internal projects.

I decided to divide this article into 5 parts:

Clone Mootools Repositories

Mootools Core Classes

Core contains useful classes such as Element(Control the DOM), Request(Ajax requests) or Fx(for special effects). The first thing you will need to do is create a folder for you framework (YourFramework/), get inside and clone Core using git command line:

cd YourFramework/
git clone https://github.com/mootools/mootools-core.git

Framework tree so far:

YourFramework/
–|-mootools-core/
—-|- Source/
—-|- package.yml (explained Part 4)

Mootools More Classes

More is more UI based and contains classes such as Accordion, Tip, URI or Spinner. Same thing as for Core, you will need to clone using git command line:

git clone https://github.com/mootools/mootools-more.git

Framework tree so far:

YourFramework/
–|-mootools-core/
–|-mootools-more/
—-|- Source/
—-|- package.yml (explained Part 4)

3 awesome CSS Frameworks [UPDATED]

1. Bootstrap

Bootstrap is a CSS Framework created by ex-Twitter Engineers: @mdo and @fat. For me it is the best Open Source CSS Framework that you could find, it includes a 12 columns grid system, base CSS (For cross browser compatibility), HTML components and a lot of useful JavaScript.

Bootstrap is fully Responsive, Cross Browser compatible and have the biggest community (around 14000 fork) working to improve it. Some companies are even surfing on Bootstrap popularity such as bootswatch that creates Free customization for Bootstrap or jetstrap that helps you create usable mockups.

Grid System

Bootstrap is based on a width of 940 pixels(Depend on the @media queries you use: The screen size) with a 12 columns grid.

Here is the html if you want to create a three columns row.

<div class="container">
    <div class="row">
        <div class="span4">1/3</div>
        <div class="span4">1/3</div>
        <div class="span4">1/3</div>
    </div>
</div>

Base CSS

All the basic CSS stuff: Typography, Form, Button, Table etc. The purpose being to have the same style across different Browsers (IE, Chrome, Firefox, Safari etc.).

Components

  • Dropdowns: Toggleable, contextual menu for displaying lists of links.
  • Button groups
  • Button dropdowns
  • Navs: tabs, pills, and lists.
  • Navbar: Support for a project name and basic navigation.
  • Breadcrumbs: Helps you navigate through your website
  • Pagination
  • Labels and badges
  • Typography: Hero unit, Page header etc.
  • Thumbnails: Grids of images, videos, text, and more
  • Alerts: Styles for success, warning, and error messages.
  • Progress bars: For loading, redirecting, or action status
  • Media object: Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.
  • Misc: Lightweight utility components.

JavaScript

All Bootstrap JS plugins require Jquery.

By using Bootstrap you have natively access to all those plugins:

  • Transitions: For simple transition effects.
  • Modal: Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
  • Dropdown: Add dropdown menus to nearly anything.
  • Scrollspy: Automatically updates menus based on scroll position.
  • Tab: Add quick, dynamic tab functionality to transition through panes of local content.
  • Tooltip: Basic tip.
  • Popover: Add small overlays of content.
  • Alert: Add dismiss functionality to all alert messages.
  • Button: Do more with buttons. Control button states or create groups of buttons
  • Collapse: Accordion
  • Carousel: Slideshow
  • Typeahead: Auto-completion
  • Affix: Add a fixed position to certain elements.
Button and Tooltip plugins conflict with JQuery UI Button and Tooltip plugins. Fortunately Bootstarp includes a no conflict mode that you can use like this $.fn.button.noConflict(); before using Jquery UI.

If you want to know more about Bootstrap you can read and share my PPT presentation: Introduction to Twitter’s Bootstrap PPT


2. Foundation

foundation

Foundation is one of the best CSS Framework out there. It includes more or less the same functionality as Bootstrap (Grid System, Typography, fully Responsive, Cross Browser compatible etc.) but is still less popular (8 times less Fork on GitHub).

Grid System

Foundation is based on a width of 1000 pixels(Depend on the @media queries you use: The screen size) with a 12 columns grid.

Here is the html if you want to create a three columns row.

<div class="row">
	<div class="four columns">.four.columns</div>
	<div class="four columns">.four.columns</div>
	<div class="four columns">.four.columns</div>
</div>

3. Blueprint

Blue print is the CSS framework that I used to create this template. It contains css files to create your page scaffolding, to handle typography and beautiful forms. It is base on a 950px width with 24 columns to fit all the modern computer screen.

http://www.blueprintcss.org/

Example

Here is the html if you want to create a three columns page.

<div class="container">
    <div class="span-7 colborder">Here's a box...</div>
    <div class="span-8 colborder">And another box...</div>
    <div class="span-7 last">This box...</div>
</div>

Result


Demo


If you want to go further, a complete comparison of those three CSS Frameworks is available here.