Viewport Sizes with javascript

Oct 2, 2013By Leo Lanese

How to get the viewport size: We have different options. Use It wisely

$(window).width()	               
document.documentElement.clientWidth
window.innerWidth	               
window.outerWidth	               
@media breakpoint

1

2

3

4

5

$(window).width()

document.documentElement.clientWidth

window.innerWidth

window.outerWidth

@media breakpoint

http://responsejs.com/labs/dimensions/ JS Bin

window.screen.width
window.screen.availWidth
@media breakpoint

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…

Oct 2, 2013Leo Lanese

0 Comments

Starting a Responsive Web Project

Sep 26, 2013By Leo Lanese

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…

Sep 26, 2013Leo Lanese

0 Comments

LESS MIXIN vendor properties

Sep 25, 2013By Leo Lanese

Based on the article from http://css-tricks.com/. I desided update it, so I’m inluding: “CSS3 perspective”, “CSS3 backface-visiblity” and a “legacy transform” to the mixin.less file. transform property

.transform(@arguments) {
  -webkit-transform: rotateY(@arguments);
  -moz-transform: rotateY(@arguments);
  -o-transform: rotateY(@arguments);
  -ms-transform: @arguments;
  transform: rotateY(@arguments);

  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
}

1

2

3

4

5

6

7

8

9

10

.transform(@arguments) {

-webkit-transform: rotateY(@arguments);

-moz-transform: rotateY(@arguments);

-o-transform: rotateY(@arguments);

-ms-transform: @arguments;

transform: rotateY(@arguments);

-webkit-backface-visibility: hidden;

-webkit-perspective: 1000;

}

How to use it You can use it as any other LESSRead more…

Sep 25, 2013Leo Lanese

0 Comments

GPU Hardware-Accelerated CSS LESS-mixin

Sep 13, 2013By Leo Lanese

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…

Sep 13, 2013Leo Lanese

1 comment

Going beyond simple pixel-width conditions

Sep 5, 2013By Leo Lanese

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…

Sep 5, 2013Leo Lanese

0 Comments

You may not be ready for this yet, but your kids are gonna love it

Aug 18, 2013By Leo Lanese

The number of devices connected to the web is out of control. Sometimes companies don’t get the real view of the problem: Everything is “connected” or it will be. Everyone gets connected and If you don’t have your website enabledRead more…

Aug 18, 2013Leo Lanese

0 Comments

Testing the CSS: getComputedStyle

Jul 29, 2013By Leo Lanese

I’m planning to get external fixtures more than inline fixtures, and test it using the getComputedStyle CSS properties values. Can I use: getComputedStyle getComputedStyle capability test TO TEST DEMO http://jsfiddle.net/leolanese/xf6Jm/ Real Responsive Web Design example using getPropertyValue() function getPropertyValue Example:Read more…

Jul 29, 2013Leo Lanese

0 Comments

SpainJS Conference – JULY 5-6, 2013 MADRID

Jul 10, 2013By Leo Lanese

A SUMMER JAVASCRIPT CONFERENCE Speakers: – Douglas Crockford, Senior JavaScript Architect, www.crockford.com – Leo Lanese, @leolaneseltd, www.leolanese.com – Giorgo Sardo @gisardo, Director in the Technical Evangelism & Development group at Microsoft Corp, http://blogs.msdn.com/b/giorgio/ – Axel Rauschmayer @rauschma, Specialized in JavaScriptRead more…

Jul 10, 2013Leo Lanese

0 Comments

The javascript Module Pattern

Jul 6, 2013By Leo Lanese

Benefits The Module Pattern keeps things very simple and easy to read and use. We can use Objects in a very cool way, and doesn’t make swollen your code with repetitive “this” and “prototype” declarations. Starting with the Module InRead more…

Jul 6, 2013Leo Lanese

0 Comments

A simple fresh reset

Jun 17, 2013By Leo Lanese

A quick Responsive Web Design reset: (updated 18/09/2013) All default HTML elements have a default CSS attributes. Sometimes these attributes cause common problems when creating the site thinking about cross-browser (to visualize “correctly” in all browsers). Sometimes the only solution isRead more…

Jun 17, 2013Leo Lanese

2 comments