Playbit CSS keyboard

A few days ago Rasmus Andersson announced Playbit, “a computing environment which encourages playful learning, building & sharing of software”.

On the bottom of the page you can see a fun little keyboard, apparently inspired by this old calculator.

I went ahead and implemented it with HTML/CSS on Codepen in about 45 minutes:

See the Pen Playbit CSS Keyboard by Nacho Toledo (@iign) on CodePen.

This is the original illustration:

Playbit Keyboard

There are a couple of subtle shadow details that could definitely be improved, but I think the result is pretty cool for under an hour of CSS hacking.

How to use only the grid system from Bootstrap

You don’t need to add the whole Bootstrap code and a zillion dependencies and plugins if you’re just using its grid system. You can use BS’s grid system as a standalone dependency:

Version 4.1.x

Here’s a review of all CSS files that come with Bootstrap:

CSS filesLayoutContentComponentsUtilities
bootstrap.cssbootstrap.min.cssIncludedIncludedIncludedIncluded
bootstrap-grid.cssbootstrap-grid.min.cssOnly grid systemNot includedNot includedOnly flex utilities
bootstrap-reboot.cssbootstrap-reboot.min.cssNot includedOnly RebootNot includedNot included
Bootstrap CSS Files (https://getbootstrap.com/docs/4.1/getting-started/contents/#css-files)

You can either download the whole package and use bootstrap-grid.min.css or even link to that specific file using a CDN.

Version 3.4.x

Use the link below to download a customized version of Bootstrap. Need the Grid System? Perhaps the pretty Glyphycons or tooltips? This has you covered:

Customize & Download Bootstrap

Everything I know about CSS Variables Custom Properties

Brain dump about CSS Custom Properties, AKA CSS Variables

They are not variables

They are actually called CSS custom properties. Huh.
We’ll refer to them as variables for brevity.

Declaring variables

To declare new variables, you just add a new property that begins with --, inside a ruleset:

:root {
  --color-main: #76fadd;
  --color-text: #282828;
}

What is :root?

If you notice, in the previous example, in the previous MDN link and other tutorials, you’ll see that variables are declared inside a :root, instead of html {...}, body{...} or whatever.

According to MDN, :root is a pseudo-class that matches the root of the tree representing the document. In this case, it’s identical to the html selector, except that its specificity is higher.

So why not use html then? Well, it’s perfectly fine.
CSS-Tricks explains this very clearly:

In an HTML document the html element will always be the highest-level parent, so the behaviour of :root is predictable. However, since CSS is a styling language that can be used with other document formats, such as SVG and XML, the :root pseudo-class can refer to different elements in those cases. Regardless of the markup language, :root will always select the document’s top-most element in the document tree.

https://css-tricks.com/almanac/selectors/r/root/

Using variables

.element {
  color: white;
  background: var(--color-main);
}

Inheritance

CSS Variables are inherited exactly like normal CSS properties. They are, after all, CSS properties and not variables. In the following Pen you can see how children-1 can override --color-bg declaration defined in it’s parent (.child), but parent can’t, since it has no access to it. --color-bg declaration is “below” parent it so it can’t cascade down to it.

https://codepen.io/iign/pen/bGVrYvW
Inheritance demo CodePen

Fallbacks

The first line of defense against undefined values is CSS’s cascading properties:

:root {
  --color-main: #76fadd;
  --color-text: #282828;
}

.element {
  background-color: #333333;
  background-color: var(--color-main); /* only interpreted by supported browsers*/
}

If the current browser doesn’t support CSS custom properties, it will ignore line 8 and apply a #333333 background. This is a very simple and isolated example, but it can be useful when some of these variables are generated and injected programmatically.

More importantly, fallback values work for browsers that do support custom properties. Fallback values are used when the given variable is not yet defined. The syntax is var(--variableName, defaultValue):

.element {
  background-color: var(--color-main, #333333);
}

If --color-main was not yet initialized or is by some reason invalid (maybe because it’s generated by user input), the background color of the element will be #333333.

Dark mode

One of the perfect use cases for CSS variables is obviously making a dark mode UI. Here’s a quick Pen on how to achieve that very quickly:

https://codepen.io/iign/pen/bGVjdYE

Congrats, now you have to maintain and test two versions of every element in your site.

Dark Mode CSS queries

In 2019 browsers started introducing the prefers-color-scheme media query, in order to write CSS depending on the users’s OS setting. That means we can show a dark UI or tweak some styles for users that have a dark theme setting enabled on their OS:

:root {
  --color-bg: #fff;
  --color-text: #333;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #333;
    --color-text: #fff;
  }
}

Browser support

Support is pretty good overall:

  • Edge 16 (Oct 2017)
  • Firefox 31 (Jul 2014)
  • Chrome 49 (Mar 2016)
  • Safari 9.1 (Mar 2016)
  • Opera 36 (Mar 2016)

Work in progress

I’ll be updating this page soon. If this helped you clear up some thoughts or something seems off, let me know!

Useful links

HTML0 – A starting point for front-end design

My last post was about front-end design workflow. Since then I got to think that others might benefit from it in a more concrete way.

So here it is, I put everything I use to kickstart a new HTML design project. For lack of time and creativity I named it HTML0. Its main parts are Browsersync + Sass, with a couple of Sass helpers I use frequently.

Any feedback is welcome :)

Fork HTML0 on GitHub.

Legibilidad en los medios online

Cada vez utilizo menos el RSS para leer noticias, y en cambio recibo lo más importante y/o lo urgente vía twitter. Esto me ha hecho visitar directamente los portales de noticias locales.

Sin mucho análisis se puede ver que la mayoría de los medios de comunicación online uruguayos tienen problemas de legibilidad [1]. Algunos bastante graves, a pesar de que debería importarles mucho cómo se lee su contenido.

Ya se, “la semana que viene lanzamos un rediseño”, “una nueva versión del sitio nuevo está en desarrollo”, y muchos más. Sin embargo, pasan semanas y nunca se actualizan. O peor, las nuevas versiones siguen teniendo los mismos defectos.

La usabilidad es algo que se va mejorando de a poco, a medida que vamos evaluando y apilando pequeñas mejoras, que a la larga, hacen una experiencia agradable para el usuario. Por eso creo que la mejora en este aspecto no puede esperar al próximo rediseño, debería ser algo más dinámico, que se evalúa y se mejora en iteraciones más cortas, que se pueden implementar hoy.

Voy a detallar algunos ejemplos de algunos de los medios que más me chocan. En todos los casos, pueden corregirse con no no más de 5 líneas de código CSS.

El País

Simplemente un poco de espacio entre párrafos y más interlineado, fuente apenas más grande y serifada.

180

En este caso el problema más grave es el tamaño de fuente que es muy pequeño.

Brecha

El problema más grande es el uso innecesario del fondo a rayas, que contrasta bastante mal con el texto. Un poco más de espacio no le viene mal tampoco.

Para ser justo, hay quienes están haciendo las cosas bastante mejor. Un ejemplo digno de mención es El Observador, que sin dudas es el más agradable para leer. De todas maneras, también tiene margen para mejorar.

De hecho, todos siempre van a poder mejorar. El objetivo de usabilidad al 100% es inalcanzable, y eso está bueno porque siempre se está buscando pequeñas mejoras que faciliten el uso del producto.

Notas

  1. Me refiero en realidad a lo que se define como “Readability”. No estoy seguro si “legibilidad” es una buena traducción, ya que “legibility” también existe en inglés y no refiere exactamente a lo mismo.
  • Merecen un capítulo aparte las publicidades de algunos de los sitios, que saltan encima de todo, te siguen, algunos no te dejan leer hasta que las cerras, etc.
  • Mientras no llega la “próxima actualización del sitio”, podemos usar una hermosa aplicación web llamada Readability, que transforma cualquier artículo online, aplicandole un estilo legible y agradable. También elimina contenido secundario, publicidad, etc. Claramente estas aplicaciones no deberían existir si se estuvieran haciendo bien las cosas en este aspecto.