Chaturbate Bio Design

Optimizat pentru Editor

• Editorul foloseste filtre care au functia de a identifica si de a citi continutul markup. Pentru o buna functionare si eficienta in editare, tot designul este incorporat intr-un singur tag HTML.
  Recomandat este tagul HTML <ul> pentru ca in mod nativ poate include alte taguri HTML ca <p>, <i>, <a href, <span>, <b>, <br>, <font>, <h1>...<h6>, <img src= s.a.m.d
• Pentru un design cat mai "responsive" folosim valori exprimate in % pentru elementele de tip block (imaginile inclusiv) si formula font-size: calc(13px + 3 * ((100vw - 320px) / 680)); de tip calc pentru dimensiunea fonturilor.
  O alta varianta pentru dimensiune fonturi este vw viewport = dimensiunea ferestrei browserului. Daca ecranul are o latime de 50cm, 1vw = 0,5cm
• Pozitionare. In tagul principal <ul> il putem numi si element parinte, trebuie sa existe atributul pentru margin
  Pentru o posiztionare buna recomandam margin:120px auto 50px -146px ca proprietate pentru margin in <ul>
  Exemplu:
  

  <ul style="display:block;width;100%;height:auto;margin:120px auto 50px -146px">

• Nu recomandam CSS minified . Se foloseste background-color:... pentru culoare de fundal si background-image:url(); pentru imagine de fundal

De Evitat

• Editorul citeste fiecare element HTML din cod si identifica ce functii sa ii afiseze pentru editare. De exemplu face diferenta dintr-un element text, un link sau o imagine, motiv pentru care target="_blank" folosit DOAR la link-uri (URL-uri) nu trebuie sa existe in alte elemente HTML

---

Elemente HTML si Atribute CSS

Cele mai folosite taguri si atribute:

display:block; - poate fi folosit cu orice tag HTML
width:100%;min-width:10%; - latimea este exprimata in % si nu in pixeli
height:auto; - inaltime e de obicei setata cu auto
box-sizing:border-box; - demo foarte util aici
list-style:none; - ascunde orice element bullet
line-height:normal - Chaturbate e un pic cretin la interpretarea space si font kernel si transforma spatiul gol ca br in paragraf iar spatiul dintre paragrafe sau alte elemente block este mult mai anapoda, motiv pentru care atributl css line-height definit in sintaxa CSS e binevenit
float:... - "obliga" tagul HTML sa fie pozitionat intr-o anumita parte dreapta sau stanga
clear:... - elimina pozitia float

float:none;clear:left

Cateva Exemple de Layout-uri

• Demo 1
• Demo 2
• Demo 3
• Demo 4
• Demo 5
• Demo 6

---

Inapoi la documentatia Learn 2 Code