Skip to content

A brazen two-column theme for Jekyll. A bootstrap port from @mdo's hyde theme.

Notifications You must be signed in to change notification settings

jadar/hyde-bootstrap

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

This version of Hyde has been ported to Jekyll bootstrap by Jadar.

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>

###Removing project-specific navigation content

To remove the "GitHub Project" and "Download" and "Vesion v" from the site's navigation bar, simply change a setting in your site config.

github:
  repo: false

Author

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

License

Open sourced under the MIT license.

<3

About

A brazen two-column theme for Jekyll. A bootstrap port from @mdo's hyde theme.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published