theme support

How to Declutter your Design

Carol Skelly:

So here’s what I’ve learned, and the rules that a I loosely follow when thinking “declutter”.

Keep whitespace on the sides of the main content area (except on mobile devices).

Increase horizontal & vertical space between sections (ie; text blocks, cards).

Increase line-height of paragraphs.

Control use of accent colors in terms of frequency & proximity to other colors.

Keep contrasting borders & lines to a minimum.

Establish must-have vs. extra info (content), and then show/hide accordingly.

Try to simplify, or prioritize calls to action.

CSS only scroll indicator

By Mike Riethmuller:

I was interested to see if I could make a scroll indicator like this with just CSS.

Simple Typography with Sass

Making the type on your blog beautiful with ease. Using Sass variables to calculate line heights, font sizes, margins and paddings. You create the amazing content and simply make it beautiful.

intercooler.js

A small helper library that lets you add Ajax functionality to your web app by simply adding specific HTML tags to the target elements.

Use familiar, declarative HTML attributes to add AJAX to your application. Use web standards like CSS, REST and Javascript events to enhance your app.

Grade.js

Flexible typography with CSS locks

Tim Brown:

Experienced typographers know that long lines of text need more line spacing, but line spacing can be tighter for short lines of text. The problem is that on the web, our texts are flexible. So our line spacing needs to flex, too.

This is a continuation of my PXU photoset tutorial, so it assumes that you have completed the first part and checked that it is working properly on your theme.

Here is the collection of  how to use CSS3 transitions to create subtle link effects on hover and enhance user experience. Designed by Brenden Palmer.