Introducción
Es importante incluir la hoja de estilos tanto de library, como de la fuente de iconos que se usa dentro de Red Gps.
//Hoja de estilos de library
<link rel="stylesheet" href="https://library.service24gps.com/css/library-style.css">
//Hoja de estilos de fuentes de iconos
<link rel="stylesheet" href="https://library.service24gps.com/platform-font/css/platform-font.css">
Estructura básica HTML
El siguiente ejemplo es una muestra de como debe de quedar la estructura base.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prueba 1</title>
<!--Library-->
<link rel="stylesheet" href="https://library.service24gps.com/css/library-style.css">
<!--Fuente iconos-->
<link rel="stylesheet" href="https://library.service24gps.com/platform-font/css/platform-font.css">
</head>
<body>
<p>Contenido</p>
</body>
</html>
Contenedor al 100%
El siguiente es el ejemplo de como debe de quedar la estructura para tener un contenedor al 100% de ancho.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prueba 1</title>
<!--Library-->
<link rel="stylesheet" href="https://library.service24gps.com/css/library-style.css">
<!--Fuente iconos-->
<link rel="stylesheet" href="https://plataforma.redgps.com/commons/css/platform-font.css">
</head>
<body>
<!--Contenedor principal-->
<section class="wrap-base wc100">
<div class="wb-content">
Contenedor al 100%
</div>
</section>
</body>
</html>
Contenedor 50% / 50%
El siguiente es el ejemplo de como debe de quedar la estructura para tener 2 contenedores, con la proporción de 50% cada uno.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prueba 1</title>
<!--Library-->
<link rel="stylesheet" href="https://library.service24gps.com/css/library-style.css">
<!--Fuente iconos-->
<link rel="stylesheet" href="https://plataforma.redgps.com/commons/css/platform-font.css">
</head>
<body>
<!--Contenedor principal-->
<section class="wrap-base wc50-50">
<div class="wb-aside">
Columna izquierda
</div>
<div class="wb-content">
Columna derecha
</div>
</section>
</body>
</html>
Contenedor 40% / 60%
El siguiente es el ejemplo de como debe de quedar la estructura para tener 2 contenedores, el primero con un ancho del 40% y el segundo con ancho del 60%.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prueba 1</title>
<!--Library-->
<link rel="stylesheet" href="https://library.service24gps.com/css/library-style.css">
<!--Fuente iconos-->
<link rel="stylesheet" href="https://plataforma.redgps.com/commons/css/platform-font.css">
</head>
<body>
<!--Contenedor principal-->
<section class="wrap-base wc40-60">
<div class="wb-aside">
Columna izquierda
</div>
<div class="wb-content">
Columna derecha
</div>
</section>
</body>
</html>
Contenedor 30% / 70%
El siguiente es el ejemplo de como debe de quedar la estructura para tener 2 contenedores, el primero con un ancho del 30% y el segundo con ancho del 70%.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prueba 1</title>
<!--Library-->
<link rel="stylesheet" href="https://library.service24gps.com/css/library-style.css">
<!--Fuente iconos-->
<link rel="stylesheet" href="https://plataforma.redgps.com/commons/css/platform-font.css">
</head>
<body>
<!--Contenedor principal-->
<section class="wrap-base wc30-70">
<div class="wb-aside">
Columna izquierda
</div>
<div class="wb-content">
Columna derecha
</div>
</section>
</body>
</html>
Grid
El grid basico esta dividido 12 columnas, como se muestra a continuación.
Y dependiendo las necesidades, se pueden utilizar los siguientes contenedores, tomando en cuenta que la suma por fila debe de ser las 12 columnas.
En cuanto al HTML, se necesita utilizar la clase .grid-custom para el contenedor padre, cada fila debera llevar la clase .gc-row, y dentro de este contenedor se utilizara la clase .gcr-*, en donde * es igual al numero de columnas que necesites.
<div class="grid-custom">
<div class="gc-row">
<div class="gcr-4">
...
</div>
<div class="gcr-8">
...
</div>
</div>
</div>