Introduce Bootstrap 3 to Develop Responsive Design Application

Introduce Bootstrap 3 to develop

RESPONSIVEdesign 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 uniqueWonderful desktop screen is not enough


TODA

Y

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:

THERESPONSIVE DESIGN

The good idea

Time for specialist


Enjoy...Keep question on your book note, we will answer at the end

1. Responsive Design2. Bootstrap 33. Responsive Web Application 4. Demo5. Responsive eXo Platform

What is exactly a

RESPONSIVE DESIGNWeb 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 3originally 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 components

What’s new in Bootstrap 3 SA

SS

su

pp

ort

New

Gly

phic

ons

icon

fon

t


New powerful

Grid systemN

ew

Fla

t

de

sig

nMobile first

Approach

jav

as

crip

t are

re

writ

ten

● Create a web application very fast

● It’s natively responsive framework

● It’s fully and easily customisable

Advantage


Disadvantage

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


Disadvantage

No backward compatibility between versions


Competitors


Create a responsive

WEB APPLICATIONusing 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 PLATFORMresponsive 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 YOUsee you soon ...
