COMP 126 Chpt 10

after you assign names to grid lines, you can use them in the grid row and grid column properties for each area in the grid

.

to identify the rows and cols for a grid area that an element occupies you code the line names on the grid row and the grid col props

.

What order does the auto-placement algo place items?

1. Anything to which you've assigned placement properties (such as grid lines or a template area) 2. Anything that has spans applied to it 3. Each remaining item is placed in a grid cell in the order in which it appears in the HTML--unless you've set grid-auto-flow: dense; in which case it attempts to backfill any gaps in the grid with any item that fits

Roughly how much of a typical website should utilize that site's chose accent color?

10%

You have a container that is 600px wide and 3 columns. There is a 20px col gap. How many px will each col take up if we set each to be 1fr?

200px

The css animation property always points to an

@keyframe selector rule that defines the keyframes that are used in the animation sequence

By default grid items are laid out ____

From left to right and top to bottom

grid gaps arent added between ___ within the same grid area

cells

The first step in the design of any website should be to

define the target audience and goals of the website

unless you specify otherwise, grid items are laid out within a grid containter

from left to right and top to bottom

space-evenly

full size spaces are added before the first grid track and after the last grid track

In a complex layout, you define ____ that contain grid items?

grid areas

In complex layouts, what contains the grid items?

grid areas

What property do you use to change the order elements appear in a grid container?

grid-auto-flow

what property and value should you use if you want to create flexible columns?

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

Which layout is commonly used to display a series of images?

headline and gallery layout

justify-items

horizontally aligns grid items within a grid area. default is stretch

justify-content

horizontally aligns grid tracks within a container when the tracks are less than the overall width of the container. Default is start.

you can align the row tracks within a container vertically

if the row tracks are less than the height of the container

Implicit grid

if you place an item outside of that grid the browser will create an this line or lines to hold that item. This is created by the this lines which are auto sized.

.container-fluid

in BS provides a full width container spanning the entire width of the viewport

.container

in BS provides a responsive fixed width container

In BS only columns can be immediate children of rows

in BS rows have negative margins so they extend the full width of the container

Unlike tradition sequence writing, chunking is thought to be better for web writing because

it lets the users select the content theyre interested in

To align grid items within a grid area, you use what CSS properties?

justify-items justify-self align-items align-self

You can align the row tracks it contains vertically if the grid tracks are ____ that the ____ of the container.

less, height

You can align the column tracks it contains horizontally if the grid tracks are ____ that the ____ of the container.

less, width

The transform property

lets you apply one or more transforms to an HTML element

The transform origin property

lets you change the origin point for the transform

h1 {animation: move 3s ease-in-out 2s; } @keyframes move { from { margin-left: 20%; color: blue;} to { margin-left: 60%; color: red;} }

moved to the right over 3 seconds after a delay of 2 seconds

you use the grid-row and grid-column properties to define grid areas when you use

named or numbered lines

If you only have 1 column do you have to declare it?

no

Which of the following is NOT a guideline for usability?

no navigation elements in the footer

to implement the 12 col css grid concept you use

numbered lines

grid-row/column can have what types of values?

numbers or name values for grid lines

justify-self

overrides the grid areas horizontal alignment for an individual grid item

align-self

overrides the grid areas vertical alignment for an individ grid item

the minmax function is typically used with what other function to specify the min and max sizes of one or more tracks?

repeat()

Grid track

rows and columns in a grid container

which of the following css style rules positions a section element in row tracks 2 through 4 and col tracks 2 and 3 of a grid container

section { grid-row: 2/5; grid-column: 2/4; }

space-between

space is allocated evenly bw grid tracks

space-around

space is allocated evenly bw grid tracks, but half size spaces are also added before the first grid track and after the last grid track

Instead of specifying an ending line number, you can use what keyword to indicate how many col an element takes up

span

justify-items justify-self align-items align-self can have what values?

start, end, center and stretch

Which of the following can you not specify within a css transition rule?

the condition that will cause the transition to occur

What will happen if the css that follows is applied to an h1 element? h1 { animation: animateheading 2s ease-in-out 2; } @keyframes animateheading { from { font-size: 120%; } to { font-size: 200%; } }

the font size of the heading will increase to 200% over 2 secs, change back to 120% and then repeat

When you use grid template properties what do you have to specify?

the heights of the row tracks and the width of the column tracks with a forward slash bw them

the minmax function specifies

the min and max sizes of one or more tracks

which of the following methods would you use to transform an element so it appears lower than its original position?

translateY

Grid cell

two adjacent row and column grid lines

grid cell

two adjacent row and column grid lines

Grid area

two or more grid cells that form a rectangle

grid area

two or more grid cells that form a rectangle

repeat function

used to specify one or more track sizes the specified number of times

minmax function

used to specify the min and max sized for a grid track

align-items

vertically aligns grid items within a grid area. Default is stretch

align-content

vertically aligns grid tracks within a container when the tracks are less than the overall height of the container. Default is start

auto fill

when there is space large enough to provide for additional min sized grid items, this keyword provides enough space for those items even if the items aren't declared in the HTML

Line based positioning

when you use line numbers to specify width/height of track.

Can you combine fixed, relative and fractional track sizes?

yes

when you use template names for page layout,

you first define the template areas and then assign elements to those areas

What does the target pseudo class do?

It selects the div element that is the target of the <a> element that has been clicked

chunking makes the info more accessible to the user and reduces the need for scrolling

Javascript is commonly used to implement chunking with features like accordions and tabs

grid lines

Lines on either side of a grid track

A css grid track is made up of

a column or row within a grid container

the fr unit of measure represents

a fraction of the available space within a container

Each cell contains what?

a grid item

Explicit grid

a grid that is created when you say grid template col/row

Nested block

a nested block within a grid element is NOT considered a grid element as well. It ill match the normal flow of the document. You need to explicitly say grid and give it a track definition. aka the nested grid does NOT inherit from the parent gird. If we do want it to inherit from parent you have to say grid-template-columns: subgrid;

which of the following can you use in a @keyframes selector to indicate property values for specific positions in an animation?

a percentage from 0 to 100

What is a grid item?

a structural element like a nav or div element

to slowly rotate an image when the user hovers the mouse pointer over it, you can use

a transform and a transition

fr unit

a unit of measure that represents a fraction of the space that's available within a container.

when you define grid areas for a grid with grid gaps, the gaps

are added between the grid areas

auto fit

as many grid items as will fit in the available space will be placed in the container and they will expand when necessary to fit the available space

Instead of using a repeat function to determine the number of tracks that will be repeated, what keywords can you use instead?

auto-fit and auto-fill