Introduce Bootstrap 3 to Develop Responsive Design Application

Introduce Bootstrap 3 to develop
RESPONSIVE
design application
Copyright 2014 eXo Platform

A presentation
by eXo UI Team

When UI
was not a
concern

Many UI innovation since

And some company
success to create
wonderful design
for web application

A unique
Wonderful
desktop
screen is
not enough
Copyright 2014 eXo Platform TODAY

Be ready for future screen

Build specific site for each devices
Part of the UI team in eXo
today
Part of the UI team in eXo if we decide
to build specific site for each device
Build a specific site for desktop, mobile, tablet… was definitively not the good solution
The first (wrong) idea

The Dark Lord Sauron Ethan Marcotte
forged in secret 2010 a Master Ring
Design to control all others.
One Ring Design to rule them all:
THE
RESPONSIVE DESIGN
The good idea

Time for specialist
1. Responsive Design
2. Bootstrap 3
3. Responsive Web Application
4. Demo
5. Responsive eXo Platform
Enjoy... Keep question on your book note, we will answer at the end

What is exactly a
RESPONSIVE DESIGN
Web application ?

What is Responsive Design ?
A unique site that
can adapt to any
screen size, today
or in the future.

Responsive vs Adaptive
Continuously
resizes when
change the
width of your
screen, no
extra empty
space on the
sides
Responsive

Relative units vs Static units
Use relative units,
like percent can
adapt to any
screen, instead of
static units like
pixels.
Relative units Static units

Flow vs Static
The data content
flowing smoothly
when screen size
change. It’s what
we name flow in
Responsive
Design.
Flow Static

With Breakpoints vs Without Breakpoints
Predict
breakpoints when
screen size change
allow to adapt
your content to
the screen size
With Breakpoints Without Breakpoints

Vectors vs Images
A vector image
adapts with Retina
resolutions. Quality
is the same
whatever is the
resolution of your
screen
Vector Image

Mobile First
● Start by developing the CSS for the mobile device first,
then have media queries for adapt to tablets, desktops
● Determine what is most important content

Why’s Mobile First ?
● Mobile website will prepare more
thoroughly than was originally
invested.
● At any size, it's always a good design
● Avoid overwrite code

A free responsive framework
BOOTSTRAP 3
originally by Twitter

The Bootstrap history
Mid
2010
August
2011
February
2012
January
2012
August
2013
Bootstrap was
created at Twitter
Twitter released
Bootstrap as
open source
project
Become the most
starred GitHub
development
project
Introduce the
first major
release,
Bootstrap 2
Shipping
Bootstrap 3.0

Main features of Bootstrap
Preprocessors One framework,
every devices
Full of
features

New Flat
design Mobile first
Approach
What’s new in Bootstrap 3
Grid system
New components
New powerful
SASS support
New Glyphicons
icon font
javascript are
rewritten

Advantage
● Create a web application very fast
● It’s natively responsive framework
● It’s fully and easily customisable

Disadvantage
Hey! My new
website looks just
like everyone else’s!

Disadvantage
No backward compatibility
between versions

Competitors

Create a responsive
WEB APPLICATION
using Bootstrap 3

Responsive with bootstrap 3
● css3 media queries
● Grid system
● Responsive utilities
● Responsive embed and flexible image

What is @media ?
@media rule allows website to have a
different layout for screen, mobile phone,
tablet, etc.

Grid System

Responsive Utilities

How to make
EXO PLATFORM
responsive with bootstrap 3?

Exo product responsive with bootstrap 3
● Add the viewport <meta> tag to <head> tag
● Change the grid system
● Stop embedding Bootstrap classes in template

Exo product responsive with bootstrap 3
● Make sure eXo UI Component is responsive
● Update javascript system

It’s time for
THANK YOU
see you soon ...

Introduce Bootstrap 3 to Develop Responsive Design Application