Beautiful women doing geeky stuff

Mobility and Responsive Design with CSS and LESS

Related Posts

12/11/2012 Categories: CSS

Balsamiq - 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
you can see what is supported by which browser
less makes your CSS more dynamic
you can download less 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