Mixin Sass para bocadillos (bubbles) con CSS

See the Pen ByOwPy by lureka (@lureka) on CodePen.

Como últimamente estoy utilizando en mis proyectos indicadores tipo “bocadillos” de comic (bubbles), he montado un pequeño mixin para reutilizarlo que os comparto a continuación.

A este mixin lo bautizamos como “bubble”, para qué complicarnos, al que le pasamos 4 variables:

 @mixin bubble($location, $with, $length, $color) {
 ...
}

Sigue leyendo

Sass: Pasar de “px” a “em” sin heredar tamaños

Si usamos Sass y nos encontramos con la necesidad de pasar valores de “px” a “em” podemos hacer una función muy sencilla que nos solucionará el problema.

Lo normal es que una de las primeras variables que declares en tu Sass sea el tamaño de texto base del sitio. Yo lo llamaré base-font:

$base-font: 16px

La función sería algo así:

@function em($px) {
@return ($px / $base-font) * 1em;
}

Sigue leyendo

Trabajar con Sass y Compass en WordPress

Sass y Compass en WordPress

Si quieres trabajar con Sass y Compass en WordPress para crear tu propio tema te recomiendo que te bases en uno tipo _s. Tiene un CSS mínimo y está pensado precisamente para crearlo desde cero.

Entiendo que ya utilizas Sass y Compass en tus proyectos, si no sabes de que te hablo empieza mirándote la estupenda presentación de Sass y Compass de Leandro D’Onofrio (@dzignus) y visita el “site” del proyecto http://sass-lang.com/ donde te explican en qué consiste y cómo instalártelo según tu sistema operativo.

Sigue leyendo

Actualización de WordPress desde local

Si tienes una instalación de WordPress en local seguramente te habrá tocado instalar a mano nuevas versiones y actualizaciones de plugins o temas ya que WordPress para actualizar necesita los datos de conexión a tu servidor y en vez de descargar e instalar los plugins necesarios te aparece el siguiente texto:

Datos de conexión
Para realizar la operación que has solicitado WordPress necesita tener acceso a tu servidor web. Por favor, introduce tus datos de acceso FTP para proceder. Si no recuerdas tus datos de acceso deberías contactar con tu proveedor de alojamiento.

Sigue leyendo

12

Utilización de instancias de objetos en tus wireframes

Para que tus wireframes permitan modificaciones con poco esfuerzo, debes crear símbolos con los elementos que se repitan a lo largo del proyecto. De este modo modificando el símbolo se modificarán todas las instancias del mismo en cualquier sitio donde se utilice.

simbolo

Crear un símbolo en Balsamiq

La forma de crear un símbolo en Balsamiq es muy sencillo, se seleccionan los elementos que lo conformarán y los agrupamos (Edit -> Group).

Sigue leyendo