Is Wisp for you?

You should use Wisp if you're embarking on a smaller project or just don't feel like you need all the utility of larger frameworks. Wisp only styles a handful of standard HTML elements, but that's often more than enough to get started. In fact, this site is built on Wisp.

Configuration

A lot of the style choices applied by Wisp can be quickly overridden using CSS Variables. Wisp defines the following variables on the :root pseudo-element:

/* Variables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
  --color-bg: #FDFDFD;
  --color-font: #222;
  --color-font-light: #FFF;

  --color-primary: #1EAEDB;
  --color-primary-light: #33C3F0;
  --color-primary-dark: #0FA0CE;

  --color-secondary: #B90E0A;
  --color-secondary-light: #D21404;
  --color-secondary-dark: #990F02;

  --color-neutral-1: #F1F1F1;
  --color-neutral-2: #D1D1D1;
  --color-neutral-3: #BBB;
  --color-neutral-4: #888;
  --color-neutral-5: #555;
  --color-neutral-6: #333;

  --font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --border-radius: 4px; }

Typography

Type is all set with the rems, so font-sizes and spacial relationships can be responsively sized based on a single <html> or <body>font-size property. All measurements are base 10, so an <h1> with 5.0remfont-size just means 50px.

The typography base is Helvetica, set at 16rem (16px) over a 1.6 line height (26px). Other type basics like anchors, strong, emphasis, and underline are all included.
(This page uses Raleway via Google Fonts)

Headings create a family of distinct sizes each with specific letter-spacing, line-height, and margins.

Heading `<h1>` 50rem

Heading `<h2>` 42rem

Heading `<h3>` 36rem

Heading `<h4>` 30rem

Heading `<h5>` 24rem

Heading `<h6>` 16rem


Heading
Heading
Heading
Heading
Heading
Heading


The base type is 16px over 1.6 line height.


Bolded
Italicized
Colored
Underlined

Buttons

Buttons come in four basic flavors in Wisp. The standard .btn element is plain, whereas the .btn--primary button is vibrant and prominent. The .btn--warning element is a light version of the secondary color, and the .btn--danger element is a bright version of the secondary color. Button styles are applied to a number of appropriate form elements, but can also be arbitrarily attached to anchors with a .btn class.

Anchor button Anchor button

Anchor button


Anchor button





Anchor button





Anchor button





Anchor button

Forms

Forms are a huge pain, but hopefully these styles make it a bit easier. All inputs, select, and buttons are normalized for a common height cross-browser so inputs can be stacked or placed alongside each other.




  Your email
  

  Reason for contacting
  

  Message
  

  
    
    Send a copy to yourself

Toggles

Wisp includes iOS inspired, pure CSS toggle checkboxes. Wrap any checkbox <input> in a span.toggle to enable the styles. Toggles will scale to 60% of the containers font size. They are display: inline-block elements.

Examples:

Accordion

Wisp includes minimal, pure CSS accordion's using the input:checked method.

Checkbox

Pure CSS accordion example.

Open multiple

Using <input type="checkbox"> allows you to have several tabs open at the same time.

Radio

If you want to have only one tab open, you can use <input type="radio">.

One at a time

Pure CSS accordion example.

× close open tab


  
    
    Checkbox
    
      Pure CSS accordion example.
    
  
  
    
    Open multiple
    
      Using <input type="checkbox">
        allows you to have several tabs open at the same time.
    
  



  
    
    Radio
    
      If you want to have only one tab open, you can use
        <input type="radio">.
    
  
  
    
    One at a time
    
      Pure CSS accordion example.
    
  
  
    
    × close open tab

Lists

Unordered lists have basic styles
They use the circle list style
- Nested lists styled to feel right
- Can nest either type of list into the other
More list items...

Ordered lists also have basic styles
They use the decimal list style
- Ordered and unordered can be nested
- Can nest either type of list into the other
Another item...

Code

Code styling is kept basic; just wrap anything in a <code> and it will appear like this. For blocks of code, wrap a <code> with a <pre>.

.block-element--modifier {
  background-color: red;
}

For syntax highlighting (like you see on this page) check out highlight.js

Tables

Be sure to use properly formatted table markup with <thead> and <tbody> when building a <table>.

Name	Age	Sex	Location
Dave Gamache	26	Male	San Francisco
Dwayne Johnson	42	Male	Hayward


  
    
      Name
      Age
      Sex
      Location
    
  
  
    
      Dave Gamache
      26
      Male
      San Francisco
    
    
      Dwayne Johnson
      42
      Male
      Hayward

Tooltips

You can add pure CSS tooltips (hover me) to almost any inline element by adding the .tooltip class and specifying some data via data-tip. The tooltips scale down automatically on small devices, but if you prefer using the small size you can force it with the .tooltip--sm modifier.

tooltips
small size

Media Queries

Wisp uses media queries to adjust typographic settings. The queries are mobile-first, meaning they target min-width. Wisp also provides some display utility classes detailed below. The sizes for the queries are:

/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Larger than phablet (sm) */
@media (min-width: 640px) {}

/* Larger than tablet (md) */
@media (min-width: 768px) {}

/* Larger than desktop (lg) */
@media (min-width: 1024px) {}

/* Larger than Desktop HD (xl) */
@media (min-width: 1280px) {}

/* Extra large (2xl) */
@media (min-width: 1536px) {}

Utilities

Wisp includes the following display utility classes:

.sm-hide: Hide on screen sizes small and larger.
.md-hide: Hide on screen sizes medium and larger.
.lg-hide: Hide on screen sizes large and larger.
.xl-hide: Hide on screen sizes xl and larger.
.xxl-hide: Hide on screen sizes 2xl and larger.

.sm-show: Show on screen sizes small and larger.
.md-show: Show on screen sizes medium and larger.
.lg-show: Show on screen sizes large and larger.
.xl-show: Show on screen sizes xl and larger.
.xxl-show: Show on screen sizes 2xl and larger.

Javascript

You can use the Wisp stylesheet on its own, but there are two features that require including the wisp.js file as well. Specifically, button ripple effects, and the back-to-top button.

Ripple effect: Ripple button

Add .btn .btn--ripple to a button or anchor.

Back-to-top (see page for demo)

Add <a href="#" id="back-to-top"></a> to your page.

Where's the grid?

Wisp doesn't come with any prebuilt grid or layout helpers like many other CSS frameworks and boilerplates. Modern browsers have powerful display: grid functionality on their own. Even better, theres display: flex to handle all of your layout needs. There are a lot of great resources out there on layout strategies with these systems. I recommend you use flexbox or grid styles as needed and not constrain yourself to a prebuilt framework grid.

Is Wisp for you?

Configuration

Typography

Heading <h1> 50rem

Heading <h2> 42rem

Heading <h3> 36rem

Heading <h4> 30rem

Heading <h5> 24rem

Heading <h6> 16rem

Heading

Heading

Heading

Heading

Heading

Heading

Buttons

Forms

Toggles

Accordion

Lists

Code

Tables

Tooltips

Media Queries

Utilities

Javascript

Where's the grid?

Heading `<h1>` 50rem

Heading `<h2>` 42rem

Heading `<h3>` 36rem

Heading `<h4>` 30rem

Heading `<h5>` 24rem

Heading `<h6>` 16rem