CSS Flashcards
Display types: Inline
Inline is the display type of most tags meant to be interspersed with text. Examples include a, strong, span and time.
Inline elements always keep their “line height”. This causes properties like margin and padding to behave strangely.
Display types: block
Block elements differ from inline ones in that they do not respect line height. By default, block elements take up as much horizontal space as possible. Additionally, they do respect width and height properties.
Display types: Inline block
Inline block elements are a combination of the block and inline elements. They do remain inline, but they force elements around them to respect both horizontal and vertical space. You can set the width and height properties of an inline block element.
Display types: none
display: none removes the content from the (visible) page. Note that the element is still in the HTML and is viewable in the page’s source. It just isn’t rendered.
Display types: flex
A W3C Last Call Working Draft module called Flexbox (Flexible Box) provides display: flex. It’s still not fully supported, but it’s pervasive and powerful enough to be used by modern web pages.
The Flexbox Layout provides a more efficient way to align and distribute space by styling “Flex containers” that automatically calculate the sizes of their children.
This brings up two main categories for all Flexbox properties:
“Properties for the Parent” (Flex Containers)
“Properties for the Children” (Flex Items)
To make an element into a Flex Container we simply give it the display: flex property. This attribute makes all child elements into Flex Items. The size of each flex item is then calculated to always fit within the container. The default direction of these elements is horizontal but can be easily changed with flex-direction.
Steps to make a clock
1) Create hand divs that are stacked up on each other.
2) We want to rotate these divs somehow.
3) We want to use transform-origin 100% so that the axis starts at the end of the hand at the center of the div.
4) Now we are free to use the rotate(num deg) method.
5) we use transition-timing-function and a transition: all (secs)
6) in JS, we want to write a setDate function.
7) set up a new date and get the seconds from that using receiver.getSeconds();
8) From there, translate to degrees by dividing by 60. and multplying the quotient by 360
9) using a querySelector and passing in the appropriate hand (saing to a variable):
hand. style.
What is a media query?
It uses the @media rule to include a block of CSS properties only if a certain condition is true.
What is a breakpoint?
Using a media query, we can set which part of the page design will behave differently depending on the values of its class.
What does it mean to Design for Mobile First?
Mobile First means designing for mobile before designing for desktop or any other device (This will make the page display faster on smaller devices).
Instead of changing styles when the width gets smaller than 768px, we should change the design when the width gets larger than 768px. This will make our design Mobile First:
Orientation: Portrait/Landscape
Media queries can also be used to change layout of a page depending on the orientation of the browser.
You can have a set of CSS properties that will only apply when the browser window is wider than its height, a so called “Landscape” orientation:
CSS Variables:
We can update these variables on any element and the selectors on the element.
Syntax:
\:root {
--base: (color of choice)
--spacing: (num px)
--blur: (num px)
}
Now we can apply any of these things to our tags.
img {
padding: var(–spacing);
background: var(–base);
}
Dataset?
Dataset is an object that will contain data attributes.
What does height inherit do and when should we use it?
ewfrwer
flex panels: How to get the panels to evenly distribute space?
Flex: 1 - all panels evenly distribute. Any child containers with different flex numbers will adjust to the parent proportionally (flex: 5 in a child will expand the div 5x size).
Whats an effective way to visually gauge flexboox activity?
open up console and make borders a unique color.
flex panels: Why would we want to nest flex containers?
If we have text that we want placed in a specific manner across flex boxes.
What does :first-child or :last-child mean?
apply certain visual characteristics to
What does translate X/Y mean?
shifts content across the div.
What vanilla JS functions do we use to grab CSS classes?
document.querySelector or document.querySelectorAll
What vanilla JS function toggles class activity?
receiver.toggle(‘class’)
without jQuery, how can we click on something and have it execute _ function?
receiver.addEventListener(‘click’, func)
CSS Grid Layouts.
Whats bad about Bootstrap:
It moves the HTML around and makes things unstable.
Float and Flex are hacks.
Main sections: grid container grid item grid line grid cell grid track grid area grid gap
CSS Grid Layouts: Container
Element containing a grid defined by setting
display: grid;
CSS Grid Layouts: Line
Grid lines are referenced by number, starting and ending with the outer borders of the grid.
CSS Grid Layouts: item
Element that is a direct descendant of the grid container,
CSS Grid Layouts: cell
The intersection between a grid row and a grid column. Effectively the same as a table cell.
CSS Grid Layouts: area
Rectangular area between four specified grid lines. Grid areas can cover one or ore cells,
CSS Grid Layouts: track
The space between two or more adjacent grid lines. Row tracks are horizontal, Column tracks vertical
CSS Grid Layouts: gap
Empty Space between grid tracks aka gutters,
CSS Grid in a nutshell
1) Define a grid
2) Place items within the grid
CSS Grid: Practical approach
1) build accessible moblfirst layout without grid
2) Use mobile-first layout as fallback for all browsers
3) Use @supppors to detect grid support
4) at the appropriate breakpont, create layout with grid and grid-areas
5) Explore new layouts as viewport widens.
