IT 4 BLONDES

Beautiful women doing geeky stuff

Mobility and Responsive Design with CSS and LESS

Related Posts

12/11/2012 Categories: CSS
JOHN PAPA - www.johnpapa.net

Balsamiq http://www.balsamiq.com - to draw mock-ups for gui - put controls, drag pre prepared text, tables, linux, mac, windows, useful for mobile applications

style less
Web Essentials 2012 extension great for CSS and less
http://jpapa.me/webess2012
you can see what is supported by which browser
less makes your CSS more dynamic
you can download less http://lesscss.org you can use variables, mixings, nested rules, functions and operations, you avoid repeating yourself

Responsive Design in a web app
-Ability for a web to adapt to its environment

Media Queries
-CSS feature that define how styles should adapt
-based on media type dimension can be also for printing, not necessarily always screen

Mobility and devices
Electric Mobile Studio http://jpapame/electricplum
you can run multiple (sized) devices side by side

create responsive design region and inside:
@media only screenand (max-width: 1000px) {
body {font-size: 16px;}
}
@media only screenand (max-width: 900px){
body {font-size: 14px;}
}
@media only screenand (max-width: 800px)
@media only screenand (max-width: 480px)
@media only screenand (max-width: 320px)
@media only screenand (max-width: 240px)
@media only screenand (max-height: 768px) {
.view-list {height: 330px;}
}

right click navigate to page - all devices will go to this page