GithubHelp home page GithubHelp logo

thebinarypenguin / hyde Goto Github PK

View Code? Open in Web Editor NEW

This project forked from poole/hyde

1.0 2.0 0.0 160 KB

An elegant two-column theme for Jekyll.

Home Page: http://hyde.getpoole.com

License: Other

CSS 100.00%

hyde's Introduction

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

hyde's People

Contributors

mdo avatar chrisdwheatley avatar thebinarypenguin avatar benbalter avatar cvrebert avatar parkr avatar

Stargazers

 avatar

Watchers

 avatar James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.