Responsive Web Grids This is a short compendium of RWD Grids, I want to thanks to Nick Salloum (sitepoint) how started with this. Now I want to take that and continue including new ways to implement it. So that canRead more…
Responsive TV
The TV The Responsive was a little bit out of the “TV world” during the past, last year the 4K resolution TV or 4K Ultra the ‘four times HD’ TV, 3D TV, smartTV and curveTV were release in UK, and consideringRead more…
Responsive day out 2 (my notes)
Responsive Day Out 2: The Squishening Friday, 27 June 2014 · The Corn Exchange, Brighton, England. The Responsive Day Out is an affordable, enjoyable gathering of UK designers and developers sharing their workflow strategies, techniques, and experiences with responsive web design. — Responsive Workflow.stop working on silos and start workingRead more…
jQuery plugin compendium
http://www.unheap.com http://plugins.jquery.com http://www.jsdb.io http://microjs.com http://www.jqueryrain.com Do I missing something? Yes, for sure!. Please send me your links to: developer@leolanese.com
The “clown car technique” for responsive web images
Responsive SVG for foreground images The Clown Car Technique is one solution, which makes use of an SVG properties and its built-in support for media queries. The technique uses an empty SVG that doesn’t contain any actual graphics (referred toRead more…
RWD fluid typography without js or preprocessors
RWD Typography I have been working in another interesting Responsive Web Design and Mobile First challenge where the client required to create a fluid font to auto adapt to the environment, problem was they have like 10 different environments,Read more…
Viewport Sizes with javascript
How to get the viewport size: We have different options. Use It wisely
|
1 2 3 4 5 |
$(window).width() document.documentElement.clientWidth window.innerWidth window.outerWidth @media breakpoint |
http://responsejs.com/labs/dimensions/ JS Bin
|
1 2 3 |
window.screen.width window.screen.availWidth @media breakpoint |
JS Bin Solution 1: correctedViewportW() function correctedViewportW is a custom function that further normalizes browser difference, and is now the technique usedRead more…
Starting a Responsive Web Project
It is not the strongest of the species that survives, nor the most intelligent, but the one most “RWD” to change. -=- The workflow: RWD can change your mind. We will start with a workflow, this workflow must be createdRead more…
GPU Hardware-Accelerated CSS LESS-mixin
The hardwareCSSAcceleration (updated: 19/09/2013 ) The use of translate3d pushes CSS animations into GPU acceleration. Even if you are just looking to do a basic 2D translation The WebKit blog describes translate3d as translate3d(x, y, z), translateZ(z) Move the elementRead more…
Going beyond simple pixel-width conditions
Pixel Perfect era “There’s a time and place for pixel perfection, and the web is not it, @nickrp” In this new world users will access your content or software using a huge varying set of devices, each of them hasRead more…