IMPORTANT: Per accedir als fitxer de subversion: http://acacha.org/svn (sense password). Poc a poc s'aniran migrant els enllaços. Encara però funciona el subversion de la farga però no se sap fins quan... (usuari: prova i la paraula de pas 123456)

Introducció

CSS són les inicials de Cascading Style Sheets i traduït vol dir "fulls d'estil en cascada".

És important separar el CSS de l'HTML.

Història

  • CSS1 (1996) -> font, color, align, box-model, #id, .class, ...
  • CSS2 (1998) -> position, z-index, media, text-shadow, ...
  • CSS 2.1 (2011) -> CSS2.1 vs CSS 2.0
  • CSS3 Actualment

Com utilitzar CSS en un fitxer HTML?

  • inline -> Dintre del mateix document HTML. Inconvenient de que no separem les capes.
  • Embedded -> Mitjançant la etiqueta < link>.
  • External -> Mitjançant la etiqueta < style>.
  • @import -> Combinat amb < style>.

Com s'escriu el CSS

Sintaxi

Exemple de Statement:

selector.gif

Selector -> Selecciona la part (identifica un patró) del document HTML al qual aplicar els estils.

Declaration -> Totes van separades entre un ; A més a més, cada declaració es composa de més d'una propietat i dels valors que acompanyen aquestes.

Vendor prefix

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

Layouts

Tècniques per a crear layouts:

  • Prohibides: taules, frames, etc. Molt antigues.
  • Posicionament: block / inline.
  • Floats
  • Css tables
  • Layouts responsive
  • Flexbox. Versió CSS3
  • Grid

Flexbox

Flexbox layout: Esquema de distribució.

Hem vist els Box layouts:
- block: div -> "vertical"
- inline: a -> "horitzontal"
- block-inline -> combinació dels anteriors

Flex: flexibilitat (dinàmiques, resising, stretching, shrinking).

2 tipus d'elements (etiquetes html):
- Containers: és obligatori i conté una llista o conjunt d'items.
- Items: són els elements susceptibles de ser organitzats.

Grid Layouts / Grid Systems

Dos tipus de grid layouts:

  • HTML based Grid layouts : Bootstrap, bulma i altres sistemes. Per exemple, vue-material té un sistema de layouts.
  • CSS Grids layouts. Més separation of concerns que l'anterior. Han sortit nous frameworks.

Bulma

Bulma utilitza com a base el model flexbox.

Bootstrap

Cal definir un div amb la classe container.

Mobile First Strategy

A partir de la versió 3. Es dissenya tenint en compte primer els mòbils. Seguint el següent model:

  • Content: Determinar que és més important.
  • Layout: Primer dissenyar els layouts petits, primer css per a mòbils i adaptar progressivament per a tables, desktop, large.
  • Progressive enhancement: millora progressiva. Les responsive utilities ajuden a fer-ho.

Mides bootstrap

  1. xs - extra small (mobiles) fins a 768px
  2. sm small (tablets o phablets) fins a 992px
  3. md medium (desktop) fins a 1200px
  4. lg large (large desktop)

Landing Pages

Vol dir pàgina principal.

Call to Action -> CTA. El que vols que l'usuari faci.

Icons

  • Font-awesome
  • Material icons
  • ionicons

Color

Vue material

//Vue material themes
Vue.material.registerTheme('custom', {
  primary: 'blue',
  accent: 'red',
  warn: 'red',
  background: 'grey'
})
//Apply themes
Vue.material.setCurrentTheme('custom')

Tipografia

Cal definir la font i després utilitzar-la.

Al utilitzar-la, s'indiquen diverses families de font per a que esculli una altra quan no es trobi la primera en el sistema operatiu.

Al definir-la, el navegador se la descarrega i tothom la veu de la mateixa manera.

Combinar diferents fonts com a criteri de disseny:

h1 {
   font-family: 'Allan', Helvetica, Arial, sans-serif;
   font-size: 70px;
   line-height: 75px;
}

p {
   font-family: 'Cardo', Georgia, Times, serif;
   font-size: 18px;
   line-height: 25px;
}

Enllaços externs