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

  
 

 

CSS Grid

CSS Grid layout is the most modern way of building Layouts. A cousin of flexbox, CSS Grid allows us to lay out elements in a 2-dimensional grid (a container is divided into columns and rows).

Amigo CSS utilizes most of the features of CSS Grids by having ready-made classes.

Displays

...

// Applied to the grid container .display-grid { display: grid; } .display-inline-grid { display: inline-grid; }

Grid Columns

Defines number of columns - Each width value is one column

// Applied to the grid container

Grid Rows

Defines number of rows - The first number correspond to the width of the first row and so forth

// Applied to the grid container

Justify Items Grid Only Property

Arrange items in rows (Horizontal arrangement of items)

// Applied to the grid container .justify-items-stretch { justify-items: stretch; } //default .justify-items-start { justify-items: start; } .justify-items-end { justify-items: end; } .justify-items-center { justify-items: center; }

Align Items

Arrange items in columns (Vertical arrangement of items)

// Applied to the grid container .grid-align-stretch { align-items: stretch; } //default .grid-align-start { align-items: start; } .grid-align-end { align-items: end; } .grid-align-center { align-items: center; }

Justify Content

Less used. Only applies when grid container is larger than grid. (Horizontal arrangement)

// Applied to the grid container .grid-justify-stretch { justify-content: stretch; } .grid-justify-start { justify-content: start; } .grid-justify-end { justify-content: end; } .grid-justify-center { justify-content: center; } .grid-justify-around { justify-content: space-around; } .grid-justify-between { justify-content: space-between; } .grid-justify-evenly { justify-content: space-evenly; }

Align Content

Less used. Only applies when grid container is larger than grid. (Vertical arrangement)

// Applied to the grid container .grid-content-start { align-content: start; } .grid-content-end { align-content: end; } .grid-content-center { align-content: center; } .grid-content-stretch { align-content: stretch; } .grid-content-around { align-content: space-around; } .grid-content-between { align-content: space-between; } .grid-content-evenly { align-content: space-evenly; }
More Properties coming...