Bulma CSS css
Centrar imagen con Bulma
En este post te enseñaré cómo centrar una imagen dentro de un div usando el framework CSS Bulma. Hay varias formas, pero te enseñaré la que me ha funcionado hasta el momento.
Centrar imagen con Bulma – CSS
css HTML javascript web
Chart.js – Tutorial con ejemplos para gráficas en la web
En este post te voy a mostrar un tutorial de chart.js para el manejo de gráficas en la web. Ya llevo bastante tiempo usando esta librería pero hasta ahora es que escribiré esta introducción con varios ejemplos acerca de esta maravillosa librería.
Lo único que necesitas para el tutorial son conocimientos básicos de JavaScript y HTML, aunque igual si estás aprendiendo puede que esto lo refuerce.
Bulma CSS css web
Plantilla inicial de Bulma
En este post te mostraré una plantilla simple de Bulma para comenzar a usar este framework CSS. Es decir, una plantilla de ejemplo para que puedas basarte en ella y comenzar a trabajar modificarla según tus preferencias.
Esto que te mostraré también es conocido como starter template de Bulma.
css HTML
Cuadrícula de imágenes con HTML y CSS
En este tutorial sobre diseño web te mostraré cómo mostrar una cuadrícula de imágenes en HTML usando CSS. Vamos a hacer que las imágenes ocupen determinado tamaño de la pantalla usando columnas y filas.
Por ejemplo, hacer una cuadrícula de 2 x 3 imágenes, o de 2 x 2, distribuyendo correctamente el tamaño de la página para que las imágenes tengan el mismo tamaño.
No vamos a usar Bootstrap, solo usaremos CSS, pues Bootstrap ya ofrece clases para hacer este tipo de cosas.
Al final tendremos algo parecido a una tabla de imágenes que ocupan el mismo ancho de la pantalla, usando HTML y CSS.
css javascript
Insertar botón flotante en esquina con JavaScript
En esta corta entrada te mostraré cómo insertar un botón flotante en una esquina de la página web, usando JavaScript. Es decir, crear el botón de manera dinámica y colocarlo en una de las esquinas, de manera que se vea que “flota” y que está fijo.
Botón flotante en esquina – Insertado con JavaScript
css web
Imágenes responsivas con CSS
En este post sobre diseño responsivo en CSS te mostraré cómo hacer que una imagen sea responsiva o responsive. Es decir, que se adapte a cualquier tamaño de pantalla.
Hacer una imagen adaptable es útil cuando no usamos frameworks de diseño como Bootstrap, Bulma, etcétera, y queremos que la imagen sea responsiva.
Bootstrap 4 css
Bootstrap: ocultar elementos al imprimir
En este post sobre estilos CSS y el framework Bootstrap 4 te mostraré cómo ocultar y mostrar ciertos elementos al momento de imprimir la página web.
De este modo puedes imprimir la página web ajustando solo ciertas características. Por ejemplo, mostrar el botón de impresión en la pantalla, pero ocultarlo al imprimir.
Todo esto lo haremos con clases que ya vienen en Bootstrap. No vamos a programar nada manualmente, aunque si quieres, puedes hacerlo de manera nativa.
css HTML
Centrar tabla en HTML con CSS
Este post es muy corto. Solo vamos a ver cómo centrar una tabla en una página web, usando CSS.
Bootstrap 4 css web
Problemas con Awesomplete al usar Bootstrap
En este artículo te explicaré un problema que me pasó hace algún tiempo usando la librería Awesomplete y el framework Bootstrap.
Pasa que al hacer un autocompletado con AJAX, el input perdía su estilo y se mostraba a la derecha de la etiqueta. Algo así:
Awesomplete con Bootstrap – Cambiando estilo de input
Cuando en realidad, debería mostrarse así:
Input correcto con awesomplete y Bootstrap
css Framework Angular web
Angular cambia la opacidad en CSS
Hoy te voy a mostrar cómo solucionar el siguiente problema: al preparar aplicación web de angular para producción con ng build --prod los estilos CSS se cambian y en la opacidad se obtienen distintos resultados.
Quiero aclarar que esto no es problema de Angular, sino de cssnano, una herramienta que utiliza Angular para optimizar los estilos CSS.
Bulma CSS css HTML
Tabla responsiva con Bulma CSS
El framework CSS de Bulma provee clases para agregar estilos a las tablas, así como contenedores de las mismas.
Hoy vamos a ver cómo hacer una tabla responsiva utilizando la clase table-responsive, clase que funciona pero para que lo haga debemos hacer algunos cambios con los div padres.
Bootstrap 4 css Framework Angular
Bootstrap 4 con Angular 2 y ng-bootstrap
En este post te mostraré cómo comenzar a usar los estilos de Boostrap 4 en una app de Angular 2 gracias a ng-bootstrap.
css HTML VueJS
CSS – Ocultar elemento pero mantener espacio
Resumen: usar CSS para hacer un elemento invisible pero que siga en el DOM ocupando su espacio.
css Framework Angular web
Menú de navegación con Angular Material
Resumen: mostrar cómo crear un menú de navegación con Angular Material; es decir, implementar un navigation drawer con el menú a la izquierda (que se puede ocultar y mostrar con un botón) y el contenido a la derecha.
Para implementar un navigation drawer o cajón de navegación en Angular Material vamos a usar combinar algunos componentes. Entre ellos:
- Mat Toolbar: la barra que estará en la parte superior y tendrá el título de la app de Angular así como un botón para mostrar/ocultar el cajón de navegación
- Mat Sidenav Container: el contenedor de lo que veremos a continuación
- Mat Sidenav: el menú con los enlaces, es decir, el cajón de navegación
- Mat Sidenav Content: el contenido que se irá mostrando e inyectando dependiendo de la sección
Nota: recuerda que para esto debes tener un proyecto de Angular y haberle agregado Angular Material.
Si quieres ver el ejemplo terminado haz click aquí.
