|
1 | | -# Poole |
| 1 | +# Lanyon |
2 | 2 |
|
3 | | -*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. |
| 3 | +Lanyon is an unassuming [Jekyll](http://jekyllrb.com) theme that places content first by tucking away navigation in a hidden drawer. It's based on [Poole](http://getpoole.com), the Jekyll butler. |
4 | 4 |
|
5 | | ------ |
6 | | - |
7 | | -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. |
8 | | - |
9 | | - |
10 | | - |
11 | | -See Poole in action with [the demo site](http://demo.getpoole.com). |
12 | | - |
13 | | -There are currently two official themes built on Poole: |
14 | | - |
15 | | -* [Hyde](http://hyde.getpoole.com) |
16 | | -* [Lanyon](http://lanyon.getpoole.com) |
17 | | - |
18 | | -Individual theme feedback and bug reports should be submitted to the theme's individual repository. |
| 5 | + |
| 6 | + |
19 | 7 |
|
20 | 8 |
|
21 | 9 | ## Contents |
22 | 10 |
|
23 | 11 | - [Usage](#usage) |
24 | 12 | - [Options](#options) |
25 | | - - [Rems, `font-size`, and scaling](#rems-font-size-and-scaling) |
| 13 | + - [Sidebar menu](#sidebar-menu) |
| 14 | + - [Themes](#themes) |
| 15 | + - [Reverse layout](#reverse-layout) |
26 | 16 | - [Development](#development) |
27 | 17 | - [Author](#author) |
28 | 18 | - [License](#license) |
29 | 19 |
|
30 | 20 |
|
31 | 21 | ## Usage |
32 | 22 |
|
33 | | -### 1. Install dependencies |
| 23 | +Lanyon is a theme built on top of [Poole](https://github.com/poole/poole), which provides a fully furnished Jekyll setup—just download and start the Jekyll server. See [the Poole usage guidelines](https://github.com/poole/poole#usage) for how to install and use Jekyll. |
| 24 | + |
| 25 | + |
| 26 | +## Options |
| 27 | + |
| 28 | +Lanyon includes some customizable options, typically applied via classes on the `<body>` element. |
| 29 | + |
34 | 30 |
|
35 | | -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: |
| 31 | +### Sidebar menu |
36 | 32 |
|
37 | | -```bash |
38 | | -$ gem install jekyll |
| 33 | +Create a list of nav links in the sidebar by assigning each Jekyll page the correct layout in the page's [front-matter](http://jekyllrb.com/docs/frontmatter/). |
| 34 | + |
| 35 | +``` |
| 36 | +--- |
| 37 | +layout: page |
| 38 | +title: About |
| 39 | +--- |
39 | 40 | ``` |
40 | 41 |
|
41 | | -**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. |
| 42 | +**Why require a specific layout?** Jekyll will return *all* pages, including the `atom.xml`, and with an alphabetical sort order. To ensure the first link is *Home*, we exclude the `index.html` page from this list by specifying the `page` layout. |
42 | 43 |
|
43 | | -**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). |
44 | 44 |
|
45 | | -### 2a. Quick start |
| 45 | +### Themes |
46 | 46 |
|
47 | | -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. |
| 47 | +Lanyon 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). |
48 | 48 |
|
49 | | -### 2b. Roll your own Jekyll site |
| 49 | + |
| 50 | + |
50 | 51 |
|
51 | | -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.). |
| 52 | +There are eight themes available at this time. |
52 | 53 |
|
53 | | -### 3. Running locally |
| 54 | + |
54 | 55 |
|
55 | | -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): |
| 56 | +To use a theme, add any one of the available theme classes to the `<body>` element in the `default.html` layout, like so: |
56 | 57 |
|
57 | | -```bash |
58 | | -$ jekyll serve |
| 58 | +```html |
| 59 | +<body class="theme-base-08"> |
| 60 | + ... |
| 61 | +</body> |
59 | 62 | ``` |
60 | 63 |
|
61 | | -Open <http://localhost:4000> in your browser, and voilà. |
| 64 | +To create your own theme, look to the Themes section of [included CSS file](https://github.com/poole/lanyon/blob/master/public/css/lanyon.css). Copy any existing theme (they're only a few lines of CSS), rename it, and change the provided colors. |
62 | 65 |
|
63 | | -### 4. Serving it up |
64 | 66 |
|
65 | | -If you host your code on GitHub, you can use [GitHub Pages](https://pages.github.com) to host your project. |
| 67 | +### Reverse layout |
66 | 68 |
|
67 | | -1. Fork this repo and switch to the `gh-pages` branch. |
68 | | - 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. |
69 | | - 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.** |
70 | | -3. Done! Head to your GitHub Pages URL or custom domain. |
| 69 | + |
| 70 | + |
71 | 71 |
|
72 | | -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. |
| 72 | +Reverse the page orientation with a single class. |
| 73 | + |
| 74 | +```html |
| 75 | +<body class="layout-reverse"> |
| 76 | + ... |
| 77 | +</body> |
| 78 | +``` |
73 | 79 |
|
74 | | -## Options |
75 | 80 |
|
76 | | -Poole includes some customizable options, typically applied via classes on the `<body>` element. |
| 81 | +### Sidebar overlay instead of push |
77 | 82 |
|
| 83 | +Make the sidebar overlap the viewport content with a single class: |
78 | 84 |
|
79 | | -### Rems, `font-size`, and scaling |
| 85 | +```html |
| 86 | +<body class="sidebar-overlay"> |
| 87 | + ... |
| 88 | +</body> |
| 89 | +``` |
| 90 | + |
| 91 | +This will keep the content stationary and slide in the sidebar over the side content. It also adds a `box-shadow` based outline to the toggle for contrast against backgrounds, as well as a `box-shadow` on the sidebar for depth. |
80 | 92 |
|
81 | | -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, `<html>`. |
| 93 | +It's also available for a reversed layout when you add both classes: |
82 | 94 |
|
83 | | -By default, we use the following: |
| 95 | +```html |
| 96 | +<body class="layout-reverse sidebar-overlay"> |
| 97 | + ... |
| 98 | +</body> |
| 99 | +``` |
84 | 100 |
|
85 | | -```css |
86 | | -html { |
87 | | - font-size: 16px; |
88 | | - line-height: 1.5; |
89 | | -} |
90 | | -@media (min-width: 38em) { |
91 | | - html { |
92 | | - font-size: 20px; |
93 | | - } |
94 | | -} |
| 101 | +### Sidebar open on page load |
95 | 102 |
|
| 103 | +Show an open sidebar on page load by modifying the `<input>` to add the `checked` boolean attribute: |
| 104 | + |
| 105 | +```html |
| 106 | +<input type="checkbox" class="sidebar-checkbox" id="sidebar-checkbox" checked> |
96 | 107 | ``` |
97 | 108 |
|
98 | | -To easily scale your site's typography and components, simply customize the base `font-size`s here. |
| 109 | +Using Liquid you can also conditionally show the sidebar open on a per-page basis. For example, here's how you could have it open on the homepage only: |
99 | 110 |
|
| 111 | +```html |
| 112 | +<input type="checkbox" class="sidebar-checkbox" id="sidebar-checkbox" {% if page.title =="Home" %}checked{% endif %}> |
| 113 | +``` |
100 | 114 |
|
101 | 115 | ## Development |
102 | 116 |
|
103 | | -Poole has two branches, but only one is used for active development. |
| 117 | +Lanyon has two branches, but only one is used for active development. |
104 | 118 |
|
105 | 119 | - `master` for development. **All pull requests should be to submitted against `master`.** |
106 | 120 | - `gh-pages` for our hosted site, which includes our analytics tracking code. **Please avoid using this branch.** |
107 | 121 |
|
108 | | -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`. |
109 | 122 |
|
110 | 123 | ## Author |
111 | 124 |
|
|
0 commit comments