Tutorial para calcular contenedor de texto segun lineas. Hoy explicaremos cómo calcular el tamaño de un contenedor que contiene texto, y sólo queremos que se visualicen unas líneas determinadas.

Image

En este caso, tenemos varias tarjetas del mismo estilo, y quedaría mal que en cada una aparecieran más o menos líneas, por lo que vamos a hacer lo siguiente:

Inspeccionamos el párrafo, y en el inspector (el de chrome por ejemplo) buscamos qué tamaño de letra tiene, en nuestro caso vemos que tiene un 0.85rem (13.6 píxeles).

Después buscamos en el inspector la propiedad line-height, para los que no lo sepan consiste en establecer la altura de cada línea que forma el contenido de texto de un elemento, por lo que se emplea para controlar el interlineado del texto.

Nuestro párrafo tiene un line-height de 24 píxeles.

Image

Image

Una vez que tenemos el tamaño de letra y el line-height, los multiplicamos entre ellos y así averiguaremos el alto (height) que debe tener nuestro contenedor.

0.85 x 24=20.4 píxeles

Este sería el cálculo para una sola línea, pero en este caso queremos que nos aparezcan dos, por lo tanto multiplicamos por dos nuestro resultado:

20.4 x 2=40.8 píxeles

Hay que tener en cuenta que debemos sumar si el contenedor tuviera algún borde, padding o algo para que el cálculo sea lo más exacto posible, en nuestro caso no tenemos nada así que lo dejaremos así.

Image

Vemos que seguimos visualizando más de dos líneas, por lo que añadiremos a nuestro contenedor la propiedad overflow: hidden, así, lo que sobrepase los píxeles que hemos marcado de alto ya no lo veremos y quedará oculto.

Image

Ya tendríamos nuestro contenedor a la medida necesaria y todas las tarjetas ocuparían lo mismo.

Image

Y esto ha sido el tutorial para calcular el tamaño de un contenedor de texto segun el numero de lineas

Si necesitas más ayuda, visita este enlace o contacta con un desarrollador.

Herramientas indispensables para diseño web Page ruler, tu regla para medir pixeles en la pantalla del ordenador

Herramientas indispensables para diseño web Page ruler. Muchas veces queremos saber cuanto mide un elemento de una pagina web, proyecto etc. Como por ejemplo una imagen

Muchas extensiones de navegador te permiten medir en pantalla mediante una sencilla regla y averiguar rápidamente cuanto mide en píxeles un elemento web. La extensión más utilizada se llama Pageruler que crea una regla para obtener dimensiones y posicionamiento de píxeles, y además mide elementos en cualquier página web.

¿Qué es Page ruler?

Page Ruler es una extensión gratuita para navegadores  web Firefox y Chrome que muestra en pixeles la medida de los elementos medidos.

Características

•    Dibuja una regla en cualquier página y permite ver el ancho, la altura y la posición superior, inferior, izquierda y derecha.
•    Arrastra los bordes de la regla para cambiar su tamaño.
•    Usa las teclas de flecha para mover y cambiar el tamaño de la regla.
•    Muestra guías que se extienden desde los bordes de la regla.
•    Actualiza manualmente el tamaño y la posición de la regla desde la barra de herramientas para realizar cambios de precisión.
•    Habilita el “Modo de elemento” para delinear elementos en la página mientras mueves el ratón sobre ellos.
•    Navega a través de elementos de padres, hijos y hermanos de cualquier elemento medido.

Cómo utilizar la extensión Page ruler

Empezamos instalando la extensión en tu navegador y después haz clic en el icono que está al lado de la barra de direcciones.

Image

 
A continuación  puedes usar la medición libre arrastrando el ratón por la pantalla.

También puedes utilizar el modo de detección del elemento en la parte superior izquierda para que detecte automáticamente cuánto mide, por ejemplo un campo de registro de un formulario.

Image

Y estas son las caracteristicas y virtudes de Page ruler como herramienta indispensable para el diseño web Drupal

Si necesitas más ayuda, visita este enlace o contacta con un desarrollador.

Herramientas indispensables para diseño web WhatFont

Herramientas indispensables para diseño web WhatFont, la forma más fácil de identificar fuentes en páginas web.

Cuantas veces has querido saber que fuente esta utilizando una pagina web, una publicación, un post. Que tamaño de letra tiene un encabezado. Que grueso de letra tiene un título. WhatFont es una extensión de Chrome que nos ayuda con esta función de una forma muy rápida y sencilla.

Image

Tan solo con un clic nos proporcionara toda la información que necesitamos sobre esa fuente.

Primero nos muestra de forma abreviada el nombre de la fuente y su grosor en la primera línea de la ventana informativa. A continuación, nos mostrara la familia completa de la fuente, el estilo, el grosor, el tamaño en pixeles, la altura de la línea en pixeles, el color en código hexadecimal y un ejemplo de todas las letras en mayúsculas y minúsculas de la misma.

Image

Puedes darle clic a otra fuente y abrirá otro pequeño pop-up con la información de esta ultima sin perder el pop-up de la fuente anterior. Como puedes comprobar es sencillísimo conocer las fuentes que utiliza una pagina web utilizando la extensión para Chrome WhatFont.

Existen muchas otras extensiones similares, Firebug y Webkit Inspector son bastante fáciles de usar para los desarrolladores. Sin embargo, para otros, esto no debería ser necesario.. Además, si conoces CSS no te hará falta WhatFont. Pero incluso en este caso te ayudara a ahorrar tiempo en tus proyectos.

Es así de simple y elegante.

Para usar whatfont es tan sencillo como buscar la aplicación en las extensiones para Chrome en la barra de tareas de tu buscador, añadirla a Chrome y fijarla en la barra de extensiones.
También puedes pulsar aquí para ir directamente a la ventada de descarga.

Y estas son las caracteristicas y virtudes de WhatFont como herramienta indispensable para el diseño web Drupal

Si necesitas más ayuda, visita este enlace o contacta con un desarrollador.

Herramientas indispensables para diseño web Drupal gratuitas

¿Cuantas veces hemos nos ha gustado un color de una imagen, fuente, fondo, elemento web y hemos tenido que hacer una captura de pantalla, abrir el programa de turno, pulsar el cuentagotas y obtener finalmente el color deseado?
Colorzilla es una extensión para desarrolladores web y diseñadores gráficos con tareas relacionadas con el color, tanto de nivel básico como avanzado.Esta extensión nos será de gran ayuda por sus herramientas como selector de color, cuentagotas y muchas más herramientas de color avanzadas adicionales.

Image

Características:

• Cuentagotas: obtiene el color de cualquier píxel de la página.
• Selector de color avanzado: parecido a los que tienes en Photoshop o Paint shop pro.
• Analizador de color de la pagina web: analiza los elementos dom en cualquier página web.
• Generador de degradado css: permite crear degradados a tu gusto o algunos ya predefinidos y te muestra el código correspondiente en css. También te permite modificar la orientación e incluso el tamaño.
• Palette viewer: contiene 7 paletas preinstaladas para ayudarte a tener una idea más clara.
• Historial de color de los colores elegidos anteriormente.
• Muestra información del elemento como la clase, el nombre del elemento, la id, el tamaño, etc.
• Recuadra cada elemento con un marco para indicar de donde se obtiene el color al pasar el cursor.
• Permite manipular los colores por sus componentes Rojo/Verde/Azul o Tono/Saturaciones/Valor.
• Copia automáticamente los colores generados o mostrados al cortapapeles en CSS RGB, Hex y otros formatos.
• Macros para muestrear los colores de la página con el teclado.
• Permite obtener el color de elementos dinámicos como enlaces flotantes, etc, volviendo a muestrear el ultimo píxel muestreado.
• Selección de color en un solo clic: al hacer clic en el icono principal de la barra de herramientas de ColorZilla estará listo para elegir el color del píxel que desee. (actualmente solo en Windows).
• Permite elegir colores de objetos flash.
• Permite elegir colores a cualquier nivel de zoom.
• Permite obtener el color medio de áreas de pixeles (15 x 15 px, 120x120px, etc).

Y estas son las caracteristicas y virtudes de Colorzilla como herramienta indispensable para el diseño web Drupal

Si necesitas más ayuda, visita este enlace o contacta con un desarrollador.

Mostrar y ocultar un elemento con CSS esquivando jQuery.

Como hacer que un elemento aparezca y desaparezca desde un lado de la pantalla solo con CSS.

Como frontend hay veces que por exigencias del guion nos vemos en la tesitura de no poder usar jquery, ya sea por no saber usarlo, porque el cliente no quiere, por cuestiones de rendimiento, … En este artículo se explica un truco para poder hacer que un elemento aparezca de uno de los lados.

Son dos las condiciones que necesitamos para este truco, la primera y la mas obvia es saber CSS, y la otra, la que nos va a dar toda la lógica, es el combinado de un <label> con su atributo “for” y un <input type=”checkbox” con su “id”.

Por un lado pondremos la label en donde nos interese dentro de nuestro html y la maquetaremos para que tenga el aspecto de botón que queremos. Por otro lado, y este es uno de los puntos importantes a tener en cuenta, pondremos el checkbox justo por delante del div o el tag que vayamos a hacer que entre y salga de la pantalla.

Image

Ahora toca dejar esto visualmente listo para que haga su magia.

Por un lado debemos poner el body con “overflow: hidden;”, también valdría hacerlo sobre un contenedor que encapsule tanto al checkbox como al div que le acompaña.

El checkbox lo maquetaremos de la siguiente manera:

.view-option-anchor{    
    display: inline-block;
    width: 0;
    height: 0;
    opacity: 0;
    visibility: hidden;
}

Es importante que no pongamos “display: none;“ ya que aunque no lo veamos es indispensable que este dentro del documento.

Ahora vamos con la caja que queremos que se oculte y se muestre, en este caso es el div con la clase “filter-content”.

Para ello lo que vamos a hacer es maquetarlo, posicionándolo para que posteriormente nos aparezca desde el lado derecho de la pantalla.

. filter-content{
    height: 100vh;
    width: 100 vw;
    position: fixed;
    top: 0;
    left: 100%;
    z-index: 9999;
    transition: left 0.4s ease;
}

Bien, ahora ya está colocado cada elemento donde debe estar en su posición inicial. En este caso no veremos el div “filter-content” porque sobresale de la ventana por la derecha. Para verlo, y aquí es donde está la magia, no ayudaremos de su posición con respecto el checkbox de la siguiente manera.

 .view-option-anchor:checked + .filter-content{
    left: 0;
}

De esta forma haremos que el div que está justo al lado de checkbox entre dentro de la pantalla.

Por último, para hacer totalmente usable este elemento que sale y entra de la pantalla, necesitaremos un botón de cierre, o más bien un nuevo <label> en el que su “for” apunte también al “id” de este checkbox y que se encuentre dentro de el div que entra y sale. Con lo que la estructura html nos quedaría así:

Image

Y con esto tendríamos la funcionalidad completa. Todo lo referente al aspecto de estos label como botones queda en tu mano para ponerlos a tu gusto.

Esta forma de usar el checkbox puede aplicarse a diferentes situaciones, la única condición es usar y posicionar los elementos de la forma descrita, así que toca experimentar todo lo que se te ocurra.

Y esto ha sido mostrar y ocultar un elemento con CSS, recordad que tenéis este y otros manuales de ayuda en el blog y si aun así no halláis respuesta a vuestro problema, podéis publicar vuestras preguntas en el tablón, donde la comunidad os ayudará a resolverlas.

File Watcher es un procesador para compilar SASS o SCSS con PHPstorm, nuestra herramienta favorita de desarrollo con Drupal. :)

Vamos a mostrar como configurarla, paso a paso:

Lo primero que tenemos que hacer es tener nuestros archivos bien ordenados dentro de nuestro theme. 

Dentro del theme, en la raíz del mismo,  tendremos una carpeta llamada CSS con los archivos que compilará  File Watcher. Y en la misma ruta otra carpeta con los SASS o SCSS que necesitamos compilar, ejemplo:

En mi theme, mi estructura es la siguiente: todo el css se compila en el archivo Style.css, pero dentro de la carpeta sass, tengo toda una estructura de componentes que se cargan en mi Style.scss con un @import.

De esta manera todos mis estilos están ordenados y los proceso según el orden que me beneficie.

Previo a todos los pasos debemos tener instalado, Sass en nuestro sistema, aqui os dejo el comando de ubuntu: 

npm install -g sass

Ahora vamos a configurar la herramienta del PhpStorm:

Vamos a Inicio - Settings  y dentro en  tools - File Watcher . Pulsamos el botón + para añadir un nuevo compilador. Elegimos el  tipo de hoja de estilo que vamos a usar de la lista (SASS y SCSS usan el mismo motor), y una vez dentro,  abrimos  el desplegable

Working Directory and Environment Variables.

Dentro hay 3 imputs (marcadas en rojo en la imagen) que tenemos que reescribir con nuestras rutas:

Arguments: $FileName$:$ProjectFileDir$/web/themes/custom/auladrupal/css/$FileNameWithoutExtension$.css

Output paths to refresh: $ProjectFileDir$/web/themes/custom/auladrupal/css/$FileNameWithoutExtension$.css:$ProjectFileDir$/web/themes/custom/auladrupal/css/$FileNameWithoutExtension$.css.map

Working directory: $ProjectFileDir$/web/themes/custom/auladrupal/sass/

una vez tengamos todo configurado, solo tenemos que probar a realizar algún cambio en nuestro código Front para ver si se compila. Este proceso es muy rápido por tanto seguramente no veáis que lo ha hecho. Para comprobarlo, id a la carpeta CSS y verificar que ese cambio esta en el style.css  

Hemos aprendido a Compilar SASS o SCSS con PHPstorm usando File Watcher

Si necesitas mas ayuda de PHPstorm ve al blog desde aqui 

Enlace para descargar el PHPStorm