RE:Creation No. 1: Google | CSS (Round 1)

Summary

• Style for Usability of Interactive Elements: Active Area
• Style for Visual Design: Colors & Graphic Elements of Individuals

This is the first round of Cascading Style Sheets—CSS for short. CSS is a Style Language that defines the visual design of an HTML document. This single responsibility of CSS makes the structured content of the document reusable in different contexts.

Active Area

Interactive Elements (IE) in a web page pertain to elements that can be interacted upon. Common examples of IE are links, textboxes, buttons, and other form elements. A way of improving the usability of IE is by optimizing its Active Area (AA) so that it is big enough for clicks and taps. A good rule of thumb is having a minimum dimensions of 44 x 44.

Linked texts such as navigation items could have an optimized active area by having a padding. Form Elements such as textboxes and buttons, on the other hand, could be styled with a legible font size and a height.

.secondary-navigation a {
    display: inline-block;
    padding: .75em 0;
}

.text-search input {
    height: 36px;
    font-size: 1em;
}

.search-actions button {
    height: 36px;
    font-size: 1em;
}

Colors & Graphic Elements

This part of the activity is where we would style the elements according to the visual design or look of the web page. The colors pertain to background and foreground color—in the case of a button, the background color is the color of the button and the foreground color is the color of the text.

Graphic Elements include borders, shadows, lines, among other things that make up the look of the element.

.account-action a {
    background-color: blue;
    color: white;
    text-decoration: none;
}

Demo

See the Pen RE:Creation No. 1: Google | CSS (Round 1) by Brian Dys Sahagun (@briandys) on CodePen.

Next Round