HAML - geras ERB pakaitalas

Posted by Fiodor Vereščiaka Tue, 01 May 2007 19:18:00 GMT

HAML (XHTML Abstraction Markup Language ) - tai dar viena šablonų sistemą. Pagrindinis HAML principas - kodas turi būti gražus ir lengvai skaitomas. Išmokti HAML labai paprasta, jums tai užtruks maždaug 20 minučių.

Kodo pavyzdžiai: 

# Rhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html
  <head>
    <title>Užkandinės meniu</title>

  </head>
  <body>
    <p>
      <b>Pagrindiniai patiekalai:</b>
    </p>

    <table id="menu">
      <tr>
        <td>Pica</td>
        <td>Koldūnai</td>

        <td>Dešrelės</td>
     </tr>
    </table>
  </body>
</html>

Perdarant tai į HAML teks dažnai pasinaudoti 'Delete' klavišu. 

!!!
%html
  %head
    %title Užkandinės meniu
  %body
    %p
      %b Pagrindiniai patiekalai:
    %table#menu
      %tr
        %td Pica
        %td Koldūnai
        %td Dešrelės

Kodas akivaizdžiai paprastesnis ir gražesnis. Nereikia rašyti uždarančių tagų. Kada tagas turi užsidaryti sprendžiama pagal indentacija. Indentacija turi būti 2 tarpai. Papildoma dokumentacija:

SASS (Syntactically Awesome StyleSheets) - meta-kalba kuri supaprastina CSS stilių "gamybą". Stilių sintaksė tampa aiškesnė, atsiranda naujų galimybių.

Pavyzdžiui: 

.funky
  :font
  :family fantasy
  :size 30em
  :weight bold
  p
    :font-size 2em

sugeneruos toki css failiuką: 

.funky {
font-family: fantasy;
font-size: 30em;
font-weight: bold; }

.funky p {
font-size: 2em }

.css failas generuojamas tik vieną kartą, todėl dėl jo stabdžių neatsiras. Taip pat galima naudoti ir konstantas. Daugiau informacijos oficialioje dokumentacijoje.

Sintaksės spalvinimas skirtingoms IDE HAML Syntax Highlighting

Jei turite minčių kaip galima patobulinti HAML arba suradote klaidą, užeikite į http://groups.google.com/group/haml?hl=en

Ten aptarinėjamos paskutinės naujovės, klaidos. Galima užduoti klausimą ir pačiam autoriui.

Tags , , , , , ,  | no comments | no trackbacks

Prilipęs Footer'is

Posted by Mindaugas Kurlavičius Tue, 24 Apr 2007 19:14:00 GMT

Kas susidūrė su CSS, žino kokia velniava yra padaryti puslapį be šlykščių ir niekaip nenusibaigiančių lentelių "table", vienodai atrodantį (ir identiškai besielgiantį) visose naršyklėse. IE košmarai, Firefox bug'ai, dar prakeiktas Safari (Opera dzin :)... Žodžiu vieno standarto nėra, kiekvienai mažai užduotėlei realizuoti nusistovėjo purvini "hakai" ir visi (naršyklių kūrėjai bei web programuotojai) toliau gyvena laimingi ir patenkinti.

Taigi šiandien papasakosiu, kaip išpręsti prilipusio footer'io problemą ištęstuotą ant IE ir Firefox.

Pačią problemą galima būtų taip apibūdinti: puslapyje yra footer'is - fiksuoto aukščio apatinis (paskutinis matomas) blokas (juosta). Kaip žinome, visi blokai (ne float) išsidėsto vienas po kito ir jeigu turinio yra daug tuose blokose, footeris nustumiamas į apačią, kuri yra "žemiau" naršyklės lango apačios ir "paskrolinus" puslapį žemyn matome prie apačios prilipusį footerį. Tačiau, ką daryti, jei puslapis neturi daug turinio, bet mes vistiek norime, kad footeris butų naršyklės lango apačioje?

Geras mano draugas vardu Google patarė štai ką:

# Layout'o šablonas
<html>
  <body>

    <div id="nonFooter">
      # Čia talpinam visą puslapio turinį
    </div>

    <div id="footer">
      # Footerio turinys
    </div>

  </body>
</html>

Ir į CSS failą įterpiam tokį kodą: 

# CSS failiukas

html {
  height: 100%;
}

body {
  height: 100%;
}

#nonFooter {
  position: relative;
  min-height: 100%;
}

* html #nonFooter {
  height: 100%;
}

#footer {
  position: relative;
  /* Nurodome margin tokio paties aukščio kaip ir footeris */
  margin-top: 50px;
}

Neįprasta, keista, bet viskas veikia, užsakovas švyti, o mes pasikeikiam ir dirbam toliau...

Tags , ,  | no comments | no trackbacks