Basic Maths

$65

basicmaths-beautiful

Basic Maths is one of the best-looking, elegant, and smartly-designed themes we’ve ever seen. If you want to make a statement about how important your content is, Basic Maths might be the answer.

An extraordinary amount of care and attention went into making Khoi Vinh and Allan Cole’s Basic Maths so attractive — and so usable! Let’s take a look at what it can do for your blog.

Basic Maths also offers you the ability to choose your own font colors for your links and make the theme truly your own.

The Options

There are a number of Theme Options that allow you to customize certain areas of Basic Maths. These option can be found at Appearance > Theme Options.

  1. Link Color: Change the color of links, backgrounds and borders by entering a HEX color number.
  2. Hover Color: Change the color of hover links by entering a HEX color number.
  3. Top Tag Count: Choose the number of ‘Top Tags’ to display in the header. (Set to 0 to show all tags.)
  4. Show Categories: Check this box to display a list of Categories in the header instead of Tags.
  5. Archives: Use this option to insert the slug of the page using the Archives template. (example: For a page Titled “History” that uses the Archives template, insert the slug history so that the “All Tags” link points to the correct page).

Grid-tastic!

Every template of Basic Maths is carefully based on a rational, methodical typographic grid for impeccable layout guidance. (Just hit SHIFT + ALT + G to see it on any page!)

Basic Maths is based on the landmark design of Khoi’s own Subtraction.com, so you can rest assured that it’s one of the most thoughtful and well constructed grid-based designs you’ll find anywhere.

Your Images and the Grid

To make the most out of Basic Maths, you should update the sizes of your media uploads. To do so, go to Settings > Media and set the sizes like:

  • THUMBNAIL max width to 170 and the max height to 170 (Be sure to crop the thumbnail).
  • MEDIUM max width to 440. Then set the max height to 440 or larger.
  • LARGE max width to 620. Then set the max height to 620 or larger.

Basic Maths will try its best to correctly display your previously uploaded pictures so you don’t need to re-upload them. You can see how the different possibilities with images are rendered on our demo site.

Menus

Like all our themes, Basic Maths supports Custom Menus that allow you to create your own custom menu links with up to two levels of depth.

Custom Header Logo

Basic Maths allows you to add a custom header image. You need to navigate to Appearance > Header in your Dashboard and follow the on-screen instructions to upload your own custom header images. You can also choose one of the defaults. Near the bottom of that page you can also choose to show or hide your site title over your header image.

Page Templates

This theme includes an Archives page template, which shows a list of all your Tags and Categories along with a date based Archive at the bottom. To use it, edit the page you would like to display the template, and select the Basic Maths Archive Template from the Page Template dropdown menu.

Control the Layout

With Basic Maths you can arrange your content in different ways by using div tags and adding some classes. We have documented this process and showing some examples on the demo site.

Basic Maths theme documentation

Learn all about Basic Maths on the Theme Showcase page.

The Basic Maths grid design offers several layout possibilities for your content. Even though the theme works smoothly without any intervention on your part, you may still want to achieve a special look by adding extra classes to HTML markup in your posts.

Note: These extra classes are meant to be used by site owners who feel comfortable using the “code” view in the post editor and who have a basic HTML knowledge.

Columns
You can create “div” elements and add classes to them such as “leftcolumn”, “rightcolumn” or “topcolumn” to achieve different looks. See this demo page for examples and a code snippet.

When adding markup to your posts, be sure to close the HTML tags to avoid layout issues.

Note: These classes are mostly meant to be used on pages rather than posts, since you get better results with a wider body content area on pages.

Images

In the same way you can create “div” elements with classes you can also achieve different layout options for your images by adding classes to them. We have an exhaustive example page for you to examine.

Hanging content

There are even more possibilities if you want to be adventurous with extra classes:

“hang-2-column”—Adds a wrapping element for floating content 2 column to the left.

“hang-1-column”—Adds a wrapping element for floating content 1 column to the left.

“no-hang”—Adds a wrapping element for adding non-floating content.