This document provides an introduction to Bootstrap 3 for developing responsive websites. It discusses responsive design patterns such as mostly fluid, column drop, shifter, and content reflow. It also introduces Bootstrap, describing it as an open-source CSS framework based on a column system using HTML, CSS, and JavaScript. The document recommends resources for learning more about responsive design patterns and Bootstrap.

1. BootStrap
Brief introdution to BootStrap 3 for Responsive Website
Part I
Alexandre Marreiros * www.DigitalMindIgnition.com * DevDays WebAliance

2. 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:
amarreiros@gmail.com
@alexmarreiros
http://www.linkedin.com/pub/alexandre-marreiros/8/4b8/a21
www.digitalmindignition.com
Alexandre Marreiros

3. 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

4. Responsive Patterns
• Responsive Web design is about contente, user expectaion, device resolution
and devices. We can have several diferente aproaches to develop and think
responsive.
• 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 best
Solutions 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 )
Alexandre Marreiros * www.DigitalMindIgnition.com * DevDays WebAliance 2014

5. Alexandre Marreiros * www.DigitalMindIgnition.com * DevDays WebAliance 2014
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;
ImagecopyrightstoPluralsight

6. Alexandre Marreiros * www.DigitalMindIgnition.com * DevDays WebAliance 2014
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.
ImagecopyrightstoPluralsight

7. Alexandre Marreiros * www.DigitalMindIgnition.com * DevDays WebAliance 2014
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.
ImagecopyrightstoPluralsight

8. Alexandre Marreiros * www.DigitalMindIgnition.com * DevDays WebAliance 2014
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 we
are rendering.
ImagecopyrightstoPluralsight

9. Alexandre Marreiros * www.DigitalMindIgnition.com * DevDays WebAliance 2014
WrapUP Responsive Patterns
ImagecopyrightstoPluralsight
• 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 implementing
Responsive Solutions;
• Patterns are the root of Fluid thinking and also the base concept of some of
the most popular responsive frameworks especially the ones who use a grid
system 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)

10. Alexandre Marreiros * www.DigitalMindIgnition.com * DevDays WebAliance 2014
BootStrap
• Is OpeSource;
• Based on Open Standards;
• W3C Friend;
• Developed by twitter to accelarate their
web 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;

11. Alexandre Marreiros * www.DigitalMindIgnition.com * DevDays WebAliance 2014
How to get start with Bootstrap

12. Alexandre Marreiros * www.DigitalMindIgnition.com * DevDays WebAliance 2014
Looking to the Bootstrap framework

13. Alexandre Marreiros * www.DigitalMindIgnition.com * DevDays WebAliance 2014
Core Concepts Bootstrap
• The CSS componente was Build considering:
Semantic Class names;
Compositional Classes
Conventions

14. Alexandre Marreiros * www.DigitalMindIgnition.com * DevDays WebAliance 2014
Hands on Lab
• First Bootstrap Solutions
• Understaning grids and components