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.
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
.col-1
.col-5
.col-2
.col-4
.col-3
.col-3
.col-4
.col-2
.col-5
.col-1
.col-6
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-3-6--md
.col-4-6--md
.col-2-6--md
.col-2-6--lg
.col-4-6--lg
.col-3-6--lg
.col-3-6--lg
.col-4-6--lg
.col-2-6--lg
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.
You can also add .btn--s for smaller buttons.
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.
As Stubbornella would say, the media object saves hundreds of lines of code. Furtive is inclined to agree.
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.
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 | 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.
You can also modify the text color.
.fnt--white .fnt--off-whiteSimple, elegant, and nearly raw HTML. Some things don't really need to change.
There's a collection of utility classes for modifying the interface.
.flt--left.flt--right.flt--noneThe 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
$ npm install --save furtive $ bower install --save furtive $ git clone https://github.com/johnotander/furtive