Layout

layout.png

Typography

Default
Heading

  • h1 heading (40px)

  • h2 heading (32px)

  • h3 heading (28px)

  • h4 heading (24px)

  • h5 heading (20px)
  • h6 heading (16px)

Color

#000000

#cfcfcf

#f8f9fa

#007bff

#e9ecef

Image

Icon

At least 128x128 pixel

Up to 512x512 pixel

Banner

At least 960x640 pixel

Avatar

Between 512x512 pixel and 2048x2048 pixel

File and Directory

HTML of main menu: /

Images: /images

Style sheets: /styles

Javascript: /js

Subfolder: /<super folder>/<subfolder>/

Branding

logo.png
  • Size:

    At least 16x16 pixel

    Up to 30x30 pixel

  • Space:

    There are 2 spaces around the logo, one at the top of the logo and one at the bottom of the logo

  • Color:

    Black and White

Contain the main menu of the site

Contain the sub menu of a page

Group diary

HTML, CSS and Javascript

HTML

Naming rules

  1. Begin with alphabet character.
  2. Use lower case
  3. Seperate between words by '-' without quote.
CSS

The site use Bootstrap 4 as the main css library.

Custom css in /styles/

CSS file rules

  1. Order: id, class
  2. id, class name must use lower case and seperate between word by '-' without quote.
Javascript

The site use Bootstrap 4 and JQuery as the main js library.

Custom js in /js/

Javascript file rules

  1. JS file must use lower case and seperate between word by '-' without quote.
  2. Function name must follow Camel case rules