Estils web | Ajuntament d'Amposta

Aquest paràgraf és una entradeta destacada a dalt de tot del contingut. Només pot anar a dalt de tot, i per damunt de qualsevol titular H2. S’aconsella posar només un paràgraf. Usar un p.entradeta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dapibus eros, sed mattis sapien. In scelerisque efficitur diam, quis ultricies nibh condimentum ut. Vestibulum ligula quam, fringilla quis tortor pulvinar, vehicula aliquet ligula.

Texts i tipografia (títol de nivell 1, definir com a h2)

L’etiqueta H1 no s’ha d’usar mai directament a dins del contingut. La web ja l’assigna automàticament per al títol de la pàgina.

Vivamus a elementum purus. Maecenas lobortis, eros in venenatis ultricies, ex lacus dapibus leo, ut feugiat nulla lorem id lorem. Vivamus et eleifend elit, ullamcorper semper erat. Nulla non molestie diam.

Títol de nivell 2 (definir com a H3, màxim nivell aconsellat)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dapibus eros, sed mattis sapien. In scelerisque efficitur diam, quis ultricies nibh condimentum ut. Vestibulum ligula quam, fringilla quis tortor pulvinar, vehicula aliquet ligula. Quisque venenatis erat sit amet volutpat consectetur. Vivamus a elementum purus. Maecenas lobortis, eros in venenatis ultricies, ex lacus dapibus leo, ut feugiat nulla lorem id lorem. Vivamus et eleifend elit, ullamcorper semper erat. Nulla non molestie diam.

Títol de nivell 3 (definir com a H4, no aconsellat usar a partir d’aquesta profunditat)

Etiquetes (badges)

Aquesta és una etiqueta amb el color gris per defecte: etiqueta (envoltar el text de l’etiqueta amb un span.badge).

Per a marcar per exemple que algo ha estat actualitzat: actualitzat (envoltar el text a destacar amb un span.badge.badge-roig).

Per a marcar tot un text com a que ha estat actualitzat, envoltar-lo amb un span.actualitzat)

Columnes responsive

Usar un contenidor div.columns que contingui cada fila individual de columnes (per exemple div.columna-50 + div.columna-50, o div.columna-33 + div.columna-33 + div.columna-33; hi ha definides vàries combinacions que sempre sumen 100).

Al mostrar-se a un mòbil (disseny responsive) aquestes columnes s’apilen verticalment en el mateix ordre que teníen d’esquerra a dreta, i cadascuna passa a ocupar el 100% de l’amplada de la pantalla.

2 columnes (.columna-50 + .columna-50)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel suscipit dolor. Proin auctor leo et ex lacinia interdum. Quisque quis ante sapien. Fusce scelerisque purus venenatis tempor vehicula. Fusce eget porta diam. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi tempus in eros quis interdum. Fusce lobortis quam magna, ut dictum orci pellentesque id.

2 columnes (.columna-40 + .columna-60)

2 columnes (.columna-60 + .columna-40)

2 columnes (.columna-70 + .columna-30)

2 columnes (.columna-30 + .columna-70)

2 columnes (.columna-75 + .columna-25)

2 columnes (.columna-25 + .columna-75)

3 columnes (.columna-33 + .columna-33 + .columna-33)

4 columnes (.columna-25 + .columna-25 + .columna-25 + .columna-25)

Icones

Icones amb Font Awesome

Per veure totes les icones gratuïtes de Font Awesome 6:

Buscar icones gratuïtes a la web de Font Awesome 6.

Classes i atributs a afegir per mostra les icones:

.far: regular (estil normal).
.fas: solid (estil sòlid).
.fa-brand: brand (icones de marques comercials).
.fa-info-circle: nom de la icona.
aria-hidden=»true»: necessari per complir l’accessibilitat.

Canviar estil de les icones (enllaços a la documentació oficial de Font Awesome):

Algunes de les icones de Font Awesome 5 més usades a la web:

fas fa-info
fas fa-info-circle
fas fa-question
far fa-question-circle
fas fa-question-circle
fas fa-times
far fa-times-circle
fas fa-times-circle
fas fa-exclamation
fas fa-exclamation-circle
fas fa-exclamation-triangle
fas fa-mouse-pointer
far fa-hand-pointer
fas fa-ticket

far fa-calendar
fas fa-calendar
far fa-calendar-alt
fas fa-calendar-alt
far fa-calendar-check
fas fa-calendar-check
far fa-calendar-times
fas fa-calendar-times
far fa-clock
fas fa-phone-square-alt
fas fa-phone-alt
fas fa-mobile-alt
far fa-envelope

far fa-file
far fa-file-alt
fas fa-file
far fa-file-pdf
fas fa-file-pdf
fas fa-external-link-alt
fas fa-external-link-square-alt
fas fa-globe-europe
fas fa-globe
fab fa-facebook-square
fab fa-twitter-square
fab fa-youtube-square
fab fa-instagram
fab fa-linkedin

Icones SVG (scalable vector graphic)

Algunes de les icones SVG usades a la web (inspeccionar i copiar el codi):

Bàners amb icones (Font Awesome o SVG) i amb efecte hover quan passes el ratolí

Veure qualsevol de les pàgines mares de nivell 1 (inspeccionar i copiar el codi).

Taules

Taula estàndard

Aquesta és la estètica per defecte quan no assignes cap estil concret a una taula (TABLE):

Columna 1	Columna 2
Valor 1	Valor 2
Valor 6	Valor 7
Valor 11	Valor 12

La mateixa taula bàsica amb més columnes i amplada al 100% («Style=’with: 100%’«):

Columna 1	Columna 2	Columna 3	Columna 4	Columna 5
Valor 1	Valor 2	Valor 3	Valor 4	Valor 5
Valor 6	Valor 7	Valor 8	Valor 9	Valor 10
Valor 11	Valor 12	Valor 13	Valor 14	Valor 15

Taula sense files alternades

Afegint la classe TABLE.no-alternar farà que no es mostri el color gris de fons a línies alternes.

Columna 1	Columna 2	Columna 3	Columna 4	Columna 5
Valor 1	Valor 2	Valor 3	Valor 4	Valor 5
Valor 6	Valor 7	Valor 8	Valor 9	Valor 10
Valor 11	Valor 12	Valor 13	Valor 14	Valor 15

Taula més complexa i amb més estils

Amb algunes classes més per donar estil (TABLE#taula-proc, TABLE.taula-proc, TR.thead2 i TR.alternar):

Columna 1	Columna 2	Columna 3	Columna 4	Columna 5
Capçalera interior 1
Valor 1	Valor 2	Valor 3	Valor 4	Valor 5
Valor 6	Valor 7	Valor 8	Valor 9	Valor 10
Capçalera interior 3
Valor 11	Valor 12	Valor 13	Valor 14	Valor 15

Taula simple

Assignant la classe .taula-simple es mostra una taula sense cap estil (útil per a alinear visualment contingut de forma fàcil):

Organisme:	Ajuntament d’Amposta
Adreça:	Pl. de l’Ajuntament, 3-4 43870-Amposta
Telèfon:	977 70 00 57

Taula responsive

Per a les taules grans en amplada, afegint la classe .taula-responsive fa que es mostri amb una barra de desplaçament horitzontal, i no es trenqui la resta de la pàgina; a més a més afegeix un text d’ajuda només visible des dels smartphones (veure aquesta pàgina des del mòbil per veure l’efecte):

Columna 1	Columna 2	Columna 3	Columna 4	Columna 5
Valor 1	Valor 2	Valor 3	Valor 4	Valor 5
Valor 6	Valor 7	Valor 8	Valor 9	Valor 10
Valor 11	Valor 12	Valor 13	Valor 14	Valor 15

Nota important: ja no és necessari afegir manualment la classe .taula-responsive, es fa automàticament.

Pestanyes

Pestanyes simples

Podràs inspeccionar aquí un exemple de pestanyes simples per tal de copiar el codi HTML.

Pestanyes amb icones

Podràs inspeccionar aquí un exemple de pestanyes amb icones per tal de copiar el codi HTML.

Pestanyes anidades (només un màxim de 2 nivells)

Per a que funcionin correctament les dobles pestanyes, les exteriors són les que han de tenir assignades les classes acabades amb «2» (.tabs2, .tabs-link2, .tabs-active2…).

Podràs inspeccionar aquí un exemple de pestanyes anidades per tal de copiar el codi HTML.

Edició visual de les pestanyes

Per a facilitar l’edició de les pestanyes de forma visual, l’assistent de l’editor del gestor de continguts deixa el següent atribut activat:
contenteditable=»true».

Al acabar de crear les pestanyes, pensar en deixar-lo desactivat:
contenteditable=»false».

Canviar pestanya activa mitjançant un paràmetre a la URL

Afegir el següent paràmetre al final de la URL per tal d’enfocar una pestanya concreta al carregar la pàgina:

?tab=N, on «N» és la posició de la pestanya que vols posar activa, començant per «1».

Exemple per a mostrar activa la pestanya de la segona posició: https://amposta.cat/url-completa?tab=2

Canviar pestanyes actives mitjançant paràmetres a la URL (a les pestanyes anidades)

Afegir el/s següent/s paràmetre/s al final de la URL per tal d’enfocar una/es pestanya/es concreta/es al carregar la pàgina:

?tab2=X, on «X» és la posició de la pestanya de nivell 1 que vols posar activa, començant per «1».
?tab=Y, on «Y» és la posició absoluta de la pestanya de nivell 2 que vols posar activa, començant per «1».
Posició absoluta Y = Si hi ha varis jocs de pestanyes de nivell 2, s’ha d’indicar la posició de la que vols posar activa dintre de la suma total de pestanyes.
Important: No és obligatori usar els dos paràmetres; quan sí que s’usen junts, separar-los amb «&».

Exemple per a mostrar activa la pestanya en segona posició del nivell 1 i la de tercera posició del nivell 2: https://amposta.cat/url-completa?tab2=2&tab=3

Panells informatius

Panells bàsics sense icones

Afegir classes .danger i .success al panell per a posar color.

Panell bàsic per defecte amb un enllaç a dins.

Panell simple amb la classe .success amb un enllaç a dins.

Panell simple amb la classe .danger amb un enllaç a dins.

Panells amb una icona

Esborrar la classe .p-una-linia per a panells amb mes de una linia

Afegir classes .simple, .transparent, .danger o .success al div.panell-exclamation per a donar estil.

Panell amb icona per defecte

Panell amb icona amb la classe .success

Panell amb icona amb la classe .danger

Panell amb icona amb la classe .transparent

Panell amb icona amb la classe .simple

Panell amb icona i més elements a dins:

Llista punt 1
Llista punt 2
Llista punt 3

Una altra llista, ara ordenada:

Llista punt 1
Llista punt 2
Llista punt 3

Panell vertical amb vàries icones

Subpanell 1

Subpanell 2

Panell horitzontal amb vàries icones

Del 14 al 17 d’Octubre de 2020

Baixos de la Biblioteca Comarcal Sebastià Juan Arbó, a Amposta

Panells desplegables

Per al titular podem fer servir qualsevol dels Headings (H1, H2, H3, H4…) o inclús altres etiquetes de bloc (P, SPAN…).
Important: No posar cap etiqueta html a dins del titular.
Si volem el panell inicialment desplegat, afegir classe .mostrar al titular i canviar l’icona per fa-chevron-up.
Si volem un panell més elegant, sense el fons gris pero amb les ratlles, canviar .panell per .panell-simple.
Si no volem cap panell, podem esborrar la classe .panell.

Panells desplegables per defecte

Panell inicialment desplegat

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque arcu tortor, aliquet lacinia massa non, condimentum pretium lectus. Aliquam erat volutpat. Donec eget mollis lectus. Nulla facilisi. Sed placerat odio quis enim consequat auctor id eu turpis. Ut pulvinar pretium ex a dapibus. Suspendisse sed lobortis risus. Nullam ut quam tincidunt, semper velit at, aliquam nibh. Duis et sem dictum, luctus augue vel, fringilla dui. Quisque ut consequat justo. Proin gravida sagittis blandit.

Panell inicialment plegat

Panells desplegables «simples» (separats per ratlles)

Panell inicialment desplegat

Panell inicialment plegat

Panells desplegables «transparents» (sense fons ni ratlles)

Panell inicialment desplegat

Panell inicialment plegat

Panells desplegables «transparents» (sense fons ni ratlles, però amb un separador addicional)

Panell inicialment desplegat

Panell inicialment plegat

Panells desplegables amb icona alternativa (rodona)

Panell inicialment plegat

Efectes amb fotos

Imatges ampliables al fer clic amb el ratolí (lightbox)

Per defecte totes les fotografies (IMG) són ampliables al fer clic amb el ratolí, però es pot canviar aquest comportament amb la classe .no-fancybox

Sense cap classe:

Amb la classe .no-fancybox:

Afegir un marc al voltant de les fotos

Es pot afegir varis tipus de bordes a les fotografies afegint a IMG les classes .foto-borde o .foto-borde-marc. Per a forçar que no hi hagi marc es pot usar .no-foto-borde.

Sense borde (sense classe o amb .no-foto-borde):

Amb .foto-borde:

Amb .foto-borde-marc:

Canviar el color de les imatges al passar el ratolí per sobre

Assignar la classe .gris-a-color per a passar de gris cap a color:

Assignar la classe .color-a-gris per a passar de color cap a gris:

Galeries de fotos

Posar una foto (img.galeria-foto o un img.galeria-foto-vertical) a dins de cada columna (div.columna-33.galeria o div.columna-33.galeria-vertical).

Exemple de galeria de fotos horitzontals a 3 columnes

Exemple de galeria de fotos horitzontals a 4 columnes

Exemple de galeria de fotos verticals a 3 columnes

Exemple de galeria de fotos verticals a 4 columnes

Aplicar els estils de les fotos a dins les galeries

Es poden usar amb les fotos els estils CSS explicats a la pestanya anterior:

Afegir peus de foto a les imatges

Afegir el paràgraf de text (p) a dins d’un div.galeria-foto-peu.

Text del peu de foto

Altres

Mostrar o amagar elements només als smartphones

.mostrar-mobile	Afegir aquesta classe a qualsevol element per a que només es mostri a la vista d’smartphone.
.amagar-mobile	Afegir aquesta classe a qualsevol element per a que només es mostri a la vista d’ordinador.