CSS by K Olver

Box Model

ko111 — 2019-10-15 10:56:05 UTC

This model describes the boxes that surround content in an HTML document,

Box Model

ko111 — 2019-10-15 10:58:01 UTC

Content – The area containing the actual content of an HTML element.

Padding – A transparent area that creates space around the content but within the border of the element.

Border – The boundary lines of the element that surround the content and its padding.

Margin – A transparent area that creates space outside of the border that separates an element from other elements around it.

Using CSS to arrange user interface (UI) - What is a User Interface?

kayleigh24 — 2019-10-15 10:59:38 UTC

A User Interface (UI) is the portion of a website or application with which a user interacts.

It has a layout, which can either be simple and made with a couple of buttons or very complex with a multitude of parts with buttons, menus, toolbars and forms etc.

Block Elements & Inline Elements

ko111 — 2019-10-15 11:56:27 UTC

Block elements are placed one below the other. e.g Sections, articles, paragraphs, lists, and images
Inline elements are placed side by side: for laying out text and don’t disrupt the flow of the document.

Grid Layout

amy162 — 2019-10-15 12:11:44 UTC

A grid layout is similar to a spreadsheet in that they use columns, rows, and cells, but it doesn't have to be set out like a spreadsheet you can create many different types of layouts.

Grid layout are best suited for layouts that are more complex than a flexbox. Game interfaces and newspaper layouts are best when using a grid layout.

A grid layout enables you to position rows and columns for control over the layout.

FLEXBOX

gabby58 — 2019-10-15 12:12:04 UTC

Size and position will adjust with the size of the viewpoint. Used for laying out items in a single dimension, column OR row.

Why is getting a UI that works well for websites and viewing via mobiles so challenging?

kayleigh24 — 2019-10-15 12:12:51 UTC

Positioning and autosizing of UI elements is central to good design, but relative positioning does not work for most mobile web applications because it results in overlapping of elements or elements appearing in the wrong places.

Flexbox practice game:

gabby58 — 2019-10-15 12:15:24 UTC

So how do you get the UI to work on mobile and PC devices?

kayleigh24 — 2019-10-15 12:15:53 UTC

A combination of 'absolute positioning' and 'flexible boxes' (containers.) This is where the use of the CSS3 Flexbox Box and the CSS3 Grid Layout Model come in to play.

Grid layout practice game:

gabby58 — 2019-10-15 12:15:58 UTC

Flexbox example:

gabby58 — 2019-10-15 12:17:49 UTC

#object {
display: flex;
justify-content: flex-end;
}
(this moves the object to the end of the browser)

Other values in 'justify-content' property include:
flex-start
flex-end
center
space-around (equal space left and right of each object)
space-between (equal space between objects, first and last stay at either end of the browser)

The good thing is...

kayleigh24 — 2019-10-15 12:19:10 UTC

The CSS Flexbox and the Grid Layout model both reduce the amount of code needed for cross device compatibility. Flexboxes hold text, images and other content and the browser automatically adjusts to the size of the box depending on the screen size being used to view.

Grid Element

amy162 — 2019-10-15 12:20:20 UTC

You define this by using the display:grid or display:inline-grid CSS property. This creates the container for the layout.

Child elements of the grid are called grid items, which you position and size according to the following:
• Grid tracks: The columns and rows of the grid; you define grid tracks using the grid-rows and grid-columns properties
• Grid lines: The horizontal and vertical lines that divide columns or rows
• Grid cells: The logical space used to lay out grid items, similar to a cell in a spreadsheet

Grid Properties and Values

ko111 — 2019-10-15 12:20:39 UTC

Parent/child boxes

ko111 — 2019-10-15 12:26:04 UTC

A child nests within a parent box. Several child boxes can be in a parent box. The child can take on the styles of the parent.

Flexbox useful properties:

gabby58 — 2019-10-15 12:27:26 UTC

flex-wrap: wrap;
- will allow your objects to carry on to the following line.

flex-direction: row-reverse;
- will reverse the order of items by row

align-content: stretch;
- will take up all remaining space. This is the default value.

Questions :

ko111 — 2019-10-15 12:29:02 UTC

In the original W3C CSS box model, the ___________ is the space between border and the content of the box.

A ____________ is the portion of a Web site or application with which a user interacts.

Which position is the DEFAULT element?
Relative, static or fixed.

Creating a grid using CSS

amy162 — 2019-10-15 12:34:18 UTC

The CSS properties display:grid (or display:inline-grid), grid-columns, and grid-rows are used to create grid structures. The size of columns and rows can be fixed or flexible.
You can define columns and rows to have a fixed size, so this doesn't resize when the size of the screen changes. Or a fractional size relative to the grid. Fractional sizes are done using fr, so if a row is 2fr its twice the size of a row that is 1fr. 1fr stands for one fraction.
You can also use "auto" value, this makes columns and rows fit their content.

Here are some of the common properties used in a CSS3 user interface elements:

kayleigh24 — 2019-10-15 12:35:12 UTC

1 | appearance: Used to allow the user to make elements as user interface elements.
2 | box-sizing: Allows to users to fix elements on area in clear way.
3 | icon: Used to provide the icon on area.
4 | resize: Used to resize elements which are on area.
5 | outline-offset: Used to draw the behind the outline.
6 | nav-down: Used to move down when you have pressed on down arrow button in keypad.
7 | nav-left: Used to move left when you have pressed on left arrow button in keypad.
8 | nav-right: Used to move right when you have pressed on right arrow button in keypad.
9 | nav-up: Used to move up when you have pressed on up arrow button in keypad.

Box sizing

ko111 — 2019-10-15 12:47:03 UTC

div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

Grid Template

amy162 — 2019-10-15 12:49:44 UTC

A grid template uses alphabetical characters to represent the position of items in a grid. You use the alpha characters with the grid-template, grid-rows, and grid-columns properties to create a grid into which data flows.