Framework je standardizovani skup koncepata, kriterijuma i praktičnih pravila za rešavanje uopštenog tipa problema, koji se može koristiti za lakši pristup i rešavanje problema slične prirode.
Kada je u pitanju web dizajn, framework se može definisati kao paket koji se sastoji od strukture fajlova i foldera standardizovanog koda (npr. HTML, CSS, JavaScript dokumenti itd.) koji mogu biti korišćeni kao polazna osnova u razvoju web sajtova.
Smisao framework-a je da pruži uopštenu strukturu za sajt da developeri ne bi morali raditi sve od početka i da mogu iskoristiti postojeći kod, što doprinosi velikoj uštedi vremena.
U osnovi postoje dve vrste framework-a za razvoj web sajtova:
- Front-end Framework (CSS framework okruženja – Bootstrap, Foundation, Grid, Less…)
- Back-end Framework (Symphony, Ruby On Rails, Spring, Django…)
CSS framework se obično sastoji od paketa fajlova i foldera (HTML, CSS, JavaScript) standardizovanog koda.
Kako odabrati pravi framework?
Odabir pravog framework-a zavisi od konkretnog projekta i zahteva sajta. Kriterijumi za odabir framework-a su:
– brzina instalacije
– lakoća korišćenja
– broj opcija koje nude
– mogućnost integracije sa drugim sistemima
– podrška
Kako integrisati responsive CSS framework u WordPress?
Ukoliko želite da samostalno razvijate novu WordPress temu uz pomoć CSS framework-a potrebno je da se on integriše u postojeću strukturu teme. Objasnićemo kompletan postupak uz upotrebu Foundation framework-a, a na sličan način možete pozvati Bootstrap ili neki drugi framework sa razlikom u nazivima fajlova i strukturi foldera.
Ceo proces se sastoji iz tri koraka:
- preuzimanje i integracija frameworka
- dodavanje uslova za Internet explorer
- rad sa framework-om
Najpre je potrebno preuzeti Foundation framework sa oficijalnog web sajta i dodati preuzete CSS i JS fajlove u direktorijum teme. Sledeći korak je pozivanje pomenutih fajlova u functions.php fajlu.
Najlakši način za poziv Foundation CSS i JavaScript fajlova u temi je upotrebom wp_enqueue_script i wp_enqueue_style funkcija.
Kod za poziv CSS fajla
[php]
function responsive_style ()
{
//registrovanje stilova za vašu temu
wp_register_style( ‘foundation-style’, get_template_directory_uri() . ‘/css/foundation.css’, array(), ‘all’ );
wp_register_style( ‘foundation-appstyle’, get_template_directory_uri() . ‘/css/app.css’, array(), ‘all’);
wp_enqueue_style( ‘foundation-style’ );
wp_enqueue_style( ‘foundation-appstyle’ );
}
add_action( ‘wp_enqueue_scripts’, ‘responsive_style’ );
[/php]
Kod za pozivanje JavaScript fajla
[php]
function responsive_script ()
{
//registrovanje skripti za vašu temu
wp_register_script(‘foundation-mod’, get_template_directory_uri() . ‘/js/modernizr.foundation.js’, array( ‘jquery’ ), true );
wp_register_script(‘foundation-main’, get_template_directory_uri() . ‘/js/foundation.js’, true );
wp_register_script(‘foundation-app’, get_template_directory_uri() . ‘/js/app.js’, true );
wp_enqueue_script( ‘foundation-mod’ );
wp_enqueue_script( ‘foundation-main’ );
wp_enqueue_script( ‘foundation-app’ );
}
add_action( ‘wp_enqueue_scripts’, ‘responsive_script’, 5 );
[/php]
Napomena: struktura i nazivi fajlova zavise od verzije framework-a, pa ukoliko imate drugačiju strukturu i nazive samo zamenite parametre sa odgovarajućim.
Sačuvajte i postavite novi functions.php u direktorijum teme, a zatim uradite proveru u kodu stranice da bi videli da li su svi stilovi i skripte paravilno pozvani (koristite kombinaciju tastera CTRL+U u browser-u za proveru izvornog koda stranice).
Dodavanje uslova za IE
Da bi se Foundation stilovi pravilno prikazali u Internet Exploreru u header.php fajl teme dodajte sledeće uslove:
[html]
<!–[if lt IE 9]>
<link rel=“stylesheet“ href=“/css/ie.css“>
<![endif]–>
<!–IE rešenje za HTML5 tagove–>
<!–[if lt IE 9]>
<script src=“http://html5shiv.googlecode.com/svn/trunk/html5.js“></script>
<![endif]–>
[/html]
Rad sa Foundation framework-om
Sada kada je Foundation pozvan u temi možete da radite na dizajnu upotrebom standardnog grid sistema. Kao i druga responsive okruženja, Foundation se sastoji od 12 kolona sa predefinisanim setovima različitih elemenata za web stranice, poput dugmića, tabova, tabela i još mnogo toga. Za detaljnija upustva za rad sa ovim framework-om pogledajte Foundation dokumentaciju.
Gotova rešenja
Ukoliko želite da preskočite ovaj korak, možete započeti za temama koje već u sebi imaju ugrađen CSS responsive framework. Evo nekih odličnih tema koje u sebi sadrže Foundation i Bootstrap.
Cherry Framework
Foundation for WordPress
Reverie
WP Bootstrap
Zaključak
Kombinacija front-end responsive framework-a sa WordPress-om je dobro rešenje kada želite da izgradite temu unikatnog dizajna on nule. Kao što ste videli na primeru Foundation framework-a sama integracija na WordPress nije komplikovana i sličan postupak važi i za ostala okruženja (Bootstrap, Grid..).
Responsive dizajn je trend koji je sve više popularan i ukoliko ga implementirate na svom budućem sajtu to može biti ključno za uspeh.
Takođe pogledajte i 12 najboljih framework-a WordPress teme.
