Skip to content

Commit

Permalink
start in on v2
Browse files Browse the repository at this point in the history
  • Loading branch information
mdo committed Dec 30, 2013
1 parent 989e5c2 commit 4a61f5a
Show file tree
Hide file tree
Showing 11 changed files with 500 additions and 433 deletions.
64 changes: 9 additions & 55 deletions 404.html
Original file line number Diff line number Diff line change
@@ -1,55 +1,9 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0, maximum-scale=1">
<link href="http://gmpg.org/xfn/11" rel="profile">

<title>
Hyde, a Jekyll theme
</title>

<!-- CSS -->
<link rel="stylesheet" href="/public/css/hyde.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400italic,400,600,700|Abril+Fatface">

<!-- Icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/public/touch-icon-144-precomposed.png">
<link rel="shortcut icon" href="/public/favicon.png">

<!-- RSS -->
<link rel="alternate" type="application/rss+xml" title="RSS" href="/atom.xml">
</head>
<body>

<header class="masthead">
<div class="masthead-inner">
<h1>Hyde</h1>
<p class="lead">An elegant open source and mobile first theme for <a href="http://jekyllrb.com" target="_blank">Jekyll</a>. Made by <a href="https://twitter.com/mdo" target="_blank">@mdo</a>.</p>

<div class="colophon">
<ul class="colophon-links">
<li>
<a href="https://github.com/mdo/hyde/archive/v1.0.0.zip">Download</a>
</li>
<li>
<a href="https://github.com/mdo/hyde">GitHub project</a>
</li>
<li>Currently v1.1</li>
</ul>
<p>&copy; 2013. All rights reserved.</p>
</div>

</div>
</header>

<div class="content container">
<h1>404: Page not found</h1>
<p class="lead">Sorry, we've misplaced that URL or it's pointing to something that doesn't exist. <a href="/">Visit the home page</a> to see if you can find it manually. Thanks!</p>
<hr>
<h3>Heads up!</h3>
<p>This is a basic 404 page for use with GitHub Pages. It's source code is not generated by Jekyll.</p>
</div>

</body>
</html>
---
layout: default
title: "404: Page not found"
---

<div class="page">
<h1 class="page-title">404: Page not found</h1>
<p class="lead">Sorry, we've misplaced that URL or it's pointing to something that doesn't exist. <a href="/">Head back home</a> to try finding it again.</p>
</div>
46 changes: 15 additions & 31 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,66 +1,50 @@
# [Hyde](http://andhyde.com)
# Hyde

An elegant open source, mobile first theme for [Jekyll](https://github.com/mojombo/jekyll). It includes lightweight styles and placeholder content to get you up and running with a simple blog in no time.
Hyde is a [Jekyll](https://github.com/mojombo/jekyll) theme with a fluid landscape layout. It's based on [Poole](https://github.com/poole/poole), the Jekyll butler.

![Hyde screenshot](https://f.cloud.github.com/assets/98681/1818325/da6489d8-6ff5-11e3-9b4f-c56b92013e9a.png)


## Usage
## Installation

### 1. Install Jekyll
### Requires Poole

Hyde is built for use with Jekyll, so naturally you'll need to install that. On Macs, it's rather straightforward:
To get started, download [Poole](https://github.com/poole/poole). See [the usage guidelines](https://github.com/poole/poole#usage) for how to install and get up and running with Jekyll and Poole.

```bash
$ gem install jekyll
```

**Windows users:** Windows users have a bit more work to do, but luckily [@juthilo](https://github.com/juthilo) has your back with his [Run Jekyll on Windows](https://github.com/juthilo/run-jekyll-on-windows) guide.

You may also need to install Pygments, the Python syntax highlighter for code snippets that places nicely with Jekyll. Read more about this [in the Jekyll docs](http://jekyllrb.com/docs/templates/#code_snippet_highlighting).

### 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.
### Enabling Hyde

### 2b. Roll your own Jekyll site
Copy over the included files to turn any vanilla Poole site into a Hyde 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):

```bash
$ jekyll serve
```
- Replace `_includes/` with the included folder of the same name (will replace `_includes/head.html` and add `_includes/sidebar.html`)
- Replace `_layouts/default.html` with the included file of the same name
- Move `public/css/hyde.css` to `public/css/`

Open <http://localhost:4000> in your browser, and voilà. You're done.
Then, start up your Jekyll server and go!


## Options

Hyde includes a few options, typically applied via classes on the `<body>` element.
Hyde includes some customizable 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](https://github.com/chriskempson/base16). 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 ships with eight optional themes based on the [base16 color scheme](https://github.com/chriskempson/base16). Apply a theme to change the color scheme (mostly applies to sidebar and links).

![Hyde in red](https://f.cloud.github.com/assets/98681/1818326/da64f56c-6ff5-11e3-9643-7d0c18157dec.png)

There are eight themes available at this time.

![Hyde theme classes](https://f.cloud.github.com/assets/98681/1817044/e5b0ec06-6f68-11e3-83d7-acd1942797a1.png)

To use a theme, add anyone of the available theme classes to the `<body>` element like so:
To use a theme, add anyone of the available theme classes to the `<body>` element in the `default.html` layout, like so:

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

To create your own theme, look to the Themes section of [Hyde's CSS](https://github.com/mdo/hyde/blob/master/public/css/hyde.css). Copy any existing theme (they're only a few lines of CSS), rename it, and change the provided colors.
To create your own theme, look to the Themes section of [included CSS file](https://github.com/poole/hyde/blob/master/public/css/hyde.css). Copy any existing theme (they're only a few lines of CSS), rename it, and change the provided colors.

### Reverse layout

Expand Down
20 changes: 13 additions & 7 deletions _includes/head.html
Original file line number Diff line number Diff line change
@@ -1,21 +1,27 @@
<head>
<link href="http://gmpg.org/xfn/11" rel="profile">
<meta http-equiv="content-type" content="text/html; charset=utf-8">

<!-- Enable responsiveness on mobile devices-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<link href="http://gmpg.org/xfn/11" rel="profile">

<title>
{% if page.title %}{{ page.title }} &middot; {% endif %}
{{ site.tagline }}
{% if page.title %} {{ page.title }}
{% else %}
{{ site.title }}
{% endif %}
&middot; {{ site.tagline }}
</title>

<!-- CSS -->
<link rel="stylesheet" href="/public/css/hyde.css">
<link rel="stylesheet" href="/public/css/poole.css">
<link rel="stylesheet" href="/public/css/syntax.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400italic,400,600,700|Abril+Fatface">
<link rel="stylesheet" href="/public/css/hyde.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700|Abril+Fatface">

<!-- Icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/public/touch-icon-144-precomposed.png">
<link rel="shortcut icon" href="/public/favicon.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/public/apple-touch-icon-144-precomposed.png">
<link rel="shortcut icon" href="/public/favicon.ico">

<!-- RSS -->
<link rel="alternate" type="application/rss+xml" title="RSS" href="/atom.xml">
Expand Down
19 changes: 19 additions & 0 deletions _includes/masthead.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<header class="masthead">
<div class="masthead-inner">
<h1 class="masthead-title">{{ site.title }}</h1>
<p>{{ site.description }}</p>

<div class="colophon">
<ul class="colophon-links">
<li>
<a href="https://github.com/mdo/hyde/archive/v{{ site.version }}.zip">Download</a>
</li>
<li>
<a href="https://github.com/mdo/hyde">GitHub project</a>
</li>
<li>Currently v{{ site.version }}</li>
</ul>
<p>&copy; 2014. {{ site.author.name }} All rights reserved.</p>
</div>
</div>
</header>
20 changes: 1 addition & 19 deletions _layouts/default.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,25 +5,7 @@

<body>

<header class="masthead">
<div class="masthead-inner">
<h1>{{ site.title }}</h1>
<p class="lead">{{ site.description }}</p>

<div class="colophon">
<ul class="colophon-links">
<li>
<a href="https://github.com/mdo/hyde/archive/v{{ site.version }}.zip">Download</a>
</li>
<li>
<a href="https://github.com/mdo/hyde">GitHub project</a>
</li>
<li>Currently v{{ site.version }}</li>
</ul>
<p>&copy; 2014. {{ site.author.name }} All rights reserved.</p>
</div>
</div>
</header>
{% include masthead.html %}

<div class="content container">
{{ content }}
Expand Down
8 changes: 8 additions & 0 deletions _layouts/page.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
layout: default
---

<div class="page">
<h1 class="page-title">{{ page.title }}</h1>
{{ content }}
</div>
2 changes: 1 addition & 1 deletion _layouts/post.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
---

<div class="post">
<h1>{{ page.title }}</h1>
<h1 class="post-title">{{ page.title }}</h1>
<span class="post-date">{{ page.date | date_to_string }}</span>
{{ content }}
</div>
Expand Down
28 changes: 0 additions & 28 deletions _posts/2013-12-28-hello-world.md

This file was deleted.

37 changes: 37 additions & 0 deletions _posts/2013-12-28-introducing-hyde.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
---
layout: post
title: Introducing Hyde
---

Hyde is a [Jekyll](http://jekyllrb.com) theme with a fluid landscape layout. It's based on [Poole](https://github.com/poole/poole), the Jekyll butler, and is designed to showcase your content first and foremost with extraneous information hidden offscreen until the reader requests it.

### Built on Poole

Poole is the Jekyll Butler, serving as an upstanding and effective foundation for Jekyll themes by [@mdo](https://twitter.com/mdo). Poole, and every theme built on it (like Hyde here) includes the following:

* Complete Jekyll setup included (layouts, config, [404](/404), [RSS feed](/atom.xml), posts, and [example page](/about))
* Mobile friendly design and development
* Easily scalable text and component sizing with `rem` units in the CSS
* Support for a wide gamut of HTML elements
* Related posts (time-based, because Jekyll) below each post
* Syntax highlighting, courtesy Pygments (the Python-based code snippet highlighter)

### Hyde features

In addition to the features of Poole, Lanyon adds the following:

* Sidebar includes support for textual modules and a dynamically generated navigation with active link support
* Two orientations for content and sidebar, default (left sidebar) and [reverse](https://github.com/poole/lanyon#reverse-layout) (right sidebar), available via `<body>` classes
* [Eight optional color schemes](https://github.com/poole/hyde#themes), available via `<body>` classes

[Head to the readme](https://github.com/poole/hyde#readme) to learn more.

### Browser support

Hyde is by preference a forward-thinking project. In addition to the latest versions of Chrome, Safari (mobile and desktop), and Firefox, it is only compatible with Internet Explorer 9 and above.

### Download

Hyde is developed on and hosted with GitHub. Head to the <a href="https://github.com/poole/hyde">GitHub repository</a> for downloads, bug reports, and features requests.

Thanks!
Loading

0 comments on commit 4a61f5a

Please sign in to comment.