A forward-thinking, CSS micro-framework (2.47kB gzipped).

Why Furtive?

Furtive is truly mobile-first and nearly all dimensions are done in rem. It also has a small footprint, cutting down on the bandwidth necessary for downloading CSS. Furtive is intended to be just that, furtive. It's the perfect starting point to get your project up and running.

Furtive remains lightweight because it doesn't preoccupy itself with older browsers. As a result, Furtive can use cutting edge tech like flexbox, SVGs, and limited vendor prefixing. It's also available in SCSS, CSS, and comes with a gulpfile for customizing the build.

Responsive Grid System

Furtive comes with a responsive grid system based on display: flex;. There are 6 available columns, however this is easy to customize since it's dynamically generated as part of the build process with rework-flex-grid.

 .grd > .grd-row > .grd-row-col

Use classes ending in --sm, --md, and --lg to make columns that can stack on viewports with different widths. Try resizing the browser to see the effect on the columns below.



There are only a few buttons included, to keep the footprint small. However, the .btn class can be extended to add custom colors and styling.

.btn .btn--blue .btn--green .btn--red .btn--gray .btn--link

Small buttons

You can also add .btn--s for smaller buttons.

.btn .btn--blue.btn--s .btn--green.btn--s .btn--red.btn--s .btn--gray.btn--s .btn--link.btn--s


Forms are typically a key component for most websites and web applications. As such, Furtive seeks to keep them consistent, coherent, and elegant for all devices.

Media Objects

As Stubbornella would say, the media object saves hundreds of lines of code. Furtive is inclined to agree.

John Otander avatar
John Otander

I think the media objects using flex are pretty rad. The CSS is lightweight, and can be reused all over the place. Everyone's happy.

John Otander avatar
John Otander

They even nest. Not bad for about 10 lines of CSS. Now we wait for caniuse to report more favorably for the flex box.


Tables are responsive, and beautiful, right out of the box.

id name twitter email website beer
1 John @4lpine [email protected] johnotander.com Fresh Squeezed IPA
2 Ryan @sessynine [email protected] sessynine.com Coors Light


Inspiration is drawn from colors.css and bootstrap to provide helper classes and variables.


There's an assortment of background colors that can be used for flash messages, table headings... anything.



There are a few border classes to take advantage of in order to frame content.


Text Colors

You can also modify the text color.

.fnt--white .fnt--off-white
.fnt--light-gray .fnt--mid-gray .fnt--dark-gray .fnt--red .fnt--orange .fnt--blue .fnt--green


Simple, elegant, and nearly raw HTML. Some things don't really need to change.


  1. Apples
  2. Bananas
  3. Oranges




There's a collection of utility classes for modifying the interface.






Float Left
Float Right
Float None

Text Alignment



The typography is minimal, and full of contrast. Not to mention, all the key components are based on Scss variables that can be changed to give a custom look and feel.


In order to ensure that you can modify type styling on the fly, there are italics, thin, bold, caps, and small, muted, code classes.


There are also heading classes available the represent heading styles. This results in semantic HTML that still has the styling that you are looking for.

.h1 .h2 .h3 .h4 .h5 .h6

Installing Furtive

$ npm install --save furtive
$ bower install --save furtive
$ git clone https://github.com/johnotander/furtive