Style Guide

Intro

During the development of various projects, a major problem I am facing is to keep the style and use of classes consistent. This also causes a huge headache when I jump back and forth on these projects.

As a practice, I am developing this style guide to help me manage and maintain the visual style of this website and to provide a template for any future projects I will be working on.

This site utilizes HAML and SASS with the SCSS syntax, and adopts the principal from functional CSS.

Identity

Box

Logo and special heading
Lennon

Screen

Break Point

> 1024px
768px - 1024px
< 768px

Hide

No Hide
Hide Desktop
.lg-hide disappeared
Hide Tablet
.md-hide disappeared
Hide Mobile
.sm-hide disappeared

Grid

Flexbox is the base of the grid layout. This site only goes as far as 3 columns.

One Column

100%

Two Columns

48%
48%

Three Columns

32%
32%
32%

Example

100%
32%
66%
.flex.flex-wrap.justify-between
  .c1in1.card
    .card-header 100%
    .card-footer .c1in1

  .c1in3.card
    .card-header 32%
    .card-footer .c1in3

  .c2in3.card
    .card-header 66%
    .card-footer .c2in3

Font

Typography

Logo
Mentenka
Content
Roboto

Size

12px
Smaller
14px
Small
16px
Base
24px/20px
Large
36px/24px
Larger
54px/36px
Title

Helper

Light
Regular
Semi
Bold
Italic
Center
Left
Right

Color

#FFFFFF
#4DBDFF
#1A1A1A
#F2F2F2
#EAEAEA
#DEDEDE
#BEBEBE
#9B9B9B
#444444

Article

Heading

Main heading

Section heading

Sub-section Heading

Smallest Heading

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices vehicula finibus. Phasellus ligula sapien, pulvinar nec molestie vitae, hendrerit nec turpis. Donec sit amet ultricies enim. Ut vitae enim nulla. Mauris sem quam, viverra at dui tempus, porta luctus lacus.

Link

Internal links uses Smooth Scroll to provide a better scrolling experience when navigating within the same page.

Interal Link

Lorem ipsum, go to the article section smoothly adipiscing elit.

External Link

Lorem ipsum dolor sit amet, go to my instagram adipiscing elit.

Underline

Lorem ipsum dolor sit amet, this is important adipiscing elit.

List

Un-ordered List
  • Item 1
  • Item 2
    • Item 2.1
    • Item 2.2
  • Item 3
Ordered List
  1. Item 1
  2. Item 2
    1. Item 2.1
    2. Item 2.2
  3. Item 3

Code

Code snippet uses Prism , a lightweight and extensible syntax highlighter, and its line numbers plugin.

%pre.line-numbers
  %code.language-haml
    :preserve
      // Here goes the code in the code snippet

Form

Button

Input

Example

Form Group

%form
  .mt1.flex.flex-column
    %input.w100.mt1.order2{ type: 'text', name: 'name', required: 'true' }
    %label.order1{ for: 'name' } Label 1
  .mt1.flex.flex-column
    %textarea.w100.mt1.order2{ name: 'message',required: 'true' }
    %label.order1{ for: 'message' } Label 2
  .mt2
    %button{ type: "submit", value: "Send" } button
INSTAGRAM
/
LINKEDIN
/
DRIBBBLE
/
2016 © LENNON CHENG
SOURCE CODE
/
STYLE GUIDE
/
2017 © LENNON CHENG