Skip to content
A forward-thinking, lightweight, css microframework
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


A forward-thinking, lightweight, CSS microframework. Minimal by design.

2.47kB gzipped.

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, Stylus, and comes with a gulpfile for customizing the build.


You can install via bower:

$ bower install --save furtive

Or, you can install via npm:

$ npm install --save furtive

Or, you can clone the source:

$ git clone

Using the SCSS

In your SCSS file, you can import furtive:

@import "/path/to/furtive/scss/all";

Or, if you like, you can just import a subset of the files, they're located in the scss directory.

Customizing the SCSS

Furtive contains a file scss/_variables.scss, which allows for variable customization:

$font-family: 'Lato', Helvetica, sans-serif;
$dark-gray: #222;
$text-color: $dark-gray;
$body-bg: #fafafa;

@import "/path/to/furtive/scss/all";

Using the CSS

Furtive provides two CSS files: furtive.css, and a minified version furtive.min.css. In order to use one, you can add a <link> in your <head>.

<!DOCTYPE html>
  <!-- ... -->
  <link rel="stylesheet" href="/path/to/furtive/css/furtive.min.css">
  <!-- ... -->
  <!-- ... -->

Using the Stylus

Similarly to the SCSS option, you can import stylus files as well, all stylus files are in the stylus directory.


Detailed documentation and examples can be found at

Keep Furtive as lightweight as possible

It's recommended to use Furtive with uncss, ensuring that only the CSS that is being used are included. An example of uncss in action with gulp:

gulp.task('uncss', function() {
  return gulp.src('css/furtive.min.css')
    .pipe(size({ gzip: true, showFiles: true }))
    .pipe(uncss({ html: ['index.html'] }))
    .pipe(size({ gzip: true, showFiles: true }))

The above example task is what's used by It allows that page to save about 30%, shrinking even further from 2.5kB to 1.8kB.

furtive [uncss●●] % gulp uncss
[12:23:43] Using gulpfile ~/code/frnt/furtive/gulpfile.js
[12:23:43] Starting 'uncss'...
[12:23:43] furtive.min.css 2.52 kB (gzipped)
[12:23:44] index.furtive.min.css 1.8 kB (gzipped)
[12:23:44] Finished 'uncss' after 970 ms




  1. Fork it
  • Create your feature branch (git checkout -b my-new-feature)
  • Install the dependencies and run gulp (npm i && gulp)
  • Commit your changes (git commit -am 'Add some feature')
  • Push to the branch (git push origin my-new-feature)
  • Create new Pull Request

Thanks to the following:

Crafted with <3 by John Otander (@4lpine).

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.