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…
3-way-data-binding using AngularJS, Yeoman, FirebasedB using AngularFire
We are going to set-up step-by-step and out of the box Bootstrap and some AngularJS recommended modules, AngularFire and Firebase Simple Login and quickly view how to use 3-way-data-binding: YeomanJS Yeoman helps us to kickstart new projects, prescribing bestRead 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…
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…
LESS MIXIN vendor properties
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
|
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…
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…
You may not be ready for this yet, but your kids are gonna love it
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…