BAstrap


Bastrap es el framework HTML, CSS y Javascript responsive diseñado por el Gobierno de la Ciudad de Buenos Aires en base a Bootstrap para restablecer los lineamientos de los sitios y páginas que conforman el sitio de Buenos Aires.

Actualmente versión 7.0

Formar parte de los sitios de BA



(+) Importante

Todas las páginas y sitios deben respear los puntos mencionados en este checklist para formar parte de la familia BA. Si tu sitio o página web no utiliza alguna de las formas de header y footer provistas o no responde a los requerimientos básicos y obligatorios de tipografía y color, realizá los ajustes correspondientes para poder llevar a cabo la revisión solicitada.

¿Tenés una idea para un sitio nuevo dentro de Buenos Aires o ya lo tenés armado y necesitas una revisión? Te proponemos esta guía con los lineamientos básicos que deben estar contemplados en el diseño de tu página para que forme parte de la familia de los sitios de Buenos Aires.

Tener en cuenta estos estilos y elementos mínimos va a agilizar tu proceso de trabajo y la revisión por parte de la Gerencia de Experiencia de Usuario parte de la Dirección de Ciudad Inteligente.

¿Qué lineamientos debe respetar mi página para pertenecer a la familia de Sitios de Buenos Aires?


Header y Footer institucional

Cada sitio debe utilizar, según corresponda, uno de los siguientes headers en los cuales la marca de Buenos Aires, la marca secundaria (la de tu sitio) y los links tienen un lugar predeterminado y responde a estilos correspondientes a la identidad de Buenos Aires y Bastrap.

Header
Caso 1
Última actualización Noviembre de 2017


Caso 2
Última actualización Noviembre de 2017



Cuando la marca lo requiera y sea necesario agregar un color en el header este lo hará formando un gradient con el amarillo (#fdd306)

Footer

El footer tiene ciertos requerimientos obligatorios, e independientes del sitio en el cual se utilice, y otros flexible que pueden o no incluirse.

Los requerimientos obligatorios son:

• Uso del logo BA con la leyenda Vamos Buenos Aires. (+)
• Fondo color #343434 (+)


Elementos flexibles:
• Pueden agregarse, cambiarse o eliminarse los links,
• Los botones de las redes sociales pueden redirigir a las distintas redes de cada proyecto.

A continuación se suma una captura del diseño del footer actual para que sirva de ejemplo para las siguientes propuestas.

Última actualización Noviembre de 2017


Descargas disponibles

Los archivos html y css y para poder maquetar o diseñar el header y el footer de tu sitio en versión escritorio y mobile, se encuentran disponibles en este link

Descargá la carpeta con los .png de los distintos logos de Buenos Aires y sus aplicaciones, disponible en este link

Fuentes y usos tipográficos

Todos los sitios de Buenos Aires utilizan dos familias tipográficas: Open Sans y Chalet, cada una con sus usos.

Chalet

Se usa en los textos display, en tu sitio es la fuente correspondiente a las etiquetas h1, h2 y h3.
Adjuntamos las variantes de estilo y tamaño de la aplicación de la tipografía Chalet en las etiquetas más utilizadas:

h1. Títulos Buenos aires

h2. Títulos Secundarios

h3. Subtítulos



Open Sans

Se usa para los textos de lectura
En el maquetado de tu sitio, será la fuente utilizada en las siguientes etiquetas: h4 y p Adjuntamos las variantes de estilo y tamaño de la aplicación de la tipografía Open Sans en las etiquetas más utilizadas:

h4. Subtítulos

p. Textos de lectura

Paleta cromática

Bastrap dispone de una amplia paleta en dos versiones, una principal y una ampliada que recomendamos utilizar sólo en casos necesarios.
Cabe recordar que el amarillo (#fdd306) y el celeste (#19c3e3) son los colores marca, por lo que su presencia en el sitio es importante para construir su identidad y su pertenencia a la familia de sitios de Buenos Aires.

Colores claros

#e76056

#f3a32d

#fcda59

#2ebc98

#99c25f

#19c3e3

#0389d1

#3e4f5e

#9d6db6

#f562a2

Colores oscuros

#e74c3c

#f39c12

#fdd306

#18b596

#88bf48

#00b3e3

#037dbf

#34485e

#9b59b6

#f54789

Grises

#1d1c1a

#333

#717170

#a6a4a4

#c5c3c2

#e5e5e5

#f3f0ed

#f5f5f5

Descargas disponibles

Descargá la paleta cromática en formato .ase para editar tus archivos en Adobe Illustrator y en .css para tu hoja de estilos link

Fotografías / Ilustraciones

Las imágenes deben ser de producción propia, sea por el área encargada del proyecto o por el área de banco de imágenes de gobierno (en este caso podemos hacer el pedido de imágenes, aunque puede demorar hasta un mes).

Se busca no utilizar imágenes de sitios de stock porque se corren ciertos riesgos:
• que las imágenes no responden al clima estético comunicado institucionalmente,
• que se despeguen de la gráfica institucional,
• que no estén diseñadas para comunicar al público al cual nos dirigimos: los vecinos de la Ciudad de Buenos Aires.

Iconos

Se recomienda utilizar los iconos disponibles en los Lineamientos de diseño para los sitios y aplicaciones de Buenos Aires, en caso de no contar con los necesarios diseñarlos siguiendo los criterios estéticos de la propuesta.

Introducción



Antes de comenzar el proceso de diseño de tu página o necesitas una revisión por parte de Gestion Digital del Ministerio de Modernización, Ciencia y Tecnología te recomendamos leer las distintas secciones de estos lineamientos donde vas a encontrar, entre otras cosas, todas las herramientas para diseñar y maquetar tu sitio.

Cómo empezar

Bastrap es un framework basado en Bootstrap por lo que para su uso es necesario contar con conocimientos de HTML, CSS y Bootstrap 3 (ya que la mayoría de los componentes y clases son los mismos).

En tus páginas debés respetar la siguiente estructura en el encabezado (tags "html" y "head") de las páginas del sitio:

• Doctype HTML5
• Atributo de lenguaje español
• Codificación UTF-8
• Compatibilidad con IE
• Compatibilidad mobile
• Descripción del sitio para buscadores
• Autor del sitio
• Título de la página
• Íconos del sitio para diferentes dispositivos
• Link de Bootstrap 3 minimizado
• Link de BAstrap3 minimizado
• Link de estilos extra del sitio
• Compatibilidad condicional con IE comentada

Y también debés respetar la siguiente estructura en el pie (antes del cierre del tag "body") de las páginas del sitio:

• Link de jQuery minimizado
• Link de JavaScript de Bootstrap 3 minimizado
• Link de código JavaScript extra del sitio
• También se deben respetar el encabezado y pie de página oficiales.

Configuraciones importantes


Bastrap utiliza estilos y configuraciones que son necesario considerarlas, las mismas están orientadas a la normalización de los estilos.

Doctype HTML5

BAstrap requiere el uso del doctype HTML5. Esto significa que la página está escrita en HTML5 y permite al navegador entender qué versión de HTML estamos utilizando.

Responsive meta tag

Para garantizar una reproducción adecuada y un zoom táctil para todos los dispositivos, agregue la etiqueta meta "viewport" dentro de la etiqueta <head>.

CSS



Elementos básicos de maquetado y comunes de Bootstrap.

Grilla

La grilla de BAstrap3 está compuesta principalmente por 3 elementos:

  • Contenedor (Container)
  • Fila (Row)
  • Columna (Col)

El sufijo "-fluid" sirve para que el ancho total se adapte al contenedor padre (que puede ser diferente al ancho total de la página).

Columnas

Las filas deben sumar 12 columnas como se muestra a continuación

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6

Espacio

Se pueden usar offsets para dejar espacios equivalentes al ancho de una o varias columnas.

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3

Anidado

Se pueden anidar columnas dentro de otras. Las mismas deben estar en una nueva fila dentro de la columna madre.

Level 1: .col-sm-9
Level 2: .col-xs-8 .col-sm-6
Level 2: .col-xs-4 .col-sm-6

Orden

Se puede modificar el órden de las columnas respecto al órden del código html.

.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9

Opciones responsive

Una columna puede tener varias de las siguientes clases para comportarse diferente según el ancho de la ventana.

  • col-xs-*
  • col-sm-*
  • col-md-*
  • col-lg-*

(Modificá el ancho de la ventana de tu navegador para ver los diferentes comportamientos)

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4

Tipografía

Las fuentes utilizadas en todas las piezas de Buenos Aires son: Chalet-NewYorkNineteenEighty y Open Sans.

Titulares

Ofrecemos algunos estilos básicos en las etiquetas de cabecera. En el ejemplo siguiente, puede ver la diferencia de tamaños entre las 6 diferentes etiquetas de cabeceras.

Todos los headings, h1 hasta h6 están disponibles.


h1. Títulos Buenos aires

font-size:24pt - 32px - 2.3em
line-hegiht:28.8pt

h2. Títulos Secundarios

font-size:20pt - 28px - 2em
line-hegiht:28.8pt

h3. Subtítulos

font-size:15pt - 24px - 1.7em
line-hegiht:19.2pt

h4. Subtítulos

font-size:15pt - 20px - 1.4em
line-hegiht:19.2pt

Cuerpo de texto

Ofrecemos algunos estilos básicos en las etiquetas de cabecera. En el ejemplo siguiente, puede ver la diferencia de tamaños entre las 6 diferentes etiquetas de cabeceras.


p .lead Texto para bajada de titulares o destacados.

font-size:24px - 1.5em
line-hegiht:29.4px

p. Textos de lectura

font-size:14px - 1.2em
line-hegiht:20px

Estilos para textos en línea

Destacados

Se puede usar la etiqueta mark para destacar un texto

Bold

Se puede usar la etiqueta strong para incluir un texto en negrita

Italic

Se puede usar la etiqueta em para aplicar itálicas un texto

Small

Se puede usar la etiqueta small para reducir el tamaño de un texto

Colores predeterminados

Se puede usar distintas clases en la etiqueta p para cambiar el color de un texto. Algunos ejemplos son:

Texto inactivo en gris.



Mensaje de error en rojo.



Mensaje de éxito en verde.

Citas

Para añadir citas textuales en un bloque de texto, se utiliza la etiqueta blockquote, por ejemplo:

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Cita textual

Autor, Datos de la publicación

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Estilos para listas de elementos

Lista no ordenada

En este tipo delistas los elementos no requieren un orden necesario. Se utiliza la etiqueta ul

  • Elemento 1
  • Elemento 2
  • Elemento 3
    • Subelemento 3.1
  • Elemento 4
Lista ordenada

En este tipo delistas los elementos sí requieren un orden preciso. Se utiliza la etiqueta ol

  1. Elemento 1
  2. Elemento 2
  3. Elemento 3
    • Subelemento 3.1
  4. Elemento 4

Tablas

Las tablas te permiten ordenar información y, dependiendo el contexto de uso y los estilos que rigen tu diseño, te proponemos algunos ejemplos.

Tabla básica

# Nombre Apellido Usuario
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Tabla con franjas

# Nombre Apellido Usuario
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Casos especiales

Proponemos otros ejemplos de estilos de tablas para usar en casos que lo requieran.

Caso 1: filas de colores y efecto hover.
# Encabezado de columna Encabezado de columna Encabezado de columna
1 Contenido de columna Contenido de columna Contenido de columna
2 Contenido de columna Contenido de columna Contenido de columna
3 Contenido de columna Contenido de columna Contenido de columna
4 Contenido de columna Contenido de columna Contenido de columna
5 Contenido de columna Contenido de columna Contenido de columna
6 Contenido de columna Contenido de columna Contenido de columna
7 Contenido de columna Contenido de columna Contenido de columna
Caso 2: columnas anidadas.
# Nombre Apellido Usuario
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Paleta cromática

Bastrap dispone de una amplia paleta dividida en colores claros, sus versiones oscuras y grises.

Colores claros

#e76056

#f3a32d

#fcda59

#2ebc98

#99c25f

#19c3e3

#0389d1

#3e4f5e

#9d6db6

#f562a2

Colores oscuros

#e74c3c

#f39c12

#fdd306

#18b596

#88bf48

#00b3e3

#037dbf

#34485e

#9b59b6

#f54789

Grises

#1d1c1a

#333

#717170

#a6a4a4

#c5c3c2

#e5e5e5

#f3f0ed

#f5f5f5

Componentes



Elementos combinados con funcionones especiales, de Bootstrap y exclusivos.

Acordeón Colapsable (Collapse)

Las fuentes utilizadas en todas las piezas de Buenos Aires son: Chalet-NewYorkNineteenEighty y Open Sans.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Alertas

Las alertas son mensajes que se utilizan para comunicar avisos extraordinarios o que necesitan ser destacados.

Alertas básicas

Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.




Alertas descartables

Warning! Better check yourself, you're not looking too good.




Alertas con iconos





Alertas con link

Atajos

Son elementos que se utilizan en la apertura de las páginas para presentar y dirigir al principal contenido del sitio.

Barra de progreso

Proporcionan feedback actualizado sobre el progreso de un flujo de trabajo o acción con barras de progreso simples pero flexibles.

Barra de progreso con porcentaje
60% Complete
Barra de progreso con porcentaje
60%

Botones

Tipos de botones

Tamaños

Colores

Los colores más utilizados son el amarillo y el gris, su uso depende de la situación comunicativa y el flujo. Aún así, siempre que se llame a una acción el botón va en amarillo.

El framework Bootstrap cuenta con una amplia gama de colores para los botones, su uso queda limitado a casos específicos en pos de garantizar la usabilidad del la página y una mejor experiencia.

Estados

Activos



Inactivos



Grupo de botones




Carrousel

Etiquetas (Labels)

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Default Primary Success Info Warning Danger

Formularios

Ejemplo básico

Campos

Selectores
Formulario horizontal
Grupo de formulario
Campos de formulario con icono

Los íconos dentro de un campos de texto se utilizan para una identificación rápida de la información a ingresar.



Campos de formulario con icono como botones

Los botones dentro de campos en un formulario se utilizan para acciones específicas hacia esa informaicón, por ejemplo: Lupa en formulario de búsuqeda o cruz para eliminar lo escrito.


Campos con selección múltiple

Cuando se necesita elegir uno o más elementos de una lista extensa en un formulario tenemos la opción de utilizar este plugin de javascript que soporta búsquedas.

Para más información de cómo utilizarlos ver la Documentación de Chosen (en inglés).

    Estilos

    Tamaño de los campos

    Estados de validación

    Grupo de lista

    • 14 Cras justo odio
    • Dapibus ac facilisis in
    • Morbi leo risus

    Imágenes

    Contenedores de imágenes
    140x140 140x140 140x140
    Miniaturas
    Vista previa de artículos
    300x200

    Thumbnail label

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Button Button

    300x200

    Thumbnail label

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Button Button

    300x200

    Thumbnail label

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Button Button

    Insignas (Badges)

    Información emergente breve (tooltip)

    Los tooltips brindan información en forma de texto sobre algún elemento específico como un ícono o una imagen. Por temas de performance, hay que iniciarlizarlos por medio de javascript como en el ejemplo.

    Para más información de cómo utilizarlos ver la documentación (en inglés).

    Información emergente (popovers)

    Los popovers brindan información contextual como los tooltips pero más específica pudiendo usar contenido en html. Por temas de performance, hay que iniciarlizarlos por medio de javascript como en el ejemplo.

    Para más información de cómo utilizarlos ver la documentación (en inglés).

    Popover top

    Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

    Popover right

    Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

    Popover bottom

    Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

    Popover left

    Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

    Jumbotron

    Es un componente utilizado jerarquizar contenido importante y dar contexto por medio de una imagen de fondo.




    ¡Hola, mundo!

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Leer más »

    Lista multimedia

    • 64x64

      Media heading

      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

      64x64

      Nested media heading

      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
      64x64

      Nested media heading

      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
      64x64

      Nested media heading

      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    • 64x64

      Media heading

      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Paginación

    Numeración de páginas




    Ver nombre

    Panel

    Panel básico
    Titulo panel example
    Panel heading without title
    Panel content

    Panel title

    Panel content
    Panel content
    Panel especial
    Panel con foto

    Pestañas y pills