Knowing

Web

Design

By Mayu Watanabe

What Is Web Design

My understanding is that "Design Visually and Sturucture Functionally".

The Grid

Following is my grid system that 12-column fluid grid with a max width of 960px.

1
11
2
10
3
9
4
8
5
7
6
6
7
5
8
4
9
3
10
2
11
1
Typography

Here is my typography. The base type is 16px over 1.5 line height.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Typefaces

Type Pairings: Finding the perfect font combo is important for designing.

Title: Baskerville

Body: Raleway

Button

Following are my buttons.

Link ( Anchor Button )

Form

Following are my forms.

Utility

This web site is used sass which has to be connected to prepros. Utility includes Variables, Nesting, Mixins, Functions, etc.

Media Queries

Media Queries are an excellent way to deliver different styles to different devices, providing the best experience for each type of user.

Clearfix

A clearfix is a way for an element to automatically clear its child elements, so that we don't need to add additional markup. It's generally used in float layouts where elements are floated to be stacked horizontally. The clearfix is a way to combat the zero-height container problem for floated elements.