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;
}

  
 

 

Typography

Typography is one of the most important part of any web creation process. Amigo CSS makes it easy for you to come up with values for designing and formatting text.

Amigo CSS Typography is adapted from a minor third (1.2) type scale with a base font of 10px.

Built with developers' creative freedom in mind, Amigo CSS doesn't limit you. Be free to add your own values if these don't suit your needs. But again, for most a system like this should suffice.

Font Sizes

15 sizes

.font-size-10 { font-size: 1.0rem; }
.font-size-12 { font-size: 1.2rem; }
.font-size-14 { font-size: 1.4rem; }
.font-size-16 { font-size: 1.6rem; }
.font-size-18 { font-size: 1.8rem; }
.font-size-20 { font-size: 2.0rem; }
.font-size-24 { font-size: 2.4rem; }
.font-size-30 { font-size: 3.0rem; }
.font-size-36 { font-size: 3.6rem; }
.font-size-44 { font-size: 4.4rem; }
.font-size-52 { font-size: 5.2rem; }
.font-size-62 { font-size: 6.2rem; }
.font-size-74 { font-size: 7.4rem; }
.font-size-86 { font-size: 8.6rem; }
.font-size-98 { font-size: 9.8rem; }

Font Weights

9 weights

.font-weight-100 { font-weight: 100; }
.font-weight-200 { font-weight: 200; }
.font-weight-300 { font-weight: 300; }
.font-weight-400 { font-weight: 400; }
.font-weight-500 { font-weight: 500; }
.font-weight-600 { font-weight: 600; }
.font-weight-700 { font-weight: 700; }
.font-weight-800 { font-weight: 800; }
.font-weight-900 { font-weight: 900; }

Line Heights

9 options

.line-height-10 { line-height: 1.0 }
.line-height-11 { line-height: 1.1 }
.line-height-12 { line-height: 1.2 }
.line-height-13 { line-height: 1.3 }
.line-height-14 { line-height: 1.4 }
.line-height-15 { line-height: 1.5 }
.line-height-16 { line-height: 1.6 }
.line-height-17 { line-height: 1.7 }
.line-height-18 { line-height: 1.8 }