Zobacz oryginalny Foundation

Co to jest foundation i dlaczego?

Wrzesień 29, 2012 przez

Framework – może niezbyt uporządkowany, ale zawsze (foto: jphilipg)

Foundation to jest tzw „framework”. Jak twierdzi wikipedia:

W programowaniu komputerowym framework albo platforma programistyczna jest szkieletem do budowy aplikacji.

Z kolei google translator uważa, że framework to „ramy”. Wszystko się zgadza, ponieważ framework jest właśnie szkieletem, ramą którą możemy sobie zabudować, zalepić jak chcemy.

Szkieletów css już trochę powstało, że wspomnę 960 grid system lub blueprint. Jednak powiem szczerze: nic ale to kompletnie nic z tego nie rozumiałem. Na moją tępotę nie było rady, aż pojawił się foundation – normalny intuicyjny system tworzenia szkieletu strony / aplikacji internetowej (jak już wspominam o tych najfajniejszych framworkach, to jest jeszcze twitterowy bootstrap, ale nim się w tej chwili nie zajmuję.)

Dzięki foundation można:

  1. Szybko stworzyć prototyp układu strony zgodny z html5 dzięki zastosowaniu frameworku, który łączymy np z placehold.it
  2. Stworzyć jeden wspólny układ do wyświetlania na ekranach komputerów i urządzeń przenośnych.

Szczerze mówiąc foundation kojarzy mi się trochę ze starymi czasami, kiedy wszyscy maniakalnie tworzyli html oparty na tabelach (w tym i ja), była to główna broń w walce o tzw „cross browsing”, czyli prawidłowe wyświetlanie strony na różnych przeglądarkach. Dzisiaj jest już trochę łatwiej, ponieważ mimo różnych przegladarek internetowych, większość z nich dobrze radzi sobie z prawidłowo napisanym kodem html i css. Właściwie to tylko jedna przegladarka sobie nie radzi…. nIE powiem która, żeby wstydu oszczędzić.

A zatem dzięki użyciu foundation możemy szybko stworzyć stronę zgodną ze standardami html5 i przyjazną dla urządzeń przenośnych

Jak to wygląda w  akcji? Bardzo prosto.

Do dyspozycji mamy podstawowe elementy frameworku:

  • Styl globalny – ujednolicenie stylu css na podstawie resetu Erica Meyera.
  • Siatka (grid) – czyli elementy div, będące rzędami i kolumnami –  oparte na systemie 12 kolumnowym
  • Przyciski (buttons) – zdefiniowane przyciski do zastosowania na stronie – wersje duże małe, zaokrąglone i proste, w kilku kolorach – bardzo łatwo się je rozbudowuje własnym cssem
  • Formularze (forms) – bardzo ładnie ostylowane i uporządkowane, do tego przyciski radio, rozwijane listy itp
  • Orbit – czyli tzw „rotator” innymi słowy slider obrazków i treści oparty na jquery.
  • Reveal – przydatny skrypt z wyskakującym okienkiem oparty na jquery.
  • Ikony – to jest absolutnie odjechane. Zestaw ikon, które podłączamy jako zewnętrzny font! To trzeba zobaczyć w akcji (zastosowałem je na designspinka.pl oraz mniamspinka.pl).
  • Zakładki – Tabs – pod którymi możemy ukrywać treść, którą po kolei odkrywamy
  • Rozmaite przydatne elementy takie jak: Alert Box – czyli odznaczający się blok, w którym możemy umieścić informację, ostrzeżenie, wiadomość o błędzie itp; tooltipsy – czyli tekst,  oparty na jquery, pojawiający się nad, pod czy obok elementu; sformatowane tabelki, panele, labelki, paski postępu i różne inne rzeczy – radzę zerknąć na pełną dokumentację, bo jest o czym czytać.
Reasumując, foundation bardzo pomaga poukładać sobie koncepcję strony internetowej, od podstaw począwszy na produkcie finalnym skończywszy.

 

Zamieść Komentarz

Twój email nie zostanie nigdy opublikowany. Pola wymagane są oznaczone *

Możesz użyć następujących atrybutów oraz tagów HTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>