Initializr je izvrstan alat za brzo startanje web projekata, baziran je na HTML Boilerplate-u od Paula Irisha i Divye Maniana, a ubrzava izradu utoliko da samo označimo koje nam komponente trebaju i kliknemo na download. Autor je Jonathan Verrecchia.

Detalje o cijelom procesu izrade predloška i korištenim tehnologijama napisao sam niže.

HTML5 Boilerplate

HTML5 Boilerplate je snažan i pouzdan predložak kreiran od strane Paula Irisha, Google-a i Divye Maniana. Predložak se sastoji od iskustveno dobro poznatih html, css i javascript osnova, a sve u svrhu kako bi web stranica bila što brža i što konzistentnija u svim preglednicima. Također uključuje i ove skripte: Modernizr, jQuery i CSS reset2 od Erica Meyera.

Boilerplate također objedinjava i puno više komponenti koje većini korinika i nisu toliko potrebne na svakom projektu. Profiling javascript u starijim preglednicima kao što je internet explorer 6, 7, koji takve mogućnosti nemaju po difoltu, Google analitics, cross domain xml config file za flash, config za IIS, nginx, apache i appengine … itd, itd.. Uglavnom, pri novom projektu se briše višak stvari koji nam ne treba, što može trajati dosta vremena i tu u pomoć uskače Initializr!

Initializr – lagani i kostimizirani Boilerplate

Ideja je da se pojednostavi Boilerplate i da svatko sa par klikova može točno izabrati što i kako želi u svom projektu. Kod koji Initializr generira je baziran na originalnom Boilerplate-u. Pojedine opcije i detalji svakog bloka su opisani niže!

HTML / CSS

Originalni Boilerplate generira praznu stranicu (index.html) dok Initializr generira osnovi layout koji služi kao polazišna točka za izradu layout-a. Primjerna stranica generira osnovne blokove kao što su: header, footer, navigation bar, jedan blok sa strane / aside, i primjer strukture blog stranice.

Javascript

Boilerplate po difoltu sadrži odličan jQuery framework. Može se izabrati da ga preuzmete kao kompresiranog, nekompresiranog ili ga možete potpuno izbaciti. Svakako preporučujemo da ga izaberete kompresiranog.

Kompatibilnost

HTML Shiv:

Moderni preglednici kompletno podržavaju nove HTML5 tagove, ali stariji internet explorer preglednici < ver. 8 trebaju malu pomoć da bi ih mogli ‘shvatiti’. Ovaj mali komadić javascript koda se zove HTML5shiv. Snippet se koristi funkcijom createElement().

Modernizr:

Modernizr je skripta koja se koristi kao senzor. U sebi objedinjava HTMLshiv i senzor za detekciju oblika preglednika. Otvaranjem stranice dodaje klase u početni html tag, npr. na ovaj način:

< html lang="en" class="flexbox canvas canvastext no-webgl">
...
< /html>

To kasnije možemo koristiti da definiramo pojedine stilove za određeni preglednik na ispravan i css validan način.

Konfiguracija servera

Initilizr daje mogućnost da se uključi i serverska konfiguracija za pojedini server. Ako koristite apache, nginx ili IIS imate mogućnost da odmah skinete i optimiziranu verziju config datoteke za te servere. Bitno je istaknuti da će skripta automatski maknuti i www iz adrese domene. Ako Vam to ne odgovara maknite sljedeće iz .htaccess-a:

< IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTPS} !=on
  RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
  RewriteRule ^(.*)$ http://%1/$1 [R=301,L]
< /IfModule>

I na kraju klik na gumbić za preuzimanje

Kad ste izabrali koje komponente želite u svom predlošku, samo kliknite veliki gumb Download i to je to!

Ovo je izgled mojeg foldera nakon download-a arhive sa Initializr-a.

TODO.txt ‐ Što dalje ?

U arhivi se nalazi i TODO.txt datoteka koja Vas usmjerava koje korake trebate dalje poduzeti kako bi Vaš projekt uzletio. Ne zaboraviti promijeniti jezik na kojem je stranica iz “en” u recimo “hr”, kreirati 404 stranicu …

	.___       .__  __  .__       .__  .__
	|   | ____ |__|/  |_|__|____  |  | |__|______________
	|   |/    \|  \   __\  \__  \ |  | |  \___   /\_  __ \
	|   |   |  \  ||  | |  |/ __ \|  |_|  |/    /  |  | \/
	|___|___|  /__||__| |__(____  /____/__/_____ \ |__|
	         \/                 \/              \/

Za one koji idu dalje

Verzija Boilerplate-a koju Initializr nudi je ‘lakša’ od originalne verzije. Ako želite proširiti svoje znanje ili saznati više detalja o pojedinim file-ovima toplo savjetujemo da pogledate jaaaako kvalitetan video od Paula Irisha o samom Boilerplate-u.

Službene stranice HTML5BoilerPlate-a i Initializr-a