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>
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>
Contenedores
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://library.service24gps.com/platform-font/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://library.service24gps.com/platform-font/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://library.service24gps.com/platform-font/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://library.service24gps.com/platform-font/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>
Contenedor horizontal 40/60
Pensando en un acomodo horizontal, se hizo la siguiente estructura, en la cual, la parte superior esta pensado para que lleve el mapa, la parte inferior podría ser utilizada para el listado o algun modulo.
<!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>
<!--Contenedor principal-->
<div class="wrap-base wbH40-60">
<div class="wbTop">
Contenedor superior
</div>
<div class="wbBottom">
Contenedor inferior
</div>
</div>
</body>
</html>
Contedor 1 columna y 2 divisiones
El siguiente acomodo, se realizo para contemplar, un caolumna que se podria utilizar para un listado, y la segunda columna, que esta dividida en 2 partes, en la parte superior podría llevar un mapa, dejando la parte inferior para un detalle o un modulo.
<!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>
<!--Contenedor principal-->
<div class="wrap-base wbAMV">
<div class="wbActivos">
Contenido listado
</div>
<div class="wbColumn">
<div class="wbMapa">
Contenedor mapa
</div>
<div class="wbVista">
Contenedor detalle
</div>
</div>
</div>
</body>
</html>
Tipografía
La fuente utilizada para Library es Helvetica Neue, cabe mencionar que dependiendo de si esta fuente esta disponible en el dispositivo del usuario, otras fuentes declaradas para utilizarse en caso de no estar disponible la primera , son las siguientes:
- Segoe UI
- Roboto
- Arial
- Noto Sans
H1, h2, h3, h4, h5, h6
Los siguientes tamaños, correspondena a los titulos que se pueden usar dentro de Library.
h1. Esto es un h1 dentro de library.
h2. Esto es un h2 dentro de library.
h3. Esto es un h3 dentro de library.
h4. Esto es un h4 dentro de library.
h5. Esto es un h5 dentro de library.
h6. Esto es un h6 dentro de library.
La estructura HTML, se utilizara las etiquetas <h1>, <h2>, <h3>, etc
H1 <h1>h1. Esto es un h1 dentro de library.</h1> H2 <h2>h2. Esto es un h2 dentro de library.</h2> H3 <h3>h3. Esto es un h3 dentro de library.</h3> H4 <h4>h4. Esto es un h4 dentro de library.</h4> H5 <h5>h5. Esto es un h5 dentro de library.</h5> H6 <h6>h6. Esto es un h6 dentro de library.</h6>
Tambien se podra obtener los anteriores tamaños, por medio de una clase, a continuación un ejemplo:
Esto es un párrafo con el tamaño de un H1
Esto es un párrafo con el tamaño de un H2
Esto es un párrafo con el tamaño de un H3
Esto es un párrafo con el tamaño de un H4
Esto es un párrafo con el tamaño de un H5
Esto es un párrafo con el tamaño de un H6
La estructura HTML quedaría de la siguiente forma.
Párrafo con clase H1 <p class="h1">Esto es un párrafo con el tamaño de un H1</p> Párrafo con clase H2 <p class="h2">Esto es un párrafo con el tamaño de un H2</p> Párrafo con clase H3 <p class="h3">Esto es un párrafo con el tamaño de un H3</p> Párrafo con clase H4 <p class="h4">Esto es un párrafo con el tamaño de un H4</p> Párrafo con clase H5 <p class="h5">Esto es un párrafo con el tamaño de un H5</p> Párrafo con clase H6 <p class="h6">Esto es un párrafo con el tamaño de un H6</p>
Margenes
A continuaciónse mostrará los margenes disponibles dentro de library. El margen interno es de 15px a los lados y