boot strapandresponsiveintro

BootStrapBrief introdution to BootStrap 3 for Responsive Website

Part I

Alexandre Marreiros * www.DigitalMindIgnition.com * DevDays WebAliance

http://www.digitalmindignition.com/

Author

CTO @ Innovagency

Technical Trainer, Speaker & Consultant as Self Employee

Teacher @ EDIT

Software Developer & Architect as Consultant

Tech Writer and Revier as Self Employee

Digital business & UX Consultant

Microsoft MVP

Microsoft DevCamp TrainerContacts:[email protected]

@alexmarreiros

http://www.linkedin.com/pub/alexandre-marreiros/8/4b8/a21

www.digitalmindignition.com

Alexandre Marreiros

mailto:[email protected]

http://www.linkedin.com/pub/alexandre-marreiros/8/4b8/a21


Goals• Give an introduction to the usage of the framework BootsTrap has a tool to

develop Responsive WebSites;

• Give a first look to the platform;

Alexandre Marreiros * www.DigitalMindIgnition.com * DevDays WebAliance 2014


Responsive Patterns• Responsive Web design is about contente, user expectaion, device resolution

and devices. We can have several diferente aproaches to develop and thinkresponsive.

• From the experience and UX studies the Community had discover some design patterns to some of the most common responsive quests.

• The creation of patterns help us to create solving processes to find the bestSolutions for a problem, patterns born also from a resolution trend.

• This patterns apply essentially to facilitate the

Build of the adaptative part of the website.

( responsive can be more then that and acording to some authors we can

call the application of this patterns adaptative design )




Mostly Fluid Responsive Patterns • Mostly Fluid: The page keeps is form for almost all the screen sizes,

changing only on the phone with the smaller sizes;

Image

cop

yri

gh

ts t

o P

lura

lsig

ht



Column Drop Responsive Patterns • Column Drop: acording to this pattern the design will be displayed acording

to the avaiable size, droping the columns one by one.

Image

cop

yri

gh

ts t

o P

lura

lsig

ht



Shifter Responsive Patterns • Shifter: In this case we consider the importance of the columns as a base for

poitioning the elements on the canvas. Some columns can be transformed in to lines displaying acording to his importance.

Image

cop

yri

gh

ts t

o P

lura

lsig

ht



Content Reflow Responsive Patterns • Content Reflow: In this case beside the rethink of the layout or readaption,

we realocate the contentes acording to the screen size and device where weare rendering.

Image

cop

yri

gh

ts t

o P

lura

lsig

ht



WrapUP Responsive Patterns

Image

cop

yri

gh

ts t

o P

lura

lsig

ht

• Are important to help us to quick converge to a good UX Solutions, also a way for developer’s and diviner’s don’t lost their track when implementingResponsive Solutions;

• Patterns are the root of Fluid thinking and also the base concept of some ofthe most popular responsive frameworks especially the ones who use a gridsystem as the base of their mindset

• If you want to know more about the topic and

follow what is being done at the momment we

would sugest you to take a look at:

www.lukew.com

(a site mantained by one of the bigest specialist on this field)


http://www.lukew.com/


BootStrap• Is OpeSource;

• Based on Open Standards;

• W3C Friend;

• Developed by twitter to accelarate theirweb development;

• Is a platform that offers buttons, fonts, styles and more;

• For some authors are a CSS framework. He inherit some concepts but is more then that;

• Based on a Column System;

• Technical Foundation: HTML;

CSS;

JavaScript;



How to get start with Bootstrap



Looking to the Bootstrap framework



Core Concepts Bootstrap• The CSS componente was Build considering:

Semantic Class names;

Compositional Classes

Conventions



Hands on Lab• First Bootstrap Solutions

• Understaning grids and components


boot strapandresponsiveintro

Technology