Title: Theory / Unimportant / CS / Descriptive / Material / Design / Layout

Name: Touch target of an icon
Definition: The area where a touch/click is regestered to occur on this icon
Page: https://material.io/design/iconography/system-icons.html#design-principles
Context: Material

Name: Responsive layout
Definition: A layout that adapt to the available window/screen size
Page: https://material.io/design/layout/understanding-layout.html#
Context: Material

Question: Characteristic of a good layout
Answer: Predictable
Page: https://material.io/design/layout/understanding-layout.html#
Context: Material
Answer2: Consistent
Answer3: Responsive

Question: How should measurements align?
Answer: It aligns to an 8dp grid
Page: https://material.io/design/layout/understanding-layout.html#
Context: Material
Answer2: Small components, such as icons and type, can align to a 4dp grid

Name: Gutters
Definition: Blue part of
Page: https://material.io/design/layout/understanding-layout.html#
Context: Material
Intuition: Separate content

Name: Margin
Definition: Green part of
the space between content and the left and right edges of the screen.
Page: https://material.io/design/layout/understanding-layout.html#
Context: Material layout

Name: Columns
Definition: 1 part of
Page: https://material.io/design/layout/understanding-layout.html#
Context: Material layout
Intuition: Contain content

Name: Pixel density
Definition: Number of pixels that fit into an inch
Page: https://material.io/design/layout/understanding-layout.html#
Context: Material layout

Name: Density independant pixel
Definition: Flexible units that scale to have uniform dimension on any screen
Page: https://material.io/design/layout/understanding-layout.html#
Context: Material layout
Abbreviation: dp
Intuition: Represents a surface, in a way that still makes sens for a pixel-based device

Name: Scalable pixel
Definition: A measure of pixel size for font. Takes user preference into account
Page: https://material.io/design/layout/understanding-layout.html#
Context: Material layout
Abbreviation: sp

Question: Where is placed content?
Answer: In the areas of the screen that contain column
Page: https://material.io/design/layout/understanding-layout.html#
Context: Material layout

Question: How does the number of columns evolve?
Answer: It varies with the surface size
Page: https://material.io/design/layout/understanding-layout.html#
Context: Material layout

Instruction: Smaller gutter
Page: https://material.io/design/layout/understanding-layout.html#
Effect: Indicate that elements belong to a collection and are closely related
Example: Song of an album
picture of an event

Instruction: Big gutter
Page: https://material.io/design/layout/understanding-layout.html#
Effect: Indicate that elements are indendant
Example: Songs of your collection

Question: Ideal number of character by line?
Answer: 40 to 60
Page: https://material.io/design/layout/understanding-layout.html#

Name: A breakpoint
Definition: the range of predetermined screen sizes that have specific layout requirements
Page: https://material.io/design/layout/understanding-layout.html#

Name: Fluid grids
Definition: A grid that uses columns that scale and resize content, up until a breakpoint
Page: https://material.io/design/layout/understanding-layout.html#

Name: Fixed grids
Definition: Uses column and gutter of a fixed size, with fluid margin to keep content not changing. Up to a breakpoint where columns may be added
Page: https://material.io/design/layout/understanding-layout.html#

Name: Permanent UI region
Definition: regions that can be displayed outside of the responsive grid
Page: https://material.io/design/layout/understanding-layout.html#
Context: Material layout
Example: a navigation drawer. These regions cannot be collapsed.

Name: Persistent UI region
Definition: regions that can be displayed upon command at any time, or they can remain visible. Interact with the grid
Page: https://material.io/design/layout/understanding-layout.html#
Context: Material layout
Example: Drawer

Name: Temporary UI region
Definition: appear temporarily, and when they do, they do not affect the responsive grid
Page: https://material.io/design/layout/understanding-layout.html#
Context: Material layout
Example: Drawer

Name: Whiteframes
Definition: structured layouts that provide a consistent approach to layout, layering, and shadows.
Page: https://material.io/design/layout/understanding-layout.html#
Context: Material layout
Intuition: hey are a starting point, meant to be modified to meet the spectific needs of a product.

Question: Spacing methods
Answer: grids
Page: https://material.io/design/layout/spacing-methods.html#baseline-grid
Context: Material layout
Answer2: keylines
Answer3: padding
Answer4: incremental spacing

Name: Spacing methods
Definition: a set of rules around how to place elements within layouts and components.
Page: https://material.io/design/layout/spacing-methods.html#baseline-grid
Context: Material layout
Example: Padding
Example2: Dimensions
Intuition: Methods more granular than the responsive layout grid
Example3: Alignment

Name: Padding
Definition: space between elements withing a component
Page: https://material.io/design/layout/spacing-methods.html#baseline-grid
Context: Material layout

Name: Dimension
Definition: describe the width and height of component elements.
Page: https://material.io/design/layout/spacing-methods.html#baseline-grid
Context: Material layout

Name: Alignment
Definition: the placement of elements within a component.
Page: https://material.io/design/layout/spacing-methods.html#baseline-grid
Context: Material layout

Name: Keylines
Definition: an alignment tool that enables consistent placement of elements outside of the layout grid
Page: https://material.io/design/layout/spacing-methods.html#baseline-grid
Context: Material layout

Name: Container
Definition: a shape used to represent an enclosed area
Page: https://material.io/design/layout/spacing-methods.html#baseline-grid
Context: Material layout
Intuition: can hold UI elements such as images, icons, or surfaces.

Name: A flexible Container
Definition: A container that evolves with the size of its content
Page: https://material.io/design/layout/spacing-methods.html#baseline-grid
Context: Material layout

Name: A rigid Container
Definition: A container whose size is fixed
Page: https://material.io/design/layout/spacing-methods.html#baseline-grid
Context: Material layout

Name: A floating element
Definition: A fixed element positioned in front of scrolling content
Page: https://material.io/design/layout/spacing-methods.html#baseline-grid
Context: Material layout

Name: A sticky element
Definition: An element that scrolls with the UI and locks at a certain point in the scroll position
Page: https://material.io/design/layout/component-behavior.html#component-width
Context: Material layout

Name: A fluid component
Definition: A component whose size change with the layout
Page: https://material.io/design/layout/component-behavior.html#component-width
Context: Material layout
Example: The button in
Assuming: The size is always big enough to display the component entirely

Name: A fixed component
Definition: A component whose size is independant of the grid
Page: https://material.io/design/layout/component-behavior.html#component-width
Context: Material layout
Example: The button in

Name: A push component
Definition: A component which can be pushed if the layout is pushed
Page: https://material.io/design/layout/component-behavior.html#component-width
Context: Material layout
Example: The button in

Name: An overlaid component
Definition: A component which can be overlaid by other elements that occlude it
Page: https://material.io/design/layout/component-behavior.html#component-width
Context: Material layout
Example: The button in

Name: A reveal component
Definition: A component that is shown only if the screen is big enough
Page: https://material.io/design/layout/component-behavior.html#component-width
Context: Material layout

Name: A transform component
Definition: A component that transforms from on format to another at a designated breakpoint
Page: https://material.io/design/layout/component-behavior.html#component-width
Context: Material layout

Name: Divide
Definition: A UI where multiple layers appear if the screen is wide enough to display them
Page: https://material.io/design/layout/component-behavior.html#component-width
Context: Material layout

Name: Reflow
Definition: A UI may change its layout to reflow across newly available space.
Page: https://material.io/design/layout/component-behavior.html#component-width
Context: Material layout

Name: Expand
Definition: A UI can expand across more space
Page: https://material.io/design/layout/component-behavior.html#component-width
Context: Material layout

Question: The way a UI can change at breakpoint
Answer: Reveal
Page: https://material.io/design/layout/component-behavior.html#component-width
Context: Material layout
Answer2: Transform
Answer3: Reflow
Answer4: Expand
Answer5: Position

Name: Density
Definition: A parameter of the layout. Negative numbers reduce margins and gutter more than usual
Page: https://material.io/design/layout/applying-density.html#usage
Context: Material layout

Question: When is it okay to make a dense layout?
Answer: To make content scannable quickly
Page: https://material.io/design/layout/applying-density.html#usage
Context: Material layout
Answer2: To prioritize and focus on the action
Answer3: When a lot of content should be shown

Question: When is it not okay to make a dense layout?
Answer: Focused tasks
Page: https://material.io/design/layout/applying-density.html#usage
Context: Material layout
Answer2: Alert

Name: Line height
Definition: controls the amount of space between baselines in a block of text
Page: https://material.io/design/layout/applying-density.html#usage
Context: Material layout
Name2: Leading