An elegant, open source, mobile first theme for Jekyll.
CSS
Pull request Compare This branch is 5 commits ahead, 43 commits behind poole:master.
Latest commit d765408 Dec 29, 2013 @mdo update readme

README.md

Hyde 1.x has been deprecated for the upcoming Hyde 2.0, available here.

Hyde

An elegant open source, mobile first theme for Jekyll. It includes lightweight styles and placeholder content to get you up and running with a simple blog in no time.

Hyde screenshot

Usage

1. Install Jekyll

Hyde is built for use with Jekyll, so naturally you'll need to install that. On Macs, it's rather straightforward:

$ gem install jekyll

Windows users: Windows users have a bit more work to do, but luckily @juthilo has your back with his Run Jekyll on Windows guide.

You may also need to install Pygments, the Python syntax highlighter for code snippets that plays nicely with Jekyll. Read more about this in the Jekyll docs.

2a. Quick start

To help anyone with any level of familiarity with Jekyll quickly get started, Hyde includes everything you need for a basic Jekyll site. To that end, just download Hyde and start up Jekyll.

2b. Roll your own Jekyll site

Folks wishing to use Jekyll's templates and styles can do so with a little bit of manual labor. Download Hyde and then copy what you need (likely _layouts/, *.html files, atom.xml for RSS, and public/ for CSS, JS, etc.).

3. Running locally

To see your Jekyll site with Hyde applied, start a Jekyll server. In Terminal, from /hyde (or whatever your Jekyll site's root directory is named):

$ jekyll serve

Open http://localhost:4000 in your browser, and voilà. You're done.

Options

Hyde includes a few options, typically applied via classes on the <body> element.

Themes

As of v1.1, Hyde ships with optional themes based on the base16 color scheme. In Hyde, a theme simply changes the sidebar's background color and the color of links within blog posts. Here's the red theme in action:

Hyde in red

There are eight themes available at this time.

Hyde theme classes

To use a theme, add any one of the available theme classes to the <body> element like so:

<body class="theme-base-08">
  ...
</body>

To create your own theme, look to the Themes section of Hyde's CSS. Copy any existing theme (they're only a few lines of CSS), rename it, and change the provided colors.

Reverse layout

Hyde with reverse layout

Hyde's page orientation can be reversed with a single class.

<body class="layout-reverse">
  ...
</body>

Author

Mark Otto https://github.com/mdo https://twitter.com/mdo

License

Open sourced under the MIT license.

<3