04 Layout

Containers

The default container is 960 pixels wide and has a padding of 15 pixels on the sides. By default, all content will be displayed in the center.

<div class="kg__container">
    <!-- All content -->
</div>

The default height of the container is set depending on the contents of the container, but can be changed using h-100 this will accommodate the high at 100vh.

Expanded container

The expanded container occupies 100% of the width and has a padding of 15 pixels on the sides.

<div class="kg__container kg-expanded">
    <!-- All content -->
</div>

Ampersand modification list

• kg-expanded: expands the container to 100% of the width
• h-100: sets the height of the container to 100vh
• kg-dark: sets the background color of the container to #2b2b2b

Flex Global Style

• kg__flex
  • kg__flex-wrap-nowrap
  • kg__flex-wrap-wrap
  • kg__flex-wrap-wrap_reverse
  • kg__flex-direction-column
  • kg__flex-direction-row
  • kg__flex-direction-row_reverse
  • kg__flex-direction-column_reverse
  • fl-jc-flex_start
  • fl-jc-flex_end
  • fl-jc-flex_center
  • fl-jc-space_between
  • fl-jc-space_around
  • fl-jc-space_evenly
  • fl-jc-space_between
  • fl-ali-flex_start
  • fl-ali-flex_end
  • fl-ali-flex_center
  • fl-ali-stretch
  • fl-ali-baseline
  • fl-alc-flex_start
  • fl-alc-flex_end
  • fl-alc-flex_center
  • fl-alc-stretch
  • fl-alc-space_between
  • fl-alc-stretch
  • fl-alc-space_around
  • gap-10
  • gap-20
  • gap-30

Colors Global Style

• kg__color

  • pl-colors

    * `-primary`
    * `-secondary`
    * `-tertiary`
    * `-quaternary`
    * `-quinary`
    * `-dark`
    

  • pl-bg

    * `-primary`
    * `-secondary`
    * `-tertiary`
    * `-quaternary`
    * `-quinary`
    * `-dark`
    

<div class="kg__color pl-bg-dark">
     <span class="kg__color pl-colors">hello world</span>
     <span class="kg__color pl-colors-primary">hello world</span>
</div>