Yajs - start z Foundation

Foundation to jeden z najpopularniejszych webapp bootstrap`ów. Zgrabne połączenie HTML, CSS i JavaScript, którego możliwości postanowiłem zaprezentować w praktyce na mojej nowej aplikacji.

Yajs - prosty edytor JavaScript, od teraz aż do znudzenia staje się on moim poligonem doświadczalnym. Aktualnie nic nie potrafi z tego co powinien... poza wyglądaniem i to właśnie dzięki wspomnianemu bootstrapowi. Nie jest to szokujący layout, ale został stworzony bez większego wysiłku z mojej strony.

Projektowanie wyglądu w Foundation wymaga niewiele ponad znajomość HTML i CSS, a polega głównie na zachowaniu odpowiedniej struktury tagów, oraz dodaniu pożądanych klas. Tak więc ładne elementy textarea i button uzyskałem poprzez dodanie do elementu form klasy nice:

<form class="nice">
    <h2>Kod</h2>
    <textarea></textarea>
    <button class="nice radius small blue button">Uruchom</button>
</form>

Prawa strona edytora, prezentująca rezultat kodu to wynik dodania do elementu div klasy panel:

<h2>Rezultat</h2>
<div class="panel"></div>

Siatka elementów jest oparta na 12 kolumnach i wykorzystuje się ją także przez atrybut class:

<div class="row">
    <div
        class="six columns"
        id="code">
    </div>
    <div
        class="six columns"
        id="result">
    </div>
</div>

Jest to tylko kilka możliwości Foundation dlatego zachęcam do przejrzenia dokumentacji, gdzie dowiemy się o kilkunastu elementach layout`u, wersji mobilnej, wsparciu starszych przeglądarek, wykorzystaniu jQuery, czy plikach startowych dla robots.txt i  humans.txt.