Embed Size (px)
Citation preview
A BOOTSTRAP TOURchurn shippable UI using twitter bootstrap framework
Ashish Sharmawww.stalkninja.com
Saturday 17 March 2012
APP DEVELOPMENT STAGES
Backend (Coding) Frontend (Design/UI)+
Your multi-million $ app
Saturday 17 March 2012
CODERS’ TRYST WITH UI
• Right font, line height, background gradient - ARE YOU KIDDING !!!
• Apple era has made the bar high
Saturday 17 March 2012
http://twitter.github.com/bootstrap
Saturday 17 March 2012
before
after
http://hashag.stalkninja.com
http://hashag.com
Saturday 17 March 2012
DIGGING DEEPERlist of bootstrap elements you would absolutely need
Saturday 17 March 2012
NAVIGATION BAR<div class=‘navbar’>
Saturday 17 March 2012
HERO UNIT<div class=‘hero’>
Saturday 17 March 2012
BUTTONS & TABSicon support, button groups, multiple sizes
<ul class=”nav nav-list”> <div class=”btn btn-primary”>
Saturday 17 March 2012
ALERT BOX <div class=‘well’> for inset effect
Saturday 17 March 2012
MORE .....form, table, icons etc etc
Saturday 17 March 2012
DID WE MISS GRIDS ?so what is this Grid all about ....
Saturday 17 March 2012
GRID HELPS IN ALIGNMENT& you do not have to beat your head with float
Saturday 17 March 2012
JEEZ ... LOOK AT THISbadly aligned content looks unprofessional
Saturday 17 March 2012
DID YOU KNOW ?what ?
So ?
So !!!
bootstrap grids are responsive
which means it adapts to screen size
dude !! it means it is mobile optimizedumm ... Can I play
Nintendo WII on it ?
Saturday 17 March 2012
BUT POOR KYLE DINT KNOW
There is a difference between knowing it is mobile optimized & churning out app which is actually mobile optimized
Saturday 17 March 2012
MECHANISMauto-extending & wrapping around of columns
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Saturday 17 March 2012
LESSONS
• Push sidebar to right grid to make it appear on the bottom.
• If you need something on the right, make it text-align right.
Saturday 17 March 2012
EMPTY COLUMNS PLAYhow they can be used to center content for bigger screens
Saturday 17 March 2012
CAUTION
• Image screen fit issue
• H1 tag font in hero unit could be too big for mobile
• Content that suppose to stay right, might not stay
Saturday 17 March 2012
YUP, I AM DONE !!!
Dissect http://cssgrid.net main page for the image fitting, content aligning hacks
Saturday 17 March 2012
