7.2.1. Kreiranje tema zasnovanih na Bootstrap-u. Podešavamo PhpStorm, LESS Compiler za rad sa našom temom.

27/05/2025, by Ivan

bootstrap

U prethodnim lekcijama već smo gledali kako se pravi tema zasnovana na nekoj drugoj Stable temi. U ovom tutorijalu pokazaćemo vam kako da napravite temu zasnovanu na Bootstrap-u, popularnom okviru za brzo pravljenje rasporeda stranica.

Mislim da već imate instaliran Drupal. Pređimo na instalaciju Bootstrap-a:

https://www.drupal.org/project/bootstrap

Za razliku od 7. Drupala, u 8. verziji sve teme sajta se stavljaju u /themes folder u korenu sajta:

Bootstrap

Da biste napravili sopstvenu temu zasnovanu na Bootstrap-u, potrebno je da napravite podtemu. Folder za podtemu mora biti preuzet direktno iz teme roditelja:

/themes/bootstrap/starterkits/less

less

Kopirajte less folder u /themes folder, pored roditeljske bootstrap teme i preimenujte ga u ime vaše teme, ja ću imati drupalbook. Takođe preimenujte fajlove THEMENAME.libraries.yml, THEMENAME.starterkit.yml, THEMENAME.theme tako da umesto THEMENAME stoji ime vaše teme, na primer drupalbook.libraries.yml. Samo THEMENAME.starterkit.yml preimenujte u ime teme.yml: drupalbook.info.yml.

drupalbook

Sada idemo u drupalbook.info.yml fajl i u sekciji libraries takođe preimenujemo THEMENAME:

libraries:
  - 'drupalbook/global-styling'
  - 'drupalbook/bootstrap-scripts'

Poželjno je i da se preimenuje i ime teme:

name: 'Bootstrap Drupalbook Pod-tema (LESS)'

Preimenujte i fajlove sa podešavanjima teme:

/config/install/drupalbook.settings.yml
/config/schema/drupalbook.schema.yml

config

Sada ostaje da kopiramo bootstrap kod framework-a:

http://getbootstrap.com/getting-started/#download

Zainteresovani smo za Source code verziju bootstrap-a, koja se sastoji od LESS fajlova koji nisu još kompajlirani:

https://getbootstrap.com/docs/4.3/getting-started/download/

source

Napravite bootstrap folder u našoj podtemi i tamo kopirajte bootstrap fajlove.

bootstrap

Kopiramo baš Source kod, a ne verziju Bootstrap-a sa kompajliranim CSS fajlovima. Ovo je neophodno da bismo mogli da preklopimo bootstrap varijable u našoj Drupal temi u zasebnim fajlovima:

/less/overrides.less
/less/variable-overrides.less

ovverides

Možemo takođe koristiti SASS verziju bootstrap-a, ali tada nam je potreban SASS Compiler, mi koristimo LESS CSS Compiler jer je ugrađen u PhpStorm.

Sada možemo otići na stranicu za izgled i omogućiti našu temu

/admin/appearance

Odmah nećemo imati bootstrap stilove koji nam trebaju, oni se još uvek moraju kompajlirati. Za to ćemo koristiti PhpStorm dodatak LESS Compiler. Idemo u podešavanja PhpStorm-a File -> Settings.

php storm

Tražimo u podešavanjima dodatke (plugins)
Idemo na Plugins stranicu
Pretražujemo dodatke po reči LESS
Pronalazimo LESS CSS Compiler Plugin
Instaliramo ga preko Install JetBrains plugin …

Ako ne možete da pronađete dodatak, skinite ga sa zvanične stranice:

https://plugins.jetbrains.com/plugin/7059-less-css-compiler

I instalirajte dodatak preko Install plugin from disk ...

Sada kada smo instalirali dodatak, potrebno je da ga podesimo. Ulazimo u podešavanja PhpStorm-a i tražimo po reči LESS:

less profiles

Kliknite na plus da dodate LESS profil. Nazovite profil nekako, na primer Bootstrap, za svaki PhpStorm projekat treba napraviti poseban profil.

less profiles

U podešavanjima profila navedite:

LESS source directory - C:\OpenServer\domains\drupal8\themes\drupalbook\less

Ovo je putanja do less foldera naše teme, ne do less foldera samog bootstrap-a, već naše teme, jer iz našeg style.less fajla učitavamo bootstrap fajlove.

Include files by path - C:\OpenServer\domains\drupal8\themes\drupalbook\less\style.less

Povezujemo samo style.less fajl, ovo je ulazna tačka za kompajliranje svih naših less fajlova, zapravo kompajliramo samo jedan style.less fajl, ostali su uključeni u njega i kompajliraju se automatski.

CSS output directory - C:\OpenServer\domains\drupal8\themes\drupalbook\css

Pošto uključujemo samo jedan style.less fajl, kompajliraće se samo jedan style.css fajl. Što je prilično zgodno, ne moramo da se mučimo sa povezivanjem gomile fajlova, ali sa druge strane uvek kompajliramo ceo bootstrap u potpunosti, čak i kad treba da promenimo samo jednu liniju CSS u našoj temi.

Compile automatically on save - zgodna funkcija, ponovo kompajlira CSS kada pritisnemo Ctrl + S ili sačuvamo fajlove. Preporučujem da ostavite uključenu.

Sada možete pritisnuti Ctrl + S i to će početi kompajliranje LESS fajlova. Takođe možete ručno pozvati kompajliranje klikom na style.less fajl i izborom Compile to CSS:

compile