Tooltips With Sass Mixins

Tooltips are a very common user interface element, I’ve used them in large number of my projects. Not to say all of my projects! In this article I’m going to make pure CSS tooltips without any JavaScript code. And with Sass mixins to make reusable and customizable components.

Soft & Vivid Color Swatch

  • #a33438 rgb(163, 52, 56)
  • #638b97 rgb(99, 139, 151)
  • #deb48e rgb(222, 180, 142)
  • #34241d rgb(52, 36, 29)
  • #c84647 rgb(200, 70, 71)

A color theme I’ve created with the Adobe Kuler application on the iPhone. It takes a picture from the gallery or with the camera

Using the map data type in Sass

With the recent 3.3 version of Sass a new data type is available, maps. A map is a data structure which associate a key to a value. It’s somewhat equivalent to JSON structures in JavaScript. And maps are a well-known data structure in functional programming.

The map data

Tints & Shades

In print design, a tint of a color is making it lighter by putting less ink, and a shade is mixing a color with black. Now with CSS preprocessors like Sass or Less we can easily compute color codes to reproduce these tints and shades. These two functions appear to

Drawing Pure CSS Arrows With Mixins

These days I’ve been using a lot the possibility to draw triangles and arrows with pure CSS. I use it for small user interface elements: breadcrumbs, previous pages and next pages buttons, tooltips… I’ve rewritten this article from my previous blog. My code samples were written in Less

Sass Mixin for Web Fonts Ligatures

Now CSS stylesheets and browser implementations enable advanced typography properties. We can use in particular font ligatures. Theses font features are enabled in a lot of good quality web fonts and they allow us to use alternative and decorative styles on characters and on group of characters. This article is