Progress

Forestry Test

THis is a test using the seemingly super-simple Forestry CMS

img-1.png

Introduction to Progress

Progress was built by Alexander Russell and inspired by Cody House’s Reading Progress Indicator. The folks over at Cody House are pretty fantastic and are making some awesome things. They’re also super responsive to comments, so head on over there and check out what they’ve been doing.

Progress features a quick and simple environment that is set up so users can input all the necesarry info in the config file and start blogging. Further reiterations are in progress to turn this into a Wordpress theme or make it fully editable with Cloudcannon CMS. I cannot let you resell this unless you contact me.

If you’d like give credit somewhere on your blog or tweet a shout out to @alexanderussell, that would be pretty sweet.

If you feel like donating — Give it a thought.

Features:

  • flexible, uses max-width for responsive goodness
  • beautiful reading progress indicator courtesy of CodyHouse
  • retina images using @2x
  • post loop showing 5 posts per page
  • archive for posterity sake

Basic Setup

  1. Install Jekyll if you haven’t already.
  2. Download this bad boy.
  3. Fork the Progress repo
  4. Twerk it out so it’s just for you.
  5. ???
  6. Profit

Preview the Theme


progress-for-jekyll/
├── data
|    ├── navigation.yml  //an array of navigation items for easy editing
├── _includes
|    ├── _footer.html  //site footer
|    ├── _head.html  //site head
|    ├── _header.html  //header for navigation and logo/title
|    ├── _share-post.html  //share buttons
├── _layouts
|    ├── default.html  //all the bare necessities
|    ├── page.html  //page layout
|    └── post.html  //post layout
├── _posts
├── css  //preprocessed styles. good idea to minify
├── img  //images and graphics used in css and js
├── js
|   ├── jquery-2.1.4.js  //jQuery for the win.
|   ├── main.js  //jQuery plugins and settings for the progress indicator.
|   └── modernizer.js  //modernize it, yo.
├── images  //images for posts and pages
├── about.md  //about page
├── archive.md  //lists all posts from latest to oldest organized by date
└── index.html  //homepage. lists 5 most recent posts w/ pagination

Customization

_config.yml

Most of the variables found here are used in the .html files found in _includes if you need to add or remove anything. A good place to start would be to change the title, tagline, description, and url of your site. When working locally comment out url or else you will get a bunch of broken links because they are absolute and prefixed with http://alexanderussell.github.io in the various _includes and _layouts. Just remember to uncomment url when building for deployment or pushing to gh-pages

Owner/Author Information

Change your name, bio, Twitter url, email, Dribbble URL, etc.

Edit page/post titles and URLs to include in the site’s navigation. For external links use “external: true”.

# sample top navigation links
links:
  - title: About Page
    href: /about
  - title: Other Page
    href: /other-page
  - title: External Page
    href: http://alexanderussell.org
    external: true


Other Stuff

The rest is just your average Jekyll config settings. Nothing too crazy here…

_includes

For the most part you can leave these as is since the author/owner details are pulled from _config.yml. That said you’ll probably want to customize the copyright stuff in _footer.html to your liking.

Adding Posts and Pages

There are two main content layouts: post.html (for posts) and page.html (for pages). Pages span the full-width of the content, while posts leave space for related posts and the reading progress indicator when on the longform view.

License

This is free to use, fork, do whatever you want. Please do not sell this design though. You don’t need to link me to it, but please contact me if you intend to market this theme. I am releasing premium versions of this design for select CMS’s.

Now, More Than Ever Before...

We had awoken, or were awakening, and we were striving for an ever perfect state of wakefulness, whereas the ambition and quest for happiness of the others consisted of linking their opinions, ideals, and duties, their life and happiness, ever more closely with those of the herd. They, too, strove; they, too showed signs of strength and greatness. But as we saw it, whereas we marked men represented Nature’s determination to create something new, individual, and forward-looking, the others lived in the determination to stay the same. For them mankind–which they loved as much as we did–was a fully formed entity that had to be preserved and protected. For us mankind was a distant future toward which we were all journeying, whose aspect no one knew, whose laws weren’t written down anywhere. - Hermann Hesse

What's Jekyll?

Jekyll is a static site generator, an open-source tool for creating simple yet powerful websites of all shapes and sizes. From the project’s readme:

Jekyll is a simple, blog aware, static site generator. It takes a template directory […] and spits out a complete, static website suitable for serving with Apache or your favorite web server. This is also the engine behind GitHub Pages, which you can use to host your project’s page or blog right here from GitHub.

It’s an immensely useful tool. Find out more by visiting the project on GitHub.

Post with Figure

This is a post that uses a figure. It stacks these images and places a nice little caption below if you fill out figcaption.

Single Image Figure

Morning Fog Emerging From Trees by A Guy Taking Pictures, on Flickr
1
2
3
4
<figure>
	<img src="/img/img-1.png">
	<figcaption>Caption describing this image.</figcaption>
</figure>