Furtive 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.

.col-2-6--md

.col-4-6--md

.col-3-6--md

.col-4-6--md

.col-2-6--md

.col-2-6--lg

.col-4-6--lg

.col-3-6--lg

.col-4-6--lg

.col-2-6--lg

Buttons

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

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.

Tables

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

Colors

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

Backgrounds

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

.bg--white

.bg--off-white

.bg--light-gray

.bg--mid-gray

.bg--dark-gray

.bg--red

.bg--orange

.bg--blue

.bg--green

Borders

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

.brdr--off-white

.brdr--light-gray

.brdr--mid-gray

.brdr--dark-gray

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

Lists

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

Ordered

Apples
Bananas
Oranges

Unordered

Apples
Bananas
Citrus

Limes
Oranges
Grapefruit

Unstyled

Apples
Bananas
Oranges

Utilities

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

Padding

.p0

.p1

.p2

.py1

.py2

.px1

.px2

Margin

.m0

.m1

.m2

.my1

.my2

.mx1

.mx2

Floats

Float Left: .flt--left
Float Right: .flt--right
Float None: .flt--none

Text Alignment

.txt--left

.txt--right

.txt--center

Type

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.

Utilities

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

Headings

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