/madzak.com

madzak.com site

hyde-bootstrap

A layout for Hyde using the Bootstrap framework.

Current stable version: v0.2

Demo

I'm working on getting a demo site up. For now, you can look at the specific Bootstrap example layout this was based on.

Setup

The simplest way to use this layout is to:

Using a Zip File

  1. Download the latest zip archive
  2. Unzip it
  3. Place the unzipped files wherever you want your new Hyde site to be
  4. From the terminal run hyde gen to generate the Bootstrap-based site in it's default state
  5. Poke around on the site by opening mynewsite/deploy/index.html in your browser

Using Git

  1. Run these commands on the terminal:
git clone http://github.com/auzigog/hyde-bootstrap.git mynewsite/code
virtualenv --no-site-packages --distribute mynewsite/env
pip install -r requirements.txt
hyde gen   # To generate the Bootstrap-based site in it's default state
  1. Poke around on the site by opening mynewsite/deploy/index.html in your browser

Usage

Built-in Templates

There are a variety of templates that you can subclass using {% extends "templatename.j2" %} on the top of your article or post.

  • base.j2 - Contains the bulk of the layout logic, but not the best for subclassing because it doesn't have any grid attached to it.
  • columns.j2 - Has a main content area and a sidebar. Based on Bootstrap's container-app.html example.
  • topbar.j2 - Adds a top bar to the base layout

Custom Templates

To make real use of this package, you will need to create your own templates.

You can subclass topbar.j2 or base.j2 to cover most use cases. All of the templates that are provided serve as a starting point and as an examlpe of possible approaches you can use.

Adding Content

Look at all of the .html files in the content directory for an examlpe of how to begin adding your own content.

You can also go to a separate, fresh directory and run hyde create mysamplehydesite to check out their default layout and content.

Adding CSS

To extend the CSS of a given page, use the {% block css %}{% endblock %} block. You can do this with a <style> block or a <link> to a CSS file.

Publishing

To publish the site, first edit site.yaml to match your preferred publishing (github, sftp, etc). See the Hyde README for details. Then run:

hyde publish -c prod.yaml

Use prod.yaml makes it easy to switch your site.config.mode variable to "production" which can enable production-only elements of your site. In the default hyde-bootstrap setup, analytics is only rendered in production mode.

Versions

Built using:

Notes

There's a bit of code mixed in from the HTML5 Boilerplate project for jQuery and and IE PNG fix.

TODO

List of features I'd like to see added (by me or by you via a pull request!)

  • Write an helper function to automatically calculate grid numbers

Credits

Built by Jeremy Blanchard.