# Poole *The Strange Case of Dr. Jekyll and Mr. Hyde* tells the story of a lawyer investigating the connection of two persons, Dr. Henry Jekyll and Mr. Edward Hyde. Chief among the novel's supporting cast is a man by the name of Mr. Poole, Dr. Jekyll's loyal butler. ----- Poole is the butler for [Jekyll](http://jekyllrb.com), the static site generator. It's designed and developed by [@mdo](https://twitter.com/mdo) to provide a clear and concise foundational setup for any Jekyll site. It does so by furnishing a full vanilla Jekyll install with example templates, pages, posts, and styles. ![Poole](https://f.cloud.github.com/assets/98681/1834359/71ae4048-73db-11e3-9a3c-df38eb170537.png) See Poole in action with [the demo site](http://demo.getpoole.com). There are currently two official themes built on Poole: * [Hyde](http://hyde.getpoole.com) * [Lanyon](http://lanyon.getpoole.com) Individual theme feedback and bug reports should be submitted to the theme's individual repository. ## Contents - [Usage](#usage) - [Options](#options) - [Rems, `font-size`, and scaling](#rems-font-size-and-scaling) - [Development](#development) - [Author](#author) - [License](#license) ## Usage ### 1. Install dependencies Poole is built on Jekyll and uses its built-in SCSS compiler to generate our CSS. Before getting started, you'll need to install the Jekyll gem: ```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. **Need syntax highlighting?** Poole includes support for Pygments or Rouge, so install your gem of choice to make use of the built-in styling. 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, Poole includes everything you need for a basic Jekyll site. To that end, just download Poole 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 Poole 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 Poole applied, start a Jekyll server. In Terminal, from `/poole` (or whatever your Jekyll site's root directory is named): ```bash $ jekyll serve ``` Open in your browser, and voilà. ### 4. Serving it up If you host your code on GitHub, you can use [GitHub Pages](https://pages.github.com) to host your project. 1. Fork this repo and switch to the `gh-pages` branch. 1. If you're [using a custom domain name](https://help.github.com/articles/setting-up-a-custom-domain-with-github-pages), modify the `CNAME` file to point to your new domain. 2. If you're not using a custom domain name, **modify the `baseurl` in `_config.yml`** to point to your GitHub Pages URL. Example: for a repo at `github.com/username/poole`, use `http://username.github.io/poole/`. **Be sure to include the trailing slash.** 3. Done! Head to your GitHub Pages URL or custom domain. No matter your production or hosting setup, be sure to verify the `baseurl` option file and `CNAME` settings. Not applying this correctly can mean broken styles on your site. ## Options Poole includes some customizable options, typically applied via classes on the `` element. ### Rems, `font-size`, and scaling Poole is built almost entirely with `rem`s (instead of pixels). `rem`s are like `em`s, but instead of building on the immediate parent's `font-size`, they build on the root element, ``. By default, we use the following: ```css html { font-size: 16px; line-height: 1.5; } @media (min-width: 38em) { html { font-size: 20px; } } ``` To easily scale your site's typography and components, simply customize the base `font-size`s here. ## Install as a gem-based theme Jekyll encourage the use of `bundler` to manage themes and plugins. [Themes](https://jekyllrb.com/docs/themes/) can be packaged as Ruby gems since Jekyll 3.3. If you don't intend to modify the theme a lot, this is a nice way of focusing on your content and benefits from theme updates. ### 1. Install theme 1. Create a folder that will be your Jekyll source directory, e.g `blog`. 2. Create a `Gemfile` in your source directory to list all theme dependencies, it should looks like this: ```ruby # frozen_string_literal: true source "https://rubygems.org" gem "jekyll", "~> 3.7.0" gem "jekyll-theme-poole", "~> 2.0" ``` ### 2. Configuration 1. Run `bundle install` to install all theme dependencies. 2. Copy [`_config.yml`](example/_config.yml), [`index.html`](example/index.html), [`404.html`](example/404.html) (and [`about.md`](example/about.md)) from this repository's [example files](example) to your source directory. 3. Run `bundle exec jekyll serve --livereload` to preview your website locally. If you list the files in your source directory, don't be surprised if you only see: ``` ├── 404.html # default 404 page template ├── Gemfile # bundler configuration ├── Gemfile.lock # bundler version lock ├── _config.yml # jekyll configuration ├── _posts # your posts are here ├── _site # default destination build directory ├── about.md # default example page └── index.html # list all the posts on the homepage ``` :bulb: When you use gem-based themes, the themes files don't appear in your source directory, they're packaged within the gem. If you wonder where the original theme files are, `bundler` allows you to show a gem content: ```sh tree $(bundle show jekyll-theme-poole) ├── LICENSE.md ├── README.md ├── _includes │ └── head.html ├── _layouts │ ├── default.html │ ├── home.html │ ├── page.html │ └── post.html ├── _sass │ ├── _base.scss │ ├── _code.scss │ ├── _layout.scss │ ├── _masthead.scss │ ├── _message.scss │ ├── _pagination.scss │ ├── _posts.scss │ ├── _syntax.scss │ ├── _type.scss │ └── _variables.scss └── assets ├── apple-touch-icon-precomposed.png ├── favicon.ico └── styles.scss ``` If you want to customize the theme, you'll have to copy the files you need to modify in your source directory. Report to jekyll's documentation to learn [how to override a theme](https://jekyllrb.com/docs/themes/#overriding-theme-defaults). ## Development Poole has two branches, but only one is used for active development. - `master` for development. **All pull requests should be to submitted against `master`.** - `gh-pages` for our hosted site, which includes our analytics tracking code. **Please avoid using this branch.** CSS is handled via Jeykll's built-in Sass compiler. Source Sass files are located in `_sass/`, included into `styles.scss`, and compile to `styles.css`. ## Author **Mark Otto** - - ## License Open sourced under the [MIT license](LICENSE.md). <3