Go Code Things: A free WordPress theme for beginners

When I started learning how to build websites, I would spend hours changing lines of code and seeing what happened. I learned a lot, but it was slow and difficult.

I believe exploration is a critical part of how people learn new things, but I want to make the process easier and more intuitive for the next generation of web designers.

Today, I’m proud to announce the release of Go Code Things.

What's Included?

Go Code Things was built with the beginner in mind. Almost every line of HTML and CSS is is documented, making it easier for you to make changes.

/* The "master font" settings for the website. Unless otherwise specified, all text will pick up these settings. */

body {
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size: 15px;
     line-height: 22.5px;
     color: #333333;
     background-color: #ffffff;
}

It’s worth noting that the documentation does add a little weight to the code. Think of it like training wheels. It’s helpful to get you started, but at some point you’ll want to take it away for better performance.

Responsive Web Design

Go Code Things comes responsive right out of the box, so it looks great whether you’re on a desktop, smart phone, or anything in-between.

Responsive web design shouldn’t be an after thought. Learn how to build responsive from the start.

Structure & Semantics

Go Code Things is built on the same framework as this site previous framework for this site, using HTML5 and CSS3 on 960 pixel grid for desktops. It uses a rough approximation of the rule of thirds. Here’s the basic page structure…

Typography

The base font family for Go Code Things is Helvetica Neue, with Arial and sans-serif fallbacks for systems that don’t have that font.

It includes styling for H1 through H6, and individual control over the body, header, footer and sidebar text. There’s also unique styling for meta information (post dates, categories and such) and code (like the example above).

Icon Font

Go Code Things comes with twelve social sharing icons provided by IcoMoon, a fantastic app for creating icon fonts.

Because the icons are a font instead of an image, they look great at any size, even on the new iPad retina display. They can also be styled using CSS, including gradients and shadows.

You can add icons to your HTML using the <i class=“icon”></i> tag and the appropriate class name. For example, to insert a Facebook icon anywhere on your site, you would simply add <i class=“icon facebook”></i> to your HTML.

Font embedding is supported all the way back to IE4. And because it’s a single file weighing in at just 8kb (for most filetypes), it’s fast and easy for browsers to download, and only requires one HTTP request.

IcoMoon fonts are licensed under Creative Commons Attribution-Sharealike.

Buttons anywhere!

Add buttons anywhere on your site by adding the class .btn to links, divs and more. To make a button larger, also add the class .large-btn.

For example, a large button like the one at the top of this page would be written as:

<a href="#" class="btn btn-large">Button Text</a>

This technique was adapted from the Twitter Bootstrap framework.

Built-in social sharing

Social sharing buttons are built-in for Twitter and Facebook. They take advantage of the icon font set and button class, so they can be highly customized, placed anywhere, and look amazing on retina displays. Thanks to a snippet of javascript, social sharing links open in a pop-up window on desktops.

You can add additional links using the built-in icon set. To turn a link into a social sharing button, use the .btn-sm class. Do not include .btn or .btn-large.

Forms & Tables

Go Code Things includes basic form styling for search boxes, comment forms, and “subscribe by email” buttons. If you’re looking for more robust forms, you may want to check out Twitter Bootstrap.

Also included is styling for simple, bordered, condensed and striped tables. This code was shamelessly borrowed from the Twitter Bootstrap framework. Click here to see it in action.

What's not included?

Go Code Things is intentionally simple. It does not include lots of components and cool javascript like a some frameworks do. That means it doesn’t have things like drop-down menus, modals or tabs. If you’re looking for something more robust, Twitter Bootstrap is an amazing framework with pretty much everything you could ever want in a framework (except the built-in documentation).

This theme, like WordPress, is licensed under the GNU General Public License as published by the Free Software Foundation. Click here to view a copy.

This theme is distributed in the hope that it will be useful, but without any warranty, and without even the implied warranty of fitness for a particular purpose. And while I tried to be as robust as I could in the documentation, I unfortunately cannot promise any support should you find yourself stuck (though that’s pretty typical of most free WordPress themes).

Build cool stuff

It’s my hope that if you’re new to web design, this theme will help you build some cool stuff. If you do, I’d love for you to let me know. Drop me a line and show me your work.