CSS3: Grid, Images, Transition, Responsive vs Fluid

Thanks to Jubilee Kim and Christina Truong's lecture !

Layouts

Block

  • 100% width of container
  • Element are stacked
  • Inline

  • Same width as its content
  • Element sit in a line, side by side<
  • Use the value of inline or block to change the default display behavior of an element

    Float property

    The float property can also be used to change the default page layout by aligning the elements to the left or right of its container. Floating elements will change the natural page flow and stacking layout.

    CSS Position

  • Can be used to arrange components on the page
  • Uses one of three values: relative, absolute or fixed
  • Must be used with at least one box offset property: top, right, bottom or left.
  • Position: Sticky

    There is also a newer position value of sticky, which displays like a combination of relative and fixed positioning. The element is relatively positioned until the viewport reaches the declared offset value when scrolling the page. Then the element becomes fixed.

    CSS Grid

    Designing webpages with a grid, can help create a consistent design flow, and symmetrical design layouts. Grids are broken down into equal width, evenly spaced columns, that are used as a guide for laying out various page components. Gutters can also be included to add consistent spacing between columns.

    Page components are arranged within the columns, and can span one or more columns. There are different ways to define a grid, but a common layout for webpages is to use a 12 equal-column grid. 12 is easily devisable by two, three, four, and six, making it easier to create responsive designs.

    There are also generators such as this online tool, GridCalculator.dk. To make a grid, first define dimensions such as the max width of the entire page design, and the number of columns.

    Flexbox

    The flexible box layout, or flexbox for short, includes many options for aligning elements and creating flexible items. When using traditional techniques like float, each item is the same height as its content and required additional hacks to make them equal height columns. So using flex makes it much easier since it automatically sets the height of each flex item to be the same as the largest item without any additional CSS. With flexbox, you can also change the direction of the items without changing the HTML markup.

    Retina Displays and Images

    Each pixel is basically a small square, which contains its own brightness level and color. Together, the pixels are combined to make a graphic. Pixel density refers to how many pixels are contained within a space, usually measured by pixels per inches, PPI, or sometimes referred to as dots per inch, DPI.

    Pixel Density

    The more pixels there are within the same area, the smaller the pixels are, which is how text and images appear smoother, clearer, and show more detail.

    Retina Display

    A 1280 by 800 pixel image will fit for the regular display, but in the Retina display, the image will have to stretch to twice its size to fill the area, which will likely lower the quality of the image. Instead, create an image that is twice the size. In the Retina display, the image now has the same number of dots per inch as the display. In the non-Retina display, use CSS to set the width to 100%, or 1280 pixels, to scale it down to fit the box.

    Background Images

    "For background images, you can use CSS to target Retina screens. Use a media query, but instead of targeting the size of the actual screen, target the screen’s resolution, using the media feature resolution.

    Most of the time when using media queries we target the width of the viewport to create responsive designs. To target the screen by pixel density use the resolution media feature instead. Similar to targeting by width, use min resolution to set a minimum DPI value.