Please enable JavaScript.

Coggle requires JavaScript to display documents.

CSS: Layout - Coggle Diagram

- - - - Same as border
- - - - Every element has an initial display value
- - - - Normal flow
    - - Position relative to normal flow
    - - Position relative to the containing block
        
        Nearest positioned ancestor or else the initial containing block
        
        Initial containing block
        
        Contains the root element
        
        Has the dimensions of the viewport
      - Takes element out of the normal flow
      - Element's margins aren't collapsed with margins of static adjacent elements
    - - Positioned relative to the visible viewport unless an ancestor is a fixed containing block
    - - Positioned relative until a specific offset and then fixed-positioned
      - Elements stick relative to the nearest ancestor with a scrolling behaviour
  - - - Positioned elements are stacked on top of static elements
      - Positioned elements later in source order are stacked above those that come earlier
      - Elements with higher z-index values appear above those with lower values
- - - - Risk of a horizontal scrollbar in smaller screens
      - Too much whitespace on large screens
    - - Squashed designs on smaller screens
      - Long line lengths on larger screens
    - - Overhead of managing two different sites
      - Limited features
    - - Using JavaScript to detect screen resolution and to load the relevant CSS
  - - - Flexible grids
        
        Built using floats and percentage-width content
        
        Original solution
      - Modern layout techniques are responsive by default
        
        Multiple-column layout
        
        Flexbox
    - - Scaled down images
        
        max-width: 100%
        
        Original solution
        
        Wastes bandwidth and suboptimal art direction
      - <picture> element
        
        <img>
        
        srcset
        
        sizes
    - - Allows for selectively applying CSS based on tests on browser and device environment
      - Breakpoints
        
        Points at which CSS inside media queries are introduced
        
        Should only be introduced at points where a layout change is required
        
        Unreadable line lengths
        
        Insufficient space for an element
      - Syntax
        
        @media media-type and (media-feature-rule) { ... }
        
        Media type
        
        all
        
        Default
        
        print
        
        screen
        
        speech
        
        Media feature rule
        
        An expression that must evaluate to true for the CSS to be applied
        
        Width and height
        
        Exact values
        
        width
        
        height
        
        Ranges
        
        min-*
        
        max-
        
        em values can be used to account for increased font sizes
        
        orientation
        
        landscape
        
        portrait
        
        Pointing devices
        
        hover
        
        hover
        
        pointer
        
        none
        
        fine
        
        coarse
        
        Logic
        
        And
        
        and
        
        Or
        
        Comma-separation
        
        Not
        
        not
      - Can be avoided in certain situations with the use of modern layout methods
    - - Media queries along with relative units for font sizes
      - Using viewport units for font sizes
        
        User loses ability to zoom text
        
        Should be used with calc() to add a rem or em value to the viewport value
    - - Required since some mobile browsers overreport viewport size
      - initial-scale
        
        Usually 1
      - width
        
        Should be device-width
      - @viewport at-rule is deprecated and should not be used
      - height
  - - - Favours single-column layouts
      - Relies on well-ordered markup
- - - - Grid and flexbox overrides
        
        Float and clear
        
        display: inline-block
        
        display: table
      - Grid overrides
        
        Multi-column layout
        
        Flexbox
        
        Flexbox is supported in IE10 and 11
      - Modern layout methods override older layout methods
  - - - Percentage width
        
        Calculated against grid area width in grid layouts
        
        Calculated against container width in float layouts
      - Some properties behave in different ways given a certain layout method
    - - Rules that should apply to older browsers should be applied outside of feature queries
  - - - -ms- prefixed on IE10
    - - -ms- on IE10, IE11, and Edge
- - - - Cross axis
      - Main axis
  - - - stretch
        
        Items are sized to the largest element if parent size along the axis is not set
        
        Initial value
      - Controls how items are placed in the cross axis
      - Intrinsic size of items are retained in all values except stretch
    - - row
        
        Initial value
      - column
      - row-reverse
      - column-reverse
      - Specifies the main axis
    - - flex
      - inline-flex
    - - Shorthand for flex-direction and flex-wrap
    - - Controls how items are placed in the main axis
      - Initialised to flex-start
  - - - Take up to three values
      - How much available space along the main axis is taken by an item relative to other items
      - Longhand property
        
        flex-grow
        
        Unitless proportion value
        
        Factored after the minimum size
        
        flex-shrink
        
        Unitless proportion value
        
        How much an item would shrink when the items overflow the container
        
        flex-basis
        
        Sets the minimum size of item
        
        Size value or auto
    - - Override container's alignment for an item
    - - Initialised to 0
      - Higher valued items appear later
      - Similar valued items appear in the source order
      - Accepts negative values
- - - - Defaults to a single-column grid
    - - gap
        
        column-gap
        
        row-gap
        
        <length> or <percentage> values
      - grid- prefix works as an alias for gap properties
    - - grid-template-columns
      - grid-template-rows
      - Multiple values
        
        <flex> values
        
        fr unit
        
        Distributes available (not all) space
        
        Fixed tracks are allocated first
        
        <length> or <percentage> values
      - repeat()
        
        Can be used to shorten patterns in track listings
        
        Count can be set to auto-fill to create as many tracks as possible
    - - Implicit grid tracks are auto sized by default
      - grid-auto-rows
      - grid-auto-columns
      - minmax() can be used to set lower and upper limits
  - - - Values
        
        Can be negative values
        
        Can be specified as start / end
      - Properties
        
        grid-column
        
        grid-row
        
        Shorthands for grid-*-start and grid-*-end
      - Placed using 1-based line numbers
      - Writing mode dependant
      - Applies for the explicit grid only
    - - grid-template-areas
        
        All cells need to be accounted for
        
        Names to be repeated to span across cells
        
        Non-repeating, rectangular areas
        
        Use . to leave cells empty
      - grid-area
- - - - Clearfix hack
        
        Inserting a block-type generated element after the container which clears floats
      - Containers with a taller floated element and shorter content
      - overflow hack
        
        Creates a block formatting context
        
        overflow of the container is set to a value other than visible
      - display: flow-root
        
        Creates a block formatting context without unintended scrollbars etc.
        
        Set on the container element
- - - - Floated to the left and the right
      - Width set in percentages to accommodate for two columns and a gutter (if required)
    - - Percentage width and a fixed max-width
      - margin: 0 auto;
  - - - Column containers
        
        Float box and set column and gutter width
        
        Column spanning and offsetting
        
        Can be handled with separate classes that add the additional width and gutter
        
        Unsemantic
      - Row containers
        
        Clear both ways
    - - Percentage widths should be used for container, column, and gutter widths
      - calc() could be used in the column-span classes
    - - Flexbox too is one-dimensional
      - flex-basis value still needs to be overridden explicitly to span columns