-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
345 lines (345 loc) · 15.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
<!doctype html>
<!--[if lt IE 9 ]> <html class="ie ie8 no-js" lang="es"> <![endif]-->
<!--[if IE 9 ]> <html class="ie ie9 no-js" lang="es"> <![endif]-->
<!--[if IE 10 ]> <html class="ie ie10 no-js" lang="es"> <![endif]-->
<!--[if gt IE 10]><!--><html class="no-js" lang="es"><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Guías de Estilo Base</title>
<link rel="stylesheet" href="css/guia.css">
<link rel="stylesheet" href="css/estilos.css">
<!--[if lt IE 9]>
<script src="bower_components/html5shiv/dist/html5shiv.min.js"></script>
<script src="bower_components/respondJs/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<img src="http://pazvial.cl/imgs/logopazvial.png" alt="Logotipo Natur Fresh">
<section class="definiciones">
<h2>Colores</h2>
<ul class="colores">
<li class="color">
<h3>Azul Paz Vial</h3>
<div class="azul-bg muestra"></div>
<p class="hex">#141F78</p>
<p class="variable">$azul</p>
<p class="variable">.azul,
<br> .azul-bg</p>
</li>
<li class="color">
<h3>Gris Claro</h3>
<div class="grisClaro-bg muestra"></div>
<p class="hex">#D6D6D6</p>
<p class="variable">$grisClaro</p>
<p class="variable">.grisClaro,
<br> .grisClaro-bg</p>
</li>
<li class="color">
<h3>Gris Muy Claro</h3>
<div class="grisMuyClaro-bg muestra"></div>
<p class="hex">#F0F0F0</p>
<p class="variable">$grisMuyClaro</p>
<p class="variable">.grisMuyClaro,
<br> .grisMuyClaro-bg</p>
</li>
<li class="color">
<h3>Gris Oscuro</h3>
<div class="grisOscuro-bg muestra"></div>
<p class="hex">#404040</p>
<p class="variable">$grisOscuro</p>
<p class="variable">.grisOscuro,
<br> .grisOscuro-bg</p>
</li>
<li class="color">
<h3>Gris Mas Oscuro</h3>
<div class="grisMasOscuro-bg muestra"></div>
<p class="hex">#333333</p>
<p class="variable">$grisMasOscuro</p>
<p class="variable">.grisMasOscuro,
<br> .grisMasOscuro-bg</p>
</li>
<li class="color">
<h3>Gris Negro</h3>
<div class="grisNegro-bg muestra"></div>
<p class="hex">#1A1A1A</p>
<p class="variable">$grisNegro</p>
<p class="variable">.grisNegro,
<br> .grisNegro-bg</p>
</li>
<li class="color">
<h3>Ocre</h3>
<div class="ocre-bg muestra"></div>
<p class="hex">#E5CB5C</p>
<p class="variable">$ocre</p>
<p class="variable">.ocre,
<br> .ocre-bg</p>
</li>
<li class="color">
<h3>Turquesa</h3>
<div class="turquesa-bg muestra"></div>
<p class="hex">#77B7BE</p>
<p class="variable">$turquesa</p>
<p class="variable">.turquesa,
<br> .turquesa-bg</p>
</li>
<li class="color">
<h3>Verde</h3>
<div class="verde-bg muestra"></div>
<p class="hex">#4D9680</p>
<p class="variable">$verde</p>
<p class="variable">.verde,
<br> .verde-bg</p>
</li>
<li class="color">
<h3>Coral</h3>
<div class="coral-bg muestra"></div>
<p class="hex">#D5807F</p>
<p class="variable">$coral</p>
<p class="variable">.coral,
<br> .coral-bg</p>
</li>
</ul>
<hr>
<h2>Tipografía</h2>
<ul class="fonts">
<li class="font">
<h3>Font Global</h3>
<p class="nombre sans">Open Sans</p>
<p class="variable">$sans-stack</p>
<p class="variable"><code>.sans</code></p>
<ul class="specimen sans">
<li>Regular</li>
<li><i>Italic</i></li>
<li><b>Bold</b></li>
<li><b><i>Bold-Italic</i></b></li>
</ul>
<p class="descripcion"></p>
</li>
<li class="color">
<h3>Slab Serif</h3>
<p class="nombre serif">Josefin Slab</p>
<p class="variable">$serif-stack</p>
<p class="variable"><code>.serif</code></p>
<ul class="specimen serif">
<li>Regular</li>
<li><i>Italic</i></li>
<li><b>Bold</b></li>
<li><b><i>Bold-Italic*</i></b></li>
</ul>
<p class="descripcion"></p>
</li>
<li class="color">
<h3>Títulos</h3>
<p class="nombre display">Aracne Regular</p>
<p class="variable">$display-stack</p>
<p class="variable"><code>.display</code></p>
<ul class="specimen display">
<li>Regular</li>
<li><i>Italic*</i></li>
<li><b>Bold*</b></li>
<li><b><i>Bold-Italic*</i></b></li>
</ul>
<p class="descripcion">Esta tipografía debe ser usada al menos a 32px de tamaño.</p>
</li>
</ul>
<p><strong>Nota:</strong> Las tipografías con <b>*</b> (asterisco) no tienen una fuente cargada y es adaptada por el navegador.</p>
</section>
<hr>
<section>
<h1>Título H1 <a href="#?1">con link</a></h1>
<p>Un corto párrafo de texto justo debajo del encabezado H1. Debemos agregar más texto y contenido para descubrir hasta donde llega el ancho de la caja del párrafo, es paráctico hacerlo también para los encabezados y bajadas de texto. Debemos enunciar un <a href="#?1">link o ancla</a> dentro del párrafo e idealmente hacer.</p>
<p>Un segundo párrafo para hacernos una clara idea de los márgenes entre párrafos y con el siguiente encabezado. Hay gente que gusta de dar estilo al elemento <code><section></code> pero prefiero usar este espacio para difinir los elementos que van dentro del párrafo, como <small>small o pequeño</small>, <strong>strong</strong>, <b>b (bold)</b>, <em>em (emphasis)</em>, <i>i (italics o cusrivas)</i>.</p>
<hr>
<p>Entre el párrafo anterior y este hay un elemento <code><hr></code></p>
<div class="corporis">
<code>.corporis</code>
<h2>Subtítulo H2 <a href="#?1">con link</a></h2>
<p>Otro párrafo para hablar sobre otros elementos como listas, que a su vez pueden listar otros elementos:<p>
<ul>
<li><code><q></code>: <q>Ser o no ser...</q></li>
<li><code><kbd></code>: <kbd>cd format c:</kbd></li>
<li><code><samp></code>: <samp>Are you sure you want to format C? It will delete all files and folders.</samp></li>
<li><code><code></code>: <code>line-height:2.25em;</code></li>
<li><code><code class="language-css"></code>: <code class="language-css">line-height:2.25em;</code></li>
</ul>
<h3>Subtítulo H3 <a href="http://pazvial.cl/">con link (visitado)</a></h3>
<p>El siguiente párrafo puede tratar asuntos como la combinación de elementos en línea como <strong><em>strong>em destacado con énfasis, pero semánticamente lo encuentro un poco redundante</em></strong> en cambio <b><i>b>i —bold con itálicas—</i></b> o <i><b>i>b —itálicas con bold—</b></i> que se ven iguales, pero tienen significados semántigos distintos.</p>
<p>A continuación un <code><blockquote></code></p>
<blockquote>
<p>The picture element is intended to give authors a way to control which image resource a user agent presents to a user, based on media query and/or support for a particular image format.</p>
</blockquote>
<h4>Subtítulo H4 <a href="#?1">con link</a></h4>
<p>¿Por qué no usar lorem Ipsum? Porque diseñar sin contenido es un ejercicio incompleto. Lorem ipsum es como un bastón para alguien que no lo necesita y no corre porque tiene el bastón. Usar Lorem ipsum es un parche, que ni siquiera toma en consideración los caracteres especiales del español.</p>
<h5>Subtítulo H5 <a href="#?1">con link</a></h5>
<p>Desde hace algún tiempo ya, hemos ido eliminando completamente el uso de <i>Lorem Ipsum</i>, porque termina ocultando problemas de contenido. Muchas veces, entre el cliente y uno mismo nos conformamos con esta muletilla e ignoramos la falta del contenido, muchas veces, haste que ya es demasiado tarde. Ha pasado que ni siquiera existe el contenido que se suponía iba en el lugar llenado con texto simulado.</p>
<h6>Subtítulo H6 <a href="#?1">con link</a></h6>
<p>Aunque se puede argumentar que este mismo ejercicio es una contradicción de lo anterior. Porque estamos inventando párrafos y texto que no es contenido final, con el sólo propósito de testear los estilos gráficos de una manera genérica.</p>
</div>
</section>
<div class="wrapper"><h2>Imágenes</h2>
<code>.wrapper</code>
<h3>Imagen sola</h3>
<img src="http://pazvial.cl/imgs/content/paz_vial_foto.jpg" alt="Fotografía en Blanco y Negro de Paz Vial">
<h3>Imágen en una figura <code><figure></code></h3>
<figure>
<img src="http://pazvial.cl/imgs/content/paz_vial_piezascreadasamano.jpg" alt="Mariposa de cerámica cocida (bizcocho) repasada a mano.">
<figcaption>Cada paso del proceso es llevado a cabo por las manos de un experimentado artesano.</figcaption>
</figure>
<h3>Imagen en línea</h3>
<p>Aquí hay una imagen de un Lechero Provenzal cuya única descripción consta de: Ancho: 12 cm, Largo: 23 cm, Alto: 12 cm, Código: 11221112. Las imágenes en línea, deben estar alineadas verticalmente a la línea base o <code class="language-css">vertical-aign:baseline;</code> Así queda alineada a la base de la línea de texto donde se encuentra incrustada. Las imágenes en línea <img src="imgs/lechero.jpg" width="50px" alt="Fotografía de jarro lechero de cerámica esmaltada roja"> sí aceptan valores para <code class="language-css">margin-top</code> y <code class="language-css">margin-bottom</code>, a diferencia de los <span>span</span>.</p>
</div>
<hr>
<div class="wrapper corporis">
<code>.wrapper.corporis</code>
<h2>Listas</h2>
<h3>Lista ordenada <code><ol></code></h3>
<ol>
<li>Primer ítem</li>
<li>Segundo ítem <a href="#?1">con link</a></li>
<li>Tercer ítem <em>con énfasis</em></li>
<li>Cuarto ítem <strong>con fuerte énfasis</strong></li>
<li>El quinto ítem tiene una sub-lista
<ol>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
<li>Cuatro</li>
</ol>
</li>
</ol>
<h3>Lista sin orden <code><ul></code></h3>
<ul>
<li>Primer ítem</li>
<li>Segundo ítem <a href="#?1">con link</a></li>
<li>Tercer ítem <em>con énfasis</em></li>
<li>Cuarto ítem <strong>con fuerte énfasis</strong></li>
<li>El quinto ítem tiene una sub-lista
<ul>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
<li>Cuatro</li>
</ul>
</li>
</ul>
<h3>Lista con bloques dentro de cada elemento.</h3>
<ul>
<li><code><li></li></code>La factura electrónica es un documento digital legalmente válido como medio de respaldo de las operaciones comerciales entre contribuyentes y, por lo tanto, reemplaza a las facturas tradicionales de papel. El ser facturador electrónico habilita al contribuyente como emisor y receptor de Documentos Tributarios Electrónicos (DTE) como por ejemplo: factura electrónica, nota de crédito, nota de débito y guía de despacho.</li>
<li><p><code><li><p></p></li></code>Para otros destinos, contáctate con nosotros en nuestras tiendas, o por email a <a href="mailto:[email protected]">[email protected]</a>, o al teléfono: <a href="tel:+56222432134">(562) 2243 2134</a></p></li>
<li>
<p><code><li><p></p><p></p><p></p></li></code></p>
<p>Ya hemos abierto nuestra tienda en línea. Puedes pagar con tu tarjeta de crédito o tu red-compra.</p>
<p>No es necesario registrarse ni entregar datos innecesarios para hacer la compra.</p>
</li>
<li>
<img src="imgs/fuente-roma.jpg" alt="Fuente de cerámica rectangular baja, cerámica esmaltada color naranja coral, sobre fondo blanco.">
<p><code><li><img></li></code></p>
</li>
</ul>
<h2>Formularios y sus elementos</h2>
<form id="unoFormo" action="./">
<p>Los elementos de un form, en general, son por defecto <code class="language-css">display:inline;</code> y <code class="language-css">display:inline-block;</code> por lo que es mejor meterlos dentro de un bloque para que no quede una majamama de elementos.</p>
<p>Personalmente prefiero las listas y en los estilos defino que los li dentro de un form se comportan parecido a un div.</p>
<ul>
<li><label for="nombre1">Etiqueta 1: para texto</label>
<input type="text" name="nombre1" id="nombre1"></li>
<li><label for="nombre2">Etiqueta 2: para email</label>
<input type="email" name="nombre2" id="nombre2"></li>
<li><label for="nombre3">Etiqueta 3: para número</label>
<input type="number" name="nombre3" id="nombre3"></li>
<li><label>Etiqueta 4: con el input adentro <input type="text" name="nombre4" id="nombre4" placeholder="con texto placeholder"></label>
<li><label for="nombre5">Etiqueta 5: Búsqueda</label>
<input type="search" name="nombre5" id="nombre5"></li>
<li><label for="nombre6">Etiqueta Checkbox</label>
<input type="checkbox" name="nombre6" id="nombre6"></li>
<li><label><input type="checkbox" name="nombre7" id="nombre7"> Etiqueta Checkbox con caja dentro del <code><label></code></label></li>
<li><label>Etiqueta Checkbox con caja dentro del <code><label></code>, a la derecha: <input type="checkbox" name="nombre8" id="nombre8"></label></li>
<li><label for="nombre11"> Etiqueta antes de: </label><input type="radio" id="nombre11" name="nombreRadios"></li>
<li><input type="radio" id="nombre12" name="nombreRadios"><label for="nombre12">Etiqueta después del radio</label></li>
<li><label><input type="radio" id="nombre13" name="nombreRadios"> Etiqueta Radio con caja dentro del <code><label></code></label></li>
<li><label>Etiqueta Radio con caja dentro del <code><label></code>, a la derecha: <input type="radio" id="nombre14" name="nombreRadios"></label></li>
<li><label for="elSelect">Etiqueta: Seleccione un número</label> <select name="elSelect">
<option value="0">Seleccione...</option>
<option value="1">Uno</option>
<option value="2">Dos</option>
<option value="3">Tres</option>
</select></li>
<li><input type="button" name="nombre8" id="nombre8" value="Input botón">
<button type="button">Button</button>
<p>Ojo que un button debe tener <code>type="button"</code> si no se quiere que envíe automáticamente el formulario.</p></li>
<li>A veces es útil tener estilos para que <a href="#?1" class="button">link</a> parezca botón <code>a.button</code></li>
<li><textarea name="nombre7" id="nombre7" cols="30" rows="10"></textarea></li>
</ul>
</form>
<h2>Tablas</h2>
<p>Las tablas son para mostrar información tabulada, en celdas.</p>
<table cellspacing="0">
<thead><tr>
<th>Cepa</th>
<th>Año plantación</th>
<th>Has. plantadas</th>
</tr></thead>
<tbody>
<tr>
<td>Merlot</td>
<td>2010</td>
<td>10</td>
</tr>
<tr>
<td>Cabernet Franc</td>
<td>2009</td>
<td>7,6</td>
</tr>
<tr>
<td>Cabernet Sauvignon</td>
<td>2011</td>
<td>5</td>
</tr>
<tr>
<td>Syrah</td>
<td>2008</td>
<td>11,2</td>
</tr>
<tr>
<td>Malbec</td>
<td>2012</td>
<td>1</td>
</tr>
<tr>
<td>Carmenere</td>
<td>2009</td>
<td>7,4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Totales:</td>
<td></td>
<td>42,2 Has.</td>
</tr>
</tfoot>
</table>
<h2>Listas de definición <dl> y <dd></h2>
<p>Por defecto hacemos que queden como definiciones de dicionario, con el término de la definición en negritas y ocupando un tercio del ancho del contenedor.</p>
<dl>
<dt>Vitacura</dt><dd class="precio">$ 4.000</dd>
<dt>Las Condes</dt><dd class="precio">$ 4.000</dd>
<dt>Lo Barnechea</dt><dd class="precio">$ 4.000</dd>
<dt>Providencia</dt><dd class="precio">$ 4.000</dd>
<dt>La Reina</dt><dd class="precio">$ 7.000</dd>
<dt>Colina</dt><dd class="precio">$ 10.000</dd>
<dt>Huechuraba</dt><dd class="precio">$ 10.000</dd>
<dt>Stgo. Centro</dt><dd class="precio">$ 10.000</dd>
</dl>
<h2>Más elementos o grupos</h2>
<p>Hay muchos más elementos y innumerables combinaciones de estos, la idea es ir agregando aquí los de uso más común, o específicos de cada proyecto. Algunos ejemplos:</p>
<ul>
<li>Paginación</li>
<li>Fechas <code><time></code></li>
<li>Direcciones</li>
<li>Marcas de edición <code><mark><del><ins></code></li>
</ul>
</div>
</body>
</html>