*{margin: 0;}

body{box-sizing: border-box;background-color: azure;width: 100vw;}

header{box-sizing: border-box;background-color: #ff9f1c;width:100vw;height:10vh;border:1px solid blue;}

nav{box-sizing: border-box;background-color: #ff9f1c;width:100vw;height:10vh;border:1px solid blue;}

section{box-sizing: border-box;background-color: white;width:100vw;height:70vh;margin: 0;padding: 0;}

aside{float:left;box-sizing: border-box;background-color: #2ec4b6;width:20%;height: 70vh;}

article{float:left;box-sizing: border-box;background-color: #ffe5d9;width:30%;height:70vh;border: 1px solid red;}

ul{list-style-type: none;}

li{box-sizing: border-box;float: left;background-color:#2ec4b6;padding:20px;color:white;}

footer{float: none;display: block;box-sizing: border-box;background-color: black;color:white;width:100vw;height:10vh;border:1px solid blue;}

Clases de layout

*: *{margin: 0;}
general: .general{box-sizing: border-box;width: 100vw;}
.vw_100-vh_10 (ancho 100vw x alto 10vh): .vw_100-vh_10{box-sizing: border-box;width:100vw;height:10vh;}
vw_100-vh_70 (ancho 100vw x alto 70vh): .vw_100-vh_70{box-sizing: border-box;width:100vw;height:70vh;}
w_20pc_vh_70 (ancho 20vw x alto 70vh): .w_20pc_vh_70{box-sizing: border-box;width:20%;height:70vh;}
w_30pc_vh70 (ancho 100vw x alto 70vh): .w_30pc_vh70{box-sizing: border-box;width:30%;height:70vh;}
flota_izqda: .flota_izqda{float: left;}
boton: .boton{width:50px;border-radius: 10px;}

Clases de skin

*: *{margin: 0;}
general: .fondo_general{background-color: azure;}
.fondo_1: .fondo_1{background-color: #ff9f1c;border:1px solid blue;}
fondo_2: .fondo_2{background-color: #2ec4b6;border: 1px solid red;}
fondo_3: .fondo_3{background-color: #ffe5d9;border: 1px solid red;}
fondo_blanco: .fondo_blanco{background-color: white;color:black;border: 1px solid red;}
fondo_negro: .fondo_negro{background-color: black;color:white;border: 1px solid red;}
padding_20: .padding_20{padding: 20px;}
fondo_boton: .fondo_boton{background-color: maroon;}
listamenu: .listamenu{list-style-type: none;}