Pattern library

1. Introduction

A website has a lot of changes from early 90s with their looks and how to used. Today, the web designer become visual creatures, their aim is to create a most beautiful and unique website design.

A pattern library is a powerful item for the company/ business that can contain the design style, HTML & CSS, HTML, etc. It is provided web page structure and the function of user interface. Brad frost has introduced the pattern library as living document, that reflect the current webpage layout state of the code — and the design system in the one page.

For web designer or web development team in the business, normally, they are spent a lot time to gather the user requirement, put all code in together in design pattern library, only one single page which’s home page covering each code element, based on consistency, collaboration, and effective within all the team in the business.

Design a patterns library may not help to reduction the development phase from beginning. However, the further of development phase will be going for familiarity with them, and the development timescales should be gradually reducing.

Github address: https://yumc0521.github.io/WDAE2/


1.2 Aim

The aim of this project is to implement a pattern library website covering the navigation bar, header element, buttons, jumbotron, footer, and grid system. The code must be allowed people copy and paste.

1.3 Objectives

· To implement a navigation bar link between each component section.

· The code must be covering both HTML and CSS, and the code also allowed people copy and paste.

· Each component must be including a practice example of production

· The website must be considering modern design concept, such as a responsive design.


2. Research

Figure 2.1 edx Pattern library (http://ux.edx.org/)

The edX pattern library is the visual, UI, and front end style guide for edX’s applications. edX pattern library is covering seven design elements and seven components. At each page including detail practical example and providing both HTML and CSS code.


Figure 2.2 getbootstrap.com (www.Getbootstrap.com/components)

This is a type of pattern library website create by Getbootstrap. The design element and components is based on one single page, the navigation bar is always located and stick at right hand side, which is allow people to review any other section at any time.


Figure 2.3 Codepen (http://codepen.io/guide)

Codepen is famous pattern website, they are not just providing design element with code, the website also design in very fashion and modern style. However, they don’t have a navigation to guide user the component covered in that website.


Figure 2.4 style.maban.co.uk (http://style.maban.co.uk)

Style.maban.co.uk is well design website of pattern library, its including most front end style design element. Navigation bar is special designed of dropdown menu and locate bottom, and its navigate to each single element.


3. Methods

3.1 Waterfall

Waterfall methodology is one of traditional methodology for management project and the simplest to understand. Each design phase must be finished before next design phase start. Waterfall methodology basically is used for the small project and clearly requirement already know it, which means when the requirement are defined, this will be great beginning.

3.2 Time management


4. Specification

This section will be introducing the element structure will be present in the pattern library. The navigation at the top is link to each component section header.

Ø Navigation

  • Inline style navigation bar

Ø Header element

  • Heading
  • Sub-heading
  • Sub-text for heading
  • Body text
  • Search box
  • Selecting box

Ø Button

  • Different size of button
  • Different colour of button
  • Disabled button
  • Radio button
  • Checkbox button
  • Hollow style button

Ø Jumbotron

Ø Footer

Ø Grid system


5. Test plan


6. Design and implementation

6.1 Wireframing

Figure 6.1.1 Top header section
Figure 6.1.2 body content layout

Basically, a pattern library is just collection of design element, with the associated code, such as HTML and CSS. Figure 6.1.1 is the hand sketch of layout of the website header structures of website for pattern library. Figure 6.1.2 is the wireframes of each of component sections.

6.2 Final production

Figure 6.2.1 final prototype
figure 6.2.2 final prototype

7. Conclusion

As a result, this pattern library website is based on the single webpage. The website layout is satisfied. This website is coding in both notepad++ and cloud 9 cloud platform. Cloud 9 platform is providing the cloud develop platform environment, most strength of cloud development environment is quick backup a file, which mean don’t need worrying about saving the file. Most critical issue is the coding, W3school and Bootstrap component website is two great supporter for coding, there are both providing a natural code to allowed people copy and paste. However, in this project is using the foundation framework, which mean the code from Bootstrap component need to be changed into foundation framework code.

In the design, the another serious issues is how to showing the code on the webpage. From the begin I was try to using &nbsp to break a code between each tag, and the code has be display on the screen. But this is make code look like mess-up. Then I try find another way, which is using <XMP> </XMP> tags, XMP is stand for HTML Example Element, it is allowed to display preformatted text in HTML on the webpage. However, there is more similar code to present code in HTML, such as a: <PRE> and <code>.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.