Animate.css

With animate.css you do not have to worry about making your own cross browser animations anymore. Animate.css is great CCS animation library that has a large set of animations ready out the box.

A must have for Front End developers 😉

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.https://daneden.me/animate/

Installation

Download the latest version and include .css to your page:

<link rel="stylesheet" href="animate.min.css">

More about Animate…

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

Twitter Bootstrap: Responsive CSS does not work on mobile devices

When creating my WordPress Theme ShprinkOne I discovered a responsive CSS problem. Resizing the browser reacted as expected on Desktop but not on mobile devices(Phone, Tablet).

As it is well explain on Bootstrap documentation a proper meta tag is needed to turn the responsive CSS behavior on mobile devices. The viewport meta can be used to control how HTML content will appear in mobile devices. It contains a comma-separated list of properties in the form name=value

If it is happening to you, you will have to insert the following meta on your page header to fix the problem for good.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

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.