Code 301: Class 01 - Responsive Web Design and SMACSS

---

Read: (Shay Howe’s intro to RWD](https://learn.shayhowe.com/advanced-html-css/responsive-web-design/)

• RWD Responsive Web Design
  • Addresses the fact that mobile web use is likely to surpass desktop usage soon if it has not already happened
  • Design intended to look good and function well on any size screen
  • Three common components
    • Flexible layouts using a design grid that is dynamically resize to any width
      • Formula for finding relative width of a target element: target/context = result
    • Media Queries provide ability to specify different styles for individual browser and device circumstances

      • Example:

        
        /* @media Rule */
        @media all and (max-width: 1024px) {...}
        
        /* @import Rule */
        @import url(styles.css) all and (max-width: 1024px) {...}
        
        

      • Logical operators in Media Queries
        • and requires two conditions be met to execute
        • not requires one condition not be true to execute
        • only requires a specific condition to be true to execute
      • Orientation media feature determines if a device is in landscape or portrait orientation
        • `@media all and (orientation: landscape) {…}
      • Mobile First using styles targeted at smaller view ports as the default styles for a website and use media queries to adjust as viewport grows
    • Flexible Media images, videos, and other content need to be scalable along with view port size

Read: All about Floats

• Float CSS positioning property
  • Floated elements remain a part of the flow of the web page
  • Example: #sidebar {float: right;} Floats text to the left side of the element class “sidebar”
  • Example of clear: #footer {clear:both;} Clears the float’s impact on the “footer” class allowing it to show up under the element that is floating. Both indicates that the clear should be applied to floats from the left and right
  • To prevent collapsing the parent element, clear the float after the floated elements in the container but before the close of the container, this may involve adding and empty <div> to clear the float inside the container

Read: Don’t Overthink it Grids

• To make simple grid with two columns, one 1/3 of the page and the other 2/3 just float both left and assign widths of 33.33% and 66.66%

Read: CSS Floats Explained By Riding an Escalator

• Using flow creates three new flow paths left, center, and right inside of a parent element
• Clear both will return the flow to standard below the floated items

Read: Scalable and Modular Architecture for CSS

• Hand book for modular CSS architecture, describes a plan for categorizing characteristics of a web site to implement patterns that make build out, maintenance, and code review easier

---

Return to reading-notes Deployed Site

Return to reading-notes Mark Down