Se acerca el nuevo año y cómo muchos emprendedores estás pensando trabajar en ese nuevo prototipo (wireframe) de tu super app, que como consecuencia te lleva a usar Balsamiq una de la herramientas banderas para este tipo de trabajo. Estoy en lo correcto?
O por otro lado, si por algún requerimiento u otra situación te ves en la necesidad de maquetar un diseño HTML + CSS con estilos como los de Balsamiq. Te comparto DoodleCSS una super pequeña librería CSS desarrollada por Chris McCormick.
Ejemplo vale más que 1k palabras
See the Pen Untitled by ray (@lokcito) on CodePen.
Como usarlo?
Ingresando al repositorio del proyecto en Github ( https://github.com/chr15m/DoodleCSS ) encontraremos la hoja de estilos principal: doodle.css .
Así que lo enlazaremos en nuestro head:
<link rel="stylesheet" href="doodle.css">
Asi mismo incluiremos la clase doodle en el body:
<body class="doodle">...<body>
Para los textos usaremos el siguiente código, gracias a Google Fonts:
<style>
@import url('https://fonts.googleapis.com/css2?family=Short+Stack&display=swap');
body {
font-family: 'Short Stack', cursive;
}
</style>
Y listo, no lo pienses más a maquetar ese Wireframe de tu gran super app!
Por cierto, te dejo el enlace del proyecto: https://chr15m.github.io/DoodleCSS/
Si estas buscando algún otro ejemplo de HTML+CSS te dejo este articulo acerca de una pequeña Agenda HTML.
Gracias y buena noche vieja!