CuTt5: WooCommerce Mobile Breakpoint

Copper’s Tips & Tricks #5: WooCommerce Mobile Breakpoint At the office, we use this breakpoints for CSS layouts, basically bootstrap’s: From To Description Nothingness 767px Mobile 768px 991px Tablet 992px Infinity Desktop That’s the standard anyway, and we usually merge tablet and desktop together, at least for the most important features. However, there’s one very […]

How CSS CALC works

How CALC works. Mirar esto para entender cómo funciona el CALC de CSS https://bitsofco.de/how-calc-works/

Cómo funciona el browser 

Interesante lectura sobre como funciona el browser. No podés no saber esto: https://dev.to/sanjsanj/optimising-the-front-end-for-thebrowser

Centrando cosas con CSS

Van guías prácticas, muy.. Caso centrar vertical y horizontalmente, sabiendo el tamaño o no.. Centering in CSS: A Complete Guide http://howtocenterincss.com/

Flexbox: la evolución del responsive, adiós floats?

Flexbox es un nuevo módulo de CSS3 que permite mejorar y facilitar la forma en que ubicamos elementos, simple y fácil. Hoy Uriel nos compartió 3 enlaces muy interesantes: Para aprender y probar flex: – Probar diferentes casos de flex: http://demo.agektmr.com/flexbox/ – Mismo que el anterior pero mas cheto de vista: http://the-echoplex.net/flexyboxes/ – Juego para […]

Conditional CSS: Targeting IE new versions

Targeting IE new versions such us IE10 & IE11 and Edge browsers with CSS is possible, but not the ol’ fashioned way because Microsoft deprecated the conditional commenting (if IE) we used in older versions. So where’s the black magic? Here: @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* IE10+ specific styles go here […]

Using vW units in LESS for a quick responsive on desktop.

Among px, em and %, CSS supports units such as “vw”, “vh”, “vmin” and “vmax”. These are called viewport units, and are effectively a percentage of the viewport. “vw” is relative to the viewport’s width. “vh” is relative to the viewport’s height. “vmin” is relative to the smallest of the two. (“vm” on old IE versions.) […]

My Sublime Text 3 PHP development set-up

Based in this post http://wasil.org/sublime-text-3-perfect-php-development-set-up, this my actually setup of sublime 3. Pack­age Con­trol (https://sublime.wbond.net) Thanks to this lit­tle piece of soft­ware all other plu­g­ins are eas­ily installed. Sub­lime­CodeIn­tel (https://github.com/SublimeCodeIntel/SublimeCodeIntel) This is pack­age I use all the time. Its job is to pro­vide hints related to func­tion, object, vari­able etc. names. It also hints what meth­ods and […]

Parallax Effect

DEMOhttp://www.ianlunn.co.uk/demos/recreate-nikebetterworld-parallax/ EXPLANATIONhttp://www.ianlunn.co.uk/blog/code-tutorials/recreate-nikebetterworld-parallax/

Fuentes especiales en CSS

Si tenemos una fuente no estandar, y conseguimos su archivo .ttf y .eotse puede hacer esto via CSS: @font-face { font-family: ‘DinShrift’; src: url(“/fonts/DINMITTE.eot”); src: local(‘DinShrift’), url(/fonts/DINMITTE.TTF) format(‘truetype’);} luego usar el font-family como siempre: font-familiy: DinShrift, Arial; Una página para convertir de .ttf a .eot:http://www.kirsle.net/wizards/ttf2eot.cgi Una que funciona mejor es:http://www.fontsquirrel.com/fontface/generator El .eot, es para los […]

Para evitar que Firefox haga drag de un elemento por CSS

Para evitar que Firefox haga drag de un elemento por CSS #elem{ -moz-user-select: none;} otros utiles-moz-user-focus: ignore;-moz-user-input: disabled; Me sirvio porque cuando programaba cosas en el evento mousedown/up del elemento a veces Firefox me hacia el drag del elemento html y me traía problemas en mis eventos-

problema width con porcentajes

si tengo un ul con width:100%y le pongo a sus hijos (float:left) ancho en %,el Explorer los calcula mal y el ultimo no entra y se va una linea para abajo.El firefox lo hace bien Pero si hago el cálculo de los pixels para los hijos con JavaScript (para no usar %) y les pongo […]

display:block dentro de ul. IE agregae extra carriage return

cuando ponemos un elemento con display:block dentro de un ul, tenemos el problema de que el torpe de MS Explorer agrega un enter abajo del elemento Solución:Set your li to display: inline; and it should stop IE from adding an extra carriage return.