GitHub Pages Midnight Theme

Design for the web to succeed and you too will succeed.

Project maintained by mattgraham Hosted on GitHub Pages — Theme by mattgraham

Welcome to Pages

This automatic page generator is the easiest way to create beautiful pages for all of your projects. Author your page content here using GitHub Flavored Markdown, select a template crafted by a designer, and publish. After your page is generated, you can check out the new branch.

$ cd your_repo_root/repo_name
$ git fetch origin
$ git checkout gh-pages

As we do, we're open sourcing the front end code for the new GitHub pages themes. This is just one of the many beautiful themes that can used to dynamically turn your static repo into a beautiful marketing site.

Designer Templates

We've crafted some handsome templates for you to use. Go ahead and continue to layouts to browse through them. You can easily go back to edit your page before publishing. After publishing your page, you can revisit the page generator and switch to another theme. Your page content will be preserved if it remained in markdown format.

Hack by Ben Bleikamp
Merlot by Cameron McEfee
Slate by Jason Costello
Time Machine by Jon Rohan
Leap Day by Matt Graham
Midnight by Matt Graham
Minimal by Steve Smith
Modernist by Steve Smith

For more info on GitHub Pages, check out pages.github.com. For help, check the GitHub Pages documentation.

What will code look like?

Your code should be beautiful, or at least that's what the designers think.

require 'adapter/memory'
require 'toystore'

class User
  include Toy::Store
  adapter :memory, {}

  attribute :name, String
end

So, this is what HTML Code looks like

<html>
   <body>
      <div id="header">
          <nav>
             <li>Home</li>
             <li>About Us</li>
             <li>Contact</li>
          </nav>
      </div>
   </body>
</html>

And, then maybe some CSS

body {
  font:14px/22px 'Quattrocento Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
  color:#666;
  font-weight:300;
  margin: 0px;
  padding:0px 0 20px 0px;
  background: url(../images/body-background.png) #eae6d1;
}

h1, h2, h3, h4, h5, h6 {
  color:#333;
  margin:0 0 10px;
}

p, ul, ol, table, pre, dl {
  margin:0 0 20px;
}

Inline code would look a little different. We want you to see where it is, but its going to be a little less noticeable. It might also be as simple as :hover and as unique as :first-child. It is up to you.

Who's this Matt Graham?

Product designer and frontend developer at Heroku. Formerly with GitHub, Ordered List etc. Rescue diver. He can be found on Twitter, GitHub and around the country for numerous events. Feel free to fork and use this team as you wish.