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.

1
1
1
1
1
1
1
1
1
1
1
1

Y dependiendo las necesidades, se pueden utilizar los siguientes contenedores, tomando en cuenta que la suma por fila debe de ser las 12 columnas.

gcr-12
gcr-1
gcr-11
gcr-2
gcr-10
gcr-3
gcr-9
gcr-4
gcr-8
gcr-5
gcr-7
gcr-6
gcr-6

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>