Please enable JavaScript.

Coggle requires JavaScript to display documents.

Framer - Coggle Diagram

- - - - All the changes made on the main breakpoint will also be made on the other breakpoints.
  - - - When you make a change on a breakpoint and it is not reflected on the other screens. The change is unique to that screen.
  - - - Instead of fixing an element on the screen by overriding a breakpoint, try to fix the design on the primary breakpoint.
        
        Example
        
        When a video doesn't fit on the phone screen, don't fix it by resizing the video on the phone breakpoint, tweak the settings of the video on the primary breakpoint to avoid unnecessary breakpoints.
- - - - Group layers
      - Design elements (like buttons)
      - Designing layouts
    - - Absolute positioning, free-flow.
      - Pinning
        
        Concept
        
        Elements can be pinned in relation to their parent.
        
        An element can be pinned on top, bottom, right, left..
    - - Scenario 1
        
        When you modify a text, layout doesn't automatically aligns to the parent.
  - - - Relative positioning
      - No pinning
      - Flexbox
  - - - Very good for responsive design
      - Like CSS grid
  - - - Convert the entire desktop breakpoint from a frame layout to a stack layout.
        
        Select the desktop breakpoint and click + on the layout section:
      - Play with the spacing properties (gap, padding)
    - - Example
        
        The spacing of all of the elements in the page is being controlled by the desktop element (parent) and every element in the page has the same spacing values (gap, padding, etc.). How to override/change the spacing of the child elements without changing the values of the overall page.
      - You basically just group them, for example into a stack.
    - - Just set the height of the breakpoint to fit-content.
- - - - File upload
      - URL
    - - Make video responsive and resize automatically to screen size while maintaining aspect ratio.
        
        Lock aspect ratio
        
        Click the icon
        
        Set a max-width
- - - - Creates text with self-adjusting textbox
    - - Creates text box with determined size
- - - - Activate frame tool
      - Drag to create box