Class 00 Reading notes - Ginsusamurai/seattle-301d58 GitHub Wiki

Reading 01

  • Responsive reacts to different factors VS Adaptive which has a list of pre-sets vs Mobile which have their own libraries and setup
  • giving percents for flexibile grids provides similar layouts as using px count, just requires planning target / context = result
  • media queries change what is sent based on resolution
  • media types: all, screen, print, tv, braille
  • orientation landscape and portrait
  • also aspect ratio
  • meta tags for device-height and device-width make it easier for mobile to pass on viewport size
  • float can better handle image resizing and letting tex re-draw
  • clear can break an item out of the float/flow and let it stand alone
  • an empty <div> set to clear:both can break up long lines of floats and put them on different sections
  • make grids with percentage weights (usually in a class) and float them both in one direction.
  • clear the parent element to prevent div collapse.
  • box-sizing:border-box; can show the boxes, then you apply padding values to the column classes, this creates gutters.
  • breaking up CSS rules across various, single focused files can help with making large or small changes to a site without causing conflicts due to order of load.
  • base is for the large sections of the page and deals primarily with background color and default sizes. This will help give the page a shape without adding functionality
  • layout can help lock down more of the grid structure by modifying the headers, footers and articles of a page. This organization helps keep a uniform shape across pages that can be easily ported around.
  • modules is for some sub-selectors and modifying how items a level down from the top elements will work. by keeping naming more specialized it can prevent conflicts later on when you expand out the number of same-type children
  • state is in place to over-write other styles for specific elements
  • theme is for a changing color, text, and other items across the page at the same time without affecting other layouts. Can change the visuals of a page without impact.
  • changing state houses the different states that an element can be in based on user interaction.
⚠️ **GitHub.com Fallback** ⚠️