Applied Blockchain Website

• Introduction
  • Getting started
  • Dependencies & Methodology
• Deployment
• Page structure
  • Section system
  • Components
  • Column system
• Create page
• Create project
• Create job
• Create event
• Create blog post

 

Introduction

Getting started

Install Jekyll

Jekyll is a Ruby Gem that can be installed on most systems. installation manual

Run the website in development mode

jekyll serve

Local URL: localhost:4000

Dependencies & Methodologies

SASS

Styling is powered with Sass, a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). Style files are located in the assets/_sass folder. You don't need to run any additional command to compile, it does it automatically with jekyll serve

• Install Sass

BEM Markdown

Along with SASS, the CSS styles are based on BEM terminology.

• bem.info
• getbem.com

Plugins

the plugins used can be found in the Gemfile file, under group :jekyll_plugins do (except from Compress who is used as a layout). If any, you can change the plugins settings in _config.yml.

Autoprefixer

This plugin provides simple autoprefixer support for Jekyll. Documentation

Cofeescript

Used for the built-in support of Sass. Documentation

Compress

A Jekyll layout that compresses HTML. Documentation

Jekyll Inline SVG

SVG optimizer and inliner for jekyll. Documentation

 

Deployment

The deployment process is run throught Netlify.

Environment	Branch	URL
Staging	staging	beta.appliedblockchain.com
Production	master	appliedblockchain.com

Even small text changes can have a graphical impact on the look of the website. Carefully check any changes you make on the content.

 

Page structure

• You only need to concern yourself with the content of the page, the page header and footer are built in the layout, ensuring their consistency throughout the whole website.
• Each page is divided in sections (usually differenciated by background colours).
• Elements are layed out using a bootstrap like column system.

<section class="section">
  {% include containers/sections/header.html
    title = ''
    subtitle = ''
    body = ''
  %}
  <div class="section__content">
    <!-- add your code -->
  </div>
</section>
<!-- repeat section if needed -->

Section system

Section types

Class	Description
section--alt	Divide left and right padding by two
section--full	Fullwidth section
section--overlap	Add a negative margin top to the section to make them overlap

Section colors

Change the background color of a section (default is white) using section--primary, section--dark or section--grey.

Components

The components are located in the _include folder. They were created to ensure that every iteration has the same structure, and that it will be easy to edit it. Each of them has a set of attributes.

if you want one attribute not to appear, delete the line

Section header

{% include containers/sections/header.html
  comment = 'Lorem ipsum'
  title = 'Section title'
  subtitle = 'Section subitle'
  description = 'Lorem ipsum dolor sit amet.'
%}

Column system

The website uses a bootstrap like column system. It as based on a twelve column structure. You can add prefixes to the number to set up the responsive behaviour of each column.

<div class="row">
  <div class="col--lg3 col--md4"></div>
  <div class="col--lg7 col--md8"></div>
  <div class="col--lg2 col--md12"></div>
</div>

 

Create page

• Create a .html file at the root of the website, with the name of the new page.
• Copy/paste the following code in the file.

---
layout: default # do not change
title: # this will appear as the page header and the html header in the browser tab
headline: # [optional] overrides the page header
subtitle: # [optional]
background_color: white # do not change
---

• Start coding your HTML content below this snippet.

 

Create project

• In the _projects folder, create a new .md file.
• Name it with a slugified version of the client name (e.g. Lloyd's register becomes lloyd-s-register.md).
• Copy/paste the code below and fill it accordingly.

---
layout: project # do not change
order: # number, specify the order it will appear on the projects page
case_study: true # add if the project has a standalone page
title: # company name
subtitle: # short project/deliverable description
industry: 
summary: # longer description of the company/project
link: # [optionnal] external link to company website (or other)
link_title: # [optionnal] # overrides default link title
background_color: white # do not change

deliverables: 

challenge-diagram: 
challenge: 
  - lead: 
  - paragraph: 
  - paragraph: 
  # etc.

delivery:
  - item:
    - paragraph: 
    - paragraph: 
    # etc.
  - item:
    - paragraph: 
    # etc.

results:
  - paragraph: 
  - paragraph: 
  # etc.
results-icons:
  - image: 
    title: 
  - image: 
    title: 
  # etc.

testimonial:
  - quote: 
    author: 
    position: 
    company: 
---

• Here is an example of how each is displayed.
• Add logo in the assets/images/carousel/clients_color folder.

Png format. No white space around the logo. File name should be the same as the .md file

 

Create job

• Open the jobs.yml file in _data folder.
• Copy/paste this code in the section you want it to appear (London or Porto) and fill the content.

- title: 
  type: 
  responsabilities:
    - li: ''
    - li: ''
    # etc.
  required-skills:
    - li: ''
    - li: ''
    # etc.
  additional-skills:
    - li: ''
    - li: ''
    # etc.

• The content of each tag must be inside single quotes. This ensures the HTML to be read correctly by Jekyll.
• Each new line is set by a - li: tag.

 

Create event

• Open the events.yml file in _data folder.
• Copy/paste this code and fill the content.

- name: 
  image:  #image file name > use a slugify version of the name
  date: YYYY-MM-DD
  date_to: # use if the event is longer than a day
  location: # [if relevant] venue, city, country
  directions: # [if relevant] Google Maps link
  link: # link to the event website

Use the YYYY-MM-DD format for the date, it will automatically be displayed in the right format on the website

• Add the corresponding image in assets/images/events.
  • If doesn't work: check file extension (needs to be .jpg).
  • File cannot be over 800 px wide and 100 KB.
  • If you don't have an image, leave the image: tag empty, a default image is set.

 

Create blog post

• Create a new file in the _posts folder.
• Name the file with a slugged version of the title, preceded by the date of the post.

If the title is Blockchain as a Database, it becomes YYYY-MM-DD-blockchain-as-a-database

• Copy/paste this code in the file and fill the content

---
layout: post
title: 
image: # image file name > use a slugify version of the title, remove if no image
category: # blog / press-release / news / videos
dlc: true # add for PRESS RELEASES if there is a press kit 
social: # linkedin / medium
link: # if news is external
headline: # introduction text
---

• If the news is internal, use markdown terminology to write the article and it will create the styling automoatically.

 

---

LICENSE