This website is not optimized for mobile view yet...
// Layout

.display-flex {
    display: flex;
}

.display-grid {
    display: grid;
}
// Typography

.font-size-16 {
    font-size: 1.6rem;
}

.font-size-20 {
    font-size: 2.0rem;
}
// Whitespace

.margin-24 {
    margin: 2.4rem;
}

.margin-center {
    margin: 0 auto;
}

Amigo CSS

// Shortcuts

.display-flex-center-both {
    display: flex;
    align-items: center;
    justify-content: center;
}



// Extras

.scroll-smooth {
    scroll-behaviour: smooth;
}
.cursor-pointer {
    cursor: pointer;
}

  
 

 

Size

Amigo CSS size system is based on the same values as the whitespace system. This makes it so easy to remember the different values used. You don't have to memorize different values for whitespace and for sizes...they're all the same.

Amigo CSS sizes determines different values for width, height, min-width, max-width, min-height and max-height

Just like in the whitespace system, in the size system we also have the main system and the extra values I have personally added after playing with the framework for sometime.

One thing that has been added into the size system is percentages. You can decide to size your elements using pixels/rems or percentages.

Width

Rems / Px (1rem = 10px)

// Main size system .width-0 { width: 0; } .width-20 { width: 2rem; } .width-40 { width: 4rem; } .width-80 { width: 8rem; } .width-120 { width: 12rem; } .width-160 { width: 16rem; } .width-240 { width: 24rem; } .width-320 { width: 32rem; } .width-480 { width: 48rem; } .width-640 { width: 64rem; } .width-800 { width: 80rem; } .width-960 { width: 96rem; } .width-1280 { width: 128rem; }
// Extra values .width-100 { width: 10rem; } .width-200 { width: 20rem; } .width-400 { width: 40rem; } .width-560 { width: 56rem; } .width-720 { width: 72rem; } .width-1040 { width: 104rem; } .width-1120 { width: 112rem; } .width-1200 { width: 120rem; }
// Percentage values .width-10-percent { width: 10%; } .width-20-percent { width: 20%; } .width-25-percent { width: 25%; } .width-30-percent { width: 30%; } .width-33-percent { width: 33.33%; } .width-40-percent { width: 40%; } .width-50-percent { width: 50%; } .width-60-percent { width: 60%; } .width-66-percent { width: 66.67%; } .width-70-percent { width: 70%; } .width-75-percent { width: 75%; } .width-80-percent { width: 80%; } .width-90-percent { width: 90%; } .width-100-percent { width: 100%; }

Heights

Rems / Px (1rem = 10px)

// Main size system .height-0 { height: 0; } .height-20 { height: 2rem; } .height-40 { height: 4rem; } .height-80 { height: 8rem; } .height-120 { height: 12rem; } .height-160 { height: 16rem; } .height-240 { height: 24rem; } .height-320 { height: 32rem; } .height-480 { height: 48rem; } .height-640 { height: 64rem; } .height-800 { height: 80rem; } .height-960 { height: 96rem; } .height-1280 { height: 128rem; }
// Extra values .height-100 { height: 10rem; } .height-200 { height: 20rem; } .height-400 { height: 40rem; } .height-560 { height: 56rem; } .height-720 { height: 72rem; } .height-1040 { height: 104rem; } .height-1120 { height: 112rem; } .height-1200 { height: 120rem; }
// Percentage values .height-10-percent { height: 10%; } .height-20-percent { height: 20%; } .height-25-percent { height: 25%; } .height-30-percent { height: 30%; } .height-33-percent { height: 33.33%; } .height-40-percent { height: 40%; } .height-50-percent { height: 50%; } .height-60-percent { height: 60%; } .height-66-percent { height: 66.67%; } .height-70-percent { height: 70%; } .height-75-percent { height: 75%; } .height-80-percent { height: 80%; } .height-90-percent { height: 90%; } .height-100-percent { height: 100%; }

Min-Width

Rems / Px (1rem = 10px)

// Main size system .min-width-0 { min-width: 0; } .min-width-20 { min-width: 2rem; } .min-width-40 { min-width: 4rem; } .min-width-80 { min-width: 8rem; } .min-width-120 { min-width: 12rem; } .min-width-160 { min-width: 16rem; } .min-width-240 { min-width: 24rem; } .min-width-320 { min-width: 32rem; } .min-width-480 { min-width: 48rem; } .min-width-640 { min-width: 64rem; } .min-width-800 { min-width: 80rem; } .min-width-960 { min-width: 96rem; } .min-width-1280 { min-width: 128rem; }
// Extra values .min-width-100 { min-width: 10rem; } .min-width-200 { min-width: 20rem; } .min-width-400 { min-width: 40rem; } .min-width-560 { min-width: 56rem; } .min-width-720 { min-width: 72rem; } .min-width-1040 { min-width: 104rem; } .min-width-1120 { min-width: 112rem; } .min-width-1200 { min-width: 120rem; }
// Percentage values .min-width-10-percent { min-width: 10%; } .min-width-20-percent { min-width: 20%; } .min-width-25-percent { min-width: 25%; } .min-width-30-percent { min-width: 30%; } .min-width-33-percent { min-width: 33.33%; } .min-width-40-percent { min-width: 40%; } .min-width-50-percent { min-width: 50%; } .min-width-60-percent { min-width: 60%; } .min-width-66-percent { min-width: 66.67%; } .min-width-70-percent { min-width: 70%; } .min-width-75-percent { min-width: 75%; } .min-width-80-percent { min-width: 80%; } .min-width-90-percent { min-width: 90%; } .min-width-100-percent { min-width: 100%; }

Min-Height

Rems / Px (1rem = 10px)

// Main size system .min-height-0 { min-height: 0; } .min-height-20 { min-height: 2rem; } .min-height-40 { min-height: 4rem; } .min-height-80 { min-height: 8rem; } .min-height-120 { min-height: 12rem; } .min-height-160 { min-height: 16rem; } .min-height-240 { min-height: 24rem; } .min-height-320 { min-height: 32rem; } .min-height-480 { min-height: 48rem; } .min-height-640 { min-height: 64rem; } .min-height-800 { min-height: 80rem; } .min-height-960 { min-height: 96rem; } .min-height-1280 { min-height: 128rem; }
// Extra values .min-height-100 { min-height: 10rem; } .min-height-200 { min-height: 20rem; } .min-height-400 { min-height: 40rem; } .min-height-560 { min-height: 56rem; } .min-height-720 { min-height: 72rem; } .min-height-1040 { min-height: 104rem; } .min-height-1120 { min-height: 112rem; } .min-height-1200 { min-height: 120rem; }
// Percentage values .min-height-10-percent { min-height: 10%; } .min-height-20-percent { min-height: 20%; } .min-height-25-percent { min-height: 25%; } .min-height-30-percent { min-height: 30%; } .min-height-33-percent { min-height: 33.33%; } .min-height-40-percent { min-height: 40%; } .min-height-50-percent { min-height: 50%; } .min-height-60-percent { min-height: 60%; } .min-height-66-percent { min-height: 66.67%; } .min-height-70-percent { min-height: 70%; } .min-height-75-percent { min-height: 75%; } .min-height-80-percent { min-height: 80%; } .min-height-90-percent { min-height: 90%; } .min-height-100-percent { min-height: 100%; }

Max-Width

Rems / Px (1rem = 10px)

// Main size system .max-width-0 { max-width: 0; } .max-width-20 { max-width: 2rem; } .max-width-40 { max-width: 4rem; } .max-width-80 { max-width: 8rem; } .max-width-120 { max-width: 12rem; } .max-width-160 { max-width: 16rem; } .max-width-240 { max-width: 24rem; } .max-width-320 { max-width: 32rem; } .max-width-480 { max-width: 48rem; } .max-width-640 { max-width: 64rem; } .max-width-800 { max-width: 80rem; } .max-width-960 { max-width: 96rem; } .max-width-1280 { max-width: 128rem; }
// Extra values .max-width-100 { max-width: 10rem; } .max-width-200 { max-width: 20rem; } .max-width-400 { max-width: 40rem; } .max-width-560 { max-width: 56rem; } .max-width-720 { max-width: 72rem; } .max-width-1040 { max-width: 104rem; } .max-width-1120 { max-width: 112rem; } .max-width-1200 { max-width: 120rem; }
// Percentage values .max-width-10-percent { max-width: 10%; } .max-width-20-percent { max-width: 20%; } .max-width-25-percent { max-width: 25%; } .max-width-30-percent { max-width: 30%; } .max-width-33-percent { max-width: 33.33%; } .max-width-40-percent { max-width: 40%; } .max-width-50-percent { max-width: 50%; } .max-width-60-percent { max-width: 60%; } .max-width-66-percent { max-width: 66.67%; } .max-width-70-percent { max-width: 70%; } .max-width-75-percent { max-width: 75%; } .max-width-80-percent { max-width: 80%; } .max-width-90-percent { max-width: 90%; } .max-width-100-percent { max-width: 100%; }

Max-Height

Rems / Px (1rem = 10px)

// Main size system .max-height-0 { max-height: 0; } .max-height-20 { max-height: 2rem; } .max-height-40 { max-height: 4rem; } .max-height-80 { max-height: 8rem; } .max-height-120 { max-height: 12rem; } .max-height-160 { max-height: 16rem; } .max-height-240 { max-height: 24rem; } .max-height-320 { max-height: 32rem; } .max-height-480 { max-height: 48rem; } .max-height-640 { max-height: 64rem; } .max-height-800 { max-height: 80rem; } .max-height-960 { max-height: 96rem; } .max-height-1280 { max-height: 128rem; }
// Extra values .max-height-100 { max-height: 10rem; } .max-height-200 { max-height: 20rem; } .max-height-400 { max-height: 40rem; } .max-height-560 { max-height: 56rem; } .max-height-720 { max-height: 72rem; } .max-height-1040 { max-height: 104rem; } .max-height-1120 { max-height: 112rem; } .max-height-1200 { max-height: 120rem; }
// Percentage values .min-height-10-percent { min-height: 10%; } .min-height-20-percent { min-height: 20%; } .min-height-25-percent { min-height: 25%; } .min-height-30-percent { min-height: 30%; } .min-height-33-percent { min-height: 33.33%; } .min-height-40-percent { min-height: 40%; } .min-height-50-percent { min-height: 50%; } .min-height-60-percent { min-height: 60%; } .min-height-66-percent { min-height: 66.67%; } .min-height-70-percent { min-height: 70%; } .min-height-75-percent { min-height: 75%; } .min-height-80-percent { min-height: 80%; } .min-height-90-percent { min-height: 90%; } .min-height-100-percent { min-height: 100%; }