-
Notifications
You must be signed in to change notification settings - Fork 0
Home
Helena edited this page Jan 25, 2016
·
1 revision
- Estilo general de la web: https://github.com/amnesty/ai-frontend
- Estilo general de los formularios: https://github.com/amnesty/ai-formulario.git
- Estilo de los formularios en el entorno CiviCRM (Drupal) aplicando los dos anteriores y el diseño específico del formulario de socixs: https://github.com/amnesty/ai-theme-civicrm
La cabecera y pie de páginas son directamente extraídos del diseño de la Web de AI, que es el primer elemento de la lista del apartado anterior.
El código de la cabecera suele parecerse a:
<!-- Header -->
<header class="header" data-header="" role="banner">
<div class="header__container" data-header-container="">
<div class="header__slogan-container">
<div class="header__slogan"> Actuamos por los derechos humanos en todo el mundo </div>
</div>
<h1 class="logo" data-logo=""><a class="logo__link" href="http://ai-frontend.dev01.icti.es/home.html">Amnistía Internacional España</a></h1>
</div>
</header>
<!-- Image after header-->
<div class="image-header image-header--has-credits-sm image-header--actua">
<div style="background-image: url("https://www.amnesty.org/media/patternlibrary/air_fivefaces_2.jpg?anchor=topcenter&preset=fixed_1472_42");" class="responsive--bg lazyloaded" data-bgset="https://www.amnesty.org/media/patternlibrary/air_fivefaces_2.jpg?anchor=topcenter&preset=fixed_1472_42, https://www.amnesty.org/media/patternlibrary/air_fivefaces_2.jpg?anchor=topcenter&preset=fixed_1472_42_hi 2x [(min-width: 1272px)] | https://www.amnesty.org/media/patternlibrary/air_fivefaces_2.jpg?anchor=topcenter&preset=fixed_1224_42, https://www.amnesty.org/media/patternlibrary/air_fivefaces_2.jpg?anchor=topcenter&preset=fixed_1224_42_hi 2x [(min-width: 1040px)] | https://www.amnesty.org/media/patternlibrary/air_fivefaces_2.jpg?anchor=topcenter&preset=fixed_1039_52, https://www.amnesty.org/media/patternlibrary/air_fivefaces_2.jpg?anchor=topcenter&preset=fixed_1039_52_hi 2x [(min-width: 840px)] | https://www.amnesty.org/media/patternlibrary/air_fivefaces_2.jpg?anchor=topcenter&preset=fixed_839_52, https://www.amnesty.org/media/patternlibrary/air_fivefaces_2.jpg?anchor=topcenter&preset=fixed_839_52_hi 2x [(min-width: 640px)] | https://www.amnesty.org/media/patternlibrary/air_fivefaces_2.jpg?anchor=topcenter&preset=fixed_639_72, https://www.amnesty.org/media/patternlibrary/air_fivefaces_2.jpg?anchor=topcenter&preset=fixed_639_72_hi 2x [(min-width: 480px)] | https://www.amnesty.org/media/patternlibrary/air_fivefaces_2.jpg?anchor=topcenter&preset=fixed_479_102, https://www.amnesty.org/media/patternlibrary/air_fivefaces_2.jpg?anchor=topcenter&preset=fixed_479_102_hi 2x [(min-width: 346px)] | https://www.amnesty.org/media/patternlibrary/air_fivefaces_2.jpg?anchor=topcenter&preset=fixed_345_102, https://www.amnesty.org/media/patternlibrary/air_fivefaces_2.jpg?anchor=topcenter&preset=fixed_345_102_hi 2x">
<picture style="display: none;">
<source srcset="https://www.amnesty.org/media/patternlibrary/air_fivefaces_2.jpg?anchor=topcenter&preset=fixed_1472_42, https://www.amnesty.org/media/patternlibrary/air_fivefaces_2.jpg?anchor=topcenter&preset=fixed_1472_42_hi 2x" sizes="1472px" media="(min-width: 1272px)" data-srcset="https://www.amnesty.org/media/patternlibrary/air_fivefaces_2.jpg?anchor=topcenter&preset=fixed_1472_42, https://www.amnesty.org/media/patternlibrary/air_fivefaces_2.jpg?anchor=topcenter&preset=fixed_1472_42_hi 2x">
<source srcset="https://www.amnesty.org/media/patternlibrary/air_fivefaces_2.jpg?anchor=topcenter&preset=fixed_1224_42, https://www.amnesty.org/media/patternlibrary/air_fivefaces_2.jpg?anchor=topcenter&preset=fixed_1224_42_hi 2x" sizes="1472px" media="(min-width: 1040px)" data-srcset="https://www.amnesty.org/media/patternlibrary/air_fivefaces_2.jpg?anchor=topcenter&preset=fixed_1224_42, https://www.amnesty.org/media/patternlibrary/air_fivefaces_2.jpg?anchor=topcenter&preset=fixed_1224_42_hi 2x">
<source srcset="https://www.amnesty.org/media/patternlibrary/air_fivefaces_2.jpg?anchor=topcenter&preset=fixed_1039_52, https://www.amnesty.org/media/patternlibrary/air_fivefaces_2.jpg?anchor=topcenter&preset=fixed_1039_52_hi 2x" sizes="1472px" media="(min-width: 840px)" data-srcset="https://www.amnesty.org/media/patternlibrary/air_fivefaces_2.jpg?anchor=topcenter&preset=fixed_1039_52, https://www.amnesty.org/media/patternlibrary/air_fivefaces_2.jpg?anchor=topcenter&preset=fixed_1039_52_hi 2x">
<source srcset="https://www.amnesty.org/media/patternlibrary/air_fivefaces_2.jpg?anchor=topcenter&preset=fixed_839_52, https://www.amnesty.org/media/patternlibrary/air_fivefaces_2.jpg?anchor=topcenter&preset=fixed_839_52_hi 2x" sizes="1472px" media="(min-width: 640px)" data-srcset="https://www.amnesty.org/media/patternlibrary/air_fivefaces_2.jpg?anchor=topcenter&preset=fixed_839_52, https://www.amnesty.org/media/patternlibrary/air_fivefaces_2.jpg?anchor=topcenter&preset=fixed_839_52_hi 2x">
<source srcset="https://www.amnesty.org/media/patternlibrary/air_fivefaces_2.jpg?anchor=topcenter&preset=fixed_639_72, https://www.amnesty.org/media/patternlibrary/air_fivefaces_2.jpg?anchor=topcenter&preset=fixed_639_72_hi 2x" sizes="1472px" media="(min-width: 480px)" data-srcset="https://www.amnesty.org/media/patternlibrary/air_fivefaces_2.jpg?anchor=topcenter&preset=fixed_639_72, https://www.amnesty.org/media/patternlibrary/air_fivefaces_2.jpg?anchor=topcenter&preset=fixed_639_72_hi 2x">
<source srcset="https://www.amnesty.org/media/patternlibrary/air_fivefaces_2.jpg?anchor=topcenter&preset=fixed_479_102, https://www.amnesty.org/media/patternlibrary/air_fivefaces_2.jpg?anchor=topcenter&preset=fixed_479_102_hi 2x" sizes="1472px" media="(min-width: 346px)" data-srcset="https://www.amnesty.org/media/patternlibrary/air_fivefaces_2.jpg?anchor=topcenter&preset=fixed_479_102, https://www.amnesty.org/media/patternlibrary/air_fivefaces_2.jpg?anchor=topcenter&preset=fixed_479_102_hi 2x">
<source srcset="https://www.amnesty.org/media/patternlibrary/air_fivefaces_2.jpg?anchor=topcenter&preset=fixed_345_102, https://www.amnesty.org/media/patternlibrary/air_fivefaces_2.jpg?anchor=topcenter&preset=fixed_345_102_hi 2x" sizes="1472px" data-srcset="https://www.amnesty.org/media/patternlibrary/air_fivefaces_2.jpg?anchor=topcenter&preset=fixed_345_102, https://www.amnesty.org/media/patternlibrary/air_fivefaces_2.jpg?anchor=topcenter&preset=fixed_345_102_hi 2x">
<img sizes="1472px" data-sizes="auto" class=" lazyautosizes lazyloaded" data-parent-fit="cover">
</picture>
</div>
<noscript> <img src="https://www.amnesty.org/media/patternlibrary/air_fivefaces_2.jpg?anchor=topcenter&amp;preset=fixed_1472_42" class=responsive__img> </noscript>
<div class="image-header__content--medium">
<div class="image-headline--full">
<h2 class="image-headline__actua-title">
<span class="heading--tape--dark">Únete a Amnistía Internacional</span>
</h2>
</div>
</div>
</div><!-- Image after header -->
(por escribir)
El diseño del formulario se basa en el diseño general de los formularios de AI, que es el segundo elemento de la lista del apartado anterior.
El formulario debe estar contenido en una estructura del tipo:
<div class="container--wide"><!-- Bootstrap Grid -->
<div class="grid">
<div id="content-area">
<!-- Formulario -->
<div class="content-form clearfix">
[ CONTENIDO DEL FORMULARIO ]
</div>
</div>
</div>
</div>
(por escribir)
<?php print $messages; ?> <!-- Errors -->
<?php print render($page['content']); ?>
(por escribir)