Add-Ons

Extend Concise with these pre-built add-ons.

Scrollbars

WebKit-based browsers have a great property that allows you to style the way scroll bars look on the site with some very flexible pseudo-elements. Since these are only pseudo-elements, you can pick and choose on what element you want the custom scrollbars.

Simple Styling

By using these new pseudo-elements and some simple styling, you can create beautiful scrollbars for the body of your website.

Preview
Code 
::-webkit-scrollbar { width: 8px; }

::-webkit-scrollbar-track {
  background: #eee;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: #aaa;
  border-radius: 5px;
}

Gradient Styling

Perhaps the flat, simple scroll bars aren't your style? here's a sample scrollbar that has a slight gradient.

Preview
Code 
::-webkit-scrollbar { width: 8px; }

::-webkit-scrollbar-track {
  background: #f3f3f3;
  border-radius: 5px;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
}

::-webkit-scrollbar-thumb {
  background: #b3dced;
  background: -moz-linear-gradient(left, #b3dced 0%, #29b8e5 50%, #bce0ee 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #b3dced), color-stop(50%, #29b8e5), color-stop(100%, #bce0ee));
  background: -webkit-linear-gradient(left, #b3dced 0%, #29b8e5 50%, #bce0ee 100%);
  background: -o-linear-gradient(left, #b3dced 0%, #29b8e5 50%, #bce0ee 100%);
  background: -ms-linear-gradient(left, #b3dced 0%, #29b8e5 50%, #bce0ee 100%);
  background: linear-gradient(to right, #b3dced 0%, #29b8e5 50%, #bce0ee 100%);
  border-radius: 5px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3dced', endColorstr='#bce0ee', GradientType=1);
}

Individual Elements

Do you want scrollbars only on individual elements? Some situations where this would look great are <pre> elements, the .table-responsive class, or anything with horizontal or vertical overflow.

Here's an example using the <pre> element (resize the browser to see the scrollbars):

Preview
Company Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
Apple 25.4 30.2 33.3 36.7
IBM 20.4 15.6 22.3 29.3
Code 
pre::-webkit-scrollbar {
  height: 14px;
  width: 14px;

  -webkit-appearance: none;
}

pre::-webkit-scrollbar-thumb {
  background-color: rgba(50, 50, 50, 0.2);
  border: 3px solid #fff;
  border-radius: 8px;
}