gem install sass
gem install bourbon
gem install bitters
gem install refills
gem install neat
gem install celluloid --version '=0.16.0'
gem uninstall celluloid --version '=0.17.1.2'
jekyll build --destination <destination>
Where <destination> is the folder where the site will be rendered to.
Without the --destination flag, the site is rendered into _site
Rendered site location is under _site. Upload that folder to the webserver, and the vebsite will be ready. No further configurations necessary
VEB uses SASS for stylesheet generation. For more information, visit the sass guide
SASS files are located under _sass.
Most of these don't need to be messed around with, any custom sass code are placed in _layout.sass
If you need to separate the code into another file (for readability), do add an import statement in css/main.sass
Add a new file named new.sass in the _sass directory.
In css/main.sass add
@import "new"
below
@import "layout"
Note how the import statement doesnt contain extensions. You can also add plain css with the extension .scss instead of .sass
Any folder/file without an underscore will be copied into the root of the _site directory. You should not edit anything in _site as the contents are dynamically generated.
Links to static pages/assets are relative
The basic template for a new page is like this
---
layout: page
title:
---
<!-- html content -->
The first three lines are frontmatter, and more information can be found in the Jekyll Docs page
Do note that the HTML content is placed between the site header and footer, no need for head tags, etc.
If the title frontmatter is left empty, no title is displayed. If not empty, an <h1> tag is placed before the page content.
Lets say we save this under projects/test.html. After executing jekyll build , the page can be accessed via
http://localhost:4000/projects/test.html
Further information on page creation
Javascript and library dependencies are autoloaded using Require.js. The relevant RequireJS script file is assets/js/app.js
jQuery functions/methods can be added to the assets/js/app/main.js file inside the line
require(["jquery"], function($) {
});
Images are found under assets/images
To add an item to the product grid, create a page in products folder with the following template
---
layout: page
title: <product title>
description: <short description>
thumbnail: <path to image (relative to page root)>
background: <OPTIONAL: hexcolor of tile>
type: <web|android|ios|other>
categories: <project|product|stuff|testimonial|wip|menu>
---
<!-- html content -->
Product title is the name of the product in the thumbnail.
Description is the short blurb under the product title.
Thumbnail would both be the thumbnail AND the background image of a tile in the product grid. (ex: /assets/images/gridicons/sherlock.jpg)
Background: you can specify a fallback color for the tile in lieu of a background image
Type is the banner type for the tile (the ribbon thing)
Categories is a SPACE delimited list of categories a page can be in. For the page to be displayed in the product grid, this field must contain project
A page can be placed in the menu at the top if categories contain menu (see bob.html and contactus.html)