MTA Exam 98-375HTML5 Application Development Fundamentals198-375: OBJECTIVE 3Format the User Interface by Using CSS

2

Arrange user interface (UI) content by using CSSLESSON 3.2This lesson includes many features of the new CSS3. Make sure to check the version of the browser installed on your machine for compatibility with the new selectors.3In this lesson, you will review the following:

Using the Flexible Box Model and grid layouts to establish content alignment, direction, and orientation.Proportional scaling and the use of free space for elements within a flexible box or grid.Ordering and arranging content.Concepts for using flexbox for simple layouts and grid for complex layouts.Grid content properties for rows and columns.Using application templates.

overview Lesson 3.2Remind students that every HTML element is enclosed in a box model that specifies the width & height of the content, padding, border, and margin. The introduction of the Flexible Box Model and grid layouts provide enhancements to the box model that allow the developer with tools to easily arrange content on the page.4What additional features are added to the box model by using the Flexible Box Model?

What are the various ways to allocate excess space using the Flexible Box Model?

How does the new Flexible Box Model eliminate the need for using float?

GUIDING questions Lesson 3.2What additional features are added to the box model by using the Flexible Box Model? The flexible box model establishes content alignment, direction, and orientation, including the ability to align children content horizontally and vertically. Unused space can be assigned to a specific child or distributed among several children elements. It is optimized for interface design.

What are the various ways to allocate excess space using the Flexible Box Model? The developer can specify how excess space along the layout axis (horizontal or vertical) of a series of elements can be proportionately allocated to increase the size of given elements. Also, excess space along the layout axis of a series of elements can be allocated to fall before, after, or between the series of elements. And finally, excess space perpendicular to the layout axis of an element can be shaped around the elementfor instance, extra space above or below buttons that have been laid out side-by-side. (This topic can best be described visually)

How does the new Flexible Box Model eliminate the need for using float? The flexible model includes a container that automatically floats based on the properties assigned, such as box-align after, box-pack justify, box-orient vertical, etc. 5Lecture Lesson 3.2Using Flexible Box and Grid Layouts to Establish Content Alignment, Direction, and Orientation

The Flexible Box Model adds more options to the current box model.These new options allow developers to easily change content alignment, content direction, and content orientation.After a flex box is created, the developer can add child elements, which reflect the alignment, direction, and orientation set for the parent.The need to use float is eliminated.See next two slides for examples of using a flex box

In the older versions of HTML and CSS, this task was quite difficult and not as reliable.

Because the developer can align the content, set the direction and orientation, and account for extra space, there is no longer a need to use the float property.

An example of a flexbox with two child elements child 1 child 2 6Flexible Box CONTINUED

Example page using Flex Box

Box1 Box2 Box3

Expected outcome: CSS is listed on next page

Explain to the students that the expected outcome is for browsers that support flexbox (IE10)7Flexible Box CONTINUED #flexbox{ /* basic styling */ width: 200px; height: 300px; border: 1px solid #555; font: 14px Arial; /* flexbox setup for safari and google chrome*/ display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-align:center; /* flexbox setup for firefox */ display: -moz-box; -moz-box-orient: horizontal; /* flexbox setup for Internet Explorer 10 */ display: -ms-box; -ms-box-orient: horizontal; display: box; box-orient: horizontal; }

.box1{width:50px;height:20px;border:thick silver solid;background-color:teal;}.box2{width:50px;height:20px;border:thick silver solid;background-color:fuchsia;}.box3{width:50px;height:20px;border:thick silver solid;background-color:yellow;}Note that this code shows the various vendor specific prefixes -webkit- is for safari and Google chrome-moz- is used for Firefox-ms- is used for Microsoft8Lecture Lesson 3.2Proportional Scaling and Use of Free Space for Elements within a Flexible Box or GridAllows browsers to use the size of the graphical device to scale the web page accordingly.Builds a layout that is fluid but contains elements (such as images or controls) that maintain their position and size relative to each other.Specifies how excess space is allocated by using the box-pack property.Controls how excess space along a parents layout axis is proportionately allocated to child elements by using the box-flex property.

The flex box is designed to scale and resize based on graphical device without extra coding by the developer.

The box-pack property determines how excess space is distributed between child elements (start, end, center, and justify).

The flex-box property specifies whether the width or height of a child element is flexible based on the space available in the object. This floating point value also indicates the proportion of space available that is allocated to the child element. A value of "0.0" (which is the default value) indicates that the element is not flexible.

9Lecture Lesson 3.2Ordering and Arranging ContentControls the direction that elements are laid out on the page (top-to-bottom, left-to-right, right-to-left, or bottom-to-top).box-direction (normal, reverse, inherit)box-orient (horizontal, vertical, inline-axis, block-axis, or inherit)Elements can be reordered on the screen in an order that is different from how they are specified by the Document Object Model (DOM).

The properties used to order and arrange elements in a flex box include: box-direction (normal, reverse, and inherit)box-orient (horizontal, vertical, inline-axis, block-axis or inherit) Used to indicate how the box's children are aligned. When combined with box-flex, it determines how any additional space is allocated.

To change the order of the elements, use: box-ordinal-group: specifies the display order of the child elements of a box.10Lecture Lesson 3.2Concepts for Using Flexbox for Simple Layouts and Grid for Complex LayoutsUsing the new value (box) for the display property gives us access to these attributes: box-orient box-pack box-align box-flex box-ordinal-group box-direction box-shadow

Grid Properties:grid-columnsgrid-rows(flex box is scheduled to supported by Internet Explorer 10)Use this slide as a review of the properties just discussed.

Using the new value (box) for the display property gives us access to these attributes: display: box;

Styles used on the box:box-orient: horizontal, vertical, inline-axis, block-axis or inherit. Used to indicate how the box's children are aligned. When combined with box-flex, it determines how any additional space is allocated. box-pack: start, end, center, or justify. Sets the alignment of the box along the box-orient axis. For example, if box-orient is horizontal it will choose how the boxs children are aligned horizontally.box-align: start, end, center, baseline, stretch. Similar to box-pack, this sets how the boxs children are aligned IN the box.

Styles used on the boxs children: box-flex: 0 or any integer value. Identifies the flexibility ration for this child. For example, if child1 has 1, and child2 has 2, any additional space would be consumed twice as much by child2.

box-ordinal-group: specifies the display order of the child elements of a box. box-direction: specifies in which direction the children of a box are displayed.box-shadow: attaches one or more drop-shadows to the box.

Children within a horizontal box are displayed from left to right, and children within a vertical box are displayed top to bottom. However, the box-direction and box-ordinal-group properties can change this ordering.

Note the flex box model works only with immediate children.

Not currently supported by any major browsersgrid-columns: specifies the width of each column in the grid. The syntax specifies either length, percent, none or inheritgrid-rows: specifies the height of each row in the grid. The syntax specifies either length, percent, none or inherit

11Lecture Lesson 3.2Grid Content Properties for Rows and ColumnsUsing the grid property enables the developer to divide space for major regions of a webpage or web app and to define the relationship between parts of an HTML control in terms of size, position, and layer.This removes the need to create a fixed layout, which cannot take advantage of available space within the browser window.It is similar to the concept of a table, allowing columns to span rows and vice-versa.

The next lesson (3.3) discusses regions in greater detail.

12Lecture Lesson 3.2Using Application TemplatesTemplates allow elements to be placed in a visual order independent of their source order, providing a type of wire frame for the page to be filled in later with content.Template-based positioning is an alternative to absolute positioning.Using application templates provides consistency and repetition in a website.

13DEMONSTRATIONLesson 3.2Using the Flexbox

In this demonstration, you will see how a page can be created using flexbox:Use the HTML file and CSS file included for this lesson.View the new page using Internet Explorer; notice that the new styles are applied but the orientation is not horizontal (available in Internet Explorer 10).If available, use Safari to see how the flexbox properties align the boxes horizontally.

Unzip the two demo files listed below. Preview them in Internet Explorer and if possible use Safari to show the use of the flexible box model expected in IE10. In Safari you can see how the children are aligned based on the box properties set for the parent.

HTML file is 98-375-ENU-3.2-FLEXDEMO.htmlCSS file is 98-375-ENU-3.2-FLEXDEMO.css (in the html code, the CSS file name is just style.css, so this file should be renamed once you unzip the file. Also make sure to keep it in the same folder with the HTML file)14DISCUSSIONLesson 3.2Using CSS to Arrange Elements on the ScreenHow does the flexbox property make the relative position and size of elements remain constant, even as screen and browser window sizes vary and change? It lessens the reliance on floats, which are more complicated to position and size correctly.Because it provides the developer with many options for arranging elements on the screen, allocating extra space, arranging the direction, orientation, and alignment of child elements, the browser can automatically resizes according to the graphics device size. 15In-Class Activity Lesson 3.2Directions:Read the scenario in the In-class ActivityUse the resources mentioned in this PowerPoint presentation and your own investigative skills to answer the questions.Part of the activity includes drawing a web page with a flexbox container and identifying the following properties: box-orient box-pack box-align box-flex box-direction

In-class Activity document: 98-375-ENU-3.2-ICAnswer key: 98-375-ENU-3.2-ICKey

Have the students record their answers to the questions in the activity. They should share their findings with the class.

Scenario: The owner of Proseware, Inc. recently purchased a Lenovo IdeaPad Slate. When Jacek Myrcha used the slate to view the company website, she realized that the content was not scaling properly. After talking with the web developer, she decided that the site needs to be upgraded to take advantage of the new CSS3 Flexible Box Model which provides a fluid, scalable view of the site. Jacek would like the site to have a consistent look and feel, so she has instructed the developer to create a page using the new properties available in CSS3. The current home page has a dynamic web template that defines the static portions of the site. In the content area, the developer needs to have three containers with a horizontal orientation. Content: 1. Draw a picture of how the Flexible Box Model should be designed. Use the image below as a guide. Resize the boxes according to the owners needs and add a description in each box.Answers may vary, see the key. 2. Use HTML5 and CSS3 to create a sample page with three content boxes, oriented horizontally and centered on the page. Test the page using a browser that supports these properties, if available.Answers may vary use the demonstration files as a starting point.

3. Use the same page to experiment with other properties for the flex box: box-align, box-direction, box-pack, and box-orientation. Answers may vary

16REVIEWLesson 3.2Can you answer these?

What additional features are added to the box model by using the Flexible Box Model?

What are the various ways to allocate excess space using the Flexible Box Model?

How does the new Flexible Box Model eliminate the need for using float?

What additional features are added to the box model by using the Flexible Box Model? The flexible box model establishes content alignment, direction, and orientation, including the ability to align children content horizontally and vertically. Unused space can be assigned to a specific child or distributed among several children elements. It is optimized for interface design.

What are the various ways to allocate excess space using the Flexible Box Model? The developer can specify how excess space along the layout axis (horizontal or vertical) of a series of elements can be proportionately allocated to increase the size of given elements. Also, excess space along the layout axis of a series of elements can be allocated to fall before, after, or between the series of elements. And finally, excess space perpendicular to the layout axis of an element can be shaped around the elementfor instance, extra space above or below buttons that have been laid out side-by-side. (This topic can best be described visually)

How does the new Flexible Box Model eliminate the need for using float? The flexible model includes a container that automatically floats based on the properties assigned, such as box-align after, box-pack justify, box-orient vertical, etc. 17ADDITIONAL RESOURCES Lesson 3.2 MSDN ResourcesFlexible box (Flexbox) Layouthttp://msdn.microsoft.com/en-us/library/hh673531(v=vs.85).aspxCSShttp://msdn.microsoft.com/en-us/library/hh673536(v=vs.85)Other ResourcesTest Drive Hands-on: Windows 8 HTML5 Platform

http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_flex.htm

HTML5 Rockshttp://www.html5rocks.com/en/tutorials/flexbox/quick/W3 Schoolshttp://www.w3schools.com/cssref/default.asp#flexbox

18