This plugin hasn’t been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.

Line In Typography for WordPress

Description

“You know, for grids.” #obscurefilmreferences

This plugin allows you to overlay a 12 or 16 column fluid grid to check your positioning when developing fluid or responsive sites.

It also assists you by overlaying lines based on your theme’s line height so that you can correctly set your vertical rhythm and line up all of your typography to a baseline grid like the titan of typography that I’m certain you are.

One should be aware that this is a plugin primarily promoted to pixel pushers and isn’t for production use. You would do well to know quite a bit about CSS and you should know how your theme is laid out in the HTMLs before using this plugin.

Much to my deep sorrow, it is but a certainty that this fine piece of positional plugin prowess won’t work with IE 8 and below (but, surely, one would not be so foolish as to create sites using IE as a development browser) as it requires the magnificent background-size: 100% CSS3 property to be present. Which in IE, to my great distress, it’s not.

Roadmap

0.3.0

  • Allow user to set the wrapping element that the line-height is derived from
  • Consistent styling on overlay box ( not overridden by theme styles)
  • More thorough validation checks (check for either a . or a # on each of the DOM elements coming in and make sure there are no spaces)
  • Ability to upload custom column images

0.4.0

  • Better UI and more clear instructions
  • Better cross-browser support
  • Option to set grid/lines to on or off on page load

0.5.0

  • Option to have the control panel hidden or shown and to have the previous state remembered

Screenshots

  • The lines activated, with the test paragraph at the top and the control panel displayed.
  • Grids activated with the control panel hidden. Notice that the grids override the current background on the elements that they're applied to so they're not hidden.

Installation

  1. Upload the ‘line-in-typography’ folder to your /wp-content/plugins/ directory
  2. Activate the plugin through the ‘Plugins’ menu in WordPress
  3. Go to Settings -> Line In Typography and edit your settings (you’ll need to know which elements you want to apply the grid to)
  4. As if by magic, a control panel should appear on the user side where you should be able to toggle the various options.

FAQ

Will this make my theme have amazing typography?

Oh my dear fellow, good grief no. A computer? Automatically setting type? Mr Gutenberg would be aghast at such a thought!

Fear not though, friend, for I have a solution for you! The Inter Web Network!

I would advise a thorough study of this article on composing to a vertical rhythm.

Don’t worry, old chap, it took me a good long while to make sense of this obfuscated balderdash too. Should I ever be blessed with a moment, it would cheer me no end to publish some articles about this very topic (maybe with some LESS mixins) over on my web design blog.

Contributors & Developers

“Line In Typography for WordPress” is open source software. The following people have contributed to this plugin.

Contributors

Changelog

0.3.5

  • Improved API
  • Ability to upload custom column images

0.3.4

  • Pseudo-namespacing on the Pages base class and the Settings API base class. Should help to avoid conflicts with other Line In products and other plugins that use these classes. When PHP5.3 is widespread, I will be happy.

0.3.3

  • Minor bug fixes

0.3.2

  • Updates to the settings API base class.
  • “Improvements” to the About box.

0.3.2

  • Minor updates to the base classes

0.3.1

  • When WP_DEBUG is true, styles and scripts will use time() as version to prevent caching
  • Changes to the Settings API base class
  • Added cache-busting support to the base page class.

0.3.0

  • Revamped Admin page to take advantage of Meta boxes and the Settings API
  • Huge code refactoring to have better reusable base classes to build future plugins on
  • Added About Line In meta box

0.2.2

  • 16 column grid was missing the background-size: 100% declaration

0.2.1

  • Added screenshots
  • Updated Readme with more detailed instructions

0.2.0

  • Added options page using settings API
  • Now outputs those options to be picked up by the javascript
  • Removed option to set font size (irrelevant, as everything is based on Line Height anyway)

0.1.0

  • Initial Release