CSS Tricks

CSS Tricks.css

Adaptable:
1. Responsive (Adaptable):
  - web application is designed to adapt and respond to different screen sizes, resolutions, and orientations.
  -   CSS media queries.
  /* Responsive styles */
@media screen and (max-width: 768px) {
    /* Adjust styles for screens up to 768px wide */
    .container {
        padding: 10px;
    }
}

@media screen and (max-width: 480px) {
    /* Adjust styles for screens up to 480px wide */
    .container {
        padding: 5px;
    }
}


2. Intrinsic:
  1. Intrinsic Sizing:
  - sizing behavior where the size of an element is determined by its content.
  - width, height, min-width, min-height, max-width, max-height, line-height, and flex-basis (when not using auto).

  2. Extrinsic Sizing:
    - margin, padding, border-width, position, and flex-grow
    - the size of its parent container or explicit CSS rules set by the developer.

----------------------------------------------------------------------------------------------------------------------
min-height:
  specifies the minimum height that an element can have. 
  If the content inside the element requires more space than the specified minimum height, 
  the element will expand to accommodate it. However, if the content requires less space, the element will still have at least the minimum height specified.

max-height:
  specifies the maximum height that an element can have. 
  If the content inside the element exceeds the specified maximum height, the overflow behavior will be triggered (e.g., scrollbars may appear). 
  If the content requires less space than the specified maximum height, the element will be restricted to that height

----------------------------------------------------------------------------------------------------------------------
auto:
  -  to instruct the browser to automatically calculate a certain aspect of the layout or behavior of an element. 
     Its specific behavior depends on the property to which it is applied. Here are a few common use cases:

  1.
  .element {
    width: auto; /* Width is automatically calculated based on content */
    height: auto; /* Height is automatically calculated based on content */
  }
  
  2. horizontally will center the element within its containing block. 
     This is commonly used for centering block-level elements horizontally. 
  .element {
    margin-left: auto; /* Automatically calculate left margin for centering */
    margin-right: auto; /* Automatically calculate right margin for centering */
  }
  
  3. overflow property, `auto` will cause scrollbars to appear only when the content overflows the element's box
  .element {
    overflow: auto; /* Scrollbars appear only when content overflows */
  }
  
  4.  will make the table cells size themselves based on their content:
  table {
    table-layout: auto; /* Cells size themselves based on content */
  }

  5. Flexbox: flex items distributes the available space equally among the items
  .flex-container {
    display: flex;
  }
  
  .flex-item {
    margin: auto; /* Distribute available space evenly, centering the item */
  }

----------------------------------------------------------------------------------------------------------------------
https://youtu.be/UmzFk68Bwdk

----------------------------------------------------------------------------------------------------------------------

----------------------------------------------------------------------------------------------------------------------

----------------------------------------------------------------------------------------------------------------------

----------------------------------------------------------------------------------------------------------------------