Tworzenie współczesnych szablonów HTML/CSS za pomocą frameworka Foundation

14 March 2012 Comments

Foundation to framework CSS znacząco ułatwiający tworzenie szablonów stron internetowych. W skład frameworka wchodzi grid (siatka) zapewniająca układ, strukturę strony, a także predefiniowane style dla przycisków, formularzy, powiadomień, czy tooltipów. Ważną zaletą jest też skalowalność szablonów między urządzeniami. Foundation wpisuje się w "responsive design" - nasz szablon (oparty o grida) będzie się dostosowywał wymiarami i wyglądem do rozdzielczości ekranu - wliczając w to smartphony i tablety. Zobacz co stanie się gdy zaczniesz zmniejszać rozmiar okna przeglądarki z otwartą stroną frameworka - layout płynnie skaluje się. Dzięki Foundation otrzymujemy także "gratisową" optymalizację strony pod urządzenia mobile. Także moja strona - ta na której teraz jesteś - używa tego frameworka (i też się płynnie skaluje). Nie trzeba stosować dodatkowo żadnych media queries.

Framework Foundation można pobrać ze strony projektu. W paczce znajdziemy przykładowy szablon (index.html). Warto sprawdzić też dokumentację. Podstawowy szkielet wygląda np. tak:

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
	<meta charset="utf-8" />

	<!-- Set the viewport width to device width for mobile -->
	<meta name="viewport" content="width=device-width" />

	<title>Tytuł strony</title>
  
	<!-- Included CSS Files -->
	<link rel="stylesheet" href="stylesheets/foundation.css">
	<link rel="stylesheet" href="stylesheets/app.css">

	<!--[if lt IE 9]>
		<link rel="stylesheet" href="stylesheets/ie.css">
	<![endif]-->

	<!-- IE Fix for HTML5 Tags -->
	<!--[if lt IE 9]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

</head>
<body>

	TUTAJ KOD STRONY

	<!-- Included JS Files -->
	<script src="javascripts/jquery.min.js"></script>
	<script src="javascripts/modernizr.foundation.js"></script>
	<script src="javascripts/foundation.js"></script>
	<script src="javascripts/app.js"></script>

</body>
</html>

Wewnątrz BODY możemy umieścić nasz projekt strony, szablonu wykorzystując "grida". Grid, czy po prostu siatka pozwala na tworzenie szkieletu strony - układu, rozmieszczenia poszczególnych elementów na stronie. Coś jak tabela, tyle że znacznie lepsze.

Cały grid umieszczamy w kontenerze:

<div class="container">
TUTAJ BĘDZIE GRID
</div>

Grid składa się z wierszy. Np. pierwszy wiersz to może być nagłówek strony na całą jej szerokość. Drugi może być wiersz na nawigację, a trzeci np. na dwie kolumny - na treść i prawe menu na różne linki i inną zawartość. Wiersz określamy tak:

<div class="row">
TUTAJ BĘDĄ KOLUMNY
</div>

Wiersz składa się z dwunastu kolumn, gdzie te 12 kolumn oznacza całą szerokość kontenera (~strony). Z kolumn budujemy "komórki" podając ile kolumn ma tworzyć daną komórkę. Np. jeżeli chcemy nagłówek strony to tworzymy tylko jedną komórkę o maksymalnym rozmiarze 12 kolumn. Może być też ich wiele np. 2, 8, 2 (suma 12), czy 4 i 8. Oto kompletny przykład:

<div class="container">
		<div class="row">
			<div class="twelve columns">
				<h1>Nagłówek na całą szerokość</h1>
			</div>
		</div>
		<div class="row">
			<div class="six columns">
				<p>Podział na dwie równe komórki po 6 kolumn</p>
			</div>
			<div class="six columns">
				<p>Podział na dwie równe komórki po 6 kolumn</p>
			</div>
		</div>
		<div class="row">
			<div class="two columns">
				<p>Mała komórka</p>
			</div>
			<div class="eight columns">
				<p>Duża komórka</p>
			</div>
			<div class="two columns">
				<p>Mała komórka</p>
			</div>
		</div>
	</div>

Własne style zapisujemy w pliku CSS, który dołączamy po plikach CSS frameworka. Style staraj się nakładać na zawartość komórek, a nie na same komórki bo może to skończyć się rozsypaniem się grida (margin, padding, border itp. może łatwo to rozwalić - nie styluj tym komórek). Stworzony powyżej grid jest "responsywny" - będzie się skalował w zależności od rozdzielczości, tak jak ma to miejsce na stronie frameworka.

Foundation daje także inne predefiniowane style dla często używanych elementów. Dla przykładu przyciski (buttony) mogą mieć różne rozmiary i kolor, jak i używać zaokrąglonych krawędzi. Oto przykładowy button:

<a href="#" class="large nice radius blue button">Czytaj więcej...</a>

Przydatne mogą być także klasy CSS pozwalające pokazać coś lub ukryć w zależności od typu urządzenia (rozdzielczości):

<strong class="show-on-desktops">Pokaże na PCtach</strong>
<strong class="show-on-tablets">Pokaże na tabletach</strong>
<strong class="show-on-phones">Pokaże na smartphonach</strong>

Dostępne są też "ukrywacze": hide-on-desktops, hide-on-tablets i hide-on-phones. Za pomocą tych klas możemy dopasować wygląd strony pod różne urządzenia, np. usuwając duże logo, czy elementy flashowe na smartphonach i tabletach.

W dokumentacji opisano jeszcze wiele pozostałych elementów frameworka, np.: zakładki, okienka powiadomień, formularze itp. Jest tego sporo.

Frameworki takie jak ten mają za zadanie ułatwić i uporządkować tworzenie szablonów HTML/CSS. Na dzień dobry dostajemy gotowe podstawy jak np. siatka. Po drugie łatwo zrozumieć już istniejące szablony wykonane za pomocą takiego frameworka (bo różnych twórców obejmują te same zasady). Warto więc przerzucić się na takie "pomoce twórcze" :)

RkBlog

Strony mobilne, 14 March 2012