You are viewing the deprecated 0.7.1 version of the website. Click here to view the latest version

Roses are red – Links are blue

09 Oct 2017

By default, a browser will display links in blue. Bulma has up until now used the $primary color as the $link color:

// Old styles
$link: $primary !default

But the primary color is mostly used as the brand color, and is not necessarily well suited for links. For readability purposes, and to add more flexibility to your design choices:

  • the $link color defaults to $blue
  • $info is using the new $cyan color
  • $link has been added to the $colors map as well
// New styles
$link: $blue !default
$info: $cyan !default
Deprecation warning

Because the modifier is-link for buttons already existed, it has been renamed to is-text.

As such, the following components are now blue:

All Bulma elements and components that support color modifiers now support the .is-link color:

<div class="notification is-link">
  Link notification.
</div>

<div class="notification is-info">
  Info notification.
</div>

<button class="button is-link">
  Link button
</button>

<button class="button is-info">
  Info button
</button>
Info notification.

If you want to use the $primary color for your links, just customize your Bulma setup by including these rules:

$link: $primary !default
$link-invert: $primary-invert !default
$link-focus-border: $primary !default
#native_company# #native_desc#
#native_cta#
New!

The official Bulma book! 😲

by Jeremy Thomas, creator of Bulma, Oleksii Potiekhin,
Mikko Lauhakari, Aslam Shah and David Berning

A step-by-step guide that teaches you how to build a web interface from scratch using Bulma.

Formats available:
PDF Epub Mobi
or
Kindle

Newsletter

Features, releases, showcase… stay in the loop!