Grain Business Casual

Business Casual theme is a fully responsive four page company website that provides a simple blog, customizable home and about sections, and a contact page with the Google Map.

DOWNLOAD
Fork on GitHub

Personalizing Site Navigation

There are four sections in the theme: Home, About, Blog and Contact. You can customize them by modifying the /content/_site/header.yml file. If you want to add a new section, you should add a new page using built-in create-page command:

 ./grainw create-page "/portfolio.html" "Portfolio"

To make the section appear in the navigation bar, you should specify the name and url of the section in the site header configuration (the /content/_site/header.yml file):

1
2
3
4
5
6
7
8
# ...
sections:
    - name: Blog
      link: /blog/
    - name: Contact
      link: /contact.html
    - name: Portfolio
      link: /portfolio.html

Creating Blog Entries

Business casual theme ships with the integrated blog and provides the built‑in create-post command for adding new blog entries:

./grainw create-post "My first post"

After you execute the create-post command, the 2015-01-01-my-first-post.markdown file will be added to the /content/blog/posts/ folder. Open the file to add the Markdown content, also you can specify the post image, date and title:

1
2
3
4
5
6
7
8
9
10
---
layout: post # Layout name (should not be changed)
title: "My first post" # Post title
image: /images/slide-1.jpg # Post image
date: 2013-10-16 15:27 # Post creation date
# Indicates whether the post is displayed in the
# generated HTML.
published: false
---
Markdown content goes here...

Providing Textual Content

Following the practices used in all the Grain themes, textual content may be changed by modifying markup files in the content folder of the theme. Each page of the website conforms to a specific html file in this folder (except blog entries, where each post is represented by a markdown file). So, let’s say we need to change the company name in the home page banner. In order to do this, open the index.html file in the content folder and specify a new value for the brand name:

1
2
3
4
5
# ...
banner:
    slides: # ...
    # ...
    brand_name: My company name

Customizing Page Structure

Besides customizing textual content, you can slightly change the page structure of the html files located in the content directory, for example, you can add new sections (frames) to Home and About pages.

To create a new section in the home page, put the section description into the /content/index.html:

1
2
3
4
5
6
7
8
9
# ...
boxes:
    frames:
      # ...
        - title: The new page section
             image: /images/image.jpg
             text: |
                   Some block of text ...
# ...
To find out how to open, preview and deploy the theme please read the documentation.