Flexbox

Resources

A way to organize items as movable elements in CSS.

• Guide

Grid

Center elements

display: grid;
place-items: center;

Resources

A way to organize items in Css as grids

• Guide

Fonts

Resources

• Google fonts

Charts

Resources

• Charts.css

Custom components

Create a homemade radio button

• Thanks Pierre-Louis for the trick:

      <label class="order-radio selected">
        <div class="circle selected">
          <div class="inside-circle"></div>
        </div>
        <input type="radio" checked="true" name="radio" />
        <p>Livraison gratuite (5 jours ouvrés)</p>
      </label>

  .circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;

    background: #aaaaaa;

    display: grid;
    place-items: center;
  }

  .inside-circle {
    width: 13px;
    height: 13px;
    border-radius: 50%;

    background-color: white;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.25);
  }

Memo

• "In CSS, margin and padding are TRouBLE": padding|margin: top right bottom left

Resources

• Defensive CSS: protect yourself against bad CSS behaviour
• Visual Design Rules