Date post: | 15-Jul-2015 |
Category: |
Technology |
Upload: | alexandre-marreiros |
View: | 92 times |
Download: | 0 times |
BootStrapBrief introdution to BootStrap 3 for Responsive Website
Part I
Alexandre Marreiros * www.DigitalMindIgnition.com * DevDays WebAliance
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
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 )
Alexandre Marreiros * www.DigitalMindIgnition.com * DevDays WebAliance 2014
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;
Image
cop
yri
gh
ts t
o P
lura
lsig
ht
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.
Image
cop
yri
gh
ts t
o P
lura
lsig
ht
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.
Image
cop
yri
gh
ts t
o P
lura
lsig
ht
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 weare rendering.
Image
cop
yri
gh
ts t
o P
lura
lsig
ht
Alexandre Marreiros * www.DigitalMindIgnition.com * DevDays WebAliance 2014
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)
Alexandre Marreiros * www.DigitalMindIgnition.com * DevDays WebAliance 2014
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;
Alexandre Marreiros * www.DigitalMindIgnition.com * DevDays WebAliance 2014
How to get start with Bootstrap
Alexandre Marreiros * www.DigitalMindIgnition.com * DevDays WebAliance 2014
Looking to the Bootstrap framework
Alexandre Marreiros * www.DigitalMindIgnition.com * DevDays WebAliance 2014
Core Concepts Bootstrap• The CSS componente was Build considering:
Semantic Class names;
Compositional Classes
Conventions
Alexandre Marreiros * www.DigitalMindIgnition.com * DevDays WebAliance 2014
Hands on Lab• First Bootstrap Solutions
• Understaning grids and components